Pacos
1 Sep 2011, 6:42 AM
Hello,
I'm trying to display a label on a Gauge chart. Nothing fancy, but the label doesn't shows up. The animation doesn't work either. Here is an extract of the code :
var dshSumStore = new Ext.data.JsonStore({
autoDestroy: true,
storeId: 'dshSumStore',
proxy: {
type: 'ajax',
url: 'Controller?action=dslist',
reader: {
type: 'json',
root: 'dshSum',
idProperty: 'id'
}
},
fields: ['id', 'itm', 'bi']
});
dshSumStore.load();
var gaugeBI = Ext.create('Ext.chart.Chart', {
style: 'background:#fff',
animate: {
easing: 'bounceOut',
duration: 500
},
store: dshSumStore,
flex: 1,
width: 300,
height: 200,
axes: [{
type: 'gauge',
position: 'gauge',
minimum: 0,
maximum: 10000,
steps: 4,
margin: -10
}],
series: [{
type: 'gauge',
field: 'bi',
donut: 70,
colorSet: ['#3AA8CB', '#ddd'],
label: {
display: 'over',
field: 'bi',
renderer: function(v) { return v + ' euros'; }
}
}]
});
Any idea/suggestion/critic would be welcome !
I'm trying to display a label on a Gauge chart. Nothing fancy, but the label doesn't shows up. The animation doesn't work either. Here is an extract of the code :
var dshSumStore = new Ext.data.JsonStore({
autoDestroy: true,
storeId: 'dshSumStore',
proxy: {
type: 'ajax',
url: 'Controller?action=dslist',
reader: {
type: 'json',
root: 'dshSum',
idProperty: 'id'
}
},
fields: ['id', 'itm', 'bi']
});
dshSumStore.load();
var gaugeBI = Ext.create('Ext.chart.Chart', {
style: 'background:#fff',
animate: {
easing: 'bounceOut',
duration: 500
},
store: dshSumStore,
flex: 1,
width: 300,
height: 200,
axes: [{
type: 'gauge',
position: 'gauge',
minimum: 0,
maximum: 10000,
steps: 4,
margin: -10
}],
series: [{
type: 'gauge',
field: 'bi',
donut: 70,
colorSet: ['#3AA8CB', '#ddd'],
label: {
display: 'over',
field: 'bi',
renderer: function(v) { return v + ' euros'; }
}
}]
});
Any idea/suggestion/critic would be welcome !