PDA

View Full Version : Performance of LineChart with 600 points -- slow?



darind
6 Apr 2010, 5:50 AM
I have a LineChart with one series and I'm giving it a JsonStore with 600 data points in the series. X-axis is an integer and Y-axis is a float.
Rendering this graph with 600 points takes about 10 seconds on my super-high-end developer machine. I realize that the graph will obviously slow down with more larger data sets, but I would have expected a mere 600 points would be fine.
Just to confirm I'm not doing anything stupid in my code, is that comparable to what other people are seeing?

My graph code is very simple. Is there any thing I can do to make this render faster?



var myStore = new Ext.data.JsonStore({
url: "FetchRates.aspx",
root: 'rows',
totalProperty: 'TotalNumResults',
fields: [
{name: 'Period'},
{name: 'Yield', type: 'float'}
]
});
myStore.load();

var graphPanel = new Ext.Panel({
...
items: {
xtype: 'linechart',
store: myStore,
xField: 'Period',
yField: 'Yield'
}
});

darind
6 Apr 2010, 6:01 AM
For instance -- would i get a speedup in rendering if I turned off the tool-tips for when you mouse over each point? (Although i can't find out how to do that from the documentation). Or is there any other trick to improve render time for 600 points?

BlueCamel
6 Apr 2010, 7:35 AM
Is this with the latest YUI 2.8.0 flash charts as found in the ExtJS 3.2 release? In the past (ExtJS 3.0) I noticed the same problem which kept me from using the built in chart libs.

I'm not sure if this is a continuing problem or if you're using the older release.

darind
6 Apr 2010, 8:43 AM
Yeah, I'm using the latest 3.2 release. A small number of points (a dozen or so, like in the Ext samples) works fine. But a medium number of points (say 600ish) is awfully sluggish...

mschwartz
6 Apr 2010, 10:03 AM
We use a commercial charting product in our application.

http://zingchart.com

It easily handles data sets of 100,000 points.

I created an extension for it:



Ext.ux.ZingChart.Panel = Ext.extend(Ext.Panel, {
hideMode: 'offsets', // display, offsets, visibility, nosize?
flashVersion: '9.0.0',
// url: url to zingchart.swf
url: '/path/to/zingchart.swf',
dataUrl: null,
defaultsUrl: '/path/to/defaults.txt',
zingData: '',
initComponent: function() {
var me = this;
var id = this.id;
this.zingId = 'zing-'+id;
var config = {
layout: 'fit',
items: [
{
xtype: 'flash',
id: this.zingId,
url: this.url,
wmode: 'transparent',
anchor: '100% 100%',
flashVars: {
url: this.dataUrl || '',
defaultsurl: escape(this.defaultsUrl),
jsobjectid: escape(this.zingId),
jsloadfunc: 'Ext.ux.ZingChart.Panel.prototype.jsloadedfunc',
jsloadedfunc: 'Ext.ux.ZingChart.Panel.prototype.jsloadedfunc'
},
flashParams: {
allowScriptAccess: 'always',
id: this.zingId,
name: this.zingId,
movie: 'zingchart.swf'
},
listeners: {
initialize: function() {
me.onSwfReady(!!this.isInitialized);
me.isInitialized = true;
me.fireEvent('initialize', true);
}
}
}
]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
Ext.ux.ZingChart.Panel.superclass.initComponent.apply(this, arguments);
this.addEvents('initialize');
},
onSwfReady: function() {
if (this.zingData) {
this.setData(this.zingData);
}
},
setData: function(o) {
if (!Ext.isString(o)) {
o = Ext.encode(o);
}
this.zingData = o;
var cmp = Ext.getCmp(this.zingId);
if (cmp.swf.zcData) {
cmp.swf.zcData(o);
}
}
});
Ext.ux.ZingChart.Panel.prototype.jsloadedfunc = function(sValue) {
var sId;
if (Ext.isString(sValue)) {
sValue = Ext.decode(sValue);
sId = sValue.id;
}
else {
sId = sValue;
}
var cmp = Ext.getCmp(sId);
if (cmp) {
cmp.fireEvent('initialize', true);
}
};

Ext.reg('ux-zingchart-panel', Ext.ux.ZingChart.Panel);