Here, we'll show how to send data to a Multi-series chart using Model. For example, here we will build a scatter chart and a bubble 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 data is the same as before, only provided as a Model object. 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="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>
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.
Here we would use Model object to provide chart data and chart parameters. The data is the same as before, only provided as a Model object. 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="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>
<sl>1</sl>
</data>
<data>
<label>10</label>
<x>10</x>
<sl>1</sl>
</data>
<data>
<label>15</label>
<x>15</x>
<sl>1</sl>
</data>
<data>
<label>20</label>
<x>20</x>
<sl>1</sl>
</data>
<data>
<label>25</label>
<x>25</x>
<sl>1</sl>
</data>
<data>
<label>30</label>
<x>30</x>
<sl>1</sl>
</data>
<data>
<label>35</label>
<x>35</x>
<sl>1</sl>
</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>
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.