A way to change the center data in a Donut graph

  • 1
  • Question
  • Updated 3 years ago
  • Answered
On more than one occasion I have needed to change the data that is displayed inside of a donut graph. I asked HighCharts if this is possible and they pointed me in the right direction. I am still a newbie with JavaScript so I am unsure how to alter the code to work in Skuid.

If some one could help me out with this it would be great and I think helpful to others.

Basically, setting the snippet as a before load action on the graph should change the center data with the title data. I want to use a merge syntax so the information is set dynamically. 

Example:

- http://jsfiddle.net/qq6o1ma1/


Docs:

- http://api.highcharts.com/highcharts#Chart.setTitle

Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb
^bump^
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Tami,

Here is a sample to get you started.  Look at the 'params' variable in the console.  It will help you figure out how to add in additional pieces.
var params = arguments[0],
	$ = skuid.$;
console.log(params);

params.chart.events={
         load:function(){
         var chart = this,
           series = chart.series[0],
              firstPoint = series.data[0].y,
              nextPoint = series.data[1].y,
              percent = (firstPoint / (firstPoint + nextPoint)) * 100,
           value = 0;
              
          chart.setTitle({
          text: 100 - percent + '%',
          align: 'center',
            verticalAlign: 'middle'
          });
        }
   
};
    params.plotOptions.pie.dataLabels = {
    enabled: true,
    format: '<b>{point.name}</b>: {point.y:,.0f}',
        };
    
    params.colors =  ['#8edc00', '#e8eb00', '#e8aabb'];

Note that I had to hide the center text using CSS.
.sk-chart-innertext {
    visibility: hidden;
}
Thanks,

Bill
(Edited)
Photo of Oliver Sinfield

Oliver Sinfield

  • 922 Points 500 badge 2x thumb
If this is a "progress/completion" donut/pie comparing two values and you want the second/smaller value in the series to be the initially selected value (and thus change the center value in a donut), change 
firstPoint = series.data[0].y,
nextPoint = series.data[1].y,
to
firstPoint = series.data[1].y,
nextPoint = series.data[0].y,
(Edited)
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Oliver,

Thanks for the tip on this!

Bill
Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb
Bill and Oliver,

Thank you very much! Combining both of your answers with a few tweaks and I was able to get it working. Below is the JavaScript snippet and CSS that I used. A point of note is the style attributes get defined in the JS snippet and not a CSS file, that took me a little while to figure out.


JS Snippet
var params = arguments[0],	$ = skuid.$;
console.log(params);
params.chart.events={
          load:function(){
         var chart = this,
           series = chart.series[0],
              firstPoint = series.data[1].y,
              nextPoint = series.data[0].y,
              percent = ((nextPoint / firstPoint) * 100 || 0),
           value = 0;
           
         chart.setTitle({
          text: percent.toFixed(1) + '%',
          align: 'center',
            verticalAlign: 'middle',
            style: { "color": "#8064A2", "fontSize": "30px" }
            
          });
        }
    
};
    params.plotOptions.pie.dataLabels= {
    enabled: false,
    format: '<b>{point.name}</b>: {point.y:,.0f}',
        
        };
    
    params.colors =  ['#8064A2', '#A6A6A6'];
CSS
.sk-chart-innertext {    visibility: hidden;
}
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Glad you got this fixed.  And thanks for sharing your solution.