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
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 = argumentsa0],
$ = 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.seriesbi],{
index: ind,
_colorIndex: ind
});
})
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?
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;
Ditto. Thanks Matt i needed that