PDA

View Full Version : Chart label not displayed & no animation



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 !

skirtle
1 Sep 2011, 5:29 PM
Your animation settings are fine, they only animate when new data is loaded. The initial data load won't cause an animation.

As far as I can tell labels aren't supported by gauge charts. Those same label settings work fine if you change the series type to pie.