Work with Events/API

In FusionCharts, an event occurs when a user interacts with a chart in any way. There’s an event that is triggered when a chart is loaded, when a data plot is clicked, and when any part of the chart is modified, among others. An API is what lets FusionCharts execute certain actions depending on the events that are triggered.

For quick reference, here is the list of most commonly used events:

Drill-Down Charts

You can use FusionCharts XT to create drill-down charts. All charts (except for the Zoom line chart) support drill-down interactivity for data elements. This means for each chart type, the data plots in a chart (columns in column charts, pie slices in pie charts, etc.) can act as hot spots. You can create endless levels of drill-down so that you can click on a data plot to quickly open another chart that provides more details about the plot.

FusionCharts XT offers you four different events to manage the opening and closing of drill-down charts.

These are:

beforeLinkedItemOpen is fired right after the viewer clicks on a linked item and before the corresponding drill-down chart is rendered.
linkedItemOpened is fired whenever a drill-down chart is rendered.
beforeLinkedItemClosed is fired every time the viewer clicks on the Back button at the top right corner of the linked chart. This closes the drill-down chart and renders the initial (parent) chart once more.
linkedItemClosed is fired every time the viewer closes a linked chart, right before the parent chart is about to be rendered again.

Let us suppose you are plotting the number of leads acquired by an organization across different industries (travel & leisure, banking & finance, education, etc.) in a bar chart. However, you also have more in-depth data available about types of sources for the leads (email marketing, organic search, referral, etc.). Instead of building different charts for each industry sector, you can plot the data about lead sources in drill-down charts. That way, a viewer can simply click on the data plot for a particular industry to bring up a new chart containing details about the lead sources.

Data Load Event

The dataLoad event in FusionCharts is triggered when the data plots of a chart have been drawn, and the values are about to be fetched from the data source.

There are two other events under the dataLoad event, which are given below.

The dataLoadRequestCompleted event is triggered when chart data is successfully loaded from a URL (instead of a static JSON or XML file from the system).
The dataLoadError event is triggered if an error is encountered while loading data from the specified URL to the chart object.

Let us suppose you configure a chart to fetch data about the number of support tickets received by a tech support team, versus the tickets resolved. If you load the data from an external link, you can simply display a blank canvas with a button that the viewer can click, to generate the chart from updated data fetched on the fly.

Data Update Event

In FusionCharts, the data update event fetches data from an external source when triggered. You can use it when you build a chart by fetching data from an external source, which is periodically updated. If you provide a button and bind the event to it, then the viewer can simply click on that to immediately update the chart and view fresh data.

The dataUpdated event is triggered when a chart is successfully updated with the latest data values from an external source, which is updated periodically with the latest data.

Let us suppose you have built a pie chart with the market shares occupied by different web browsers (Google Chrome, Mozilla Firefox, Internet Explorer, etc.). The data displayed in the chart is being fetched from an external source. Now, the data values may be changed each time the chart is rendered. To ensure viewers do not see outdated data, you can provide a button within the chart area that a viewer can click, to fetch updated data from the source at runtime.