FusionCharts for Flex > Special Cases > Changing Chart Data

FusionCharts allows to change chart data and re-render the chart, after it has loaded on the user’s computer. This is possible with the help of methods, which are attached to each FusionCharts object.

In the following demonstrative example, we will change the data source of a chart when the chart is clicked upon. The XML code (below) dynamically changes the data source of the FusionCharts object.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"
 xmlns:components="com.fusioncharts.components.*" initialize="initApp()">

  <components:FusionCharts id="FC1" x="10" y="10" FCChartType="Column3D" width="500" height="300" FCDataURL="Data.xml" />

	<fx:Script>
		<![CDATA[

			import com.events.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"}
			]);

		]]>
	</fx:Script>

</s:Application>

In the above code we doen the following:

Initially, 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, which contains the datasets. The parameters are passed in the following manner:

FC1.FCParams(city_params);

Similarly, city_params is an ArrayCollection object containing the list of parameters.

Finally, FCRender method is called to render the chart.

FC1.FCRender();