FusionCharts for Flex > Chart Creation > Single Series > Data from XML List

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

 

Before you go further, we recommend you to go through the previous pages, as we start off from the concepts explained in those pages.
 
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.
 
We would follow the previous Array example and modify the code a bit. Here, we would bind FCData and FCParams attributes to XMLList objects. Let's see how:
 

<?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.data[0]}" FCParams="{chartParams.param[0]}"/>
      </ns1:FusionCharts>

      <mx:Script>
         <![CDATA[

              //Create a xmlList object for chart data
              [Bindable]
              private var chartData:XML=
                    <main>
                          <data>
                                <data label='Jan' value='17400' />
                                <data label='Feb' value='19800' />
                                <data label='Mar' value='21800' />
                                <data label='April' value='23000' />
                                <data label='May' value='29000' />
                                <data label='Jun' value='27600' />
                          </data>
                    </main>;

              //Create a xmlList object for chart parameters
              [Bindable]
              private var chartParams:XML=
                  <main>
                        <param>
                              <params caption='Half Yearly Sales Summary' 
                                subcaption='For the year 2008 - First Half'   
                                xAxisName='Month'
                                yAxisName='Sales' numberPrefix='$' />
                        </param>

                   </main>;

         ]]>

      </mx:Script>

</mx:Application>

 

As you can see above:

  • We create an xmlList object, named as chartData.
  • We store the chart data in chartData. This xmlList object acts as the data source for the chart.
  • We use FCChartData child-node or class of FusionCharts component and bind chartData xmlList object to FCData attribute.
  • Moreover, we create another xmlList 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 XMLList.
 
To know more about FCData and its attributes please go through the Class Structure Properties page under API Reference.
 
The chart renderd would be thw same as the previous ones.