FusionCharts allows you to declare event listeners for further customization. Adding an event listener is a three step process;
In the code-snippet below, we register a new event listener with the FCClickEvent attribute. The event handler method clicked is also created.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusioncharts.components.*" >
<ns1:FusionCharts id="FC1" FCChartType="Column3D" FCDataURL="Data.xml" FCClickEvent="clicked(event)" />
<mx:Script>
<![CDATA[
import com.fusioncharts.components.FCEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
private function clicked(e:FCEvent):void {
Alert.show(e.param);
}
]]>
</mx:Script>
</mx:Application>
We add the link attribute to the data source to make the objects accessible by an event. When a data-plot's link is defined with a "S-" prefix the data-plot becomes a hotspot which can be trapped by event-trapping. Clicking the data-plot would trigger an event named FCClickEvent. You can pass any value after "S-" which would be passed as a parameter of the event listener function. Thus a developer can use this value to setup further actions for drilldown. Here, we invoke a message box with a distinct value for each data-plot, which is trriggered when the end viewer clicks on each data-plot on the chart.
The chart XML would be as follows:
<chart caption='Half Yearly Sales Summary' subcaption='For the year 2008 - First Half' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
<set label='Jan' value='17400' link="S-label 1" />
<set label='Feb' value='19800' link="S-label 2" />
<set label='Mar' value='21800' link="S-label 3" />
<set label='Apr' value='23000' link="S-label 4" />
<set label='May' value='29000' link="S-label 5" />
<set label='June' value='27600' link="S-label 6" />
</chart>
All the data-plots or the column to be built using this XML would be clickable. For example if we click on column for "Mar" a event handler would be evoked and the event handler function would be passed "Label 3" as parameter. As we have coded in the even handler this parameter would be shown in a message box.
The image below shows the alert box when the column for "Mar" is clicked:
Please refer to FusionCharts API section for more detailed information on Events.