Here, we'll show how to send data to a XY plot chart using Array. For example, here we will build a scatter chart and a bubble chart using Array 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 ArrayCollection. 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" >
<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>
As you see in the above code, we passed data through a ArrayCollection object named chartData. For this, we created the object with valid chart data. Moreover, we created another ArrayCollection object - chartParams - to store the chart parameters and bind it to FCParams attribute. 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 ArrayCollection. 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" >
<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', SL:'1'},
{label:'10', x:'10', SL:'1'},
{label:'15', x:'15', SL:'1'},
{label:'20', x:'20', SL:'1'},
{label:'25', x:'25', SL:'1'},
{label:'30', x:'30', SL:'1'},
{label:'35', x:'35', SL:'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>
As you see in the above code, we passed data through a ArrayCollection object named chartData. For this, we created the object with valid chart data. Moreover, we created another ArrayCollection object - chartParams - to store the chart parameters and bind it to FCParams attribute. Now, if you run the above code you will get the following figure.