PDA

View Full Version : Stacked Column Chart in Ext JS



extDev
6 Jan 2011, 8:17 AM
Hi folks,
I need to create a stacked column chart with ExtJS like that http://developer.yahoo.com/yui/examples/charts/charts-rotation.html I tried and wasted hours on it, because Ext really lacks on chart documentation.

I tried to create a chart for this store data

{ year: 2010, x: 5, y: 3 }
{ year: 2009, x: 8, y: 6 }

And I have got nothing. Any advice, code snippet?

Thanks in advance.

Fatih.

Nigel
7 Jan 2011, 11:12 AM
Fatih

You need

type: 'stackcolumn',
yAxis: new Ext.chart.NumericAxis({
stackingEnabled: true
})
within your config when setting up the chart.

Good luck!

darthwes
7 Jan 2011, 2:30 PM
var chartCfg = {
xtype: 'stackedcolumnchart',
store: new Ext.data.JsonStore({
fields: [{
name: 'year',
type: 'int'
},
{
name: 'x',
type: 'int'
},
{
name: 'y',
type: 'int'
}],
data: [{
year: 2010,
x: 5,
y: 3
},
{
year: 2009,
x: 8,
y: 6
}]
}),
xField: 'year',
xAxis: new Ext.chart.CategoryAxis({
title: 'The X Axis',
minimum: 2005,
maximum: 2015
}),
yAxis: new Ext.chart.NumericAxis({
title: "The Y Axis",
minimum: 2,
maximum: 10
}),
series: [{
displayName: "X",
yField: 'x'
},
{
displayName: "Y",
yField: 'y'
}],
chartStyle: {
padding: 10,
legend: {
display: 'right'
}
}
};
new Ext.Viewport({
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
defaults: {
flex: 1
},
items: [chartCfg,
{
html: "Word"
}]
});

That oughtta set it out for you. Good luck.