Bar Chart - Value Label From Secondary Series (Hidden)

[intapiuser]

In this post we will explain how to create a bar chart that shows a single bar, but displays value labels from a secondary hidden value series.

Let's look at the below example, we have an bar chart that shows the two value series:

In this case, we want to display only the darker "value" series, but show the value labels from the "label" series.  A use case for this would be if you want the bars to show +/- from a given center point (say 50%) but you want to show what the real percentage is.

• Open up the widget's script editor and paste the below Java Script code: 

/*
Welcome to your Widget's Script.

To learn how you can access the Widget and Dashboard objects, see the online documentation at http://developer.sisense.com/pages/viewpage.action?pageId=557127
*/

widget.on('render', function(widget,event){

// Define how each value series is used
 var displaySeriesIndex = 0,
 labelSeriesIndex = 1;

// Define where to put the center line
 var centerLineValue = 0;
 
 // Get a reference to the highcharts object
 var chart = widget.queryResult;

// Define a centerline to add to the chart
 var plotline = {
 color: 'black',
 dashStyle: 'solid',
 width: 2,
 value: centerLineValue
 }

// Add the center line to the series
 chart.yAxis[0].plotLines = [plotline];

// Get a reference to the series
 var displaySeries = chart.series[displaySeriesIndex],
 labelSeries = chart.series[labelSeriesIndex];

// Loop through each data point in then display series
 displaySeries.data.forEach(function(data, index){

// Save a reference to the label value
 data.labelValue = labelSeries.data[index].y;
 })

// Remove the label series
 chart.series.splice(labelSeriesIndex,1);

// Get a reference to the sisense formatter
 var numberFormatter = prism.$injector.get('$filter')('numeric');

// Get a reference to the formatting mask of the label's series
 var mask = $$get(widget.metadata.panel('values').items[labelSeriesIndex], 'format.mask', {});

// Override the label formatter function
 chart.plotOptions.series.dataLabels.formatter = function(){

// Use the formatting of the label series, in order to create the value label
 var newLabel = numberFormatter(this.point.options.labelValue, mask);
 return newLabel;
 }
})

Note the 3 variables in bold: 

displaySeriesIndex is the index of the series you want to display.  In the screenshot above, it would be the series named "value" because it is the first one in the Values panel.  

labelSeriesIndex is the index of the series that you want to use for the value labels.  In the screenshot above, it would be the series named "label" since its the second one in the Values panel.

centerLineValue is where on the x-axis the plotline should be added.  You can also customize the plotline, but adjusting the plotline variable.  More info on the options for the plotline can be found on Highchart's API documentation.

• Click save
• Go back to the widget editor window and refresh the browser

The result would be:

[jamnikej]

This doesn't seem to work anymore on the latest versions of Windows.

[JeremyFriedel]

Hi @jamnikej 

For newer versions of Windows the following line in the script has to be modified from:

chart.plotOptions.series.dataLabels.formatter = function(){

to this:

chart.plotOptions.bar.dataLabels.formatter = function () {

The PlotOptions object now has separate bar and series parameters, for bar charts only the bar object formatter function needs to be modified.

The full modified script is below:

/*
Welcome to your Widget's Script.

To learn how you can access the Widget and Dashboard objects, see the online documentation at http://developer.sisense.com/pages/viewpage.action?pageId=557127
*/

widget.on('render', function (widget, event) {

    // Define how each value series is used
    var displaySeriesIndex = 0,
        labelSeriesIndex = 1;

    // Define where to put the center line
    var centerLineValue = 0;

    // Get a reference to the highcharts object
    var chart = widget.queryResult;

    // Define a centerline to add to the chart
    var plotline = {
        color: 'black',
        dashStyle: 'solid',
        width: 2,
        value: centerLineValue
    }

    // Add the center line to the series
    chart.yAxis[0].plotLines = [plotline];

    // Get a reference to the series
    var displaySeries = chart.series[displaySeriesIndex],
        labelSeries = chart.series[labelSeriesIndex];

    // Loop through each data point in then display series
    displaySeries.data.forEach(function (data, index) {

        // Save a reference to the label value
        data.labelValue = labelSeries.data[index].y;
    })

    // Remove the label series
    chart.series.splice(labelSeriesIndex, 1);

    // Get a reference to the sisense formatter
    var numberFormatter = prism.$injector.get('$filter')('numeric');

    // Get a reference to the formatting mask of the label's series
    var mask = $$get(widget.metadata.panel('values').items[labelSeriesIndex], 'format.mask', {});

    // Override the label formatter function
    chart.plotOptions.bar.dataLabels.formatter = function () {

        // Use the formatting of the label series, in order to create the value label
        var newLabel = numberFormatter(this.point.options.labelValue, mask);
        return newLabel;
    }
})

[jamnikej]

Thanks! That resolves it.