Adding a Range Area to a metric in a Line Chart
Introduction
Use this script to add a range area or a range bar to a line chart. e.g. When plotting the metric you can superimpose it over a range area.
Instructions
#1
Create a line chart, add the 2 fields which comprise the lower and upper limits of the range followed by the field which is to be plotted at a line.
Area Range
Column Range
#2
Copy / Paste the following script in the script area of the chart. Edit the first line to choose the range type columnrange or arearange
//set the range type columnrange , arearange
var rangeType = 'columnrange';
widget.on('processresult', function(w, args) {
var chartS = args.result.series;
var ch = args.result.chart;
var smin = chartS[0];
var smax = chartS[1];
//set the min max ranges
var ranges = [];
for(var d = 0; d < smin.data.length; d++) {
ranges.push([smin.data[d].y, smax.data[d].y]);
}
// create a new range series
var rangeSeries = $$.object.clone(smin, true);
rangeSeries.data = ranges;
rangeSeries.type = rangeType,
rangeSeries.zIndex = -100;
rangeSeries.pointWidth = 30;
rangeSeries.name = 'Range';
rangeSeries.marker = {};
rangeSeries.marker.enabled = false;
//remove the first 2 individual series for min max
chartS.splice(0, 2);
//add the range series
chartS.push(rangeSeries);
});
-
Hey Jay,
This is great and extremely useful for me. I agree with James, it would be great to be able to show the range values on the hover over as well as whatever other series are on the chart.
Separate question, is it possible to use smooth lines for the range area?
Thanks,
Chris
-
Hey Jay -- Really helpful for a task.
Is it possible to hide the line and leave the markers, similarly to this code? https://support.sisense.com/hc/en-us/articles/360002318894-Show-only-Markers-of-a-Series-Hide-Line-
Edit -- Got it! Just needed to change the series # to 0
widget.on('render', function(sender, se){
var s = sender.queryResult.series[0];
// Change series to a line, enable the marker and hide the line
s.type = "line";
s.lineWidth = 0.01;
s.marker = {
enabled: true,
radius: 6
};
// When hovered state to disabled and lineWidth to 0
sender.queryResult.plotOptions.series.states.hover.lineWidth = 0;
sender.queryResult.plotOptions.series.states.hover.lineWidthPlus = 0;
// Change the hover fillColor
sender.queryResult.plotOptions.series.marker.states.hover.fillColor = 'white';
})
Please sign in to leave a comment.
Comments
3 comments