PDA

View Full Version : ExtJS Chart Update



lehoangel
12 Apr 2011, 8:38 PM
Hi I'm new to Extjs Chart, and this one doesn't have a proper API, so I'd need some helps to use it.
This is my Chart Window with a toolbar and a chart.

/* ----- Chart Window -----*/
var chartWindow = new Ext.Window({
height: 300,
width: 600,
id: 'chartWindow',
modal: true,
title: 'Performance Chart',
tbar: [{
xtype: 'tbbutton',
text: core.fuelConsumption,
handler: function(){
// change chart display
}
},'-',{
xtype: 'tbbutton',
text: core.totalDistance,
handler: function(){
// change chart display
}
},'-',{
xtype: 'tbbutton',
text: core.moveTime,
handler: function(){
// change chart display
}
},'-',{
xtype: 'tbbutton',
text: core.stopTime,
handler: function(){
// change chart display
}
}],
items: [performanceChart]
});
And here is my chart store & config:


var store = new Ext.data.JsonStore({
fields : [ 'id', 'plateNumber', 'routeNumber', 'routeName', 'fuelConsumption', 'totalDistance',
'moveTime', 'stopTime' ],
data: [{'id':'0','plateNumber':'29E-6868',
'fuelConsumption':'1000','totalDistance':'20','moveTime':'10','stopTime':'1'},
{'id':'1','plateNumber':'29E-9999',
'fuelConsumption':'2000','totalDistance':'40','moveTime':'20','stopTime':'2'}]
});


var performanceChart = new Ext.chart.ColumnChart({
store: store,
id: 'performanceChart',
xField: 'plateNumber',
xAxis: new Ext.chart.CategoryAxis({
title: core.plateNumber
}),
yField: 'fuelConsumption',
yAxis: new Ext.chart.NumericAxis({
title: 'litre'
})
});

I'd like to have do a small action like this but don't know how.
- User click on a toolbar button, for example: 'Total Distance', the chart change yAxis to 'km' and yField to totalDistance.
- Another small thing is that I want to change the fuelConsumption text to vertical display, so it doesn't take much space in the window.

Thank for your helps.

lehoangel
13 Apr 2011, 3:50 AM
LOL, I've solved it, the solution is quite simple :))



performanceChart.setYField('fuelConsumption');
performanceChart.setYAxis(new Ext.chart.NumericAxis({
title: 'Litre'
}));