cancel
Showing results for 
Search instead for 
Did you mean: 
intapiuser
Community Team Member
Community Team Member
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:
Version history
Last update:
‎03-02-2023 09:07 AM
Updated by:
Contributors
Community Toolbox

Recommended quick links to assist you in optimizing your community experience:

Developers Group:

Product Feedback Forum:

Need additional support?:

Submit a Support Request

The Legal Stuff

Have a question about the Sisense Community?

Email [email protected]

Share this page: