Here, we'll show how to send data to a XY plot chart using an XML string. For example, here we will build a scatter chart and a bubble chart using String 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.
We again use the first example. Here we will send data to it using String. 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" 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>
As you see in the above code, we passed data through a String object named xmlData. For this we created a string with valid FusionCharts XML. Now, if you run the above code you will get the following figure.
We again use the first example. Here we will send data to it using String. 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" 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' 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'>" +
" <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>
As you see in the above code, we passed data through a String object named xmlData. For this we created a string with valid FusionCharts XML. Now, if you run the above code you will get the following figure.