Changing the chart data source is a pretty easy thing to do in FusionCharts. There are already methods attached to each FusionCharts object that changes the data, parameters and re-renders the chart.
In our example, we will change the data source of a chart when the chart is clicked upon. The XML code below is used to dynamically change the data source of the FusionCharts object.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusioncharts.components.*" initialize="initApp()">
<ns1:FusionCharts id="FC1" x="10" y="10" FCChartType="Column3D" FCDataURL="Data.xml" width="500" height="300" />
<mx:Script>
<![CDATA[
import com.fusioncharts.components.FCEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
private function initApp():void {
FC1.addEventListener("FCClickEvent",clicked);
}
private function clicked(e:FCEvent):void {
FC1.FCData(city_data);
FC1.FCParams(city_params);
FC1.FCRender();
}
// Providing chart data as ArrayCollection to chart
[Bindable]
private var city_data:ArrayCollection = new ArrayCollection([
{label:'USA',value:'96000', link:'S-USA'},
{label:'Germany',value:'90000', link:'S-Germany'},
{label:'Austria',value:'58000', link:'S-Austria'},
{label:'Brazil',value:'50000', link:'S-Brazil'},
{label:'UK',value:'28000', link:'S-UK'},
{label:'Sweden',value:'25000', link:'S-Sweden'}]);
// Providing chart parameters as ArrayCollection to chart
[Bindable]
private var city_params:ArrayCollection=new ArrayCollection([
{caption:"Sales by Country"},
{subcaption:"(Click country item for details)"},
{numberPrefix:"$"},
{showValues:"0"}]);
]]>
</mx:Script>
</mx:Application>
To start off, we bind the event listener clicked to the click event of the FusionCharts file.
FC1.addEventListener("FCClickEvent",clicked);
The clicked method calls upon FCData, FCParams and FCRender of the FusionCharts object to perform the various functions. The data is set using the following method.
FC1.FCData( city_data );
Here city_data is an ArrayCollection object containing the datasets. The parameters are passed in the following manner:
FC1.FCParams(city_params);
Similarly, city_params is an ArrayCollection object containing the parameter list. Finally the chart is re-rendered using the code
FC1.FCRender();