Handling Events Using jQuery

FusionCharts JQuery Plugin can be downloaded from here.

The FusionCharts jQuery plugin enables you to bind FusionCharts events using the jQuery bind/on methods. The event handler needs to be attached to an HTML element containing the FusionCharts object.

In this section, you will be shown how you can work with the FusionCharts events using the jQuery plugin.

A chart with the dataPlotClick event configured using the jQuery plugin looks like this:

When a data plot on the chart is clicked, dataPlotClick event is fired and the event listener displays the corresponding message in the div container.

The code snippet for this chart is shown below:

$('#chart-container').insertFusionCharts({
    type: 'column2d',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            ...
        },
        "data": [
            ...
        ]
    }
});

// Display text when data plot is clicked
$('#chart-container').bind('fusionchartsdataplotclick', function(event, args) {
    $('#messageView').text("You selected " + args.toolText);
});

The complete list of events exposed by FusionCharts is available here. These events can be used with the FusionCharts jQuery plugin by prefixing them with the text “fusioncharts” and using the lowercase representation of the event name. For example, the beforeRender event will be named as fusionchartsbeforerender. This is done to avoid conflict with the existing jQuery events that might have the same names. The parameters passed to the event handler function, however, are the same.