Have certain colors represent certain values in charts

Questions
1

I am trying to put together some donut charts where the the aggregation is count and the split field is a  custom field, health score label. 

These values and colors are what I am hoping to achieve

  • At risk= red

  • Poor= pink

  • Average= Orange

  • Good: light green

  • Champion: Dark green

I am wondering if there is a way to make sure in all of my charts the different values stay the same color across, as some charts may not include all of the values? Thank you!

1 Like
2

Megan, you will probably have to run a before-render snippet for your charts. It can probably be the same snippet for all the charts. 

Check out the Highcharts API
And this thread (among many others with examples): https://community.skuid.com/t/superbank-chart-options-data-preprocess

3

Megan.  Here is a before render snippet I use to force bar charts into a particular order and color.  (The color is determined in the style tab of the chart properties)    Be warned that the donut charts are different and I haven’t been able to get this to work for that type.  Dang…


var chartObj = arguments[0],
	$ = skuid.$,
	s = chartObj.series;
	ind = 0,
//for each series entry grab series id.  Based on id value set ind variable. 
    $.each(s, function (i, s){	
        switch(s.id) {        
        case "Prospecting": ind = 0; break;
        case "Qualification": ind = 1; break;
        case "Needs Analysis": ind = 2; break;
        case "Value Proposition": ind = 3; break;
        case "Id. Decision Makers": ind = 4; break;
        case "Perception Analysis": ind = 5; break;
        case "Proposal/Price Quote": ind = 6; break;
        case "Negotiation/Review": ind = 7; break;
        case "Invoice": ind = 8;  break;
        case "Closed Won": ind = 9;  break;
        case "Closed Lost": ind = 10; break;
        default: ind = 10; 
        }        
// update series index number and color index with ind variable. 
        $.extend(true, chartObj.series[i],{
            index: ind,
            _colorIndex: ind
        });
    })
1 Like
4

I’ve tried this as a before render snippet on a column chart, but can’t get it to work. Any tips to get this to work?

5

In case it is useful, here is a snippet approach that seems to work for a donut/pie chart:

var chartObj = arguments[0],
$ = skuid.$,
d = chartObj.series[0].data,
c = '';
colors = [];
//for each data item in the first series, //use the name value to set color (c) variable.
$.each(d, function (i,d){ 
    switch(d.name) {
        case "Under Contract": c = '#ff4550'; break;
        case "Underwriting/Offer Pending": c = '#ff941e'; break;
        case "Tracking - A": c = '#085dcc'; break;
        case "Tracking - B": c = '#8abdff'; break;
        case "Tracking - C": c = '#bcebd2'; break;
        case "Closed": c = '#3cce7f'; break;
        case "Offer Not Accepted": c = '#8273fa'; break;
        case "Passed On": c = '#6458bf'; break;
        case "Under Contract w/ 3rd Party": c = '#acacac'; break;
        case "Other": c = '#5f5d5d'; break;   
        default: c = '#5f5d5d';
    }   
  //add selected color to array.
  colors.push(c);
});
//console.log('colors:');
//console.log(colors);
//replace the chart colors array
chartObj.colors = colors;
7

Ditto. Thanks Matt i needed that