cancel
Showing results for 
Search instead for 
Did you mean: 

Line/Area Chart - Creating an Area Range

Ophir_Buchman
12 - Data Integration
12 - Data Integration

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:

Ophir_Buchman_0-1648707341231.png

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:

Ophir_Buchman_1-1648707745451.png

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

 

0 REPLIES 0