PDA

View Full Version : Chart dynamic Tooltips - Chart series is not getting updated - Is It a bug in Extjs4



jainman
15 Mar 2012, 7:35 AM
I am trying to update the Chart tooltip with dynamic data. I used the approach to update the series of chart

I got following error "Uncaught TypeError: Cannot call method 'toLowerCase' of undefined"

Not sure if this is a bug in ExtJS4? Any help appreciated. I have already spend two days looking at this issue.

I am updating the series with a this function

tooltipdataupdate : function(tooltipdata) {
console.log('*********Server Chart tooltipdata! --->' + tooltipdata);
this.mypieModelData = tooltipdata;
var customtips = {
type : 'line',
xField : 'time',
yField : 'usage',
tips : {
trackMouse : true,
width : 580,
height : 170,
layout : 'fit',
items : {
xtype : 'container',
layout : 'hbox',
items : [this.mypieChart(), this.mygrid()]
}
,
renderer : function(klass, item) {
this.setTitle("Information for ");

}

},
style : {
fill : '#38B8BF',
stroke : '#38B8BF',
'stroke-width' : 3
},
markerConfig : {
type : 'circle',
size : 4,
radius : 4,
'stroke-width' : 0,
fill : '#38B8BF',
stroke : '#38B8BF'
}
};

this.series.removeAll();
this.series.addAll(customtips);

},

mitchellsimoens
15 Mar 2012, 10:48 AM
are you adding and remove the series because of the chart and grid?

jainman
15 Mar 2012, 9:39 PM
Well after lot of investigation - Here is the working solution for this problem

The series is a mixed collection. So you have to convert the series in a collection before updating/ adding etc....

Hope this will help.
===============

With this solution I have another problem came up, the chart is getting updated with dynamic tip.
In this process when the chart is redrawn, It does't remove the old chart ( Seems the older mixed collection is still hanging around). Due to this when new chart with differnt data isn added, it gets overlaid over previous one. Someboy solve this problem






tooltipdataupdate : function(tooltipdata) {
this.mypieModelData = tooltipdata;
var customtseries = [{
type : 'line',
xField : 'time',
yField : 'usage',
tips : {
trackMouse : true,
width : 580,
height : 170,
layout : 'fit',
items : {
xtype : 'container',
layout : 'hbox',
items : [this.mypieChart(), this.mygrid()]
},
renderer : function(klass, item) {
this.setTitle("Information for ");

}

},
style : {
fill : '#38B8BF',
stroke : '#38B8BF',
'stroke-width' : 3
},
markerConfig : {
type : 'circle',
size : 4,
radius : 4,
'stroke-width' : 0,
fill : '#38B8BF',
stroke : '#38B8BF'
}
}];

this.series.removeAll();
this.axes.removeAll();

this.series = Ext.create('Ext.util.MixedCollection', false,
function(a) {
return a.seriesId
|| (a.seriesId = Ext.id(null, 'ext-chart-series-'));
});
if (customtseries) {
this.series.addAll(customtseries);
};
//this.refresh();
this.redraw(true);
}