Implementing a Highlighting of Chart Elements on Click

Owned by Tim Schauder
Last updated: Sept 13, 2016

With the feature "highlighting" of the graphomate charts you can highlight the deviation between two elements of the base chart. This article describes how to use the this feature together with scripting methods to implement a highlight via click at runtime. It will be activated by a sequence of two clicks. The first clicked element serves as base and the second one will be the measure of the deviation.

Step-by-Step-Guide

  1. Define a single Highlight as shown in the screenshot below (values of “start element / end element” and “start series / end series” are just examples. It’s also possible to use any other element or series of the chart).


  2. Define a global script variable (ie. “step”) – type “integer” – default value “0”.


  3. Insert the following script in “on element clicked” – method of the chart and replace the name of the component (GRAPHOMATECHART_1) with the one from your application.

    on element clicked
    /*Explanation: If the user clicks an element for the first time, the variable “step” is 0. 
Because of this the StartIndex and the StartSeries are set to the clicked values. 
After this the variable “step” is changed to “1”. If the user clicks on another element, 
the EndIndex and the EndSeries are set to the clicked values. After this the variable “step” 
is changed to “0” again, which means that the next click on an element will change the 
StartIndex and the StartSeries again.*/

if (step==0){
	GRAPHOMATECHART_1.setHighlightStartIndex(GRAPHOMATECHART_1.getClickedElementIndex());	
	GRAPHOMATECHART_1.setHighlightStartSeries(GRAPHOMATECHART_1.getClickedSeriesIndex());
	step = 1;
}
else if (step==1){
	GRAPHOMATECHART_1.setHighlightEndIndex(GRAPHOMATECHART_1.getClickedElementIndex());
	GRAPHOMATECHART_1.setHighlightEndSeries(GRAPHOMATECHART_1.getClickedSeriesIndex());
	step = 0;
}