PDA

View Full Version : Making component extending Ext.chart.series.Gauge



columbus30
15 Dec 2011, 2:09 AM
I am trying to make the gauge chart have 3 slices instead of 2. In the drawSeries() of Ext.chart.series.Gauge there are 2 slices: sliceA and sliceB. I made following the hardcoded changes :


value = 20; splitAngle = -180 * (1 - (value - minimum) / (maximum - minimum));
sliceA = {
series: me,
value: 20,
startAngle: -180,
endAngle: splitAngle,
rho: me.radius
};
var oldSplitAngle = splitAngle;
value = 80;
splitAngle = -180 * (1 - (value - minimum) / (maximum - minimum));
sliceB = {
series: me,
value: 80,
startAngle: oldSplitAngle,
endAngle: splitAngle,
rho: me.radius
};
sliceC = {
series: me,
value: 11,
startAngle: splitAngle,
endAngle: 0,
rho: me.radius
};
slices.push(sliceA, sliceB,sliceC);


this works fine. But I want to write a customized component for this. I will would only want to override drawSeries method. Please help.Thanks!

mitchellsimoens
15 Dec 2011, 2:13 PM
Ext.define('Ext.ux.chart.series.Gauge', {
extend : 'Ext.chart.series.Gauge',
alias : 'series.mygauge',

drawSeries: function() {
//do your stuff here

this.callParent(arguments); //will call the superclass, do you want this?
}
});

Now you can use type : 'mygauge'.

columbus30
21 Dec 2011, 6:27 AM
Hi, thanks for your response.. I made the component. But there is one more issue I am facing : I have drawn the 3 sliced Gauge and added needle and center point on which needle rotates like in Gauge meter. But part of needle becomes invisible when the it meets the slice.. I want the needle to be above slice..

it is working fine in IE as it is VML amd it supports zIndex. But I dont know how to make it work in FF as SVG does not support opacity or zindex.

Please help.