ADOBE® FLEX® 3: ADVANCED DATA VISUALIZATION DEVELOPER GUIDE

ADOBE FLEX 3

Adobe Flex 3 Data Visualization Developer Guide

16

• Most of the series can determine suitable defaults for their nonprimary dimensions if no field is specified. For

example, if you do not explicitly set an

xField for the ColumnSeries, LineSeries, and AreaSeries, Flex maps the

data to the chart’s categories in the order in which the data appears in the data provider. Similarly, a BarSeries maps

the data to the categories if you do not set a

yField.

For a complete list of the fields that each data series can use, see the data series entry in Adobe Flex Language

Reference. For more information on data providers, see “Data provider controls” on page 227 in Adobe Flex 3

Developer Guide.

Sources of chart data

You can supply data to a data provider in the following ways:

• Define it in a <mx:Script> block.

• Define it in an external XML, ActionScript, or text file.

• Return it by using a We bS e r vi c e call.

• Return it by using a RemoteObject component.

• Return it by using an HTTPService component.

• Define it in MXML.

There are some limitations on the structure of the chart data, and how to reference chart data if it is constructed with

complex objects. For more information, see “Structure of chart data” on page 28.

For more information on data providers, see “Using Data Providers and Collections” on page 137 in Adobe Flex 3

Developer Guide.

Using static Arrays as data providers

Using a static Array of objects for the data provider is the simplest approach. You typically create an Array of objects,

as the following example shows:

<?xml version="1.0"?>

<!-- charts/ArrayOfObjectsDataProvider.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script><![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

private var expenses:Array = [

{Month:"January",Profit:2000,Expenses:1500,Amount:450},

{Month:"February",Profit:1000,Expenses:200,Amount:600},

{Month:"March",Profit:1500,Expenses:500,Amount:300},

{Month:"April",Profit:500,Expenses:300,Amount:500},

{Month:"May",Profit:1000,Expenses:450,Amount:250},

{Month:"June",Profit:2000,Expenses:500,Amount:700}

];

]]></mx:Script>

<mx:Panel title="Column Chart">

<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">

<mx:horizontalAxis>

<mx:CategoryAxis

dataProvider="{expenses}"

categoryField="Month"

/>

</mx:horizontalAxis>

<mx:series>

<mx:ColumnSeries

xField="Month"

ADOBE FLEX 3

Adobe Flex 3 Data Visualization Developer Guide

17

yField="Profit"

displayName="Profit"

/>

<mx:ColumnSeries

xField="Month"

yField="Expenses"

displayName="Expenses"

/>

</mx:series>

</mx:ColumnChart>

<mx:Legend dataProvider="{myChart}"/>

</mx:Panel>

</mx:Application>

You can also use MXML to define the content of an Array, as the following example shows:

<?xml version="1.0"?>

<!-- charts/ArrayOfMXMLObjectsDataProvider.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Array id="expenses">

<mx:Object

Month="January"

Profit="2000"

Expenses="1500"

Amount="450"

/>

<mx:Object

Month="February"

Profit="1000"

Expenses="200"

Amount="600"

/>

<mx:Object

Month="March"

Profit="1500"

Expenses="500"

Amount="300"

/>

<mx:Object

Month="April"

Profit="500"

Expenses="300"

Amount="500"

/>

<mx:Object

Month="May"

Profit="1000"

Expenses="450"

Amount="250"

/>

<mx:Object

Month="June"

Profit="2000"

Expenses="500"

Amount="700"

/>

</mx:Array>

<mx:Panel title="Column Chart">

<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">

<mx:horizontalAxis>

<mx:CategoryAxis

ADOBE FLEX 3

Adobe Flex 3 Data Visualization Developer Guide

18

dataProvider="{expenses}"

categoryField="Month"

/>

</mx:horizontalAxis>

<mx:series>

<mx:ColumnSeries

xField="Month"

yField="Profit"

displayName="Profit"

/>

<mx:ColumnSeries

xField="Month"

yField="Expenses"

displayName="Expenses"

/>

</mx:series>

</mx:ColumnChart>

<mx:Legend dataProvider="{myChart}"/>

</mx:Panel>

</mx:Application>

You can also define objects in MXML with a more verbose syntax, as the following example shows:

<?xml version="1.0"?>

<!-- charts/ArrayOfVerboseMXMLObjects.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Array id="expenses">

<mx:Object>

<mx:Month>January</mx:Month>

<mx:Profit>2000</mx:Profit>

<mx:Expenses>1500</mx:Expenses>

<mx:Amount>450</mx:Amount>

</mx:Object>

<mx:Object>

<mx:Month>February</mx:Month>

<mx:Profit>1000</mx:Profit>

<mx:Expenses>200</mx:Expenses>

<mx:Amount>600</mx:Amount>

</mx:Object>

<mx:Object>

<mx:Month>March</mx:Month>

<mx:Profit>1500</mx:Profit>

<mx:Expenses>500</mx:Expenses>

<mx:Amount>300</mx:Amount>

</mx:Object>

<mx:Object>

<mx:Month>April</mx:Month>

<mx:Profit>500</mx:Profit>

<mx:Expenses>300</mx:Expenses>

<mx:Amount>300</mx:Amount>

</mx:Object>

<mx:Object>

<mx:Month>May</mx:Month>

<mx:Profit>1000</mx:Profit>

<mx:Expenses>450</mx:Expenses>

<mx:Amount>250</mx:Amount>

</mx:Object>

<mx:Object>

<mx:Month>June</mx:Month>

<mx:Profit>2000</mx:Profit>

<mx:Expenses>500</mx:Expenses>

<mx:Amount>700</mx:Amount>

ADOBE FLEX 3

Adobe Flex 3 Data Visualization Developer Guide

19

</mx:Object>

</mx:Array>

<mx:Panel title="Column Chart">

<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">

<mx:horizontalAxis>

<mx:CategoryAxis

dataProvider="{expenses}"

categoryField="Month"

/>

</mx:horizontalAxis>

<mx:series>

<mx:ColumnSeries

xField="Month"

yField="Profit"

displayName="Profit"

/>

<mx:ColumnSeries

xField="Month"

yField="Expenses"

displayName="Expenses"

/>

</mx:series>

</mx:ColumnChart>

<mx:Legend dataProvider="{myChart}"/>

</mx:Panel>

</mx:Application>

A disadvantage of using a simple Array as a chart’s data provider is that you can use only the methods of the Array

class to manipulate the data. In addition, when you use an Array as a data provider, the data in it must be static. Even

if you make the Array bindable, when data in an Array changes, the chart does not reflect those changes. For more

robust data manipulation and data binding, you can use a collection for the chart data provider, as described in

“Using collections as data providers” on page 19.

Using collections as data providers

Collections are a more robust data provider mechanism than Arrays. They provide operations that include the

insertion and deletion of objects as well as sorting and filtering. Collections also support change notification. An

ArrayCollection object provides an easy way to expose an Array as an ICollectionView or IList interface.

As with Arrays, you can use MXML to define the contents of a collection, as the following example shows:

<?xml version="1.0"?>

<!-- charts/ArrayCollectionOfMXMLObjectsDataProvider.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:ArrayCollection id="expenses">

<mx:Object

Month="January"

Profit="2000"

Expenses="1500"

Amount="450"

/>

<mx:Object

Month="February"

Profit="1000"

Expenses="200"

Amount="600"

/>

<mx:Object

Month="March"

Profit="1500"