Introduction
By default Sisense allows users to create pie charts that show the percent to total inside each slice. However, some users may want to see the actual value inside the chart instead of the percentage. This article outlines how to configure that.
Steps
Here we will explain how to do it in detailed steps.
STEP 1 - CREATE A PIE CHART
On your dashboard, either edit and existing pie chart or create a new one. Make sure you've got fields selected for Category and Value, so you should see the standard pie chart. Make sure the options for Value and Percent labels are checked.
STEP 2 - ADD THE SCRIPT
Under the settings menu, click on the Edit Script button to open the script editor. Copy and paste the below code into the script editor and click save. Refresh the web page containing your pie chart, and you should see the data labels show up as the values instead of percentages.
Before V7.X :
widget.on('ready', function(w) {
// Get the data objects
var rawData = w.rawQueryResult.values;
var data = w.queryResult.series[0].data;
// Find the formatted data values
var labelElements = $('g.highcharts-data-labels',element).children();
// Loop through each value label and save the text
var cate
var labelValues = [];
$.each(labelElements, function() {
// Get the current value label
var newValue = $('tspan',this).last();
// Save the value
labelValues.push( newValue.text() );
// Remove the outside value label
newValue.remove();
});
// Find the inside value label
var labels = $('text.pie-percent-label',element);
// Pass the formatted labels to the front end
for (i=0; i< data.length; i++) {
// Grab the matching value label
var myLabel = labelValues[i];
// Update the inside label
$(labels[i]).text(myLabel);
// Adjust the font size for the inside label
var fontSize = parseInt($(labels[i]).css('font-size')) * 2/3;
$(labels[i]).css('font-size',fontSize);
// Adjust the location for the inside label
var y = parseInt($(labels[i]).attr('y')) -10;
$(labels[i]).attr('y',y);
}
// Clean up unneccesary lines
if (w.style.labels.categories == false) {
// Get all the path elements
var paths = $('g.highcharts-series',element).children();
// Drop the first x path elements
for (j=0; j<labelValues.length; j++) {
$(paths[j]).remove();
}
}
})V7.X and above:
widget.on('ready', function(w) {
// Get the data objects
var data = w.queryResult.series[0].data;
// Find the formatted data values
var labelElements = $('g.highcharts-data-labels',element).children();
// Loop through each value label and save the text
var labelValues = [];
$.each(labelElements, function() {
// Get the current value label
var newValue = $('tspan',this).last();
// Save the value
labelValues.push( newValue.text() );
// alert(newValue.text());
// Remove the outside value label
newValue.remove();
});
// Find the inside value label
var labels = $('text.pie-percent-label',element);
// Pass the formatted labels to the front end
for (i=0; i< data.length; i++) {
// Grab the matching value label
var myLabel = labelValues[i+data.length];
// Update the inside label
$(labels[i]).text(myLabel);
// Adjust the font size for the inside label
var fontSize = parseInt($(labels[i]).css('font-size'));
$(labels[i]).css('font-size',fontSize);
// Adjust the location for the inside label
var y = parseInt($(labels[i]).attr('y')) +10;
$(labels[i]).attr('y',y);
}
})
