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.
To know more about this feature, click here.
RealTime Chart Event
FusionCharts offers many events that you can use, to manipulate chart data in real time. This comes in handy when you use a data source that is frequently updated, and viewers need to see the latest data values.
You can use the realTimeUpdateComplete event to continuously update the data plots of a chart when the data source is constantly updated in real time.
Let us suppose you use the event to fetch data from an external source and continuously display a bitcoin price ticker in a line graph. The chart will look different every time the value of bitcoins changes, and these updates will be automatically made by the event.
To know more about this feature, click here.
Mouse Events
FusionCharts offers a number of mouse events, which you can use to customize the way a chart behaves whenever the viewer performs an action with a mouse. The actions can include clicking on a data plot, hovering the pointer over a plot, or even scroll through a series of data plots.
To know more about this feature, click here.
DataPlotClick event
You can use the dataPlotClick
event to configure how a chart behaves when a viewer clicks on a data plot.
Let us suppose you build a column chart to showcase countries across the globe with the largest stockpiles of oil (in terms of billions of barrels). You can configure a dataPlotClick event to display the number of barrels of oil in a country and the source of the information when the viewer clicks its corresponding data plot.
To know more about this feature, click here.
Roll over events using Annotations
In FusionCharts, you can use annotations to configure roll over events, which are triggered when the viewer slides the mouse pointer over a data plot in a chart. Roll out events, on the other hand, are triggered when the viewer slides the mouse pointer away from a data plot.
Let us suppose you build a chart to display the market share for different mobile operating systems (Android, iOS, and others) over a period of three years. You can use annotations to display a dashed line showing the growth of an operating system in percentage when the viewer hovers over one of its data plots. For instance, a viewer hovering the pointer over one of the data plots for Android will be able to see the yearly growth of the platform in percentage, displayed along a dashed line.
To know more about this feature, click here.
Dataplotroll over /roll out
You can use dataPlotRollOver
or dataPlotRollOut
events to configure how the chart should react when the user slides over a data plot or away from it.
Let us suppose you plot the daily number of footfalls at a major train station, in a spline chart. You can display the total weekly number of footfalls in a text box within the chart canvas. If you bind a dataPlotRollOver event with the text box, then whenever the viewer hovers over a data plot, you can display its value in the text box, temporarily replacing the total value. If you also bind a dataPlotRollOut event with the text box, then you can restore the total value displayed initially, whenever the viewer rolls the mouse pointer away from the data plot.
To know more about this feature, click here.