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

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

 

Before you continue, we recommend that you go through the previous sections, as we start off from the concepts explained in those sections.
 
Note: FusionCharts internally can accept only XML data (XML file or XML string). FusionCharts for Flex component makes things more comfortable by adding another component or class named FCChartData that accepts data from Array, XMLList, or Model. It internally converts the data into XML and finally passes the XML to the chart.
 
Here, we will follow the previous Array example. We will modify the code and bind FCData and FCParams attributes to XMLList objects. 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.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 in the highlighted portion of the above code:

  • We created an xmlList object, named chartData.
  • We stored the chart data in chartData. This xmlList object acts as the data source for the chart.
  • We used FCChartData child-node or class of FusionCharts component and bound chartData xmlList object to FCData attribute.
  • Moreover, we created another xmlList object. The chartParams stores 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 which can be used when providing data as XMLList.
 
To know more about FCData and its attributes please go through FusionCharts Properties page under Chart API Reference section.
 
The following chart will be rendered upon execution of the code: