Ext.chart.Chart.CHART_URL = 'javascripts/ext-3.0.0/resources/charts.swf'; Ext.FlashComponent.EXPRESS_INSTALL_URL = 'javascripts/ext-3.0.

0/resources/expres sinstall.swf'; Ext.onReady(function() { Ext.QuickTips.init(); var data = [ {name:'Jul {name:'Aug {name:'Sep {name:'Oct {name:'Nov {name:'Dec {name:'Jan {name:'Feb ]; 07', 07', 07', 07', 07', 07', 08', 08', visits: visits: visits: visits: visits: visits: visits: visits: 245000, 240000, 355000, 375000, 490000, 495000, 520000, 620000, views: views: views: views: views: views: views: views: 3000000}, 3500000}, 4000000}, 4200000}, 4500000}, 5800000}, 6000000}, 7500000}

var store = new Ext.data.JsonStore({ fields:['name', 'visits', 'views'], data: data }); // extra simple var myPanel = new Ext.Panel({ iconCls:'chart', width:500, height:300, frame:true, layout:'fit', items: { xtype: 'columnchart', store: store, // url: '../../resources/charts.swf', xField: 'name', series: [{ type:'line', displayName: 'Visits', yField: 'visits', style: { color: 0x15428B } }], yAxis: new Ext.chart.NumericAxis({ displayName: 'Visits', labelRenderer : Ext.util.Format.numberRenderer('0,0') }), tipRenderer : function(chart, record, index, series){ if(series.yField == 'visits'){ return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name; }else{ return Ext.util.Format.number(record.data.views, '0,0') + ' page views in ' + record.data.name; } },

} }). var oldSeries = chart. the store.items. //render the chart chart.series. 2007/2008 (Simple styling)'. items:myPanel. chart.store.handler: function(){ var chart = myPanel. with array .pop(). style: { mode: 'stretch'.items.items[0]. color:0x99BBE8 } }).push(oldSeries).series.chart.fields. tbar:[{text:'Add Series'. .BarSeries({ type: 'column'. var newSeries = new Ext.items[0].meta.loadData(data).reader. }). } } ] }) myWindow. {text:'Remove Series' . }//function }.push(newSeries). . yField: 'views'.loadData(data).store. .series. var myWindow = new Ext.show(). updateChart: function(){ //create the series based on the metadata returned from var fields = this. .com Visits Trend. //refresh the data store as it seems to be the only way to make the charts re-render chart. var chart = this.store. //add the series back chart. //remove the last series added chart. . .handler: function(){ var chart = myPanel.Window({ title: 'ExtJS. //remove the first series so it can be put on top of the series we'r e going to add.items[0]. displayName: 'Page Views'.items.pop().series.

. .items.length. Why set the series var and then call clear( ) to zero out the array? Instead replace both with just Code: var series = []. . mode: 'stretch'. . .name. . . Reply With Quote € .items[0]. series. //remove old series. . for(var i=1.chart. . series. }).clear().series = series. }. } .Incorporated BlueCamel's changes.name. 13 Sep 2009€10:16 AM #5 BlueCamel Ext JS Premium Member 162 Posts //the series array of the chart . *Update . var series = [].chartColors[i+1] . } . // console.BarSeries({ .i<fields. .i++){ . color: this. . . .push(newSeries).series. . . displayName: fields[i]. I should probably be destroying the old series objects here. type: 'column'.log(i). var newSeries = new Ext. style: { .. yField: fields[i]. chart. var series = this.

Sign up to vote on this title
UsefulNot useful