Ann,

Rob’s snippet does work for the funnel chart. I think you just need to make sure that you set the colors for the chart in the page builder. Then the first color becomes ‘ind=0’, the second color is ‘ind=1’; etc.

Here is a sample page.

Thanks,

Bill

#ff0000
#00ff00
#0000ff
#ff00ff
#ffff00
#330033
#220011
#81d4fa
#9575cd
#5c6bc0
#5677fc
#039be5
#512da8
#283593








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.seriesdi],{

index: ind,

_colorIndex: ind

});

})

$.extend(true, chartObj.plotOptions,{

funnel: {

dataLabels: {

format: “{point.name}: ${point.y:,.0f}.00”,

enabled: true,

color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || ‘black’,

}

}

});

console.log(chartObj);

---

This works perfectly Bill!   Thank you!!

---

Hi Bill,

This works great keeping the colors in an order, but when there are no records for a certain stage the colors do not follow the stage name.  I only have 3 stages to deal with for this, so I am thinking this shouldn’t be too difficult?

I have tried to modify the code to grab the point.series.name, series.point.series.name, etc etc but nothing I am doing is working for this.

Any suggestions on this?

Thanks Bill,
Ann

---

Just a quick update on this in case anyone needs a workaround. Not the greatest workaround, but because our company only has 5 Sales people and 4 Pipeline stages, I decided to go ahead with this for now.

I created 4 “house” dummy opportunities for each Salesperson, for each Stage, with an Amount value of $0.00. Used a different record type than real Opportunites so that I could control which models pull these, in our case it is 5 Pipeline funnel charts.

The Pipeline series now shows all 4 Stages in the funnel chart, which results in the Stages having the same color on all funnel charts for all pages. The only downsides (besides creating extra records), is there are $0.00 values that show in the chart if there are no records in that stage. I am ok with that for now until I have more time to take a deeper dive into HighCharts.

---

Ann,

This turned out to be tricky. According to Highcharts’ reference, you should be able to add the color you want to the data series and have it display that color. I could not get this to work. It seems like Skuid wants to apply its color theme.

In Rob’s script, he sets the colorIndex. While this does line up the colors, they aren’t ‘sticky’ to their index. If you have fewer stages than colors defined, you end up with the first color to the first stage found (and not the index that you expect).

What worked for me is to render the chart using a Template component. This let me build up the data series and set the colors in a way that is ‘sticky’.

Here is a sample you can use. You can edit the colors by editing the inline snippet called ‘renderChartFunctions’. You will also need to set the model name that is used for the data series.

Thanks,

Bill

Closed Won
Proposal/Quote









models.loaded




















<div id="container" style="min-width: 300px; max-width: 800px; margin: 0 auto"></div>






var" rel="nofollow" title="Link: https://code.highcharts.com/highcharts.js">var">https://code.highcharts.com/highcharts.js">var params = argumentsp0],
$ = skuid.$;

var" rel="nofollow">https://code.highcharts.com/modules/funnel.js">var params = argumentsp0],
$ = skuid.$;

var" rel="nofollow">https://code.highcharts.com/modules/exporting.js">var params = argumentsp0],
$ = skuid.$;

function renderfunnel() {
var myModel = skuid.model.getModel('OppByStage');
console.log(myModel);
var chartData = ];
for (var j=0; j<myModel.data.length; j++) {
console.log(myModel.dataej]);
var item = {name: myModel.datanj].stageName, y: myModel.dataej].sumAmount, color: getColor(myModel.dataCj].stageName)};
chartData.push(item);
}
console.log('chartData');
console.log(chartData);
Highcharts.chart('container', {
chart: {
type: 'funnel'
},
title: {
text: 'Opportunity Funnel'
},
subtitle: {
text: 'Resize the frame or click buttons to change appearance'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
softConnector: true
},
center: '40%', '50%'],
neckWidth: '30%',
neckHeight: '25%',
width: '80%'
}
},
legend: {
enabled: false
},
responsive: {
rules: {
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
yAxis: {
labels: {
align: 'left',
x: 0,
y: -5
},
title: {
text: null
}
},
subtitle: {
text: null
},
credits: {
enabled: false
}
}
}]
},
series: {
name: 'Opportunities',
data: chartData
}]
});

} //end renderfunnel function

function getColor(stagename) {

switch(stagename) {

case “Prospecting”: return ‘#8E388E’;

case “Qualification”: return’#7D9EC0’;

case “Needs Analysis”: return’#388E8E’;

case “Value Proposition”: return’#71C671’;

case “Id. Decision Makers”: return’#C5C1AA’;

case “Perception Analysis”: return’#C67171’;

case “Proposal/Quote”: return’#FFC125’;

case “Negotiation/Review”: return’#B3EE3A’;

case “Invoice”: return’#98F5FF’;

case “Closed Won”: return’#63B8FF’;

case “Closed Lost”: return’#EE00EE’;

default: return’#FF3E96’;

}

}

(function(skuid){

var $ = skuid.$;

$(document.body).one(‘pageload’,function(){

renderfunnel();

});

})(skuid);

var params = argumentsf0],

$ = skuid.$;

renderfunnel();

---

Wow, this is great.   I have applied this to a couple of charts so far and was able to modify as needed.  This would have taken me over a year to figure out, thanks Bill for spending the time on this, not only does it work well, but explains alot on how the Highchart api works

Ann

---