PDA

View Full Version : Ext Chart - add series on the fly



Nils-Fredrik
24 Aug 2009, 5:09 AM
Hi,
can't find any addSeries() or removeSeries() methods in the cartesian charts.

What is the best way of doing this?

rlegend
11 Sep 2009, 9:43 AM
I'd like something like this as well. Has anyone gotten anything like this to work?

rlegend
11 Sep 2009, 11:26 AM
This 'should' be a self contained example of adding/removing series on the fly.
Basically you add a series the the charts series array and then tell the store to reload.

Demo
http://www.kanaye.net/ext_demos/graph/


It's really this simple


chart.series.push(Series object);
chart.store.loadData(data);
A complete self contained example hacked together from the official examples.



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

Ext.onReady(function() {

Ext.QuickTips.init();

var data = [
{name:'Jul 07', visits: 245000, views: 3000000},
{name:'Aug 07', visits: 240000, views: 3500000},
{name:'Sep 07', visits: 355000, views: 4000000},
{name:'Oct 07', visits: 375000, views: 4200000},
{name:'Nov 07', visits: 490000, views: 4500000},
{name:'Dec 07', visits: 495000, views: 5800000},
{name:'Jan 08', visits: 520000, views: 6000000},
{name:'Feb 08', visits: 620000, views: 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're 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();
});

rlegend
11 Sep 2009, 4:08 PM
If you're using a JsonStore configured with metadata you can use the 'metachange' event to add new series based on the metadata before the chart is rendered. This is truly making it cake to dynamically manage the series of a chart.

Here's a method I'm calling when the store's metadata is changed. This occurs after after load() call to the store but before the chart is re-rendered.

updateChart: function(){
//create the series based on the metadata returned from the store.

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.

BlueCamel
13 Sep 2009, 10:16 AM
//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
var series = [];

Getting rid of the clear() array prototype usage should make this work without ext-basex.

saJoshua
13 Sep 2009, 12:45 PM
thanks for sharing with the community.

It was useful to me.
:)

rlegend
13 Sep 2009, 2:33 PM
@BlueCamel - Thanks. I'll give your suggestions a shot and update my example.

rlegend
14 Sep 2009, 11:34 AM
The more I play with the charts the more undocumented goodies I find.

Is there a place other than the source to find docs for methods like setXAxis(), refresh(), setYField(), setSeries() etc? I know they're pretty straightforward to use, but I didn't know they existed without inspecting the chart components in Firefox.

Thanks.

spaddy
18 Jan 2010, 9:32 AM
If you're using a JsonStore configured with metadata you can use the 'metachange' event to add new series based on the metadata before the chart is rendered. This is truly making it cake to dynamically manage the series of a chart.

Here's a method I'm calling when the store's metadata is changed. This occurs after after load() call to the store but before the chart is re-rendered.

updateChart: function(){
//create the series based on the metadata returned from the store.

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.

Hi All,
I follow this suggestion, but I don't understand when fire this function.
I tried before and after chart render, but it always return that fields is undefined.
If I call the function by a button, the siries is render successfully.
Could you help me?

delvia_bles
29 Dec 2010, 4:54 AM
I am trying to use above function. I am calling it on button click but its giving me error that 'fields' is undefined in the for loop.

My json data is :


{
"graphdatamodels": [
{
"timevalue": "4: 00 PM",
"d1": 10,
"d2": 45,
"d3": 23
},
{
"timevalue": "4: 05 PM",
"d1": 20,
"d2": 30,
"d3": 78
},
{
"timevalue": "4: 10 PM",
"d1": 25,
"d2": 56,
"d3": 49
}
]
}

and its changing dynamically. I mean sometimes there will be d1 only, sometimes d1,d2 and sometimes more. How shuld i make use of the above function. Please help me out! Its very urgent.

delvia_bles
29 Dec 2010, 5:25 AM
I am trying to use above function. I am calling it on button click but its giving me error that 'fields' is undefined in the for loop.

My json data is :



{
"graphdatamodels": [
{
"timevalue": "4: 00 PM",
"d1": 10,
"d2": 45,
"d3": 23
},
{
"timevalue": "4: 05 PM",
"d1": 20,
"d2": 30,
"d3": 78
}
and its changing dynamically. I mean sometimes there will be d1 only, sometimes d1,d2 and sometimes more. How shuld i make use of the above function. Please help me out! Its very urgent.

delvia_bles
29 Dec 2010, 6:07 AM
My extjs function code is as following:


var Panel1 = new Ext.Panel({
//layout:'anchor',

width : 400,
height : 300,
//title: 'Temperature',

//anchorSize: {width:800, height:600},

items:[
{buttons:[{
text:'Temperature',
handler:function(){
var fields = cpuStore.reader.meta.fields;//this.store.reader.meta.fields;//

cpuChart = new Ext.chart.LineChart();//this.items.items[0];

var series = [];
for(var i=1;i<fields.length;i++){
// console.log(i);

var newSeries = new Ext.chart.LineSeries({
type: 'line',
displayName: fields[i].name,
yField: fields[i].name,
style: {
mode: 'stretch',
color: this.chartColors[i+1]
}
});
series.push(newSeries);
}
cpuChart.series = series;
}
}]}
]
});

goofy
3 Jan 2011, 6:05 PM
Hi,
my datas in a json store :

id, date, site_id, rank

How can i make a serie for each site_id to get a linechart for each please ?

I cant find a solution :((

delvia_bles
4 Jan 2011, 3:01 AM
hey goofy may be this would help:
http://www.sencha.com/forum/showthread.php?119877-Adding-Series-to-Chart-Dynamically&p=556150#post556150

goofy
5 Jan 2011, 8:14 AM
I understand how to add a serie on fly but i dont know how to dispach the data from my store to each series

ptl
19 Sep 2012, 7:18 AM
I have store:


var chartStore = new Ext.data.JsonStore({
fields: ['chatid', 'starttime', 'endtime'],
data: [
{
chatid: 935,
starttime: 1348066455,
endtime: 1348067455
},

{
chatid: 1673,
starttime: 1348067155,
endtime: 1348067445
},

{
chatid: 87,
starttime: 1348067455,
endtime: 1348067455
},

{
chatid: 976,
starttime: 1348065455,
endtime: 1348067055
}
]
});

How can I receive 4 lines (2 points each) on the chart?