Custom Line Markers

[intapiuser]

Introduction

This post and it’s JavaScript will Allow you to customize the data point ‘markers’ on a line chart to whichever image you would like to display.

Purpose/Benefits

Add some creativity to the standard Line chart by adding an image of your choice as the marker at the data point. Below I highlight two options on how this customization can be utilized.

Example 1

This simple scenario just replaces the default circle marker with the marker of your choice and allows you to remove the line (thus displaying only the marker.)

Example 2

This more complex scenario replaces the default marker with a custom marker but allows you to apply a condition to the value being measured and based on the condition it will display the corresponding Marker. Below if sales are over 60K, it displays one image. If above 60K it displays another image. In addition the Legend gets updated to display both images.

Steps

Step 1

Find Image you would like to use. Make sure its 10 to 20 pixels in size so it displays properly. Save image in resources folder.

Step 2

Add Line Chart widget, Select X axis and value as desired.

For example 1, use this script:

Replace file name and series number as required.

widget.on('render', function(sender,se){
// VARIABLES TO EDIT
// image location series#
 var iconImage = 'url(/resources/FILENAME.PNG)';
// image series#
 var series00 = sender.queryResult.series[0];
 
// add marker
 series00.marker = {
 symbol: iconImage, enabled: true
 };
 
 // hide line
 series00.lineWidth=0;
 
 //increase padding to allow room for image to be displayed
 sender.queryResult.legend.symbolPadding= 15
})

For example 2, use the script attached below.

Replace Image files, Series number and Condition

Step 3

Save script and reload Widget.

[ajque]

Hello! Thanks for sharing this! 
what about if we only need to change the marker color, (then keep the line visible), depending if it passes/fails the set target? 
Appreciate it 🙂