Adding A Range Area To A Metric In A Line Chart

[intapiuser]

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


});