FusionCharts for Flex > Chart Creation > Stacked Charts > Data from Model

In this section we'll explain the process of creating a stacked chart by providing data through Model.

 
Before you continue, we recommend that you go through "Your First Chart" section, as we start off from the concepts explained in that section.
 

In the following code chart data and chart parameters are provided through Model.

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

     <!--Create a Model objetc as a data source for the chart-->
     <mx:Model id="chartData">

        <chart>
            <data>
                <label>Jan</label>
            </data>
            <data>
                <label>Feb</label>
            </data>
            <data>
                <label>Mar</label>
            </data>
            <data>
                <label>Apr</label>
            </data>
            <data>
                <label>May</label>
            </data>
            <data>
                <label>Jun</label>
            </data>
            <data>
                <seriesName>Product A</seriesName>
            </data>
            <data>
                 <value>27400</value>
            </data>
            <data>
                 <value>29800</value>
            </data>
            <data>
                 <value>25800</value>
            </data>
            <data>
                 <value>26800</value>
            </data>
            <data>
                 <value>29600</value>
            </data>
            <data>
                 <value>23600</value>
            </data>
            <data>
                <seriesName>Product B</seriesName>
            </data>
            <data>
                 <value>10000</value>
            </data>
            <data>
                 <value>11500</value>
            </data>
            <data>
                 <value>12500</value>
            </data>
            <data>
                 <value>15000</value>
            </data>
            <data>
                 <value>11000</value>
            </data>
            <data>
                 <value>9800</value>
            </data>
        </chart>
     </mx:Model>


     <!--Create a Model object as a data source for the chart parameters-->

     <mx:Model id="chartParams">
        <chart>
            <param>
                <caption>Company Revenue </caption>
                <xAxisName>Month</xAxisName>
                <yAxisName>Revenue</yAxisName> 
                <numberPrefix>$</numberPrefix>
                <showValues>0</showValues>
            </param>
        </chart>
     </mx:Model>


</mx:Application>
 
In the above code, data has been passed through a Model object named chartData. It is essential that only data in appropriate format be passed to the object. The chart parameters have been passed through a Model object named chartParams which is bound to FCParams attribute. The following chart will be rendered when the code is executed: