Before you continue, we recommend that you go through "Your First Chart" section, as we start off from the concepts explained in that section.
Here's the code for creating a scatter chart using Model as data source:
<?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="Scatter" >
<ns1:FCChartData FCData="{chartData.data}" FCParams="{chartParams.param}" />
</ns1:FusionCharts>
<mx:Model id="chartData">
<chart>
<data>
<verticalLineColor>666666</verticalLineColor>
<verticalLineThickness>1</verticalLineThickness>
</data>
<data>
<label>20</label>
<x>20</x>
<showVerticalLine>1</showVerticalLine>
</data>
<data>
<label>30</label>
<x>30</x>
<showVerticalLine>1</showVerticalLine>
</data>
<data>
<label>40</label>
<x>40</x>
<showVerticalLine>1</showVerticalLine>
</data>
<data>
<label>50</label>
<x>50</x>
<showVerticalLine>1</showVerticalLine>
</data>
<data>
<label>60</label>
<x>60</x>
<showVerticalLine>1</showVerticalLine>
</data>
<data>
<label>70</label>
<x>70</x>
<showVerticalLine>1</showVerticalLine>
</data>
<data>
<label>80</label>
<x>80</x>
<showVerticalLine>1</showVerticalLine>
</data>
<data>
<label>90</label>
<x>90</x>
<showVerticalLine>1</showVerticalLine>
</data>
<data>
<label>90</label>
<x>90</x>
<showVerticalLine>1</showVerticalLine>
</data>
<data>
<label>100</label>
<x>100</x>
<showVerticalLine>1</showVerticalLine>
</data>
<data>
<seriesName>Server 1</seriesName>
<color>009900</color>
<anchorSides>3</anchorSides>
<anchorRadius>4</anchorRadius>
<anchorBgColor>D5FFD5</anchorBgColor>
<anchorBorderColor>009900</anchorBorderColor>
</data>
<data>
<y>2.4</y>
<x>21</x>
</data>
<data>
<y>3.5</y>
<x>32</x>
</data>
<data>
<y>4.1</y>
<x>48</x>
</data>
<data>
<y>4.6</y>
<x>56</x>
</data>
<data>
<y>4.9</y>
<x>73</x>
</data>
<data>
<y>4.2</y>
<x>93</x>
</data>
<data>
<seriesName>Server 2</seriesName>
<color>0000FF</color>
<anchorSides>4</anchorSides>
<anchorRadius>4</anchorRadius>
<anchorBgColor>C6C6FF</anchorBgColor>
<anchorBorderColor>0000FF</anchorBorderColor>
</data>
<data>
<y>1.5</y>
<x>29</x>
</data>
<data>
<y>1.5</y>
<x>47</x>
</data>
<data>
<y>1.6</y>
<x>57</x>
</data>
<data>
<y>1.9</y>
<x>61</x>
</data>
<data>
<y>1.1</y>
<x>63</x>
</data>
<data>
<y>1.7</y>
<x>71</x>
</data>
<data>
<y>1.1</y>
<x>77</x>
</data>
<data>
<y>1.7</y>
<x>83</x>
</data>
<data>
<y>1.0</y>
<x>93</x>
</data>
</chart>
</mx:Model>
<!--Create a Model object as a data source for the chart parameters--><mx:Model id="chartParams">
<chart>
<param>
<caption>Server Performance</caption>
<xAxisName>Server Load (TPS)</xAxisName>
<yAxisName>Response Time (sec)</yAxisName>
<yAxisMaxValue>7</yAxisMaxValue>
</param>
</chart>
</mx:Model>
</mx:Application>
In the code, we have passed data through a Model object named chartData. It is essential that only data in appropriate format be passed to the object. We have passed the chart parameters through FCParams attribute by 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 chart:
Following is the code for creating a bubble chart using Model as the data source:
<?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="Bubble" >
<ns1:FCChartData FCData="{chartData.data}" FCParams="{chartParams.param}" />
</ns1:FusionCharts>
<mx:Model id="chartData">
<chart> <data>
<label>0</label>
<x>0</x>
</data>
<data>
<label>5</label>
<x>5</x>
<showVerticalLine>1</showVerticalLine>
</data>
<data>
<label>10</label>
<x>10</x>
<showVerticalLine>1</showVerticalLine>
</data>
<data>
<label>15</label>
<x>15</x>
<showVerticalLine>1</showVerticalLine>
</data>
<data>
<label>20</label>
<x>20</x>
<showVerticalLine>1</showVerticalLine>
</data>
<data>
<label>25</label>
<x>25</x>
<showVerticalLine>1</showVerticalLine>
</data>
<data>
<label>30</label>
<x>30</x>
<showVerticalLine>1</showVerticalLine>
</data>
<data>
<label>35</label>
<x>35</x>
<showVerticalLine>1</showVerticalLine>
</data>
<data>
<seriesName>1996</seriesName>
<color>FF5904</color>
<showValues>0</showValues>
</data>
<data>
<x>30</x>
<y>35</y>
<z>116</z>
<name>Mango</name>
</data>
<data>
<x>8</x>
<y>15</y>
<z>33</z>
<name>Orange</name>
</data>
<data>
<x>22</x>
<y>30</y>
<z>72</z>
<name>Strawberry</name>
</data>
<data>
<x>25</x>
<y>41</y>
<z>58</z>
<name>Tomato</name>
</data>
<data>
<x>12</x>
<y>17</y>
<z>80</z>
<name>Cucumber</name>
</data>
<data>
<seriesName>1997</seriesName>
<color>4371AB</color>
<showValues>0</showValues>
</data>
<data>
<x>14</x>
<y>35</y>
<z>116</z>
<name>Mango</name>
</data>
<data>
<x>28</x>
<y>25</y>
<z>33</z>
<name>Orange</name>
</data>
<data>
<x>32</x>
<y>20</y>
<z>72</z>
<name>Strawberry</name>
</data>
<data>
<x>5</x>
<y>21</y>
<z>58</z>
<name>Tomato</name>
</data>
<data>
<x>2</x>
<y>27</y>
<z>80</z>
<name>Cucumber</name>
</data>
</chart>
</mx:Model>
<!--Create a Model object as a data source for the chart parameters--><mx:Model id="chartParams">
<chart>
<param>
<xAxisName>Price (Bt./kg.)</xAxisName>
<yAxisName>Original Cost (Bt./kg.)</yAxisName>
<numDivLines>4</numDivLines>
<numberPrefix>$</numberPrefix>
</param>
</chart>
</mx:Model>
</mx:Application>
In the code, we have passed data through a Model object named chartData. It is essential that only data in appropriate format be provided to the object. We have passed the chart parameters through FCParams attribute by binding another Model object named chartParams to it. chartParams stores all the chart parameters. The following chart will be rendered upon execution of the code: