PDA

View Full Version : Dynamically changing the color of chart columns - 4.1.3



blackenedx
20 Jun 2013, 9:17 AM
Hi,
I'm trying to set up a chart so that if the value of a bar drops below 50% (0-100 scale) then the bar will change colors.

I'm iterating through the chart store in order to check the percentage while keeping track of the index. The problem I'm having occurs when I try to do the actual color change.



afterrender: function(chart){
//$chart = chart; <-- Test Variable
var chartStore = chart.getStore();
var i = 0;
Ext.each(chartStore.data.items,function(item) {
if (item.data.department_percent <= 50){
console.log('its less than 50!');
//$test = chart.series.getAt(0); <-- Test Variable
chart.series.getAt(0).group.getAt(i).setStyle({fill: '#ef0'}); //Problem Occurs Here
}
i++;
});
}


The Error I am getting is chart.series.getAt(0).group is undefined.

Upon further investigation with my test variables $chart and $test in firebug console, this is what I found:

>>> $test
Object { type="column", axis=[2], style={...}, more...}

>>> $chart.series.getAt(0);
[Trial] Ext.chart.series.Column {}

Basically One is returning as an Object with basic parameters while the other is returning as the Ext.chart.series.Column object.

When i try to manually set the color using my test variable in the firebug console:


$chart.series.getAt(0).group.getAt(0).setStyle({fill: '#ef0'});

It worked perfectly. I just cant get it to work on the chart listener.

Any thoughts would be much appreciated.

blackenedx
20 Jun 2013, 1:05 PM
I got it to work by placing the following code in the renderer for the series itself



renderer: function(sprite, record, attr, index, store) {
if((record.get('department_percent') > 50) && (record.get('department_percent') <= 75)){
var color = '#ef0'; //yellow
return Ext.apply(attr, {
fill: color
});
}
if(record.get('department_percent') <= 50){
var color = '#f00'; //red
return Ext.apply(attr, {
fill: color
});
}
else{
var color = '#2d2'; //green
return Ext.apply(attr, {
fill: color
});
}
}