Scribd
Upload
594 views

ExtJS Fly Chart

The document defines code to create a chart component in ExtJS with line and column series displaying monthly website visits and page views data. It includes functions to add and remove series from the chart by pushing and popping from the series array and reloading the data store.

Uploaded by

Steffe Arbini
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
594 views

ExtJS Fly Chart

The document defines code to create a chart component in ExtJS with line and column series displaying monthly website visits and page views data. It includes functions to add and remove series from the chart by pushing and popping from the series array and reloading the data store.

Uploaded by

Steffe Arbini
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

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

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

You might also like