View Full Version : How to change chart type dynamically?

Ram Manoj
31 Dec 2010, 12:33 AM

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'

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.



I am using ExtJS 3.3.1

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

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(){
if (this.refreshTask && this.refreshTask.cancel){

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;


if(xtype == 'pie'){

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.