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"
Get ADOBE® FLEX® 3: ADVANCED DATA VISUALIZATION DEVELOPER GUIDE now with O’Reilly online learning.
O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.
