PDA

View Full Version : Chart Issue



boban
27 May 2014, 10:30 AM
Hi all,
I have an issue with line chart in my application. Occasionally, when I load the chart it shows only a part of it, as shown on first image.

49140

If I do it again, it usually loads completely, as show on second picture. This is happening more often when I have more data to plot.

49141


There are no errors in console, and data store loads completely which can be seen from the chartís time axis.
The code is below. Thank you in advance!

Loading / reloading of the chart:


var chart = Ext.ComponentQuery.query('#linechart')[0];
var store = chart.getStore();

store.load({
params: {sessid: record.get('session_id')},
callback : function(r, options, success) {
var chart = Ext.ComponentQuery.query('#linechart')[0];

try {
chart.axes.get(0).fromDate = new Date(store.getAt(0).get('Time'));
} catch(err){
}

try {
chart.axes.get(0).toDate = new Date(store.getAt(store.totalCount-1).get('Time'));
chart.axes.get(0).majorTickSteps = 10;
} catch(err){
}

try {
chart.redraw();
} catch(err){
}
var pnl = Ext.ComponentQuery.query('#tabOldSession')[0];
pnl.setLoading(false);
}

});


Definition of the chart:


xtype: 'chart',
autoShow: true,
border: false,
height: 200,
itemId: 'linechart',
animate: true,
background: {
fill: '#fff'
},
insetPadding: 5,
store: 'grpLiveData',
axes: [
{
type: 'Time',
groupBy: 'year,month,day,M,d',
aggregateOp: 'sum',
fields: [
'Time'
],
position: 'bottom',
step: [Ext.Date.SECOND, 20],
grid: true,
constrain: true,
dateFormat: 'H:i:s'
},
{
type: 'Numeric',
grid: {
odd: {
fill: '#f3f3f3',
stroke: '#ddd',
'stroke-width': 0.1
}
},
decimals: 0,
maximum: 180,
minimum: 0,
position: 'left'
}
],
series: [
{
type: 'line',
xField: 'Time',
yField: 'Data1',
showMarkers: false,
selectionTolerance: 2,
smooth: 2,
style: {
color: '#ff0000',
stroke: '#ff0000',
fill: '#ff0000',
'stroke-width': 2
},
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle('('+Ext.util.Format.substr(storeItem.get('Time'),11,8)+ ', ' + storeItem.get('Data1') + ')');
}
}
},
{
type: 'line',
axis: 'left',
xField: 'Time',
yField: 'Data2',
showMarkers: false,
selectionTolerance: 2,
smooth: 2,
style: {
color: '#0000ff',
stroke: '#0000ff',
fill: '#0000ff',
'stroke-width': 2
},
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle('('+Ext.util.Format.substr(storeItem.get('Time'),11,8)+ ', ' + storeItem.get('Data2') + ')');
}
}
}
]

scottmartin
27 May 2014, 4:45 PM
With all of the activity going on in your store.load(), I would suspect this is racing issue where things are not ready.