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:
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;
}
})
