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

In this section, we'll show you how to create a scatter chart and a bubble chart by providing data through an Array..

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

Following is the code for rendering a scatter chart using Array as the medium of providing data:

<?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}" FCParams="{chartParam}" />
</ns1:FusionCharts>

<mx:Script>
<![CDATA[

import mx.collections.ArrayCollection;

// Create an ArrayCollection object for chart data
[Bindable]
private var chartData:ArrayCollection=new ArrayCollection([
{verticalLineColor:'666666', verticalLineThickness:'1'},
{label:'20', x:'20', showVerticalLine:'1'},
{label:'30', x:'30', showVerticalLine:'1'},
{label:'40', x:'40', showVerticalLine:'1'},
{label:'50', x:'50', showVerticalLine:'1'},
{label:'60', x:'60', showVerticalLine:'1'},
{label:'70', x:'70', showVerticalLine:'1'},
{label:'80', x:'80', showVerticalLine:'1'},
{label:'90', x:'90', showVerticalLine:'1'},
{label:'100', x:'100', showVerticalLine:'1'},
{seriesName:'Server 1', color:'009900', anchorSides:'3', anchorRadius:'4',
anchorBgColor:'D5FFD5', anchorBorderColor:'009900'},
{y:'2.4', x:'21'},
{y:'3.5', x:'32'},
{y:'4.1', x:'48'},
{y:'4.6', x:'56'},
{y:'4.9', x:'73'},
{y:'4.2', x:'93'},
{seriesName:'Server 2', color:'0000FF', anchorSides:'4', anchorRadius:'4',
anchorBgColor:'C6C6FF', anchorBorderColor:'0000FF'},
{y:'1.5', x:'29'},
{y:'1.5', x:'47'},
{y:'1.6', x:'57'},
{y:'1.9', x:'61'},
{y:'1.1', x:'63'},
{y:'1.7', x:'71'},
{y:'1.1', x:'77'},
{y:'1.7', x:'83'}
]);


//Create an ArrayCollection object as a data source for chart parameters
[Bindable]
private var chartParam:ArrayCollection=new ArrayCollection([
{caption:"Server Performance"},
{xAxisName:"Server Load (TPS)"},
{yAxisName:"Response Time (sec)"},
{yAxisMaxValue:'7'}
]);


]]>
</mx:Script>


</mx:Application>

In the code, we have passed data through an ArrayCollection object named chartData. It is essential that only data in appropriate format be provided to the object. We have created another ArrayCollection object named chartParams for storing the chart parameters and binding them to FCParams attribute. The following chart will be rendered upon execution of the code:

Scatter Chart

Bubble Chart

Here is the code for creating a bubble chart using Array as a medium for providing data:

<?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}" FCParams="{chartParam}" />
</ns1:FusionCharts>
<mx:Script>
<![CDATA[

import mx.collections.ArrayCollection;

// Create an ArrayCollection object for chart data
[Bindable]
private var chartData:ArrayCollection=new ArrayCollection([
{label:'0', x:'0'},
{label:'5', x:'5', showVerticalLine:'1'},
{label:'10', x:'10', showVerticalLine:'1'},
{label:'15', x:'15', showVerticalLine:'1'},
{label:'20', x:'20', showVerticalLine:'1'},
{label:'25', x:'25', showVerticalLine:'1'},
{label:'30', x:'30', showVerticalLine:'1'},
{label:'35', x:'35', showVerticalLine:'1'},
{color:'ff5904', seriesName:'1996', showValues:'0'},
{x:'30', y:'35', z:'116', name:'Mango'},
{x:'8', y:'15', z:'33', name:'Orange'},
{x:'22', y:'30', z:'72', name:'Strawberry'},
{x:'25', y:'41', z:'58', name:'Tomato'},
{x:'12', y:'17', z:'80', name:'Cucumber'},
{color:'4371AB', seriesName:'1997'},
{x:'14', y:'35', z:'116', name:'Mango'},
{x:'28', y:'25', z:'33', name:'Orange'},
{x:'32', y:'20', z:'72', name:'Strawberry'},
{x:'5', y:'21', z:'58', name:'Tomato'},
{x:'2', y:'27', z:'80', name:'Cucumber'}]);

//Create an ArrayCollection object as a data source for chart parameters
[Bindable]
private var chartParam:ArrayCollection=new ArrayCollection([
{xAxisName:'Price (Bt./kg.)'},
{yAxisName:'Original Cost (Bt./kg.)'},
{numDivLines:'4'},
{numberPrefix:'$'}]);

]]>
</mx:Script>


</mx:Application>

In the code, we have passed data through an ArrayCollection object named chartData. It is essential that only data in appropriate format be passed to the object. We have also created another ArrayCollection object named chartParams for storing the chart parameters and binding it to FCParams attribute. Now, when you run the code, the following chart will be rendered:

Scatter Chart