ExtJS 4 Chart - Change axes, series, and store

Question

I have a chart that will show energy generation over a day, month, or year, depending on the user's selection. To do this on a single chart, I need to be able to change the axes, series, and store when a button is clicked. I have managed to get this working, except I have the issue of the old data, series, and axes are still showing, and the new ones are just being laid on top. Is there a way to clear or refresh/redraw a chart? Or should I just split this into 3 charts, and hide/show the charts on button click?

Here is my current code for setting axes, series and store on the fly.

        chart.axes.clear();
        chart.axes.addAll(dailyAxes);
        chart.series.clear();
        chart.series.addAll(dailySeries);
        chart.bindStore(Ext.data.StoreManager.lookup('dailyEnergy'));

Solution 1

A little late, but what's missing is this:

chart.surface.removeAll()

This isn't ideal, as you may get a flash of empty space as it destroys the previous elements, but it does avoid the hangover of old data.

Solution 2

i dont know what type of chart or what is dailyAxes

but i assume u want to change axes properties..hee is an example on how to do it:

Ext.getCmp('chartid').axes.get("gauge").maximum =  100;

then u need to redraw the chart after ur done:

Ext.getCmp('chartid').redraw();