PDA

View Full Version : Define colours for columns in ColumnChart



hoeriksen
29 Sep 2010, 4:30 AM
Hi,

I'm trying to make a fairly basic column chart. My data is based on a number of activities, each of which is assigned some status (overdue, ongoing, done etc.). Ie. you have eg. 20 activities with status 'Overdue', 54 activities with status 'Ongoing' etc. This is represented in my jason file as:



var store = new Ext.data.JsonStore({
fields: ['status', 'total'],
data: [{
status: 'Overdue',
total: 150
},{
status: 'Done',
total: 245
},{
status: 'Risk activity',
total: 117
},{
status: 'In progress',
total: 184
},{
status: 'Due soon',
total: 184
}]
});


What I'm trying to do is to lay this out in a column chart with each column representing an activity status (x axis), while the y axis displays the number of activities. So far so good.

What I can't manage to do, however, is to specify the colour for each column (with a corresponding legend below).

My current (faulty) code looks like this:



var aktivityColumn = new Ext.Panel({
width: 250,
height: 250,
title: 'Activity status',
renderTo: 'activityColumn',
items: {
store: store,
xtype: 'columnchart',
xField: 'status',
yField: 'total',
yAxis: new Ext.chart.NumericAxis({
displayName: 'total',
labelRenderer: Ext.util.Format.numberRenderer('0,0')
}),
extraStyle: {
legend: {
display: 'bottom',
padding: 5,
font: {
family: 'Tahoma',
size: 8
}
}
},
series: [{
xField: 'status',
displayName: 'Overdue',
style: {
color: 0xea654a
}

},{
xField: 'status',
displayName: 'Done',
style: {
color: 0x1111f4
}
},{
xField: 'status',
displayName: 'Risk activity',
style: {
color: 0xf41111
}
},{
xField: 'status',
displayName: 'In progress',
style: {
color: 0x11f427
}
},{
xField: 'status',
displayName: 'Due soon',
style: {
color: 0xfbd439
}
}]
}
});


As I'm sure you understand this gives me five columns per status, each with my own customized colours. I only want one :)

Any help is much appreciated!

Håvard

NoahK17
6 Dec 2010, 1:53 PM
If you figure it out, let me know!

Condor
7 Dec 2010, 1:13 AM
The only way you could make this work would be to create a separate series for every category.

This would mean that in the first example, the store would have to contain 6 fields (status + 5 total fields, one for each color).

hoeriksen
19 Dec 2010, 12:04 PM
Thank you for the pointer Condor. I actually ended up using the Flot charting library to get it done :)