You are viewing documentation for an older version. For current documentation - click here.
Handling events using FusionCharts jQuery plugin

FusionWidgets XT uses FusionCharts jQuery plugin that takes care of all the products of the FusionCharts XT Suite including FusionWidgets XT.

FusionCharts jQuery plugin also enables you to bind FusionCharts events using the jQuery bind method. The event handler needs to be attached to the container element of the FusionCharts object. To avoid conflict with other jQuery events having same names, "fusioncharts" has been appended to the all FusionCharts event names or types.

To aid your understanding of this section, we recommend you to go through the Overview page of FusionCharts jQuery plugin and Events page of FusionWidgets XT and JavaScript > API section

The code snippet below shows how you can bind to DrawComplete event of FusionCharts:

$("#chartContainer").bind( "fusionchartsdrawcomplete", function (e, args) { 
   alert("Chart named " + e.sender.id + " has completed chart drawing." ); 
});

See it live!

In the above code, the chart container element with id "chartContainer" is set with bind method to handle the DrawComplete event of charts. The event name or event type is passed as "fusionchartsdrawcomplete" ("fusioncharts" prefixed). An anonymous function is passed to handle this event. All charts found in the "chartContainer" element will raise this event. The event handler function will show an alert with the DOMId of the chart which will raise the event.

Using the FusionCharts jQuery plugin, you can render FusionWidgets XT anywhere within a web page, change the chart type, update and retrieve chart data, update functional and cosmetic settings and use all existing features of FusionCharts.

Note that the list of FusionCharts event names or event types can be derived from FusionWidgets XT and JavaScript > API > Events page. The event names used here are similar to those listed in the "Name (Advanced model)" column of the list of events in the Events page. You just need to prefix the listed event names with "fusioncharts". This is done to avoid conflict with the pre-existing jQuery event types having same names, e.g., the event name Loaded (as listed in the Events page) needs to be passed as "fusionchartsloaded". The parameters passed to the event handler function for each event are also same as stated in the Events page.

Code examples and data files discussed in this section are present in Download Package > Code > jQuery folder