I’m looking to see if it’s possible to change the color of each series depending on the value of each bar? If say, the value is lower than 10 then the bar would be green, and if it’s 10 or higher it would be red.
I’m new to Plumsail Dashboard Designer, so I’m not sure how to go about doing this in the Advanced tab of the Dashboard.
I was looking at using something like this:
config.series.forEach(
function(item){
if ([[the value of the bar]] >= 10) {
item.color = ‘red’
} else {
item.color = ‘green’;
}
}
);
Dear Adam,
You can try to use code similar to this in Dashboard -> Advanced tab, just replace Value with the name of the field that you are using:
var handlers = {};
handlers.preRender = function(config, logger, processor, el) {
logger.debug('Configuration: ', config);
//for each series in config:
config.series.forEach(function(item){
//if item "Value" field is equal to or greater than 10
if (item.data[0].Value >= 10){
//set color to green
item.color = '#00aa00';
}
else{
//set color to red otherwise
item.color = '#aa0000';
}
});
return true;
}
Thanks for this! It’s pointing me in the right direction.
Since each series has a different field name (“0-5 Days”, “6-10 Days”, “11-15 Days”, etc), is there a way to loop through them instead of explicitly calling the field name?
And just to make sure I’m doing things right, am I using the field name from the Chart tab?
Dear Adam,
I see, so it's a different name for each field. A bit trickier, but definitely possible. The name of the field is actually their internal name from the SharePoint list. Easiest option for you would be to process and export your data, then I can use take a look a closer look at it and give recommendations on what to do:
Can you tell me more about the aggregation that you use in your chart? Maybe a screenshot of aggreagation page and chart preview will help. I assume that everything works as intended and you just want to change color of the bars, right?
Dear Adam,
Unfortunately, this might not be possible due to every series having its own color. You see, if you change color for the series, it will change color everywhere, not just for one date.
Dear Adam,
Right now the problem is that there are several bars per series. You have 0-5 Days, 6-10 Days, 11-15 Days, etc. All these share the same series and color, meaning that if you change color per series, it will change all across the chart, not only when the bar is below 10, but in all cases.
It should be possible to restructure data to make every single series unique though and in that case, you should be able to recolor individual bars.
