Custom Line Markers
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.
Updated 03-02-2023
