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

In XY plot charts data is plotted as points, the position of a point is determined by x and y coordinates of the data. There are two types of XY plot charts - scatter chart and bubble chart. These two types of charts have distinct implications. In this section we will demonstrate the process of creating both types of XY plot chart by providing XML data through an external file.

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

For this example we'll plot the performance of two servers. Following is the XML code for the chart, this XML is saved in a file named data_scatter.xml and is placed in the src folder:

<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>

To build the chart from Design view, set the value of FCChartType and FCDataURL to 'Scatter' and 'data_scatter.xml' respectively. To create the chart from Source view, use the following code:

<?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" FCDataURL="data_scatter.xml" FCChartType="Scatter"/>
</mx:Application>

When you run the code, you'll get the following chart:

Scatter Chart

Bubble Chart

For this example we'll plot the price, cost and quantity of fruits sold during years 1996 and 1997. The radius of the bubbles indicates the quantity. Following is the XML for the chart; this XML is saved in a file nmed data_bubble.xml which is placed in the src folder:

<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>

To build the chart from Design view set FCChartType and FCDataURL as 'Bubble' and 'data_bubble.xml' respectively. Use the following code, if you wish to build the chart from Source view:

<?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" FCDataURL="data_bubble.xml" FCChartType="Bubble"/>
</mx:Application>

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

Bubble Chart