FusionCharts for Flex > Special Cases > Changing Chart Data

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();