In this section we'll show you how to create a multi-series 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. |
Following is the code for creating a multi-series chart in which data is provided using 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="MSColumn3D"> <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>Jan</label> </data> <data> <label>Jan</label> </data> <data> <label>Jan</label> </data> <data> <label>Jan</label> </data> <data> <seriesName>2007</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>32600</value> </data> <data> <seriesName>2006</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>Business Results 2005 v 2006 </caption> <xAxisName>Month</xAxisName> <yAxisName>Revenue</yAxisName> <numberPrefix>$</numberPrefix> <showValues>0</showValues> </param> </chart> </mx:Model> </mx:Application> |
In the code, we have passed data through a Model object named chartData. It is essential that the object contain data in valid format. We have passed the chart parameters through FCParams attribute by binding another Model object named chartParams. chartParams stores all the chart parameters. Now, if you run the above code, the following chart will be rendered: |
![]() |