Line/Area Chart - Creating an Area Range

[Ophir_Buchman]

When creating a line chart you'd sometimes want to add a range area to emphasize an "Acceptable Range".

The following script will allow you to create a widget that looks as follows:

Notice the following modifications were made to the original widget:

1. An area range was created to specify the acceptable range of values
2. The line chart markers were colored according to whether they are in/out of range
3. The OOTB tooltip was replaced with a tooltip that shows range + value

To implement this widget follow these steps:

Create a new Line Chart

Create a new line chart with three values: The lower range / The high Range / The actual value (make sure to follow this specific order).
The color set to the "Lower Range" will define the area range color.

Example:

Add the Following Widget Script

Add the following script to your widget:

widget.on('processresult', function(widget,result) {

  // Collect objects from the widget
  let lowRangeSeries = result.result.series[0]
  let highRangeSeries = result.result.series[1]
  let dataRangeSeries = result.result.series[2]

  dataPointsCount = lowRangeSeries.data.length

  // Create a new "Area Range" object
  let newRangeSeries = JSON.parse(JSON.stringify(lowRangeSeries));
  newRangeSeries.type = 'arearange'
  newRangeSeries.fillOpacity = 0.3
  newRangeSeries.marker = {enabled: false}
  newRangeSeries.name = 'Range'

  // Determine the maximal value
  maxValue = dataRangeSeries.data[0].y;

  for (let i =0 ; i < dataPointsCount ; i++) { 
    // Fix the data series's marker color
    dataRangeSeries.data[i].y = Math.round(dataRangeSeries.data[i].y*100)/100
    if(dataRangeSeries.data[i].y > highRangeSeries.data[i].y || dataRangeSeries.data[i].y < lowRangeSeries.data[i].y)
      dataRangeSeries.data[i].marker.lineColor = 'red'
    else
      dataRangeSeries.data[i].marker.lineColor = 'green'

    // Add range values
    newRangeSeries.data[i] = [i,Math.round(lowRangeSeries.data[i].y*100)/100,Math.round(highRangeSeries.data[i].y*100)/100]

    // Determine the maximal value
    if (dataRangeSeries.data[i].y > maxValue) maxValue = dataRangeSeries.data[i].y;
    if (lowRangeSeries.data[i].y > maxValue) maxValue = lowRangeSeries.data[i].y;
    if (highRangeSeries.data[i].y > maxValue) maxValue = highRangeSeries.data[i].y;
  }

  // Remove the "High" & "Low" line charts
  result.result.series.splice(0,2)
  result.result.series.unshift(newRangeSeries)

  // Format the tooltip
  result.result.tooltip.enabled = true;
  result.result.tooltip.shared = true;
  result.result.tooltip.crosshairs = true;
  Highcharts.setOptions({
    lang: {
      decimalPoint: '.',
      thousandsSep: ','
    }
  })

  // Set the Y axis max range
  result.result.yAxis[0].min - null;
  result.result.yAxis[0].max = Math.floor(maxValue*1.02);
})

widget.on('beforedatapointtooltip', function(widget,result,abc) {
  // Disable OOTB tooltips
  result.cancel = true; 
})