[4.0.7] Chart. Line series. Problems of visualization

You found a bug! We've classified it as CHARTS-224 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
1. [4.0.7] Chart. Line series. Problems of visualization

REQUIRED INFORMATION

Ext version tested:
• Ext 4.0 rev 7

Browser versions tested against:
• All

Description:
• Incorrectly drawn a line graph.
Other types - correctly. Calculate values of points - correct.

The result that was expected:
• Displaying graphics in version 4.0.2a

Test Case:

Code:
```Ext.create('Ext.chart.Chart', {
id		: 'vProductInfo.tab_5.chart',
store	: 'vProductInfo.tab_5.chart.ds',
animate	: true,
legend	: false,//{position: 'bottom'},
flex	: 0.5,

axes: [
{
title	: 'Момент, M (кгс·м)',
type	: 'Numeric',
position: 'bottom',
fields	: ['M'],
minimum	: 0
},
{
title	: 'Скорость, n (об/мин)',
type	: 'Numeric',
position: 'left',
fields	: ['N'],
grid	: true,
minimum	: 0
},
{
title	: 'Давление, P (кгс/см²)',
type	: 'Numeric',
position: 'right',
fields	: ['P'],
grid	: false,
minimum	: 0
}
],

series: [
{
type		: 'line',
xField		: 'M',
yField		: 'N',
axis		: 'left',
smooth		: true,
highlight	: true,
showMarkers	: true,
tips: {
trackMouse	: true,
width		: 170,
height		: 80,
constrainPosition: true,
renderer: function(storeItem, item) {
this.setTitle(
'<div style="font-weight: bold; margin-bottom: 5px; text-decoration: underline;">Скорость</div>'+
'<table style="font-weight: normal;">'+
'<tr><td style="width: 70px;">Момент:</td><td>' + Ext.util.Format.number(storeItem.get('M'),'0.00') + ' (кгс·м)</td></tr>' +
'<tr><td>Скорость:</td><td>' + Ext.util.Format.number(storeItem.get('N'),'0.00') + ' (об/мин)</td></tr>' +
'<tr><td>Давление:</td><td>'+ Ext.util.Format.number(storeItem.get('P'),'0.00') + ' (кгс/см²)</td></tr>' +
//'<tr><td>Расход:</td><td>'+ Ext.util.Format.number(storeItem.get('P'),'0.00') + ' (л/с)</td></tr>' +
'</table>'
);
}
},
markerConfig: {
type: 'circle',
},
style: {
//stroke			: '#38B8BF',
'stroke-width'	: 3,
opacity			: 0.9
}
},
{
type		: 'line',
xField		: 'M',
yField		: 'P',
axis		: 'right',
smooth		: true,
highlight	: true,
showMarkers	: true,
tips: {
trackMouse: true,
width: 170,
height: 80,
renderer: function(storeItem, item) {
this.setTitle(
'<div style="font-weight: bold; margin-bottom: 5px; text-decoration: underline;">Давление</div>'+
'<table style="font-weight: normal;">'+
'<tr><td style="width: 70px;">Момент:</td><td>' + Ext.util.Format.number(storeItem.get('M'),'0.00') + ' (кгс·м)</td></tr>' +
'<tr><td>Скорость:</td><td>' + Ext.util.Format.number(storeItem.get('N'),'0.00') + ' (об/мин)</td></tr>' +
'<tr><td>Давление:</td><td>'+ Ext.util.Format.number(storeItem.get('P'),'0.00') + ' (кгс/см²)</td></tr>' +
//'<tr><td>Расход:</td><td>'+ Ext.util.Format.number(storeItem.get('P'),'0.00') + ' (л/с)</td></tr>' +
'</table>'
);
}
},
markerConfig: {
type: 'circle',
},
style: {
//stroke			: '#38B8BF',
'stroke-width'	: 3,
opacity			: 0.9
}
}
]
});

if (Ext.getCmp('vProductInfo.tab_5.grid').getSelectionModel().getSelection().length == 1){
var ind = 0;
var t_data = [];
var c = 15;
var i = 0;

var t_mmin = Ext.getCmp('vProductInfo.tab_5.grid').getSelectionModel().getSelection()[ind].get('MINMOMENT');
var t_mmax = Ext.getCmp('vProductInfo.tab_5.grid').getSelectionModel().getSelection()[ind].get('MAXMOMENT');
var t_nma1 = Ext.getCmp('vProductInfo.tab_5.grid').getSelectionModel().getSelection()[ind].get('NMA1');
var t_nma2 = Ext.getCmp('vProductInfo.tab_5.grid').getSelectionModel().getSelection()[ind].get('NMA2');
var t_nma3 = Ext.getCmp('vProductInfo.tab_5.grid').getSelectionModel().getSelection()[ind].get('NMA3');
var t_pmp1 = Ext.getCmp('vProductInfo.tab_5.grid').getSelectionModel().getSelection()[ind].get('PMP1');
var t_pmp2 = Ext.getCmp('vProductInfo.tab_5.grid').getSelectionModel().getSelection()[ind].get('PMP2');
var t_pmp3 = Ext.getCmp('vProductInfo.tab_5.grid').getSelectionModel().getSelection()[ind].get('PMP3');

var delta = (t_mmax - t_mmin) / c;
var t_m = t_mmin;
for(i=0; i <= c; i++){
t_data.push({
'M':t_m,
'N':t_nma1+t_nma2*Math.pow(t_m,t_nma3),
'P':t_pmp1+t_pmp2*t_m+t_pmp3*Math.pow(t_m,2)
});
t_m += delta;
}

Ext.getCmp('vProductInfo.tab_5.chart').show();```

Screenshot or Video:

Operating System:
• WinXP Pro

2. The data is missing from your test case, please post something that we can run locally.

3. PHP Code:
```     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">    <html xmlns="http://www.w3.org/1999/xhtml">        <head>        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>    <!-- ExtJS -->        <link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css"/>        <script type="text/javascript" src="/extjs/ext-all-debug-w-comments.js"></script>        <script type="text/javascript" src="/extjs/locale/ext-lang-ru.js"></script>            </head>                <body onLoad="ch();">        <script>        function ch(){            Ext.define('model', {                extend: 'Ext.data.Model',                fields: [                    {name: 'M',        type: 'float',    useNull: true},                    {name: 'N',        type: 'float',    useNull: true},                    {name: 'P',        type: 'float',    useNull: true}                ]            });                                Ext.create('Ext.data.Store', {                storeId            : 'ds',                model            : 'model'            });            var t_data = [];            var c = 15;            var t_mmin = 1.71344591;            var t_mmax = 385.80478545;                                            var t_nma1 = 135.124551174039;            var t_nma2 = -0.000000066757939;            var t_nma3 = 3.410000000000;            var t_pmp1 = 20.879337728603;            var t_pmp2 = 0.172020575101;            var t_pmp3 = 0.000197610666;                                        var delta = (t_mmax - t_mmin) / c;            var t_m = t_mmin;            for(i=0; i <= c; i++){                t_data.push({                    'M':t_m,                    'N':t_nma1+t_nma2*Math.pow(t_m,t_nma3),                    'P':t_pmp1+t_pmp2*t_m+t_pmp3*Math.pow(t_m,2)                });                t_m += delta;            }                        Ext.StoreMgr.lookup('ds').loadData(t_data);                                    Ext.create('Ext.chart.Chart', {                id        : 'chart',                store    : 'ds',                animate    : true,                shadow    : true,                legend    : false,                    flex    : 0.5,                renderTo: 'divchart',                width    : 500,                height    : 300,                axes: [                    {                        title    : 'M',                        type    : 'Numeric',                        position: 'bottom',                        fields    : ['M'],                        minimum    : 0                                        },                                {                        title    : 'n',                        type    : 'Numeric',                        position: 'left',                        fields    : ['N'],                        grid    : true,                        minimum    : 0                    },                    {                        title    : 'P',                        type    : 'Numeric',                        position: 'right',                        fields    : ['P'],                        grid    : false,                        minimum    : 0                    }                ],                                series: [                    {                        type        : 'line',                        xField        : 'M',                        yField        : 'N',                        axis        : 'left',                        smooth        : true,                        highlight    : true,                        showMarkers    : true,                        markerConfig: {                            type: 'circle',                            radius: 1                        },                        style: {                            'stroke-width'    : 3,                            opacity            : 0.9                        }                    },                    {                        type        : 'line',                        xField        : 'M',                        yField        : 'P',                        axis        : 'right',                        smooth        : true,                        highlight    : true,                        showMarkers    : true,                        markerConfig: {                            type: 'circle',                            radius: 1                        },                        style: {                            'stroke-width'    : 3,                                                opacity            : 0.9                        }                    }                ]                        });        }        </script>                <div id="divchart" style="width: 500px; height: 300px;"></div>    </body>        </html>  ```