Here, we'll show how to send data to a Multi-series chart using Model. For example, here we will build a Multi-series Column 2D Chart using Model as data source. |
Before you go further, we recommend you to see the section "Your First Chart" , as we start off from the concepts explained in that page. |
Here we would use Model object to provide chart data and chart parameters. The code 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="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> |
As you see in the above code, we passed data through a Model object named chartData. For this, we created the object with valid chart data. We passed the chart parameters through FCParams attribute binding another Model object chartParams to it. chartParams stores all the chart parameters. Now, if you run the above code you will get the following figure. |
![]() |