PDA

View Full Version : Column chart with predefined colors



mikhailt
7 Dec 2011, 4:49 AM
How to set predefined colors for every column (bar) in column chart?
This is from example:


renderer: function(sprite, record, attr, index, store) {
var fieldValue = Math.random() * 20 + 10;
var value = (record.get('data1') >> 0) % 5;
var color = ['rgb(213, 70, 121)',
'rgb(44, 153, 201)',
'rgb(146, 6, 157)',
'rgb(49, 149, 0)',
'rgb(249, 153, 0)'][value];
return Ext.apply(attr, {
fill: color
});
}

I do not understand this code.
What is fieldValue?
What is value? Why do value = (record.get('data1') >> 0) % 5; ?

I do not need random colors, I need mine predefined colors.

mikhailt
7 Dec 2011, 7:26 AM
I found the solution.

Define the colors you want to use one by one, column by column.
Then set color index same as column index.



renderer: function(sprite, record, attr, index, store) {
var color = ["#94AE0A", "#115FA6", "#A61120"][index];
return Ext.apply(attr, {
fill: color
});
}

friend
7 Dec 2011, 12:42 PM
On a related note, this will only work for a single series chart.

If your charts uses multiple series (as in the example code below), only the first series will use the custom colors. All other series will use the Base theme default colors.


series: [{
type: 'column',
axis: 'left',
highlight: true,
xField: 'category',
yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
title: ['Data Series 1', 'Data Series 2', 'Data Series 3', 'Data Series 4', 'Data Series 5'],
renderer: function(sprite, record, attr, index, store) {
var fieldValue = Math.random() * 20 + 10;
var value = (record.get('data1') >> 0) % 5;
var color = ['rgb(213, 70, 121)',
'rgb(44, 153, 201)',
'rgb(146, 6, 157)',
'rgb(49, 149, 0)',
'rgb(249, 153, 0)'][value];
return Ext.apply(attr, {
fill: color
});
}

}]


As an alternative, you can extend the Base theme, where your custom color selections will automatically be applied to all series for a specified chart:



var customChartColors = [
'#000000',
'#0000ee',
'#dd0000',
'#00cc00',
'#dddddd'
];



Ext.chart.theme.MyCustomChartTheme = Ext.extend(Ext.chart.theme.Base, {
constructor: function(config) {
Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
seriesThemes: customChartColors,
colors: customChartColors
}, config));
}
});


To use the custom theme, do this:


{
xtype: 'chart',
theme: 'MyCustomChartTheme',
<...>
}

jsalisbury
2 Jul 2012, 5:02 AM
thank you mikhailt (http://www.sencha.com/forum/member.php?32674-mikhailt) and Friend.

Worked for me in a multi-series chart.