Adding a Range Area to a metric in a Line Chart

Follow

Jay Dastur

September 30, 2018 19:53

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


});

 

2

• 

  Expand Dev November 01, 2018 09:34

  Hi Jay,

   

  This is really useful and is being used on a couple of our charts, it would be good if we could fix the hover over on the bar to diplay, either the range (min to max) or the difference between the (max - min).

   

  Thanks, James

  1

  Comment actions Permalink
• 

  Chris Bridges November 09, 2018 20:32

  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

  0

  Comment actions Permalink
• 

  Brian Wilson August 20, 2019 20:27 (Edited August 20, 2019 20:31)

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

  0

  Comment actions Permalink

Please sign in to leave a comment.