JavaScript's manipulation of HTML is handled through events that occur when the user or browser interacts with a page. When the page loads, it fires an event. When the user clicks a button, that click too, fires an event. More example of events would be pressing any key, closing the window, resizing the window etc. Developers can use these events to execute JavaScript coded responses, which cause buttons to close windows, messages to be displayed to users, data to be validated, and virtually take any other action.

In this section, we will discuss events in the context of FusionCharts. Events provide a way to track what is happening in and around charts created using FusionCharts. You can tap into events during the different stages in the life cycle of a chart e.g. while data load is in progress, chart rendering has been completed, user interacts with chart elements and so on.

The most important and useful way to tap in to events is by listening to them. This method allows us to assign a function which will execute when the event is fired (takes place).

Other more advanced use cases can tap into FusionCharts’ ability to remove and cancel events.

The following example demonstrates a simple case of tapping into the renderComplete event of a chart. This event is fired when the chart has been rendered successfully. We change the color of the chart columns by changing the paletteColors chart attribute inside the renderComplete event handler. Since, the animation occurs after this event, we add a timeout of 1000 milliseconds.