Funnel Visualization Colors

  • 1
  • Question
  • Updated 3 years ago
  • Answered


Hello All

I have to present graphs (shown in SS) on the same page, next to each other. Feedback I got is that stage colors are confusing, they represent one opportunity stage in one graph and different one in the other.

My question is: Is there a way to "tie" a color to a certain opportunity stage. Similar to how you can do this in SF interface (see SS2)


Photo of Vedran Sehovic

Vedran Sehovic

  • 100 Points 100 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
There is no declarative way to force the charts to use particular colors by stage name,  but the HiCharts API allows access to almost every aspect of the visualization - and so I imagine it would not be  a difficult snippet to update the series properties so that when stage was X - color was Y.  That Snippet would be activated as a "before render snippet" in your chart properties. 
Photo of Vedran Sehovic

Vedran Sehovic

  • 100 Points 100 badge 2x thumb
Thank you Rob!
Photo of Elissa Bradley

Elissa Bradley

  • 1,672 Points 1k badge 2x thumb
Hi Vedran - I'm looking to do this same thing.  Did you have any luck creating a snippet to set color based on the value of Stage? 
Photo of Vedran Sehovic

Vedran Sehovic

  • 100 Points 100 badge 2x thumb
Hi Elissa
No I haven't. I'm really not good at all with JavaScript. 
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Our sales guys pestered us enough until we solved this issue for them.  They wanted opportunity stages to appear in the same order and in the same colors regardless of the organization of the underlying model.  

I created a new Javascript resource of type "In-Iine(Snippet)" called "ChartFix"

Here is my code:

var chartObj = arguments[0],	$ = skuid.$,
s = chartObj.series;
ind = 0,
//for each series item 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
        });
    })



Obviously you will need to update your stage names to be appropriate with your org.   The actual colors used will need to be set up in the chart properties (Styling - Chart Colors).  

You should be good to go. 

 
Photo of Vedran Sehovic

Vedran Sehovic

  • 100 Points 100 badge 2x thumb
Thank you very much Rob!
Photo of Jason C

Jason C

  • 682 Points 500 badge 2x thumb
I was able update the Snippet for Case status as well.

Thanks for sharing Rob!