Chart Events - When chart is loaded, before or after it renders, if the rendering is cancelled, upon completion of drawing, click of the entire chart etc. You can find a list of all the chart related events here.
Data Events - When data loading request is initiated, request is completed or cancelled, the actual loading event, before it is applied to chart etc. You can find a list of all the data related events here.
Drill-down Events - When a link is clicked, before and after the click, a linked chart is opened or closed etc. You can find a list of all the drill-down related events here.
Legend Events - When a legend item is clicked, rolled-over or rolled-out, range of a slider legend changes, or legend is dragged. You can find a list of all the legend related events here.
Pie and Doughnut Events - When a slicing in/out event happens, rotation start/end event happens, or rolled-over/rolled-out on center label. You can find a list of pie/doughnut related events here.
Annotation Events - When annotations are clicked on, rolled over, or rolled out. Details can be found here.
Error Events - If an error was raised by the chart, the various error events can be found here.
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.
The code for this example is listed below:
In this code, we have:
pie2dchart showing demographics of visitors.
<div>element below the chart to show additional information. This
<div>has an ID of
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 -
argumentsObjectare 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
valueof rolled-over slice using
The properties contained by the arguments are as follows:
The first argument is
eventObjectwhich 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.
The second argument is
argumentsObjectwhich 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 to understand all the events that the charts expose, and various parameters exposed to you to build interactive dashboards.