FusionCharts for Flex > Chart Creation > XY Plot Charts > Data from XML List

Here, we'll show how to send data to a plot chart using XMLList. For example, here we will build a scatter chart and a bubble chart using XMLList as a 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.

Scatter Chart

We continue from the array example and modify the code a bit. Here, we would bind FCData and FCParams attributes to XMLList objects. 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[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>

As you see in the above code, we passed data through a XMLList object named chartData. For this, we created the object with valid chart data. We also created another XMLList object, chartParams, to store the chart parameters and bind it to FCParams attribute. Now, if you run the above code you will get the following figure.

Bubble Chart

We continue from the array example and modify the code a bit. Here, we would bind FCData and FCParams attributes to XMLList objects. 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[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' sL='1'/>
<category label='10' x='10' sL='1'/>
<category label='15' x='15' sL='1'/>
<category label='20' x='20' sL='1'/>
<category label='25' x='25' sL='1'/>
<category label='30' x='30' sL='1'/>
<category label='35' x='35' sL='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>

As you see in the above code, we passed data through a XMLList object named chartData. For this, we created the object with valid chart data. We also created another XMLList object, chartParams, to store the chart parameters and bind it to FCParams attribute. Now, if you run the above code you will get the following figure.