FusionCharts for Flex > Chart Creation > XY Plot Charts > Data from String

In this section, we'll create a scatter chart and a bubble chart by providing chart data as XML string.

Before you continue, we recommend that you go through "Your First Chart" section, as we start off from the concepts explained in that section.

Scatter Chart

The following code provides XML data to the chart by means of a string variable:

<?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" FCDataXML="{xmlData}" />

<mx:Script>
<![CDATA[

// Create a string with valid chart data and xml tags
[Bindable]
private var xmlData:String
="<chart caption='Server Performance' YAxisName='Response Time (sec)'" +
"xAxisName='Server Load (TPS)' yAxisMaxValue='7' >" +
" <categories verticalLineColor='666666' verticalLineThickness='1'>" +
" <category label='20' x='20' showVerticalLine='1'/>" +
" <category label='30' x='30' showVerticalLine='1'/>" +
" <category label='40' x='40' showVerticalLine='1'/>" +
" <category label='50' x='50' showVerticalLine='1'/>" +
" <category label='60' x='60' showVerticalLine='1'/>" +
" <category label='70' x='70' showVerticalLine='1'/>" +
" <category label='80' x='80' showVerticalLine='1'/>" +
" <category label='90' x='90' showVerticalLine='1'/>" +
" <category label='100' x='100' showVerticalLine='0'/>" +
" </categories>" +
" <dataSet seriesName='Server 1' color='009900' anchorSides='3' anchorRadius='4' anchorBgColor='D5FFD5' anchorBorderColor='009900' >" +
" <set y='2.4' x='21'/>" +
" <set y='3.5' x='32'/>" +
" <set y='4.1' x='48'/>" +
" <set y='4.6' x='56'/>" +
" <set y='4.9' x='73'/>" +
" <set y='4.2' x='93'/>" +
" </dataSet>" +
" <dataSet seriesName='Server 2' color='0000FF' anchorSides='4' anchorRadius='4' anchorBgColor='C6C6FF' anchorBorderColor='0000FF' >" +
" <set y='1.5' x='29'/>" +
" <set y='1.5' x='47'/>" +
" <set y='1.6' x='57'/>" +
" <set y='1.9' x='61'/>" +
" <set y='1.1' x='63'/>" +
" <set y='1.7' x='71'/>" +
" <set y='1.1' x='77'/>" +
" <set y='1.7' x='83'/>" +
" <set y='1.0' x='93'/>" +
" </dataSet>" +
"</chart>"; ]]>
</mx:Script>
</mx:Application>

In the code, we have passed data through a String object named xmlData. Now, when you run the code, the following chart will be rendered:

Scatter Chart

Bubble Chart

In the code (below) XML data is passed through a string variable:

 <?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" FCDataXML="{xmlData}" />

<mx:Script>
<![CDATA[

// Create a string with valid chart data and xml tags
[Bindable]
private var xmlData:String="<chart xAxisName='Price (Bt./kg.)' yAxisName='Original Cost (Bt./kg.)'" +
" numDivLines='4' numberPrefix='$'>" +
" <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'>" +
" <set x='30' y='35' z='116' name='Mango' />" +
" <set x='8' y='15' z='33' name='Orange'/>" +
" <set x='22' y='30' z='72' name='Strawberry'/>" +
" <set x='25' y='41' z='58' name='Tomato'/>" +
" <set x='12' y='17' z='80' name='Cucumber'/>" +
" </dataSet>" +
" <dataSet color='4371AB' seriesName='1997' >" +
" <set x='14' y='35' z='116' name='Mango'/>" +
" <set x='28' y='25' z='33' name='Orange'/>" +
" <set x='32' y='20' z='72' name='Strawberry'/>" +
" <set x='5' y='21' z='58' name='Tomato'/>" +
" <set x='2' y='27' z='80' name='Cucumber'/>" +
" </dataSet>" +
"</chart>";

]]>
</mx:Script>
</mx:Application>

The following chart will be displayed upon execution of the code:

Scatter Chart