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 = argumentse0], $ = skuid.$;
console.log(params);
params.chart.events={
load:function(){
var chart = this,
series = chart.seriesr0],
firstPoint = series.datad0].y,
nextPoint = series.datad1].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
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,<br />nextPoint = series.data;1].y,
to
firstPoint = series.data;1].y,<br />nextPoint = series.data;0].y,
Oliver,
Thanks for the tip on this!
Bill
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;
}
Glad you got this fixed. And thanks for sharing your solution.
