PDA

View Full Version : Line chart doesn't draw line



unireverse
17 Jul 2013, 3:14 PM
I'm currently in the process of upgrading my app from extjs 4.0.7 to 4.2.1, and I'm experiencing an issue where my live line charts don't draw lines anymore. The weird thing is that the lines will draw while the chart is hidden, but when I show the chart the lines stop drawing. I've been playing with the configuration trying to find the source of the problem, but I have yet to find any clues.
Has someone experienced this before and found a solution?

Here's the configuration of one of the charts:


{
xtype: 'chart',
animate: {
duration: 500,
easing: 'ease',
},
hideMode: 'offsets',
shadow: false,
store: 'charts.Cpu',
axes: [{
type: 'Time',
position: 'bottom',
fields: ['time'],
grid: true,
step: [Ext.Date.SECOND,5],
minorTickSteps: 4,
dateFormat: 'g:i:s A',
constrain: true,
fromDate: new Date(),
toDate: Ext.Date.add(new Date(),Ext.Date.SECOND,30),
},{
type: 'Numeric',
position: 'left',
fields: ['total'],
title: 'Percent Usage',
grid: {
odd: {
fill: '#C4E5FF',
stroke: '#ddd',
opacity: 0.5,
'stroke-width': 0.5
}
},
minimum: 0,
maximum: 100,
majorTickSteps: 9,
}],
series: [{
type: 'line',
smooth: false,
tips: {
trackMouse: true,
width: 74,
height: 25,
renderer: function(storeItem, item) {
this.setTitle('Total: '+storeItem.get('total')+'%');
}
},
axis: ['left','bottom'],
xField: 'time',
yField: 'total',
style: {
stroke: "#1CC91F",
'stroke-width': 3,
opacity: 0.75
},
showMarkers: false,
}]
}

slemmon
19 Jul 2013, 12:31 PM
Nothing's jumping out at me right away as to where the issue is. Can you post a complete text case with data as you see it working in 4.0.7?

unireverse
22 Jul 2013, 10:34 AM
Here's an example of it working in 4.0.7:
http://jsfiddle.net/JPEEv/141/

Although there seems to be a bug with this test case where the line draws out of the chart, it experiences the same symptoms when I change libraries. If you change the library to 4.2.X, the line does not draw anymore. This appears to be happening with both preset data points and the simulated live points (as done in the example page).

unireverse
1 Aug 2013, 10:10 AM
Here's the solution for those who are experiencing the same problem. The issue was how I was loading my new data points into the store. Initially I was using store.add to add in new points but for some reason extjs 4.2 does not like that and will not render anything. Instead I had to use store.loadData to load all the points in order for it to render. The underlying problem seems to be occurring due to some changes made in the time axis in 4.2.

Here's a working version in 4.2:
http://jsfiddle.net/2Yxsw/1/