PDA

View Full Version : How to add dynamic Tooltips to the Chart, complex problem?



jainman
28 Mar 2012, 3:39 AM
I need a solution for the dynamic tooltip for chart. It is really becoming the complex problem for me.
Any help is appreciated.
:-/:-/:-/==============

I have a nested data store.
Utilization has many instance of ProcessUtilization. (See the example below)

I am rending a chart with Utilization store as following series

this.series = [{
type : 'line',
xField : 'time',
yField : 'usage',
//tips : this.testtooltip(this.dynamicToolTipData),

this.callParent();
},

The Tip data should be the instance of ProcessUtilization and need to be updated dynamically during tooltip rendering.
My problem is I am not able to get the data item of ProcessUtilization.



Ext.define(Utilization', {
extend : 'Ext.data.Model',
fields : [{
name : 'time',
type : 'string'
}, {
name : 'usage',
convert : function(value, record) {
return parseFloat(value);
}
}],

associations : [{
type : 'hasMany',
model : 'ProcessUtilization',
name : 'processutilizations'
}],
belongsTo : 'Node'
});

========

Ext.define(‘ProcessUtilization', {
extend: 'Ext.data.Model',
fields : [{
name : 'pname',
type : 'string'
}, {
name : 'ptime',
type : 'string'
},{
name : 'pusage',
convert : function(value, record) {
return parseFloat(value);
}
}],


belongsTo: 'UtilizationStore'
});

mitchellsimoens
28 Mar 2012, 8:41 AM
The tips config should be like:


tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
}
}

You can see storeItem is the record that the marker (line series) or bar or whatever is.

jainman
28 Mar 2012, 9:02 AM
This solution doen't work for me.

StoreItem is not holding the nested record and it throws an exception.

storeItem.get('processutilizations') throws an exception.

So the solution I tried is to create a variable "mytooltipdata" in chart.

And during tooltip rendering I tried to read this. But It is also returning null.

To be very precise I am trying to modify
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/charts/TipsChart.html

Can you show show to make tooltip data dynamic?




Thanks

Manoj

mitchellsimoens
28 Mar 2012, 9:05 AM
Are you using 4.0.7? There was a bug that has been fixed in 4.1.0. I am using the renderer and using 4.1.0 b3 right now in an app.