Conditional Formatting - Series Bar Colors


#1

Hi there,

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’;
}
}
);

Thanks!
Adam


#2

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;
}

To get result like this:

Hope this helps! Let me know if you’ll face any issues.


#3

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?

Thanks!
Adam


#4

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:


#5

Thanks. Here is the exported data:

{“items”:[{“Date”:“2018-01-02T05:00:00.000Z”,“Total”:50,"_x0025__x0020_0_x002d_5_x0020_Da":0.32,"_x0030__x002d_5_x0020_Days":16,"_x0031_1_x002d_15_x0020_Days":9,"_x0031_6_x002d_20_x0020_Days":3,"_x0032_1_x002b__x0020_Days":2,"_x0036__x002d_10_x0020_Days":20},{“Date”:“2018-01-03T05:00:00.000Z”,“Total”:57,"_x0025__x0020_0_x002d_5_x0020_Da":0.298245614035088,"_x0030__x002d_5_x0020_Days":17,"_x0031_1_x002d_15_x0020_Days":11,"_x0031_6_x002d_20_x0020_Days":7,"_x0032_1_x002b__x0020_Days":2,"_x0036__x002d_10_x0020_Days":20},{“Date”:“2018-01-04T05:00:00.000Z”,“Total”:57,"_x0025__x0020_0_x002d_5_x0020_Da":0.315789473684211,"_x0030__x002d_5_x0020_Days":18,"_x0031_1_x002d_15_x0020_Days":15,"_x0031_6_x002d_20_x0020_Days":5,"_x0032_1_x002b__x0020_Days":2,"_x0036__x002d_10_x0020_Days":17}]}


#6

Okay, I see, thank you, Adam!

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?


#7

Yep, everything is working as intended. It’s just the coloring based on value conditions. There is no aggregation in this chart. Here’s the preview:


#8

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.


#9

That would be okay, as long as the color of each bar is just determined by the numbered value. Perhaps I’m misunderstanding your response though.

Thanks!
Adam


#10

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.