PDA

View Full Version : Removing a series of type 'line' and adding a new series of type 'column'



gameboy87
23 Jul 2012, 1:37 AM
I built a chart with 3 series(all are of type 'line'). I have a split Button in selecting either Line/Column Chart. The 'line' chart is rendered nicely. But, How to use the same piece of chart config's to alert the series to pop up with 'column' chart ? Please help on this.

My excerpt of the code is,

menu:{
items:[
{
text:'Line Chart',
handler:function(){
var chart_id = Ext.getCmp('cchart');
//console.log(chart_id);
// console.log(chart_id.series.items[0].type);
Ext.getCmp('cpaneli').show(); //Displaying the Line chart
}
},
{
text:'Bar Chart',
handler:function(){
var chart_id = Ext.getCmp('cchart');

//chart_id.series.items[0].type='column'; //On setting the type as 'column' the chart is not of type column. But in the console it is printed as 'column'
Ext.getCmp('cpaneli').show();


I referred many links,

http://www.sencha.com/forum/showthread.php?119877-Adding-Series-to-Chart-Dynamically
(http://www.sencha.com/forum/showthread.php?119877-Adding-Series-to-Chart-Dynamically)http://www.sencha.com/forum/showthread.php?78514-Ext-Chart-add-series-on-the-flyhttp://www.sencha.com/forum/showthread.php?140791-Dynamically-add-series-to-a-chart


B (http://www.sencha.com/forum/showthread.php?140791-Dynamically-add-series-to-a-chart)ut all ended up in vain.

Please help on this. Thanks.

scottmartin
23 Jul 2012, 4:17 PM
The first 2 links were for Ext3, the other links show how to add new charts. This is not the same as altering the defined chart type. You are simply changing the property of type.

You simply need to define/create the chart when you click the button instead of trying to change the type.

Scott.

gameboy87
24 Jul 2012, 5:21 AM
I used,

chart_id.series.clear();
chart_id.axes.clear();
chart_id.surface.removeAll();
chart_id.bindStore(Ext.data.StoreManager.lookup('pageStore'));
chart_id.series.addAll(columnseries); // Configure your chart series here..
chart_id.axes.addAll(columnaxes); // Configure your chart axes here.


to do this...And that was working cool ! B)