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

FusionCharts for Flex also allows developers to use existing Flex data sources: Array, XMLList, and Model. to provides data to the chart.

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

Note: FusionCharts internally can accept only XML data (XML file or XML string). FusionCharts for Flex component helps developers by making things more flexible. It offers another component or class named FCChartData that accept data from Array, XMLList, or Model and converts the data into XML.
 
Before you continue, we recommend you to go through the previous sections, as we start off from the concepts explained in those sections.
 

We have again used the first example and modified 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 of the code:

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

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