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 scatter chart using XMList objects 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[0]}" FCParams="{chartParam.param[0]}" />
</ns1:FusionCharts>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
// Create a XMLList object for chart data
[Bindable]
private var chartData:XML=
<main>
<data>
<categories verticalLineColor='666666' verticalLineThickness='1'>
<data label='20' x='20' showVerticalLine='1'/>
<data label='30' x='30' showVerticalLine='1'/>
<data label='40' x='40' showVerticalLine='1'/>
<data label='50' x='50' showVerticalLine='1'/>
<data label='60' x='60' showVerticalLine='1'/>
<data label='70' x='70' showVerticalLine='1'/>
<data label='80' x='80' showVerticalLine='1'/>
<data label='90' x='90' showVerticalLine='1'/>
<data label='100' x='100' showVerticalLine='0'/>
</categories>
<dataSet seriesName='Server 1' color='009900' anchorSides='3'
anchorRadius='4' anchorBgColor='D5FFD5' anchorBorderColor='009900' >
<data y='2.4' x='21' />
<data y='3.5' x='32' />
<data y='4.1' x='48' />
<data y='4.6' x='56' />
<data y='4.9' x='73' />
<data y='4.2' x='93' />
</dataSet>
<dataSet seriesName='Server 2' color='0000FF' anchorSides='4'
anchorRadius='4' anchorBgColor='C6C6FF' anchorBorderColor='0000FF'>
<data y='1.5' x='29'/>
<data y='1.5' x='47'/>
<data y='1.6' x='57'/>
<data y='1.9' x='61'/>
<data y='1.1' x='63'/>
<data y='1.7' x='71'/>
<data y='1.1' x='77'/>
<data y='1.7' x='83'/>
<data y='1.0' x='93'/>
</dataSet>
</data>
</main>;
//Create a XMLList object for chart parameters
[Bindable]
private var chartParam:XML=
<main>
<param>
<params caption='Server Performance'
yAxisName='Response Time (sec)'xAxisName='Server Load (TPS)'
yAxisMaxValue='7' />
</param>
</main>;
]]>
</mx:Script>
</mx:Application>
In the code, we have passed data through a XMLList object named chartData. It is essential that only data in appropriate format be passed to the object. We have also created another XMLList object named chartParams for storing the chart parameters and binding them to FCParams attribute. The following chart will be displayed when the code is executed:
Here is the code for creating a bubble chart using XMList 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="Bubble" >
<ns1:FCChartData FCData="{chartData.data[0]}" FCParams="{chartParam.param[0]}" />
</ns1:FusionCharts>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
// Create a XMLList object for chart data
[Bindable]
private var chartData:XML=
<main>
<data>
<categories>
<category label='0' x='0' />
<category label='5' x='5' showVerticalLine='1'/>
<category label='10' x='10' showVerticalLine='1'/>
<category label='15' x='15' showVerticalLine='1'/>
<category label='20' x='20' showVerticalLine='1'/>
<category label='25' x='25' showVerticalLine='1'/>
<category label='30' x='30' showVerticalLine='1'/>
<category label='35' x='35' showVerticalLine='1'/>
</categories>
<dataSet color='ff5904' seriesName='1996' showValues='0'>
<data x='30' y='35' z='116' name='Mango' />
<data x='8' y='15' z='33' name='Orange'/>
<data x='22' y='30' z='72' name='Strawberry'/>
<data x='25' y='41' z='58' name='Tomato'/>
<data x='12' y='17' z='80' name='Cucumber'/>
</dataSet>
<dataSet color='4371AB' seriesName='1997' >
<data x='14' y='35' z='116' name='Mango'/>
<data x='28' y='25' z='33' name='Orange'/>
<data x='32' y='20' z='72' name='Strawberry'/>
<data x='5' y='21' z='58' name='Tomato'/>
<data x='2' y='27' z='80' name='Cucumber'/>
</dataSet>
</data>
</main>;
//Create a XMLList object for chart parameters
[Bindable]
private var chartParam:XML=
<main>
<param>
<params xAxisName='Price (Bt./kg.)'
yAxisName='Original Cost (Bt./kg.)' numDivLines='4'
numberPrefix='$' />
</param>
</main>;
]]>
</mx:Script>
</mx:Application>
In the code, we passed data through a XMLList object named chartData. It is essential that only data in appropriate format be passed to the object. We have also created another XMLList object named chartParams, this will store the chart parameters and bind them to FCParams attribute. Now, when you run the code, the following chart will be displayed: