Can a gauge chart have multicolor? - extjs

Question

Please see this code and try to find solution with exact code because I am fresher in EXTJS:
var chart=Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
store: store,
width: 400,
height: 250,
animate: true,
insetPadding: 30,
axes: [{
type: 'gauge',
position: 'gauge',
minimum: 0,
maximum: 100,
steps: 10,
margin: 10
}],
gradients: [{
'id': 'v-1',
'angle': 0,
stops: {
0: {
color: 'rgb(212, 40, 40)'
},
100: {
color: 'rgb(117, 14, 14)'
}
}
},
{
'id': 'v-2',
'angle': 0,
stops: {
0: {
color: 'rgb(180, 216, 42)'
},
100: {
color: 'rgb(94, 114, 13)'
}
}
},
{
'id': 'v-3',
'angle': 0,
stops: {
0: {
color: 'rgb(43, 221, 115)'
},
100: {
color: 'rgb(14, 117, 56)'
}
}
},
{
'id': 'v-4',
'angle': 0,
stops: {
0: {
color: 'rgb(45, 117, 226)'
},
100: {
color: 'rgb(14, 56, 117)'
}
}
},
{
'id': 'v-5',
'angle': 0,
stops: {
0: {
color: 'rgb(187, 45, 222)'
},
100: {
color: 'rgb(85, 10, 103)'
}
}
}],
series: [{
type: 'gauge',
field: 'value',
donut: 30,
colorSet: ['url(#v-1)', '#ddd']
}]
});
Here is the portion of the code. I just want to know is this possible that gauge chart have Multi background color where they all are static? Like 0-25=red , 25-50= yellow ,50-100= green.

Answer 1

Yes. Someone has already gone through of work of doing this very thing by extending the gauge series: http://www.sencha.com/forum/showthread.php?159879-KPI-Gauge
There is a .zip you can download and add to your library. Then you can essentially just do:
{
xtype: 'chart',
style: 'background:#fff',
animate: {
easing: 'elasticIn',
duration: 1000
},
store: store1,
insetPadding: 50,
flex: 1,
axes: [{
type: 'kpigauge',
position: 'left',
minimum: 0,
maximum: 100,
steps: 10,
margin: 0,
label: {
fill: '#333',
font: '12px Heveltica, sans-serif'
}
}],
series: [{
type: 'kpigauge',
field: 'data1',
needle: {
width: 2,
pivotFill: '#000',
pivotRadius: 5
},
ranges: [{
from: 0,
to: 70,
color: '#FF0000'
}, {
from: 70,
to: 90,
color: '#FFFF00'
}, {
from: 90,
to: 100,
color: '#00FF00'
}],
donut: 70
}]