How to define an event for a chart

This article talks about defining an event for a chart in adhoc. Mainly, events are defined at report level, and only require when these reports are used in dashboard designer.

Let us understand how to define event for an Adhoc Report. Following are the steps as given below :

Step1: Open/Create any chart report where chart consist of pie-chart (you can use any other chart), whereas pie-chart shows region wise distribution of information.

Step2: Click Custom ->  Scripts

Step3: Now, add the JavaScript Code.

$(document).ready(function() {
    document.getElementById("main").addEventListener("click", function(d) {   
        // applicable for click event
        var t = d.target;
        if (t.classList.contains("c3-arc")) {       // code applicable for pie and donut charts
            var e = d3.select(t);
            Dashboard.setVariable("TERRITORY_2", e.data()[0].data.id);      // set a variable name like TERRITORY_2
        }
    });
});

Description:

1. $(document).ready(function(){});
   Execute after chart has been rendered.*
2. document.getElementById("main").addEventListener("click", function(d) {   });
   Add a click event to element with id ‘main’ i.e- the entire client area where chart is generated.
3. var t = d.target;
   Capture the location (region) of the click.
4. if (t.classList.contains("c3-arc")) {
var e = d3.select(t);
Dashboard.setVariable("TERRITORY_2", e.data()[0].data.id);
}
   If the location of the click is on a region which contains the class ‘c3-arc’ i.e.- on the chart, then get the id of the that region and set it to a dashboard variable ‘TERRITORY_2’.

Step4: Click inject to execute the script.

Step5: Now, click Save As to save the final report.

In case of issue, reach out to us at support@helicalinsight.com