Adding Plot Lines to Chart

Introduction

The Plot Line is script that affects widgets with X and Y axis and allows the user to mark special boundaries on the chart.

The Plot Line will be behind the column bar/ line chart etc.

This Plot Line script works on V 5.7. and up.

Example

The Plot Line can be used to mark data in specific range - for example Busy Hours are between 7 and 12

Also, one can use Plot Lines to create new X and Y axis when the data has negative values

Steps

The Plot Line can be added to all Dashboards and can be used with all widgets with X and Y axis.

In order to add a Plot Line to a widget, please follow the listed steps below:

Step 1

Choose a widget that has X and Y axis to add the Plot Line to.

Go to the widget editor and edit the widget script

Step 2

In order to use Range Plot Line copy the script below and change the range “to” and “from” according to the measure values.

It’s also available to change the Range Plot Line color in the script.

widget.on("processresult", function (widget, args){
   args.result.xAxis.plotBands = [{
              color: '#E0E0E0',
              from: 0.5,
              to: 0.8 }];
   args.result.yAxis[0].plotBands = [{
              color: '#E0E0E0',
              from: 50000000,
              to: 70000000 }];
});

In order to use Plot Line as limit lines copy the script below and change and line location, width and color according to your preferences.

widget.on("processresult", function (widget, args){
   args.result.xAxis.plotLines = [{
              color: '#E0E0E0',
              width: 5,
              value: 0.5}];
   args.result.yAxis[0].plotLines = [{
              color: '#E0E0E0',
              width: 5,
              value: 40000000}];
});

In order to use the script with a text X axis value - look for the index of the text value and write in the code instead of the value

In this widget we have an example of both single plot line (red) and plot line range (blue)

The x axis shows the age range which is a text field and therefore the red line is for value '25-34' in index no.3

The blue plot line range is for values '45-64' in the range between index no.4 ('45-54') and no.6 ('55-64')

In order to use Plot Line for text x axis, copy the script below and change and line location, width and color according to your preferences

widget.on('beforeviewloaded', function(widget, ev){
	ev.options.xAxis.plotLines = [ {/*one line Plot line*/
            color: 'red',
            width: 10,
            value: 2}];
	
	ev.options.xAxis.plotBands = [ {/*range Plot line*/
            color: 'blue',
	    from: 4, 
	    to:5}];;
});

Press SAVE

Close the Script window

Step 3

Refresh the Widget and click apply

The chart should appear with the Plot Line chosen and configuration.

EcommercePlotLine.dash

Adva Adva March 28, 2017 16:20

Hi,

This is super cool!

Is there a way to add plot lines when the X axis contains dates (rather than number values)?

Thanks

Omer April 06, 2017 08:33

Hi Adva,

It is possible by transforming the date column to a textual column, and then inserting the desired dates as values in the script.

Regards,

Omer

Adva Adva April 12, 2017 09:20

Ok thanks.

Juan Cieri March 21, 2019 17:23

Hello!

Your example worked wonders for me, I thank you very much.

But now I have a question, I have a widget with two combined graphs, that is, I have a range of days with graphs of columns and another one line graph that is showing me a percentile.

So I want to apply the plot line, but it is shown in the position that is located at the 95% percentile. What would be the best way to do it?

Beforehand thank you very much.

Shawn Springstead October 30, 2019 15:27 (Edited October 30, 2019 15:29)

I used this today and figured id share since I think my use case is very common.
Sorry for formatting, I dont know how I'm supposed to make a code block, markdown dosnt seem to work.

//create a red band from start to the current date to indicate late columns
widget.on('beforeviewloaded', function(widget, ev){
var today = moment().startOf('day')

var endindex = ev.options.xAxis.categories.findIndex( (c) => {
var d = moment(c, 'MM/DD/YY')
return d >= today;
})

ev.options.xAxis.plotBands = [ {
color: '#ffd8d8',
from: -1,
to: endindex >= 1 ? endindex - 1 : ev.options.xAxis.categories.length //If no idex was found then everything is late
}];
});

This is for charts that display date on the x axis. It will highlight from the first value up to the latest date before 'today' so as to highlight values that are 'late'

M Shaw January 29, 2020 13:25

This is great thank you - is is possible to add another layer of complexity?

Say for example we used the code above to add plot lines to create 4 quadrants for Boston box on revenue.
Is is then possible to put a watermark behind each of the quadrants to help users understand.

For example behind the upper right quadrant add a graphic for 'Love' In the Lower Right add a graphic for 'grow' etc?