View Full Version : chart with dynamic series

3 Sep 2010, 6:41 AM
I need to make a dynamic chart displaying various product selling statistics.
Dynamic means that the user should be able add a new product to the chart by selecting it from a combobox and clicking on a button.
It is not documented in ExtJS 3.2.1 API documentation, but I found setSeries() method, so I can add a new product to the chart, but all previous product disappears from the chart.

Here is the part of the code (store2chart is an xmlstore and colors is an array with some predefined colors):

Ext.get('button2').on('click', function() {
store2chart.load({params:{tipus: tip, start: dfs, end: dfe, product: product}});
seriesdef[colorIndex]={type: 'line',displayName: 'Amount', xField: 'xaxis',
yField: 'value',style: {color: colors[colorIndex]}};
I think the problem is that when the store gets refreshed all lines on the chart are refreshed with the same data so they overlap and only the last one can be seen. How is it possible to avoid this?


3 Sep 2010, 9:00 AM
Yes, you should use setSeries, but you need to specify all series that need to be visible (so including the ones that are already visible).

3 Sep 2010, 12:38 PM
I specify all series everytime, they are in seriesdef array. I add the next one to the array and then call setSeries()

15 Nov 2010, 2:38 AM
I try to use 'setSeries()', but have an error. I call this method from 'render' listener on my 'Chart' component. The error is 'this.swf is undefined' (it drops while refreshing chart). Can you tell about dynamic series in detail?

26 Jul 2012, 2:34 AM
I specify all series everytime, they are in seriesdef array. I add the next one to the array and then call setSeries()

HI, This is my Chart class code how to add series dynamically in this class. and how to get chart class object such a that i can add series in this chart class. Thanks in advance

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 800,
height: 600,
animate: true,
store: Ext.create('LcaChartStore1'),
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
axes: [{
type: 'Numeric',
position: 'left',
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
title: 'Values',
grid: true,
minimum: 0
type: 'Category',
position: 'bottom',
fields: ['date'],
//grid: true,
title: 'Date',
/*label : {
rotation : {
degrees : 45
renderer: function(value){
return value.substring(0,10);//value.dateFormat('m-d-Y');
} ],
series: [ {
type: 'line',
highlight: {
size: 7,
radius: 7
axis: 'left',
xField: 'date',
yField: 'quantity',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('date') + ': ' + storeItem.get('quantity') + ' views');