PDA

View Full Version : How to change chart type dynamically?



Ram Manoj
31 Dec 2010, 12:33 AM
Hi,

I have a requirement to change chart type dynamically?

I have two charts displayed each inside its own panels.
I am trying to dynamically change the chart type of one chart.
I have the following code.


var chObj = new Ext.chart.BarChart({
store: store,
xField: dataField,
yField: categoryField,
url: '/SampleApp/ext/resources/charts.swf'
});
Ext.getCmp('cp1').removeAll();
Ext.getCmp('cp1').add(chObj);

On calling the removeAll() on panel 'cp1', chart inside panel is getting removed, that is fine but i think listeners for the other chart are also getting removed. So any data refresh on the store causes an error.

And in the next line I am adding a new chart object using add() to panel. But it has no effect.

I searched the forums and found the following three similar threads and but none with a reply.
http://www.sencha.com/forum/showthread.php?94487-Chart-Switching-between-Line-and-Bar&highlight=change+chart+type

http://www.sencha.com/forum/showthread.php?92978-Changing-the-EXT-Chart-type-on-the-fly&highlight=change+chart+type

http://www.sencha.com/forum/showthread.php?89116-Changing-Chart-Type-Dynamically&highlight=change+chart+type

I am using ExtJS 3.3.1

Can anyone please help at the earliest.
This is critical for me and am banging my head.

steffenk
31 Dec 2010, 4:29 AM
i'm not in charts, but i guess you have to destroy the chart by yourself. Look if it's called:


var chObj = new Ext.chart.BarChart({
store: store,
xField: dataField,
yField: categoryField,
url: '/SampleApp/ext/resources/charts.swf',
onDestroy: function(){
console.log('destroyed');
if (this.refreshTask && this.refreshTask.cancel){
this.refreshTask.cancel();
}
Ext.chart.Chart.superclass.onDestroy.call(this);
this.bindStore(null);
this.removeFnProxy(this.tipFnName);
this.removeFnProxy(this.legendFnName);
}
})

Ram Manoj
31 Dec 2010, 10:48 PM
Hi Stephen,

Thanks for the reply.

To reiterate, I tried using the destroy() method available on the chart itself earlier. It does remove the chart but I guess it also removes listeners for other charts on display also as when there is a change in the data store, it throws errors.
Using removeAll() on panel of chart also creates the same errors.

Any idea why Ext.getCmp('cp1').add(barChartObject); has no effect in displaying a chart?

I however wrote a custom implementation after digging through ExtJS charts code.
I am not sure if it is the correct approach since I am changing the variables of chart to simulate other chart types instead of creating a new chart instance, but it worked.



chart = resetChartConfig(chart);
chart.type = xtype;
chart.tipRenderer = getChartTipRenderer(categoryField, dataField, dataFieldType);

if(legendField != ""){
chart.extraStyle = { legend: { display: legendField }};
}

if(xtype == 'bar' || xtype == 'stackbar' ){
chart.xField = dataField;
chart.yField = categoryField;
chart.xAxis = getChartAxis(dataFieldType, displayName);
chart.series = [ {xField: dataField, displayName:displayName} ];
}else if(xtype == 'column' || xtype == 'stackcolumn'|| xtype == 'line'){
chart.xField = categoryField;
chart.yField = dataField;
chart.yAxis = getChartAxis(dataFieldType, displayName);
chart.series = [ {yField: dataField, displayName:displayName} ];
}else if(xtype == 'pie' ){
chart.dataField = dataField;
chart.categoryField = categoryField;
}

chart.onSwfReady(true);

if(xtype == 'pie'){
chart.swf.setDataField(dataField);
chart.swf.setCategoryField(categoryField);
}



Using chart.onSwfReady(true); has been the key to apply changes like chart type and its axes.

The only constraint with this code is the 'chart' object has to be a Cartesian Chart initially.
Pie Chart can be applied by calling its methods setDataField, setCategoryField.

I will post complete sample code here at the earliest.