Listening to Events

Harry loves the drill-down chart that we just built for him. Now he wants to extend his other visualizations by adding more interactivity on top of it. FusionCharts Suite XT lets you configure standard interactivity for items like tooltips and legend through the chart attributes itself. However, if you need to extend those further, you can always tap into the JavaScript events raised by each chart, and then build your custom behavior.

FusionCharts Suite XT JavaScript class allows you to listen to a host of events raised by the chart. These include:

Chart Events - Triggered for instances such as when chart is loaded, before or after it renders, if the rendering is cancelled, upon completion of drawing, click of the entire chart, and so on.
Data Events - Triggered for instances such as when data loading request is initiated, request is completed or cancelled, the actual loading event, before it is applied to chart, and so on.
Drill-down Events - Triggered for instances such as when a link is clicked, before and after the click, a linked chart is opened or closed, and so on.
Legend Events - Triggered when a legend item is clicked, rolled-over or rolled-out, range of a slider legend changes, or legend is dragged.
Pie and Doughnut Events - Triggered when a slicing in/out event happens, rotation start/end event happens, or rolled-over/rolled-out on center label.
Annotation Events - Triggered when annotations are clicked on, rolled over, or rolled out.
Error Events - Triggered if an error was raised by the chart.

In this example, we will extend a pie chart for Harry, where upon click of a slice, we capture information from the chart, and display it outside the chart. While the example doesn’t reflect a true real-life scenario, it gives you an understanding of how you can use this information outside the chart and build more effective use-cases. Roll-over a pie slice to see how the text outside the chart changes.

FusionCharts will load here..

The code for this example is listed below:

<html>
<head>
<title>My First chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
 FusionCharts.ready(function () {
    var ageGroupChart = new FusionCharts({
        "type": "pie2d",
        "renderAt": "chartContainer",
        "width": "450",
        "height": "300",
        "dataFormat": "json",
        "dataSource":  {
            "chart": {
                "caption": "Split of visitors by age group",
                "subCaption": "Last year",
                "enableSmartLabels": "0",
                "showPercentValues": "1",
                "showTooltip": "0",
                "decimals": "1",
                "theme": "fint"
            },
            "data": [
                {
                    "label": "Teenage",
                    "value": "1250400"
                },
                {
                    "label": "Adult",
                    "value": "1463300"
                },
                {
                    "label": "Mid-age",
                    "value": "1050700"
                },
                {
                    "label": "Senior",
                    "value": "491000"
                }
            ]
        },
        "events": {
            "dataplotrollover": function (evt, data) {
                var txt = "Age group : " + data.categoryLabel + ",<br/>No. of visitors : " + data.value;
               document.getElementById('indicatorDiv').innerHTML = txt;
            },
            "dataplotrollout": function (evt, data) {
                document.getElementById('indicatorDiv').innerHTML =
                    "Hover on any of the pie slice to view details.";
            }
        }
    });

    ageGroupChart.render();

});
</script>
</head>
<body>
  <div id="chartContainer">FusionCharts will render here</div>
  <div>
  <div id="indicatorDiv" class="well">Hover on any of the pie slice to view details.</div>
</body>
</html>

In this code, we have:

Created a pie2d chart showing demographics of visitors.
Created a <div> element below the chart to show additional information. This <div> has an ID of indicatorDiv.
Defined event listener in the FusionCharts() constructor function to listen to 2 events. This is the quickest way to define event listeners for chart. Alternatively, you can use addEventListener() method on specific chart instances, or on all charts globally, to listen to events.
Each event generated by FusionCharts Suite XT has a string event-alias for ease of usage. The 2 events that we listen to, are:
- dataplotRollOver : Fired when the mouse moves into the drawing area of a chart.
- dataplotRollOut : Fired when the mouse moves out of the drawing area of a chart.
To each event listener method, two standard argument objects - eventObject and argumentsObject are provided, when the event is invoked. In this example, within those methods, we have used jQuery functions to hide and show the text based on user mouse interactions. We get the label and value of rolled-over slice using argumentsObject,categoryLabel and argumentsObject.value.

Event Parameters

The properties contained by the arguments are as follows:

The first argument is eventObject which provides details of the event. It is an object which consists of three properties :

* `eventId` : An unique ID given to the event.

* `eventType` : A string containing the name or the event type, for example, "rendered" etc.

* `sender` : A FusionCharts Suite XT JavaScript Object reference to the chart which has raised that event

The second argument is argumentsObject which is an object and contains details of the event. As per the type of the event the properties of parameter objects varies.

That’s it. You can now refer to the API documentation for the events in FusionCharts Suite XT to understand all the events that the charts expose, and various parameters exposed to you to build interactive dashboards.