Widgetscript: Toon de totaalwaarde in het midden van een taartdiagram

Geef de totaalwaarde weer in het midden van een taartdiagram

Met behulp van onderstaand script is het mogelijk om de totaalwaarde in het midden van een taartdiagram weer te geven:

a11e31_f9cce78288174ec5be82e0c0664bbbad_mv2

  1. Maak een taartdiagram en sla dit op
  2. Bewerk de widget weer en klik op Script Bewerken
  3. Voeg onderstaand script toe
var titleText = ''
var labelColor = '#4287f5'
var labelFontSize = '24px'

widget.on('processresult', function(se, ev){
	
	sum = 0
	
	panelItem =ev.widget.metadata.panels[1].items[0]
	itemMask = $$get(panelItem, "format.mask", {})

	var numberFormatter = prism.$injector.get('$filter')('numeric');
	
	$.each(ev.result.series[0].data, function(index, value){
		sum = sum + value.y
	})
	
	titleText = 'Total <br>' + numberFormatter(sum, itemMask);
	
	ev.result.title.text = titleText
	ev.result.title.align = 'center'
    ev.result.title.verticalAlign = 'middle'
	ev.result.title.style = {
            color: labelColor, //Color of value label inside donut
            fontWeight: 'bold', 
			fontSize: labelFontSize//Font size of value label inside donut
        }
    
})

widget.on("ready", function(w, args){
	
	chart = w.chart[0][Object.keys(w.chart[0])[0]].hc


	var textX = chart.plotLeft + (chart.series[0].center[0]);
	var textY = chart.plotTop  + (chart.series[0].center[1]);

	title = $('svg .highcharts-title')

	title.attr('x', textX + (title.width() * -0.5));
	title.attr('y', textY + (title.height() * -0.5));

});

Hoe je een script toevoegt, is hier te vinden: Uitleg