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

Before we build the chart, we need to have the data to be represented on the chart. For XY plot charts, we plot that data as points in a graph, based on their x and y co-ordinates. Since we will be discussing both scatter charts and bubble charts, the subsequent examples will be divided into two sections.

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 will plot the server performance of two computers. The XML data is shown below. We will save it as data_scatter.xml and store it inside 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>

We can build the chart either from design view or by entering into the source view. In the design view, we can build the chart following the way described in the page "Creating Charts » Single Series" section. Here, we need to set the value for FCChartType and FCDataURL as Scatter and data_scatter.xml respectively. However, if you wish to do the same from the source view, the following code would help you out.

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

As you can see above, we have only changed the chart type and provided appropriate chart data. That's it. Now, if you run the code, you will get a chart as the image below shows.

Scatter Chart

Bubble Chart

We have chosen to plot the price vs. cost graph of different fruits over the years 1996 and 1997. The radius of the bubbles determines quantity of each fruit. The XML data is shown below. We will save it as data_bubble.xml and store it inside 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' 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>

We can build the chart either from design view or by entering into the source view. In the design view, we can build the chart following the way described in the page "Creating Charts » Single Series" section. Here, we need to set the value for FCChartType and FCDataURL as Bubble and data_bubble.xml respectively. However, if you wish to do the same from the source view, the following code would help you out.

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

As you can see above, we have only changed the chart type and provided appropriate chart data. That's it. Now, if you run the code, you will get a chart as the image below shows.

Bubble Chart