PDA

View Full Version : Ext 3.2.1 Stacked Column Chart problem



vitolini
15 Apr 2013, 3:37 PM
I am trying to create a stacked column chart with Ext 3.2.1 (vertically piled up data), however it doesn't display any data. I found some sample code but they are either stacked bar (horizontal piled up data) or work with Ext 4. Below is my data and code... Also attached the output screenshot and what I want to achieve at the end. No errors in Firebug


var storeConfig = {
autoLoad: false,
fields: ['period', 'ontime', 'late'],
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'data'
}
},
data: []
};
var store1 = new Ext.data.Store(storeConfig);

store1.loadData([{ period: '2012-01', ontime: 123, late: 500 },
{ period: '2012-02', ontime: 564, late: 463},
{ period: '2012-03', ontime: 5, late: 46},
{ period: '2012-04', ontime: 250, late: 463},
{ period: '2012-05', ontime: 123, late: 463},
{ period: '2012-06', ontime: 12, late: 463},
{ period: '2012-07', ontime: 0, late: 463},
{ period: '2012-08', ontime: 1400, late: 463},
{ period: '2012-09', ontime: 1200, late: 950},
{ period: '2012-10', ontime: 680, late: 695},
{ period: '2012-11', ontime: 222, late: 222},
{ period: '2012-12', ontime: 111, late: 333},
], false);


var configOptions =
{
store: store1,
axes: [
{
title: 'Period',
type: 'Numeric',
position: 'left',
fields: ['ontime','late'],
},
{
type: 'Category',
position: 'bottom',
fields: ['period'],
grid: true,
label: {
rotate: {
degrees: 90
}
}
}
],
series: [
{
type: 'column',
colorSet: ['#00FF00','#FF0000'],
//highlight: true,
//column: true,
stacked: true,
xField: 'period',
yField: ['ontime','late']
}
]
};

summaryComponent = new Ext.chart.StackedColumnChart(configOptions);