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

This section demonstrates the process of providing data to a chart using Model.

 

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 easier by adding another component or class named FCChartData that accepts data from Array, XMLList, or Model, and converts the data into XML.
 
Like the previous examples, we will create two Model objects, one for providing chart data and the other for providing chart parameters.
 

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

      <!--Create a Model object as a data source for the chart-->
      <mx:Model id="chartData">
        <chart>
           <data>
               <label>Jan</label>
                <value>17400</value>
           </data>
           <data>
               <label>Feb</label>
                <value>19800</value>
           </data>
           <data>
               <label>Mar</label>
               <value>21800</value>
           </data>
           <data>
               <label>April</label>
                <value>23000</value>
           </data>
           <data>
               <label>May</label>
                <value>29000</value>
           </data>
           <data>
               <label>Jun</label>
                <value>27600</value>
           </data>
        </chart>

      </mx:Model>

      <!--Create the Model object as a data source for the chart parameters-->
      <mx:Model id="chartParams">
        <chart>
           <param>
               <caption>Half Yearly Sales Summary</caption>
               <subcaption>For the year 2008 - First Half</subcaption>   
               <xAxisName>Month</xAxisName>
               <yAxisName>Sales</yAxisName> 
               <numberPrefix>$</numberPrefix>
           </param>
        </chart>
      </mx:Model>


</mx:Application>

 

As you can see in the highlighted sections of the code:

  • We created a Model object, named chartData.
  • We stored the chart data into it and bound it to FCChartData.
  • We also passed the chart parameters through FCParams attribute by binding another model object chartParams to it. chartParams stores all the chart parameters.
 
Please refer to "FusionCharts and XML » Chart XML Reference" for more information on chart parameters and elements that can be used while providing data as Model.
 
To know more about FCData and its attributes please go through FusionCharts Properties page under Chart API Reference section.
 
Now execute the code to render the chart: