PDA

View Full Version : [OPEN] [4.0.7] Chart. Line series. Problems of visualization



Radius-Service
25 Oct 2011, 2:40 AM
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:



Ext.create('Ext.chart.Chart', {
id : 'vProductInfo.tab_5.chart',
store : 'vProductInfo.tab_5.chart.ds',
animate : true,
shadow : 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',
radius: 1
},
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',
radius: 1
},
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.StoreMgr.lookup('vProductInfo.tab_5.chart.ds').loadData(t_data);
Ext.getCmp('vProductInfo.tab_5.chart').show();




HELPFUL INFORMATION


Screenshot or Video:

28863



Operating System:

WinXP Pro

evant
25 Oct 2011, 4:50 AM
The data is missing from your test case, please post something that we can run locally.

Radius-Service
25 Oct 2011, 7:01 PM
<!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>