FusionCharts for Flex > Chart Creation > Single Series > Data from Array

FusionCharts for Flex component also allows developers to use the existing Flex data sources namely, Array, XMLList and Model, to provide data to chart.

In this section we will discuss how to provide data to the chart using Array.

 
Note that FusionCharts internally can accept only XML data (XML file or XML string). FusionCharts for Flex component makes this limitation more flexible for Flex developers. It adds another component or class named FCChartData to accept data from Array, XMLList or Model. It internally converts the data into XML and finally passes the XML to the chart.
 
Before you go further, we recommend you to go through the previous pages, as we start off from the concepts explained in those pages.
 
We again use the first example and modify it to show how chart data can be provided using ArrayCollection. The code for this is given below:
 

<?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 x="10" y="10" FCChartType="Column3D">
            <ns1:FCChartData FCData="{chartData}" FCParams="{chartParams}"/>
      </ns1:FusionCharts>

      <mx:Script>
         <![CDATA[

             import mx.collections.ArrayCollection;

             //Create an ArrayCollection object as a data source for chart
             [Bindable]
             private var chartData:ArrayCollection=new ArrayCollection([
                 { label:'Jan', value:'17400' },
                 { label:'Feb', value:'19800' },
                 { label:'Mar', value:'21800' },
                 { label:'Apr', value:'23000' },
                 { label:'May', value:'29000' },
                 { label:'Jun', value:'27600' }
             ]);

             //Create an ArrayCollection object as a data source for chart parameters
             [Bindable]
             private var chartParams:ArrayCollection=new ArrayCollection([               
                    { caption:'Half Yearly Sales Summary' },
                    { subcaption:'For the year 2008 - First Half' },
                    { xAxisName:'Month' },
                    { yAxisName:'Sales' },
                    { numberPrefix:'$' }                
             ]);


         ]]>

      </mx:Script>
</mx:Application>

 

As you can see in the highlighted section above:

  • We create an ArrayCollection object, named as chartData.
  • We store the chart data in chartData. This ArrayCollection object acts as the data source for the chart.
  • We use FCChartData child-node or class of FusionCharts component and bind chartData ArrayCollection object to FCData attribute.
  • Moreover, we create another ArrayCollection object - chartParams to store the chart parameters and bind it to FCParams attribute.
 
Please refer to "FusionCharts and XML » Chart XML Reference" section to know more on how to use parameters and elements from FusionCharts XML while providing data as Array.
 
To know more about FCData and its attributes please go through the Class Structure Properties page under API Reference.

Now, if you run the above code in your Flex project, you will get the following chart: