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: |
![]() |