| Handling events using FusionCharts jQuery plugin |
|
FusionCharts jQuery plugin also enables you to bind FusionCharts events using jQuery bind method. The event handler needs to be attached to the the container element of the FusionCharts object. To avoid conflict with other jQuery events having same names, "fusioncharts" has been appended to all the FusionCharts event names or types. To aid your understanding of this section, we will recommend you to go through the Overview page of FusionCharts jQuery plugin and Events page of FusionCharts 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 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 DOM Id of the chart which will raise the event. Using FusionCharts jQuery plugin, you can render FusionCharts XT anywhere within a web page, change 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 FusionCharts 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 will 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, for example, 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 |