PDA

View Full Version : How to show actual value on top of Gauge chart



awadhesh
30 Sep 2012, 10:28 AM
Hi,

I am trying to add a actual value of CPU usage on Gauge Chart. I have both max value and current value for gauge chart. I am not sure if there is way to highlight the actual value on top of chart. Range is defined from 0 to 100 with step 10. My requirement is to show actual value say (37%) CPU usage on chart. Initially, I tried to use tooltip as written in Sencha help document as

tips: {
renderer: function(storeItem, item) {
var value = item.data.cpucount;
if (value > 100) {
value = value/100;
var title = "CPU: " + Ext.util.Format.number(value, '0.00');
this.setTitle(title);
this.setWidth(title.length + 20);
}
}

but this doesn't work.

Then, I tried to use Ext.draw.Sprite with type config as "text" and added the actual value in the "text" config object. Initially, it shows the value but when I refresh the chart, sprite doesn't appear. I have written code like this

var cpuText = Ext.create('Ext.draw.Sprite', {
type : 'text',
text : 'CPU Usage' + currentValue, // actual value
font : 'bold 14px Arial',
x: 1
y: 2
});
cpuChart.surface.add(cpuText);
cpuText.show(true);

Here "cpuChart" is instance of Gauge component's "xType".

Please help me to show the actual value as a label or sprite in a chart.

mitchellsimoens
2 Oct 2012, 8:42 AM
The issue is the surface is probably getting purged and so you would have to add your sprite back in.