Adobe Datavis Flex 3.0 Advanced Data Visualization 3

User Manual: adobe Adobe Flex - 3.0 - Advanced Data Visualization Free User Guide for Adobe Flex Software, Manual

Open the PDF directly: View PDF .
Page Count: 402

Download
Open PDF In Browser	View PDF

ADVANCED DATA VISUALIZATION
DEVELOPER GUIDE

© 2008 Adobe Systems Incorporated. All rights reserved.
Adobe® Flex® 3 Data Visualization Developer Guide
If this guide is distributed with software that includes an end-user agreement, this guide, as well as the software described in it, is furnished under license and may be used or
copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the
content in this guide is protected under copyright law even if it is not distributed with software that includes an end-user license agreement.
The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide.
Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unauthorized incorporation of such
material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner.
Any references to company names in sample templates are for demonstration purposes only and are not intended to refer to any actual organization.
Adobe, the Adobe logo, Flash, and Flex, are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
Windows is either a registered trademark or trademarks of Microsoft Corporation in the United States and/or other countries. Java is a trademark or registered trademark of Sun
Microsystems, Inc. in the United States and other countries. All other trademarks are the property of their respective owners.
This product includes software developed by the Apache Software Foundation (http://www.apache.org/).
This product contains either BISAFE and/or TIPEM software by RSA Data Security, Inc.
The Flex Builder 3 software contains code provided by the Eclipse Foundation (“Eclipse Code”). The source code for the Eclipse Code as contained in Flex Builder 3 software
(“Eclipse Source Code”) is made available under the terms of the Eclipse Public License v1.0 which is provided herein, and is also available at http://www.eclipse.org/legal/eplv10.html.
Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA.
Notice to U.S. government end users. The software and documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial Computer
Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R.
§12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being
licensed to U.S. Government end users (a) only as Commercial items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions
herein. Unpublished-rights reserved under the copyright laws of the United States. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity
laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212),
and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250 ,and 60-741. The affirmative action clause and
regulations contained in the preceding sentence shall be incorporated by reference.

iii

Contents
Part 1: Flex Charting Components
Chapter 1: Introduction to Charts
About charting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Using the charting controls
About the series classes

............................................................... 3

................................................................... 8

About the axis classes

..................................................................... 9

About charting events

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Creating charts in ActionScript
Defining chart data

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Chapter 2: Chart Types
Using area charts

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

Using bar charts

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Using bubble charts

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Using candlestick charts
Using column charts

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

Using HighLowOpenClose charts
Using line charts

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Using pie charts

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

Using plot charts

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

Using multiple data series
Using multiple axes

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Chapter 3: Formatting Charts
Applying chart styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Setting padding properties

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

Formatting tick marks

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

Formatting axis lines

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

Using strokes with chart controls
Using fills with chart controls

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Using filters with chart controls

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Using chart grid lines

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

Positioning chart axes

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Rotating chart axis labels

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

Skinning ChartItem objects

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

Formatting Legend controls

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

Chapter 4: Displaying Data and Labels
Working with axes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
About the CategoryAxis class

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

About the NumericAxis class

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

Adding axis titles

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

iv

Defining axis labels
Using data labels

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

Using DataTip objects
Using per-item fills

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

Using the minField property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Stacking charts

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197

Using Legend controls

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

Chapter 5: Using Events and Effects in Charts
Handling user interactions with charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Using effects with charts
Drilling down into data
Selecting chart items

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240

Drawing on chart controls

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

Part 2: Advanced Data Grid Controls and Automation Tools
Chapter 6: Using the AdvancedDataGrid Control
About the AdvancedDataGrid control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Sorting by multiple columns
Styling rows and columns

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

Selecting multiple cells and rows

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

Hierarchical and grouped data display
Displaying hierarchical data

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

Displaying grouped data

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296

Creating column groups

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309

Using item renderers with the AdvancedDataGrid control
Keyboard navigation

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320

Chapter 7: Creating OLAP Data Grids
About OLAP data grids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Creating an OLAP schema
Creating OLAP queries

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333

Writing a query for a simple OLAP cube

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338

Writing a query for a complex OLAP cube

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344

Creating multidimensional axis in an OLAPDataGrid control
Configuring the display of an OLAPDataGrid

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352

Chapter 8: Creating Applications for Testing
About automating applications with Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Tasks and techniques for testable applications overview
Compiling applications for testing
Creating testable applications

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360

Understanding the automation framework
Instrumenting events

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365

Instrumenting custom components

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367

Instrumenting composite components

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373

v

Example: Instrumenting the RandomWalk custom component for QTP

. . . . . . . . . . . . . . . . . . . 375

Chapter 9: Creating Custom Agents
About creating custom agents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381
About the automation APIs

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382

Understanding the automation flow
Creating agents

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387

Creating a recording agent

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388

1

Part 1: Flex Charting Components
Topics

Introduction to Charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Chart Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Formatting Charts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Displaying Data and Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Using Events and Effects in Charts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

2

Chapter 1: Introduction to Charts
Displaying data in a chart or graph can make data interpretation much easier for users of the applications that you
develop with the Adobe® Flex® product line. Rather than present a simple table of numeric data, you can display a
bar, pie, line, or other type of chart using colors, captions, and a two-dimensional representation of your data.
The charting controls are a feature of Adobe Flex® Builder™ Professional. You can create charts in your Flex applications with Flex Builder Standard, but the charting controls will have a watermark on them.
Topics

About charting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Using the charting controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
About the axis classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
About charting events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Creating charts in ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Defining chart data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

About charting
Data visualization lets you present data in a way that simplifies data interpretation and data relationships. Charting
is one type of data visualization in which you create two-dimensional representations of your data. Flex supports
some of the most common types of two-dimensional charts (such as bar, column, and pie charts) and gives you a
great deal of control over the appearance of charts.
A simple chart shows a single data series, where a series is a group of related data points. For example, a data series
might be monthly sales revenues or daily occupancy rates for a hotel. The following chart shows a single data series
that corresponds to sales over several months.

ADOBE FLEX 3 3
Adobe Flex 3 Data Visualization Developer Guide

Another chart might add a second data series. For example, you might include the percentage growth of profits over
the same four business quarters. The following chart shows two data series—one for sales and one for profit.

Flex Builder Professional is required to use Flex charting controls without watermarks.

Using the charting controls
Flex charting controls lets you create some of the most common chart types, and also lets you customize the
appearance of your charts. The charting controls are located in the mx.charts.* package.
The following table lists the supported chart types, the name of the control class, and the name of the series class that
you use to define what data appears in each chart.
Chart type

Chart control class

Chart series class

Area

AreaChart

AreaSeries

Bar

BarChart

BarSeries

Bubble

BubbleChart

BubbleSeries

Candlestick

CandlestickChart

CandlestickSeries

Column

ColumnChart

ColumnSeries

HighLowOpenClose

HLOCChart

HLOCSeries

Line

LineChart

LineSeries

Pie

PieChart

PieSeries

Plot

PlotChart

PlotSeries

All chart controls, except the PieChart class, are subclasses of the CartesianChart class. Cartesian charts are charts
that typically represent a set of data points in rectangular-shaped, two-dimensional space. The PieChart class is a
subclass of the PolarChart class, which represents data in circular space.
All chart controls inherit basic charting characteristics from the ChartBase class.
A chart control typically has the following structure in MXML:


ADOBE FLEX 3 4
Adobe Flex 3 Data Visualization Developer Guide




























The following table describes the parts of the chart in more detail:
Part

Description

Chart

(Required) Defines one or two data providers for the chart. Also defines the chart type and sets data tips, mouse sensitivity, gutter styles, and axis styles.
This is the top-level tag for a chart control. All other tags are child tags of this tag.

Series

(Required) Defines one or more data series to be displayed on the chart. Also sets the strokes, fills, and renderers (or skins)
of the data series, as well as the strokes and fills used by the chart’s legend for each series.
You can also define a second set of series for each chart, to show multiple data series in a single chart.
Each series in a chart can have its own data provider.

Axes

Sets the axis type (numeric or category). Also defines the axis labels, titles, and style properties such as padding.
You can also define axes for the second set of series, if there is one.

Axes renderer

(Optional) Sets tick placement and styles, enables or disables labels, and defines axis lines, label rotation, and label gap.
You can also define an axis renderer for a second series, if there is one.

Elements

(Optional) Defines grid lines and extra elements to appear on the chart.

For each chart type, Flex supplies a corresponding chart control and chart series. The chart control defines the chart
type, the data provider that supplies the chart data, the grid lines, the text for the chart axes, and other properties
specific to the chart type. The dataProvider property of the chart control determines what data the chart uses.
A data provider is a collection of objects. It can be an Array of objects or any object that implements the collections
API. A data provider can also be an XMLList object with XML nodes, such as the result of an E4X query.

ADOBE FLEX 3 5
Adobe Flex 3 Data Visualization Developer Guide

The chart components use a flat, or list-based, data provider similar to a one-dimensional array. The data provider
can contain objects such as Strings and Numbers, or even other objects. For more information on supplying chart
data, see “Defining chart data” on page 15.
You use the chart series to identify which data from the data provider the chart displays. A data provider can contain
more data than you want to show in your chart, so you use the chart’s series to specify which points you want to use
from the data provider. You can specify a single data series or a second series. You can also use the chart series to
define the appearance of the data in the chart.
All chart series inherit the data provider from the chart unless they have a data provider explicitly set on themselves.
If you set the value of the dataProvider property on the chart control, you are not required to set the property value
on the series. You can, however, define different data providers for each series in a chart.
For example, to create a pie chart, you use the PieChart control with the PieSeries chart series. To create an area chart,
you use the AreaChart control with the AreaSeries chart series, as the following example shows:

















This example defines an array containing a single  tag. The  tag specifies the
single data series that is displayed in the chart.
You can add a second  tag to display two data series, as the following example shows:


















You are not required to define a data provider on the chart control. Each series can have its own data provider, as the
following example shows:



















To dynamically size the chart to the size of the browser window, set the width and height attributes to a percentage
value, as the following example shows:














ADOBE FLEX 3 8
Adobe Flex 3 Data Visualization Developer Guide






If you want the chart to resize when the window resizes, set the size of the chart’s parent containers using percentage
values too.

About the series classes
The chart series classes let you specify what data to render in a chart control. All series classes are subclasses of the
mx.charts.chartClasses.Series class.
Each chart type has it’s own series class; for example, a BarChart control has a BarSeries class that defines the data to
render in the BarChart. A PieChart control has a PieSeries.
The primary purpose of a series is to define what data to render in the chart. You use the series to define what field
in a data provider the chat should use to render chart items on the X and Y axes. You use the xField property (for
the horizontal axis) and the yField property (for the vertical axis) to define these fields.
Each series is made up of an Array of series items. The classes that define the series items are specific to each series
type. For example, a BarSeries is made up of BarSeriesItem objects. A ColumnSeries is made up of
ColumnSeriesItem objects. The series items encapsulate all the information about the particular data point,
including the minimum value, the fill, the x value and the y value.
When you create a new series, you typically define the displayName of that series. This property represents the
series to the user in labels such as DataTip objects.
A BarChart typically specifies one or more BarSeries objects that define what set of bars to render in the chart. By
default, bars and columns are clustered. However, you can also define alternate ways to group, or "stack", series in
the chart control. For example, AreaSeries, ColumnSeries, and BarSeries can be stacked or overlaid. They can also
render as 100% charts. You can further control how multiple series are grouped by using sets. For example, for a
group of BarSeries objects, you use the BarSet class; for a group of ColumnSeries objects, you use the ColumnSet
class. For more information on grouping series, see “Stacking charts” on page 198.
Most charts use only one kind of series. However, you can specify a second series for a chart, so that a chart control
can have a series of bars in addition to a line that "floats" over it. This is useful for rendering trend-lines or showing
different types of data on a single chart for comparison analysis. For more information, see “Using multiple data
series” on page 73.
You use the series classes to define the appearance of the chart items. You can change the fill of all series items by
using the fill property on the series. In addition, you can define the fill of each item in a series by using the fills
property. You can also customize the fill that each chart item has based on its value by using the fillFunction on the
series. For more information “Using fills with chart controls” on page 105.
You can also apply filters to series to give them effects such as drop shadows, blurs, and glows. For more information,
see “Using filters with chart controls” on page 116.
You can add data labels to series items. You do this by setting the value of the labelPosition property on the series.
For most series, possible values of labelPosition are inside and outside, which draw the labels inside the chart
item and outside the chart item, respectively. For a PieSeries, you can also set the labelPosition property to other
values that include callout and insideWithCallout.
You can customize data labels by using a labelFunction. This callback function takes arguments that define the
series item and returns a String that is then rendered on the series item.
For information about adding data labels to your charts, see “Using data labels” on page 171.

ADOBE FLEX 3 9
Adobe Flex 3 Data Visualization Developer Guide

Series also let you set a minField value. This property lets you specify a minimum value that the series displays. For
more information, see “Using the minField property” on page 196.

About the axis classes
Flex charting controls support the following types of axes:
CategoryAxis class maps a set of values (such as stock ticker symbols, state names, or demographic
categories) to the axis. You use the  tag to define axis labels that are grouped by logical associations and that are not necessarily numeric. For example, the month names used in the chart in “About charting” on
page 2 could be defined as a CategoryAxis class.
CategoryAxis

LinearAxis A LinearAxis class maps numeric data to the axis. You use the  child tag of the
 or  tags to customize the range of values displayed along the axis, and

to set the increment between the axis labels of the tick marks.
LogAxis A LogAxis class maps numeric data to the axis logarithmically. You use the  child tag of the
 or  tags. Labels on the logarithmic axis are even powers of 10.

DateTimeAxis A DateTimeAxis class maps time-based values, such as hours, days, weeks, or years, along a chart axis.

You use the  tag to define the axis labels.
The DateTimeAxis, LogAxis, and LinearAxis are all of type NumericAxis, because they are used to represent
numeric values. In many cases, you are required to define only one axis as being a NumericAxis or a CategoryAxis.
Flex assumes that all axes not explicitly defined are of type LinearAxis. However, to use decorations such as DataTip
labels and legends, you might be required to explicitly define both axes.
There are exceptions. For a PlotChart control, both axes are considered a LinearAxis, because the data point is the
intersection of two coordinates. So, you are not required to specify either axis, although you can do so to provide
additional settings, such as minimum and maximum values. When you create PieChart controls, you also do not
specify either axis, because PieChart controls use a single set of data points to draw wedges that represent a
percentage of the whole. In PieChart controls, you define a nameField on the chart’s data series, rather than a
categoryField or name on the axes for labels and legends.
Each axis can have one or more corresponding AxisRenderer objects (specified by the horizontalAxisRenderers
or verticalAxisRenderers properties) that define the appearance of axis labels and tick marks. In addition to
defining formats, you can use an AxisRenderer class to customize the value of the axis labels. For more information,
see “Formatting Charts” on page 81.
The appearance and contents of axis labels are defined by the  (x-axis) and
 (y-axis) tags and the renderers for these tags ( tags within the
 and  tags). These tags not only define the data
ranges that appear in the chart, but also map the data points to their names and labels. This mapping has a large
impact on how the Data Management Service chart renders the values of DataTip labels, axis labels, and tick marks.
By default, Flex uses the chart type and orientation to calculate the labels that appear along the x-axis and y-axis of
the chart. The labels of a column chart, for example, have the following default values:
The minimum number of labels is 0, and the maximum is the number of items in the data series that
is being charted.

The x-axis

The minimum value on the y-axis is small enough for the chart data, and the maximum value is large
enough based to accomodate the chart data.

The y-axis

For more information about chart axes, see “Working with axes” on page 145.

ADOBE FLEX 3 10
Adobe Flex 3 Data Visualization Developer Guide

About charting events
The chart controls include events that accommodate user interaction with data points in charts. These events are
described in “Using Events and Effects in Charts” on page 210.

Creating charts in ActionScript
You can create, destroy, and manipulate charts using ActionScript just as you can any other Flex component.
When working in Script blocks or in separate ActionScript class files, you must be sure to import all appropriate
classes. The following set of import statements defines the most common cases:
import
import
import
import
import

mx.collections.*;
mx.charts.*;
mx.charts.series.*;
mx.charts.renderers.*;
mx.charts.events.*;

To create a chart in ActionScript, use the new keyword. You can set properties on the chart object as you would in
MXML. You assign a data provider with the dataProvider property. To add a data series to the chart, you define a
new data series of the appropriate type. To apply the series to your chart, use the chart’s series property. You can
specify the category axis settings using the CategoryAxis class. The following example defines a BarChart control
with two series:







This example replaces the existing Array of series with the new series.
You can use a similar technique to add data series to your charts rather than replacing the existing ones. The
following example creates two ColumnSeries and sets their data providers. It then creates an Array that holds the
existing chart series, and pushes the new series into that Array. Finally, it sets the value of the chart’s series property
to be the new Array of series.





















ADOBE FLEX 3 13
Adobe Flex 3 Data Visualization Developer Guide

By using ActionScript, you can also define a variable number of series for your charts. The following example uses
E4X syntax to extract an Array of unique names from the data. It then iterates over this Array and builds a new
LineSeries for each name.





Tom
08/22/2006
5.5


Tom
08/23/2006
6


Tom
08/24/2006
4.75


Dick
08/22/2006
6


Dick
08/23/2006
8


Dick
08/24/2006
7.25


Jane
08/22/2006
6.5


Jane
08/23/2006
9


Jane
08/24/2006
3.75

;

ADOBE FLEX 3 14
Adobe Flex 3 Data Visualization Developer Guide

public function initApp():void {
var wholist:Array = new Array();
for each(var property:XML in myXML.item.who) {
// Create an Array of unique names.
if (wholist[property] != property)
wholist[property] = property;
}
// Iterate over names and create a new series
// for each one.
for (var s:String in wholist) {
// Use all items whose name matches s.
var localXML:XMLList = myXML.item.(who==s);
// Create the new series and set its properties.
var localSeries:LineSeries = new LineSeries();
localSeries.dataProvider = localXML;
localSeries.yField = "hours";
localSeries.xField = "when";
// Set values that show up in dataTips and Legend.
localSeries.displayName = s;
// Back up the current series on the chart.
var currentSeries:Array = myChart.series;
// Add the new series to the current Array of series.
currentSeries.push(localSeries);
// Add the new Array of series to the chart.
myChart.series = currentSeries;
}
// Create a DateTimeAxis horizontal axis.
var hAxis:DateTimeAxis = new DateTimeAxis();
hAxis.dataUnits = "days";
// Set this to false to display the leftmost label.
hAxis.alignLabelsToUnits = false;
// Take the date in its current format and create a Date
// object from it.
hAxis.parseFunction = createDate;
myChart.horizontalAxis = hAxis;
}
public function createDate(s:String):Date {
// Reformat the date input to create Date objects
// for the axis.
var a:Array = s.split("/");
// The existing String s is in the format "MM/DD/YYYY".
// To create a Date object, you pass "YYYY,MM,DD",
// where MM is zero-based, to the Date() constructor.
var newDate:Date = new Date(a[2],a[0]-1,a[1]);
return newDate;
}
]]>






ADOBE FLEX 3 15
Adobe Flex 3 Data Visualization Developer Guide

Defining chart data
The chart controls have a dataProvider property that defines the data for the chart. The data provider creates a
level of abstraction between Flex components and the data that you use to populate them. You can populate multiple
charts from the same data provider, switch data providers for a chart at run time, and modify the data provider so
that changes are reflected by all charts using the data provider.

Using chart data
To use the data from a data provider in your chart control, you map the xField and yField properties of the chart
series to the fields in the data provider. The xField property defines the data for the horizontal axis, and the yField
property defines the data for the vertical axis.
For example, assume your data provider has the following structure:
{Month: "Feb", Profit: 1000, Expenses: 200, Amount: 60}

You can use the Profit and Expenses fields and ignore the Month field by mapping the xField property of the
series object to one field and the yField property of the series object to another field, as the following example
shows:


The result is that each data point is the intersection of the Profit and Expenses fields from the data provider.
To place the data points into a meaningful grouping, you can choose a separate property of the data provider as the
categoryField. In this case, to sort each data point by month, you map the Month field to the categoryField

property of the horizontal axis:




In some cases, depending on the type of chart and the type of data you are representing, you use either the xField
property or the yField property to define the data series. In a ColumnChart control, for example, the yField
property defines the height of the column. You do not have to specify an xField property. To get an axis label for
each column, you specify a categoryField property for the horizontalAxis.
The data provider can contain complex objects, or objects within objects. For example, a data provider object can
have the following structure:
{month: "Aug", close: {High:45.87,Low:12.2}, open:25.19}

In this case, you cannot simply refer to the field of the data provider by using a categoryField, xField, or similar
flat naming convention. Rather, you use the dataFunction of the series or axis to drill down into the data provider.
For more information on working with complex data, see “Structure of chart data” on page 28.
When you use chart data, keep the following in mind:
You usually match a series with a data provider field if you want to display that series. However, this is not always
true. If you do not specify an xField for a ColumnSeries, Flex assumes the index is the value. If you do not specify
a yField, Flex assumes the data provider is a collection of y values, rather than a collection of objects that have y
values. For example, the following series renders correctly for a ColumnChart control:
1



• Some series use only one field from the data provider, while others can use two or more. For example, you specify
only a field property for a PieSeries object, but you can specify an xField and a yField for a PlotSeries object and
an xField, yField, and radiusField for a BubbleSeries object.

ADOBE FLEX 3 16
Adobe Flex 3 Data Visualization Developer Guide

• 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  block.

•
•

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

•
•

Return it by using a RemoteObject component.

•

Define it in MXML.

Return it by using a WebService call.
Return it by using an HTTPService component.

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:


















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

























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





January
2000
1500
450


February
1000
200
600


March
1500
500
300


April
500
300
300


May
1000
450
250


June
2000
500
700

ADOBE FLEX 3 19
Adobe Flex 3 Data Visualization Developer Guide

















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:

























Or you can define an object in MXML usig child tags rather than attributes:





January
2000
1500
450


February

ADOBE FLEX 3 21
Adobe Flex 3 Data Visualization Developer Guide

1000
200
600


March
1500
500
300


April
500
300
300


May
1000
450
250


June
2000
500
700
















You can create an ArrayCollection object in ActionScript. If you define an ArrayCollection in this way, ensure that
you import the mx.collections.ArrayCollection class, as the following example shows:


















If your data is in an Array, you can pass the Array to the ArrayCollection’s constructor to convert it to an ArrayCollection. The following example creates an Array, and then converts it to an ArrayCollection:





ADOBE FLEX 3 23
Adobe Flex 3 Data Visualization Developer Guide















Similarly, you can use an  tag to perform the conversion:



















The data in ArrayCollections can be bound to the chart’s data provider so that the data can be updated in real-time.
The following example creates an object with elapsed time and total memory usage every second. It then pushes that
new object onto an ArrayCollection that is used as the data provider for a line chart. As a result, the chart itself
updates every second showing memory usage of Adobe® Flash® Player or Adobe® AIR™ over time.











ADOBE FLEX 3 25
Adobe Flex 3 Data Visualization Developer Guide








Data collections can be paged, which means that data is sent to the client in chunks as the application requests it. But
Flex charting controls display all of the data all of the time, by default. As a result, when you use data collections with
charts, you should disable the paging features or use non-paged views of the data collection for chart data. For more
information on using collections, see “Using Data Providers and Collections” on page 137 in Adobe Flex 3 Developer
Guide.
Using an XML file as a data provider

You can define data provider data in a structured file. The following example shows the contents of the data.xml file:


81768
60310
43357


81156
58883
49280



You can load the file directly as a source of a Model, as the following example shows:



















You can use more complex XML to define the data provider’s data. For example, an XML-based data provider can
have nested tags. In that case, however, you must use a dataFunction to define the fields that the chart uses. For
more information, see “Structure of chart data” on page 28.
To use an ArrayCollection as the chart’s data provider, you convert the Model to an ArrayCollection, as the following
example shows:





ADOBE FLEX 3 26
Adobe Flex 3 Data Visualization Developer Guide

import mx.utils.ArrayUtil;


















You can also define the XML file as a URL for an HTTPService component, and then bind the HTTPService result
directly to the chart’s data provider, as the following example shows:



















To use an ArrayCollection, you convert the HTTPService result to an ArrayCollection, as the following example
shows:




















You can also set the result format of the HTTPService to E4X, and then use it as a source for an XMLListCollection
object, as the following example shows:





















Randomly generating chart data

A useful way to create data for use in sample charts is to generate random data. The following example generates test
data for use with the chart controls:



ADOBE FLEX 3 28
Adobe Flex 3 Data Visualization Developer Guide














Structure of chart data
In most cases, the data that is used as the chart’s data provider is made up of scalar values. For example, objects
contain a single set of fields:
{month: "Aug", close: 45.87, open:25.19},

ADOBE FLEX 3 29
Adobe Flex 3 Data Visualization Developer Guide

Or XML data contains a single set of child tags in a flat structure:

Aug
45.87
25.19


In these cases, you assign the data provider’s fields to items in the chart by using the xField and yField for the
series, or the categoryField for the axis; for example:



However, the structure of the chart data can be made up of more complex objects, such as objects within objects or
XML with nested child tags. For example, you can embed an object within an object:
{month: "Aug", close: {High:45.87,Low:12.2}, open:25.19}

Or use nested tags in an XML object:


Aug


45.87
25.19



In these cases, you cannot refer to the target data by using the flat naming such as yField="close". You also cannot
use dot notation. For example, yField="values.close" or categoryField="data.month" are not valid. Instead,
you must use a dataFunction method to define which ChartItem fields are populated by the data provider.
For the CategoryAxis class, the dataFunction has the following signature:
function_name(axis:AxisBase, item:Object):Object

Where axis is the base class for the current axis, and item is the item in the data provider.
For the Series class, the dataFunction has the following signature:
function_name(series:Series, item:Object, fieldName:String):Object

Where series is a reference to the current series, item is the item in the data provider, and fieldName is the field
in the current ChartItem that will be populated.
The following example creates two functions that access complex data for both the axis and the series:


















Changing chart data at run time
Using ActionScript, you can change a charting control’s data at run time by using a variety of methods.
You can change a chart or a series data provider. The following example binds the data provider to a local variable.
It then toggles the chart’s data provider using that local variable when the user clicks the button.


ADOBE FLEX 3 31
Adobe Flex 3 Data Visualization Developer Guide



















ADOBE FLEX 3 32
Adobe Flex 3 Data Visualization Developer Guide



You can add or remove a data point from a series. The following example adds an item to the existing data provider
when the user clicks the button:



 0) {
dpac.removeItemAt(i - 1);
}
}
]]>














You can also change the fields of a series to change chart data at run time. You do this by changing the value of the
data provider field (such as xField or yField) on the series object. To get a reference to the series, you use the series’
id property or the chart control’s series index. The following example toggles the data series when the user clicks on
the Change Series button:





















ADOBE FLEX 3 34
Adobe Flex 3 Data Visualization Developer Guide



You can take advantage of data binding to make your chart reflect data changes in real time. The following example
uses a Timer to define the intervals at which it checks for new data. Because the chart’s data provider is bound to an
ArrayCollection, whenever a new data point is added to the collection, the chart is automatically updated.



 100) {
stopApp();
}
dataSet.addItem( { revenue: revenue } );
revenue += Math.random() * 10 - 5;
}
private function stopApp():void {
t.stop();
t.removeEventListener(TimerEvent.TIMER, addData);
}
]]>


















You can also use system values to update charts at run time. The following example tracks the value of the
totalMemory property in a LineChart control in real time:



















36

Chapter 2: Chart Types
Adobe Flex provides different types of charting controls.
Topics

Using area charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Using bar charts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Using bubble charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Using candlestick charts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Using column charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Using HighLowOpenClose charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Using line charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Using pie charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Using plot charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Using multiple data series . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Using multiple axes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Using area charts
You use the AreaChart control to represent data as an area bounded by a line connecting the data values. The area
underneath the line is filled in with a color or pattern. You can use an icon or symbol to represent each data point
along the line, or you can show a simple line without icons.
The following image shows an example of an area chart:

The following example creates an AreaChart control:


ADOBE FLEX 3 37
Adobe Flex 3 Data Visualization Developer Guide


















An area chart is essentially a line chart with the area underneath the line filled in; therefore, area charts and line
charts share many of the same characteristics. For more information, see “Using line charts” on page 56.
You use the AreaSeries chart series with the AreaChart control to define the data for the chart. The following table
describes properties of the AreaSeries chart series that you commonly use to define your chart:
Property

Description

yField

Specifies the field of the data provider that determines the y-axis location of each data point.

xField

Specifies the field of the data provider that determines the x-axis location of each data point. If you omit this field,
Adobe® Flex™ arranges the data points in the order of the data in the data provider.

minField

Specifies the field of the data provider that determines the y-axis location of the bottom of an area. This property is
optional. If you omit it, the bottom of the area is aligned with the x-axis. This property has no effect on overlaid, stacked,
or 100% stacked charts. For more information on using the minField property, see “Using the minField property” on
page 196.

ADOBE FLEX 3 38
Adobe Flex 3 Data Visualization Developer Guide

Property

Description

form

Specifies the way in which the data series is shown in the chart. The following values are valid:

•

segment

Draws lines as connected segments that are angled to connect at each data point in the series. This is

the default.

• step Draws lines as horizontal and vertical segments. At the first data point, draws a horizontal line, and then a
vertical line to the second point. Repeats this action for each data point.
•

reverseStep Draws lines as horizontal and vertical segments. At the first data point, draws a vertical line, and
then a horizontal line to the second point. Repeats this action for each data point.

•

vertical Draws only the vertical line from the y-coordinate of the first point to the y-coordinate of the second
point at the x-coordinate of the second point. Repeats this action for each data point.

• horizontal Draws only the horizontal line from the x-coordinate of the first point to the x-coordinate of the
second point at the y-coordinate of the first point. Repeats this action for each data point.
•

curve

Draws curves between data points.

The following example shows the available forms for an AreaChart control’s series:

A

B

C

D

E

F

A. Segment (default) B. Step C. Reverse Step D. Horizontal E. Vertical F. Curve

You can use the type property of the AreaChart control to represent a number of chart variations, including overlaid,
stacked, 100% stacked, and high-low areas. For more information, see “Stacking charts” on page 198. To customize
the fills of the series in an AreaChart control, you use the areaFill and areaStroke properties. For each fill, you
specify a SolidColor and a Stroke object. The following example defines three custom SolidColor objects and three
custom Stroke objects, and applies them to the three AreaSeries objects in the AreaChart control.





ADOBE FLEX 3 39
Adobe Flex 3 Data Visualization Developer Guide








color="blue" weight="2"/>
color="red" weight="2"/>
color="green" weight="2"/>
















ADOBE FLEX 3 40
Adobe Flex 3 Data Visualization Developer Guide

For more information on using fills, see “Using fills with chart controls” on page 105. For more information on using
the Stroke class, see “Using strokes with chart controls” on page 99.

Using bar charts
You use the BarChart control to represent data as a series of horizontal bars whose length is determined by values in
the data. You can use the BarChart control to represent a number of chart variations, including clustered bars,
overlaid, stacked, 100% stacked, and high-low areas. For more information, see “Stacking charts” on page 198.
You use the BarSeries chart series with the BarChart control to define the data for the chart. The following table
describes the properties of the BarSeries chart series that you use to define your chart:
Property

Description

yField

Specifies the field of the data provider that determines the y-axis location of the base of each bar in the chart. If you omit
this property, Flex arranges the bars in the order of the data in the data provider.

xField

Specifies the field of the data provider that determines the x-axis location of the end of each bar.

minField

Specifies the field of the data provider that determines the x-axis location of the base of a bar. This property has no effect
in overlaid, stacked, or 100% stacked charts. For more information on using the minField property, see “Using the
minField property” on page 196.

The following example creates a simple BarChart control:
















ADOBE FLEX 3 41
Adobe Flex 3 Data Visualization Developer Guide




A bar chart is essentially a column chart rotated 90 degrees clockwise; therefore, bar charts and column charts share
many of the same characteristics. For more information, see “Using column charts” on page 50.

Using bubble charts
You use the BubbleChart control to represent data with three values for each data point: a value that determines its
position along the x-axis, a value that determines its position along the y-axis, and a value that determines the size
of the chart symbol, relative to the other data points on the chart.
The  tag takes additional properties, minRadius and maxRadius. These style properties specify
the minimum and maximum radii of the chart elements, in pixels. The data point with the largest value will be less
than the maxRadius and the data point with the smallest value will be larger than the minRadius property. For
example, if you set the minRadius to 10 and the maxRadius to 50, all data points will have a radius between 10 and
50. The default value for maxRadius is 50 pixels. The default value for minRadius is 0 pixels. You can also control
the minRadius and maxRadius properties by using properties of the same name on the BubbleSeries class.
The following example shows a bubble chart:

You use the BubbleSeries chart series with the BubbleChart control to define the data for the chart. The following
table describes the properties of the BubbleSeries chart series that you commonly use to define your chart:
Property

Description

yField

Specifies the field of the data provider that determines the y-axis location of each data point. This property is
required.

xField

Specifies the field of the data provider that determines the x-axis location of each data point. This property is
required.

radiusField

Specifies the field of the data provider that determines the radius of each symbol, relative to the other data points in
the chart. This property is required.

The following example draws a BubbleChart control and sets the maximum radius of bubble elements to 50:

ADOBE FLEX 3 42
Adobe Flex 3 Data Visualization Developer Guide















To customize the styles of the bubbles in a BubbleChart control, you use the fill and stroke properties. You pass
these a SolidColor and a Stroke object, respectively. The following example defines a custom SolidColor object and
a custom Stroke object, and applies them to the BubbleSeries object in the BubbleChart control.



















For more information on using fills, see “Using fills with chart controls” on page 105. For more information on using
the Stroke class, see “Using strokes with chart controls” on page 99.

Using multiple series in BubbleChart controls
As with other chart controls, you can have multiple series in a BubbleChart control. There is an additional consideration when using multiple series in a BubbleChart control. You must decide whether you want the size of the
bubbles in both series to be relative to bubbles in the other series or relative to only the other bubbles in their own
series.
For example, you have two series, A and B. Series A has bubbles with radius values of 10, 20, and 30. Series B has
bubbles with radius values of 2, 4, and 8. Your BubbleChart control can display bubbles in series A that are all larger
than the bubbles in series B. You can also design a BubbleChart control so that the bubbles’ sizes in series A are not
relative to bubbles in series B. Flex renders the bubble with a radius 10 in series A and the bubble with a radius of 2
in series B the same size.
If you want the size of the bubbles to be relative to each other in the different series, add both series in the series array,
as the following example shows:

















The following example shows a BubbleChart control with two series whose bubbles’ sizes are relative to one another:

If you want the size of the bubbles to be relative to each other in their own series, but not to other series, use a
different radial axis for each series. To do this, you add a  child tag to the 
tag in the MXML. This creates two series in the BubbleChart control whose bubble sizes are independent of one
another. The following example shows a BubbleChart control with two independant series:

























ADOBE FLEX 3 46
Adobe Flex 3 Data Visualization Developer Guide

The following example shows a BubbleChart control with two series whose bubble sizes are independant of one
another:

Using candlestick charts
The CandlestickChart control represents financial data as a series of candlesticks representing the high, low,
opening, and closing values of a data series. The top and bottom of the vertical line in each candlestick represent the
high and low values for the data point, while the top and bottom of the filled box represent the opening and closing
values. Each candlestick is filled differently depending on whether the closing value for the data point is higher or
lower than the opening value.
The CandlestickChart control’s CandlestickSeries requires all four data points: high, low, open, and close. If you do
not want to use opening value data points, you can use the HighLowOpenClose charts, which do not require a data
point that represents the opening value. For more information, see “Using HighLowOpenClose charts” on page 53.
You use the CandlestickSeries chart series with the CandlestickChart control to define the data.

ADOBE FLEX 3 47
Adobe Flex 3 Data Visualization Developer Guide

The following shows an example of a CandlestickChart control:

The following table describes the properties of the CandlestickSeries chart series that you commonly use to define
your chart:
Property

Description

closeField

Specifies the field of the data provider that determines the y-axis location of the closing value of the element. This
property defines the top or bottom of the candlestick.

highField

Specifies the field of the data provider that determines the y-axis location of the high value of the element. This property defines the top of the line inside the candlestick.

lowField

Specifies the field of the data provider that determines the y-axis location of the low value of the element. This property defines the bottom of the line inside the candlestick.

openField

Specifies the field of the data provider that determines the y-axis location of the opening value of the element. This
property defines the position of the top or bottom of the candlestick.

xField

Specifies the field of the data provider that determines the x-axis location of the element. If set to the empty string
(""), Flex renders the columns in the order in which they appear in the data provider. The default value is the empty
string.

If the closeField is lower than the openField, Flex applies a solid fill to the candle. The color of this solid fill
defaults to the color of the box’s outline. It is defined by the declineFill style property. If the closeField is higher
than the openField, Flex fills the candle with white by default.

ADOBE FLEX 3 48
Adobe Flex 3 Data Visualization Developer Guide

The following image shows the properties that define the appearance of the candle. As you can see, the location of
the closeField property can be either the top or the bottom of the candlestick, depending on whether it is higher
or lower than the openField property:
A
B

E

F

C
D

A. highField B. openField C. closeField D. lowField E. closeField F. openField

The following example creates a CandlestickChart control:














ADOBE FLEX 3 49
Adobe Flex 3 Data Visualization Developer Guide

You can change the color of the candle’s fill with the fill and declineFill properties of the series. The fill
property defines the color of the candlestick when the closeField value is higher than the openField value. The
declineFill property defines the color of the candlestick when the reverse is true. You can also define the
properties of the high-low lines and candlestick borders by using a Stroke class, as the following example shows:


























ADOBE FLEX 3 50
Adobe Flex 3 Data Visualization Developer Guide



Using column charts
The ColumnChart control represents data as a series of vertical columns whose height is determined by values in the
data. You can use the ColumnChart control to create several variations of column charts, including simple columns,
clustered columns, overlaid, stacked, 100% stacked, and high-low. For more information, see “Stacking charts” on
page 198.
The following example shows a ColumnChart control with two series:

You use the ColumnSeries chart series with the ColumnChart control to define the data for the chart. The following
table describes the properties of the ColumnSeries chart series to define your chart:
Property

Description

yField

Specifies the field of the data provider that determines the y-axis location of the top of a column. This field defines the
height of the column.

xField

Specifies the field of the data provider that determines the x-axis location of the column. If you omit this property, Flex
arranges the columns in the order of the data in the data provider.

minField

Specifies the field of the data provider that determines the y-axis location of the bottom of a column. This property has
no effect on overlaid, stacked, or 100% stacked charts. For more information on using the minField property, see
“Using the minField property” on page 196.

The following example creates a ColumnChart control with two series:






ADOBE FLEX 3 51
Adobe Flex 3 Data Visualization Developer Guide














To customize the styles of the columns in a ColumnChart control, you specify a SolidColor and a Stroke object for
the fill and stroke properties, respectively. The following example defines a custom SolidColor object and a
custom Stroke object, and applies them to the ColumnSeries object in the ColumnChart control.
























For more information on using fills, see “Using fills with chart controls” on page 105. For more information on using
the Stroke class, see “Using strokes with chart controls” on page 99.

Creating floating column charts
You can also create floating column charts by using the minField property of the chart’s data series. This property
lets you set the lower level of a column. The following example shows a floating ColumnChart control:

The following code draws this chart:
















For more information, see “Using the minField property” on page 196.

Using HighLowOpenClose charts
The HLOCChart control represents financial data as a series of lines representing the high, low, opening, and closing
values of a data series. The top and bottom of the vertical line represent the high and low values for the data point,
while the left tick mark represents the opening values and the right tick mark represents the closing values.
The HLOCChart control does not require a data point that represents the opening value. A related chart is the
CandlestickChart control that represents similar data as candlesticks. For more information see “Using candlestick
charts” on page 46.

ADOBE FLEX 3 54
Adobe Flex 3 Data Visualization Developer Guide

You use the HLOCSeries with the HLOCChart control to define the data for HighLowOpenClose charts. The
following example shows an HLOCChart control:

The following table describes the properties of the HLOCChart control’s series that you commonly use to define your
chart:
Property

Description

closeField

Specifies the field of the data provider that determines the y-axis location of the closing value of the element.
This property defines the position of the right tick mark on the vertical line.

highField

Specifies the field of the data provider that determines the y-axis location of the high value of the element. This
property defines the top of the vertical line.

lowField

Specifies the field of the data provider that determines the y-axis location of the low value of the element. This
property defines the bottom of the vertical line.

openField

Specifies the field of the data provider that determines the y-axis location of the opening value of the element.
This property defines the position of the left tick mark on the vertical line. This property is optional.

xField

Specifies the field of the data provider that determines the x-axis location of the element. If set to the empty
string (""), Flex renders the columns in the order in which they appear in the data provider. The default value is
the empty string.

Data points in an HLOCChart control do not require an openField property. If no openField property is specified,
Flex renders the data point as a flat line with a single closing value indicator pointing to the right. If an openField
property is specified, Flex renders the data point with another indicator pointing to the left, as the following image
shows:
A
B

C
D

A. highField B. openField C. closeField D. lowField

ADOBE FLEX 3 55
Adobe Flex 3 Data Visualization Developer Guide

The following example creates an HLOCChart control:


















You can change the stroke of the vertical lines by using a Stroke object on the series. To change the appearance of the
opening and closing value tick marks on the vertical line, you use the openTickStroke and closeTickStroke style
properties. The following example changes the stroke of the vertical line to 2 (the default value is 1) and the color of
all the lines to black:



























Using line charts
The LineChart control represents data as a series of points, in Cartesian coordinates, connected by a continuous line.
You can use an icon or symbol to represent each data point along the line, or show a simple line without icons.

ADOBE FLEX 3 57
Adobe Flex 3 Data Visualization Developer Guide

The following example shows a simple LineChart control with three series:

You use the LineSeries chart series with the LineChart control to define the data for the chart. The following table
describes the properties of the LineSeries chart series that you commonly use to define your chart:
Property

Description

yField

Specifies the field of the data provider that determines the y-axis location of each data point. This is the height
of the line at that location along the axis.

xField

Specifies the field of the data provider that determines the x-axis location of each data point. If you omit this
field, Flex arranges the data points in the order of the data in the data provider.

interpolateValues

Specifies how to represent missing data. If you set the value of this property to false, the chart breaks the line
at the missing value. If you specify a value of true, Flex draws a continuous line by interpolating the missing
value. The default value is false.

form

Specifies the way in which the data series is shown in the chart. The following values are valid:

• segment Draws lines as connected segments that are angled to connect at each data point in the series.
This is the default.
• step Draws lines as horizontal and vertical segments. At the first data point, draws a horizontal line, and
then a vertical line to the second point. Repeats this for each data point.
•

reverseStep Draws lines as horizontal and vertical segments. At the first data point, draws a vertical
line, and then a horizontal line to the second point. Repeats this for each data point.

• vertical Draws the vertical line only from the y-coordinate of the first point to the y-coordinate of the
second point at the x-coordinate of the second point. Repeats this for each data point.
•

horizontal Draws the horizontal line only from the x-coordinate of the first point to the x-coordinate
of the second point at the y-coordinate of the first point. Repeats this for each data point.

•

curve

Draws curves between data points.

ADOBE FLEX 3 58
Adobe Flex 3 Data Visualization Developer Guide

The following example shows the available forms for a LineChart control’s series:

A

B

C

D

E

F

A. segment (default) B. step C. vertical D. horizontal E. reverseStep F. curve

The following example creates a LineChart control:









ADOBE FLEX 3 59
Adobe Flex 3 Data Visualization Developer Guide











Formatting lines
You can change the width and color of the lines for each series by using the  tag. The default line
is 3 pixels wide and has a shadow. The following example sets a custom color and width for the series Stroke object:

















ADOBE FLEX 3 60
Adobe Flex 3 Data Visualization Developer Guide











You can also modify lines in a LineChart with ActionScript. You define a new Stroke, and apply it to the LineSeries
by setting the lineStroke style property with the setStyle() method. For example:
var s1:Stroke = new Stroke(0x0099FF,20,.2); //First 3 arguments are color, weight, and alpha.
series1.setStyle("lineStroke", s1);

For more information on using the Stroke class in charts, see “Using strokes with chart controls” on page 99.
The default appearance of the lines in a LineChart control is with drop shadows. You can remove these shadows by
setting the chart control’s seriesFilters property to an empty Array, as the following example shows:

















ADOBE FLEX 3 61
Adobe Flex 3 Data Visualization Developer Guide







You can also set the value of the seriesFilters property programmatically, as the following example shows:
myLineChart.seriesFilters = [];

You can also specify a programmatic renderer (or skin) class for each series by setting the lineSegmentRenderer
property of the LineSeries. The default renderer is the LineRenderer, but Flex also applies a shadow filter on all series.
If you remove the shadow filter, as the previous example shows, but want a line with a drop shadow in your chart,
you can set the lineSegmentRenderer to the ShadowLineRenderer class, as the following example shows:






















ADOBE FLEX 3 62
Adobe Flex 3 Data Visualization Developer Guide

For more information on using renderer classes to change the appearance of ChartItem objects such as the LineChart
control’s line segments, see “Skinning ChartItem objects” on page 132.

Using vertical lines in a LineChart control
You can create LineChart controls that show vertical progression. The following example shows two LineSeries in a
LineChart control that are displayed vertically rather than horizontally:

To make lines in a LineChart control display vertically rather than horizontally, you must do the following:

•

Explicitly define the xField and yField properties for the LineSeries object.

•

Set the sortOnXField property of the LineSeries object to false.

By default, data points in a series are sorted from left to right (on the x-axis) before rendering. This causes the
LineSeries to draw horizontally. When you disable the xField sort and explicitly define a yField property, Flex
draws the lines vertically rather than horizontally.
Flex does not sort any data vertically. As a result, you must ensure that your data is arranged correctly in the data
provider. If it is not arranged correctly, Flex renders a zig-zagging line up and down the chart as it connects those
dots according to position in the data provider.
The following example creates a LineChart control that displays vertical lines:


















Using pie charts
You use the PieChart control to define a standard pie chart. The data for the data provider determines the size of each
wedge in the pie chart relative to the other wedges.

ADOBE FLEX 3 64
Adobe Flex 3 Data Visualization Developer Guide

The following example shows a PieChart control with callouts:

You use the PieSeries chart series with the PieChart control to define the data for the chart. The PieSeries can create
standard pie charts or doughnut charts. PieChart controls also support labels that identify data points.
The following table describes the properties of the PieChart control’s PieSeries chart series that you commonly use
to define your chart:
Property

Description

field

Specifies the field of the data provider that determines the data for each wedge of the pie chart.

labelPosition

Specifies how to render data labels for the wedges.

nameField

Specifies the field of the data provider to use as the name for the wedge in DataTip objects and legends.

The following example defines a PieChart control:














To customize the colors of the wedges in a PieChart control, you use the fills property. You pass this an Array of
SolidColor objects. The following example defines an Array of custom SolidColor objects, and applies it to the
PieSeries object in the PieChart control.





















For more information on using fills, see “Using fills with chart controls” on page 105.
You can also customize the lines that outline each wedge by using the stroke property of a PieSeries object. You set
this property to an instance of the Stroke class. For more information on using the Stroke class, see “Using strokes
with chart controls” on page 99.

ADOBE FLEX 3 66
Adobe Flex 3 Data Visualization Developer Guide

Using data labels with PieChart controls
PieChart controls support data labels that display information about each data point. All charts support DataTip
objects, which display the value of a data point when the user moves the mouse over it. Data labels, on the other hand,
are only supported by PieSeries, ColumnSeries, and BarSeries objects. Data labels are different from DataTip objects
in that they are always visible and do not react to mouse movements.
To add data labels to your PieChart control, set the labelPosition property on the series to a valid value other than
none. To remove labels from your pie chart, set the labelPosition property to none. The default value is none.
The following table describes the valid values of the labelPosition property for a PieSeries object. The PieSeries
class supports more values for this property than the BarSeries and ColumnSeries classes.
Value

Description

callout

Draws labels in two vertical stacks on either side of the PieChart control. Shrinks the PieChart if necessary to
make room for the labels. Draws key lines from each label to the associated wedge. Shrinks labels as necessary
to fit the space provided.
This property can only be used with a PieSeries object. You cannot use callouts with BarSeries and
ColumnSeries objects.

inside

Draws labels inside the chart. Shrinks labels to ensure that they do not overlap each other. Any label that must
be drawn too small, as defined by the insideLabelSizeLimit property, is hidden from view.

insideWithCallout

Draws labels inside the pie, but if labels are shrunk below a legible size, Flex converts them to callout labels.
You commonly set the value of the labelPosition property to insideWithCallout when the actual size
of your chart is flexible and users might resize it.
This property can only be used with a PieSeries object. You cannot use callouts with BarSeries and
ColumnSeries objects.

none

Does not draw labels. This is the default value.

outside

Draws labels around the boundary of the PieChart control.

The following table describes the properties of the PieSeries object that you can use to manipulate the appearance of
labels:
Property

Description

calloutGap

Defines how much space, in pixels, to insert between the edge of the pie and the data labels when rendering
callouts. The default value is 10 pixels.

calloutStroke

Defines the line style used to draw the lines to callouts. For more information on defining line data points, see
“Using strokes with chart controls” on page 99.

insideLabelSizeLimit

Defines the size threshold, expressed in points, below which inside data labels are considered illegible. Below
this threshold, data labels are either removed entirely or turned into callouts based on the setting of the series
labelPosition property.

You can change the value of the data labels by using the labelFunction property of the PieSeries object to specify
a callback function. For more information, see “Customizing data label values” on page 176.

ADOBE FLEX 3 67
Adobe Flex 3 Data Visualization Developer Guide

Creating doughnut charts
Flex lets you create doughnut charts out of PieChart controls. Doughnut charts are identical to pie charts, except that
they have hollow centers and resemble wheels rather than filled circles. The following example shows a doughnut
chart:

To create a doughnut chart, specify the innerRadius property on the PieChart control, as the following example
shows:












ADOBE FLEX 3 68
Adobe Flex 3 Data Visualization Developer Guide




The value of the innerRadius property is a percentage value of the “hole” compared to the entire pie’s radius. Valid
values range from 0 to 1.

Creating exploding pie charts
The PieSeries chart series supports exploding wedges, both uniformly and on a per-wedge basis, so that you can
achieve effects similar to the following:

The following table describes the properties that support exploding pie charts:
Property

Description

explodeRadius

A value from 0 to 1, representing the percentage of the available pie radius to use when exploding
the wedges of the pie.

perWedgeExplodeRadius

An array of values from 0 to 1. The Nth value in this array is added to the value of explodeRadius
to determine the explode amount of each individual wedge of the pie. Individual values can be left
undefined, in which case the wedge will only explode according to the explodeRadius property.

reserveExplodeRadius

A value from 0 to 1, representing an amount of the available pie radius to reserve for animating an
exploding wedge.

To explode all wedges of a pie chart evenly, you use the explodeRadius property on the PieSeries, as the following
example shows:






ADOBE FLEX 3 69
Adobe Flex 3 Data Visualization Developer Guide











To explode one or more wedges of the pie, you use an Array of explodeRadius values. Each value in the Array
applies to the corresponding data point. In the following example, the fourth data point, the Car expense, is
exploded:















ADOBE FLEX 3 70
Adobe Flex 3 Data Visualization Developer Guide

Using plot charts
You use the PlotChart control to represent data in Cartesian coordinates where each data point has one value that
determines its position along the x-axis, and one value that determines its position along the y-axis. You can define
the shape that Flex displays at each data point with the renderer for the data series.
The following image shows an example of a PlotChart control with three series:

You use the PlotSeries class with the PlotChart control to define the data for the chart. The following table describes
the properties of the PlotSeries chart series that you commonly use to define your chart:
Property

Description

yField

Specifies the field of the data provider that determines the y-axis location of each data point.

xField

Specifies the field of the data provider that determines the x-axis location of each data point.

radius

Specifies the radius, in pixels, of the symbol at each data point. The default value is 5 pixels.

Note: Both the xField and yField properties are required for each PlotSeries in a PlotChart control.
The following example defines three data series in a PlotChart control:





ADOBE FLEX 3 71
Adobe Flex 3 Data Visualization Developer Guide













To customize the styles of the points in a PlotChart control, you define a SolidColor and a Stroke object for the fill
and stroke properties, respectively. The following example defines three SolidColor objects and three custom
Stroke objects, and applies them to the PlotSeries objects in the PlotChart control.









color="blue" weight="1"/>
color="red" weight="1"/>
color="green" weight="1"/>





ADOBE FLEX 3 72
Adobe Flex 3 Data Visualization Developer Guide










For more information on using fills, see “Using fills with chart controls” on page 105. For more information on using
the Stroke class, see “Using strokes with chart controls” on page 99.
By default, Flex displays the first data series in the chart as a diamond at each point. When you define multiple data
series in a chart, Flex rotates the shape for the series (starting with a diamond, then a circle, then a square). If you
have more series than there are default renderers, Flex begins again with the diamond.
The diamond shape, like the other shapes, is defined by a renderer class. The renderer classes that define these shapes
are in the mx.charts.renderers package. The circle is defined by the CircleItemRenderer class. The following default
renderer classes define the appearance of the data points:

•

BoxItemRenderer

•
•
•

CircleItemRenderer

•
•

ShadowBoxItemRenderer

CrossItemRenderer
DiamondItemRenderer
TriangleItemRenderer

You can control the image that is displayed by the chart for each data point by setting the itemRenderer style
property of the series. The following example overrides the default renderers for the series:


















You can also use graphics or custom classes to define each plot point. For more information, see “Creating custom
renderers” on page 135.

Using multiple data series
Charts that are subclasses of the CartesianChart class let you mix different data series in the same chart control. You
can create a column chart with a trend line running through it or mix any data series with any other similar series.

ADOBE FLEX 3 74
Adobe Flex 3 Data Visualization Developer Guide

The following chart tracks two stocks, one represented by a column (using a ColumnSeries) and the other represented by a line (using a LineSeries):

You can use any combination of the following series objects in a CartesianChart control:

•

AreaSeries

•
•

BarSeries

•
•

CandlestickSeries

•
•
•

HLOCSeries

BubbleSeries
ColumnSeries
LineSeries
PlotSeries

The following example mixes a LineSeries and a ColumnSeries:

























Using multiple series in the same chart works best when the data points are in a similar range (such as a stock price
and its moving average). When the data points are in numerically very different ranges, the chart can be difficult to
understand because the data is shown on a single axis. The solution to this problem is to use multiple axes, each with
its own range. You can plot each data series on its own axis within the same chart using the techniques described in
“Using multiple axes” on page 75.

Using multiple axes
One potential problem when using more than one data series in a single chart is that if the scales of the data are very
different, the data points might be plotted in very different areas on the chart’s canvas. For example, one stock price
could trade in the range of $100 to $150, while another stock price could fluctuate from $2 to $2.50. If you plot both
stocks in the same chart, it would be difficult to see any correlation between the prices, even with a logarithmic axis.
To work around this problem, you can use multiple axes in your charts so that each data series is positioned relative
to its own axis. All chart controls that are subclasses of CartesianChart support adding additional sets of data on a
additional scales in the horizontal axis, vertical axis, or both. (This applies to all charts except the PieChart control.)
You can use values on the additional axes to compare multiple sets of data that are on different scales, such as stock
prices that trade in different ranges.

ADOBE FLEX 3 76
Adobe Flex 3 Data Visualization Developer Guide

The following example shows a stock price that trades within a $40 to $45 range, and another stock price that trades
within a $150 to $160 range. The values of the axis on the left show the range of values of the first stock, and the
values of the axis on the right show the range of values of the second stock.

To use multiple axes in a chart, you first define the chart’s series and their axes. For example, for a chart that mixes
columns with a line, you would have a ColumnSeries and LineSeries. For each of these, you would likely also define
the vertical axis, as the following example shows:













You then define the axis renderers, and bind their axis properties to the series’ axes. In this case, you define two
vertical axis renderers, and bind them to the LinearAxis objects.





Note that you control the location of the axis by using the placement property of the AxisRenderer. For vertical axis
renderers, valid values are left and right. For horizontal axis renderers, valid values are top and bottom.
Axes can be independent of the series definition, too. For example, you can also point more than one series to the
same axis. In this case, you could define a horizontal axis, as follows:




And then bind it to the series, like this:

...


And you can bind an axis renderer to that same axis:


ADOBE FLEX 3 77
Adobe Flex 3 Data Visualization Developer Guide




The final result is a chart with multiple axes, but whose series share some of the same properties defined by common
axis renderers.
























ADOBE FLEX 3 78
Adobe Flex 3 Data Visualization Developer Guide











Even if the verticalAxisRenderers or horizontalAxisRenderers properties have not been specified, Cartesian
charts will create default horizontal and vertical axis renderers based on the default axes of the chart.
When using multiple axes, it is important to recognize that it will not necessarily be immediately apparent which axis
applies to which data set in the chart. As a result, you should try to style the axes so that they match the styles of the
chart items.
The following example defines two colors and then uses those colors in the axis renderers and in the strokes and fills
for the chart items:







ADOBE FLEX 3 79
Adobe Flex 3 Data Visualization Developer Guide











{h1Stroke}


{h2Stroke}

























You can customize labels by using the labelFunction property of the AxisRenderer class. This lets you control the
labels if you use multiple axes. For more information, see “Customizing axis labels” on page 166.

ADOBE FLEX 3 80
Adobe Flex 3 Data Visualization Developer Guide

For CartesianChart controls, there is no limit to the number of axes you can have.
For PolarChart controls, such as a PieChart, you generally do not use multiple axes because even though each series
could have its own angular axis, the angular axis is always from 0 to 360 (the size of the wedge).

81

Chapter 3: Formatting Charts
You can customize the look and feel of your Adobe® Flex® charting controls. You can format the appearance of almost
all chart elements, from the font properties of an axis label to the width of the stroke in a legend.
To set style properties in your chart controls, you can use Cascading Style Sheets (CSS) syntax or set the style
properties inline as tag attributes. As with all styles, you can call the setStyle() method to set any style on your
chart elements. For more information on using the setStyle() method, see “Using the setStyle() and getStyle()
methods” on page 627 in Adobe Flex 3 Developer Guide.
Topics

Applying chart styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Setting padding properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Formatting tick marks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Formatting axis lines. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Using strokes with chart controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Using fills with chart controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Using filters with chart controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Using chart grid lines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Positioning chart axes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Rotating chart axis labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Skinning ChartItem objects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Formatting Legend controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

Applying chart styles
You can apply style properties to charts by using CSS or inline syntax. You can also apply styles to chart elements by
using binding.

Applying styles with CSS
You can apply styles to charting components with CSS definitions. You can set chart properties such as fonts and tick
marks, or series properties, such as the fills of the boxes in a ColumnChart.
A limitation of using CSS to style your charts is that the styleable chart properties often use compound values, such
as strokes and gradient fills, that cannot be expressed by using CSS. The result is that you cannot express all values
of chart styles by using CSS syntax.
To determine if an object’s properties can be styled by using CSS, check to see if the class or its parent implements
the IStyleClient interface. If it does, then you can set the values of the object’s style properties with CSS. If it does not,
then the class does not participate in the styles subsystem and you therefore cannot set its properties with CSS. In
that case, the properties are public properties of the class and not style properties. You can apply properties with CSS
by using pre-defined styles for some classes, such as the verticalAxisStyleName and
horizontalAxisStyleName. For more information, see “Using predefined axis style properties” on page 84.

ADOBE FLEX 3 82
Adobe Flex 3 Data Visualization Developer Guide

Applying CSS to chart controls

You can use the control name in CSS to define styles for that control. This is referred to as a type selector, because
the style you define is applied to all controls of that type. For example, the following style definition specifies the font
for all BubbleChart controls:




BubbleChart {
fontFamily:Arial;
fontSize:20;
color:#FF0033;
}











Some styles, such as fontSize and fontFamily, are inheritable, which means that if you set them on the chart
control, the axes labels, titles, and other text elements on the chart inherit those settings. To determine whether a
style is inheritable, see that style’s description in Adobe Flex Language Reference.
Axis labels appear next to the tick marks along the chart’s axis. Titles appear parallel to the axis line. By default, the
text on an axis uses the text styles of the chart control.
Axis elements use whatever styles are set on the chart control’s type or class selector, but you can also specify different
styles for each axis by using a class selector on the axis renderer or predefined axis style properties.
Applying different styles to each series

To apply different styles to each series in the charts with CSS, you use the chartSeriesStyles property. This
property takes an Array of Strings. Each String specifies the name of a class selector in the style sheet. Flex applies
each of these class selectors to a series.
To apply CSS to a series, you define a type or class selector for the chart that defines the chartSeriesStyles
property. You then define each class selector named in the chartSeriesStyles property.

ADOBE FLEX 3 83
Adobe Flex 3 Data Visualization Developer Guide

Essentially, you are defining a new style for each series in your chart. For example, if you have a ColumnChart control
with two series, you can apply a different style to each series without having to explicitly set the styles on each series.
The following example defines the colors for two series in the ColumnChart control:




ColumnChart {
chartSeriesStyles: PCCSeries1, PCCSeries2;
}
.PCCSeries1 {
fill: #CCFF66;
}
.PCCSeries2 {
fill: #CCFF99;
}


import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new
{Month: "Jan", Profit: 2000, Expenses:
{Month: "Feb", Profit: 1000, Expenses:
{Month: "Mar", Profit: 1500, Expenses:
]);


ArrayCollection([
1500},
200},
500}















Flex sets the styleName property of each series to the corresponding selector in the chartSeriesStyles Array. You
do not have to explicitly set styles for each series. If you have more series than available chartSeriesStyles
selectors, the chart begins again with the first style.
If you manually set the value of the styleName property on a particular series, that style takes priority over the styles
that the chartSeriesStyles property specifies.

ADOBE FLEX 3 84
Adobe Flex 3 Data Visualization Developer Guide

For PieChart controls, you can define the fills property of the series. The PieChart applies the values in this Array
to the pie wedges. It starts with the first value if there are more wedges than values defined in the Array. The
following example creates a PieChart that uses only red, white, and blue colors for the wedges:




PieSeries {
fills:#FF0000, #FFFFFF, #006699;
}














Using predefined axis style properties

The following predefined class selectors are available for axis styles:

•
•

horizontalAxisStyleName
verticalAxisStyleName

Flex applies each style to the corresponding axis.
In addition to these, the following two class selectors define an array of class selectors that define the style properties
for the axes:

•

horizontalAxisStyleNames

•

verticalAxisStyleNames

In this case, Flex loops through the selectors and applies them to the axis renderers that correspond to their position
in the Array.

ADOBE FLEX 3 85
Adobe Flex 3 Data Visualization Developer Guide

In addition to these class selectors for the axis style properties, you can use the axisTitleStyleName and
gridLinesStyleName class selectors to apply styles to axis titles and grid lines.
The following example removes tick marks from the horizontal axis:




ColumnChart {
horizontalAxisStyleName:myAxisStyles;
verticalAxisStyleName:myAxisStyles;
}
.myAxisStyles {
tickPlacement:none;
}


















ADOBE FLEX 3 86
Adobe Flex 3 Data Visualization Developer Guide

Using class selectors for axis styles

To use a class selector to define styles for axis elements, define the custom class selector in an  block or
external style sheet, and then use the styleName property of the AxisRenderer class to point to that class selector.
Note that any time you want to use an AxisRenderer, you must explicitly set the axis to which it is applied with the
renderer’s axis property.
The following example defines the MyStyle style and applies that style to the elements on the horizontal axis:







.myStyle {
fontSize:7;
color:red;
}














ADOBE FLEX 3 87
Adobe Flex 3 Data Visualization Developer Guide






Most charting-specific style properties are not inheritable, which means that if you set the property on a parent
object, the child object does not inherit its value.
For more information on using CSS, see “About styles” on page 589 in Adobe Flex 3 Developer Guide.

Applying styles inline
You can set many styleable elements of a chart as attributes of the MXML tag. For example, to set the styleable
properties of an axis, you can use the  tag rather than define a new style in CSS.
The following example sets the fontSize property of the horizontal axis to 7:




Notice that any time you want to use an AxisRenderer, you must explicitly set the axis to which it is applied with the
renderer’s axis property.
You can also access the properties of renderers in ActionScript so that you can change their appearance at run time.
For additional information about axis renderers, see “Working with axes” on page 145.

Applying styles by binding tag definitions
You can define styles with MXML tags. You can then bind the values of the renderer properties to those tags. The
following example defines the weight and color of the strokes, and then applies those strokes to the chart’s AxisRenderer class:










ADOBE FLEX 3 88
Adobe Flex 3 Data Visualization Developer Guide


{ticks}
{mticks}













Using ChartElement objects
The ChartElement class is the base class for anything that appears in the data area of the chart. All series objects (such
as GridLines objects) are ChartElement objects. You can add ChartElement objects (such as images, grid lines, and
strokes) to your charts by using the backgroundElements and annotationElements properties of the chart
classes.
The backgroundElements property specifies an Array of ChartElement objects that appear beneath any data series
rendered by the chart. The annotationElements property specifies an Array of ChartElement objects that appears
above any data series rendered by the chart.
The ChartElement objects that you can add to a chart include supported image files, such as GIF, SVG, and JPEG.
The following example adds new grid lines as annotation elements to the chart and an image as the background
element. When the user clicks the button, the annotation elements change:




















ADOBE FLEX 3 90
Adobe Flex 3 Data Visualization Developer Guide











In ActionScript, you can add an image to the chart and manipulate its properties, as the following example shows:


















For more information on working with grid lines, see “Using chart grid lines” on page 121.
You can also add data graphics to your charts by adding the CartesianDataCanvas and PolarDataCanvas controls to
your background or annotation elements Arrays. For more information, see “Drawing on chart controls” on
page 264.

Setting padding properties
As with other Flex components, the padding properties of a chart define an area between the outside bounds of the
chart control and its content. Flex draws only the background fill in the padding area.
You can set the padding values for a chart control by using the paddingLeft and paddingRight properties that the
chart control inherits from the UIComponent class. You can also use the paddingTop and paddingBottom
properties that the chart control inherits from the ChartBase class.
Flex charting control elements also have gutters. The gutter is the area between the padding area and the actual axis
line. Flex draws labels, titles, and tick marks for the axes in the gutter of the chart. Chart controls adjust the gutters
to accommodate these enhancements to the axis, but you can specify explicit gutter values.
The following example shows the locations of the gutters and the padding area on a chart:

A
B
C

D
E

0

20

40

60

80

100

A. Padding area B. Gutter C. Axis D. Label gap E. Axis label

The following style properties define the size of a chart’s gutters:

•
•

gutterLeft

•
•

gutterTop

gutterRight

gutterBottom

The default value of the gutter styles is undefined, which means that the chart determines appropriate values.
Overriding the default value and explicitly setting gutter values can improve the speed of rendering charts, because
Flex does not have to dynamically calculate the gutter size. However, it can also cause clipping of axis labels or other
undesirable effects.

ADOBE FLEX 3 92
Adobe Flex 3 Data Visualization Developer Guide

You set gutter styles on the chart control. The following example creates a region that is 50 pixels wide for the axis
labels, titles, and tick marks, by explicitly setting the values of the gutterLeft, gutterRight , and gutterBottom
style properties. It also sets the paddingTop property to 20.





ColumnChart {
gutterLeft:50;
gutterRight:50;
gutterBottom:50;
paddingTop:20;
}















Alternatively, you can set the gutter properties inline, as the following example shows:


















In addition to the gutter and padding properties, you can set the labelGap property of a chart’s axes. The labelGap
property defines the distance, in pixels, between the tick marks and the axis labels. You set the labelGap property
on the AxisRenderer tag, as the following example shows:
























You can specify the alignment of axis labels by using the labelAlign property on the AxisRenderer. For horizontal
axis labels, you can specify center, left, and right. For example, in a ColumnChart control, if you set the value of
the labelAlign property to left, Flex renders the labels at the left of the bottoms of the columns. For vertical axis
labels, you can specify center, top, and bottom.
How different the locations of the labels are depends on the available space (for example, the width of the columns)
and the font size of the labels.
The following example lets you change the label alignment for the vertical and horizontal axes.



































ADOBE FLEX 3 96
Adobe Flex 3 Data Visualization Developer Guide

Formatting tick marks
There are two types of tick marks on a Flex chart: major and minor. Major tick marks are the indications along an
axis that correspond to an axis label. The text for the axis labels is often derived from the chart’s data provider. Minor
tick marks are those tick marks that appear between the major tick marks. Minor tick marks help the user to visualize
the distance between the major tick marks.
You use the tickPlacement and minorTickPlacement properties of the AxisRenderer object to determine
whether or not Flex displays tick marks and where Flex displays tick marks.
The following table describes valid values of the tickPlacement and minorTickPlacement properties:
Value

Description

cross

Places tick marks across the axis.

inside

Places tick marks on the inside of the axis line.

none

Hides tick marks.

outside

Places tick marks on the outside of the axis line.

You can align the tick marks with labels by using the tickAlignment property.
Flex also lets you set the length of tick marks and the number of minor tick marks that appear along the axis. The
following table describes the properties that define the length of tick marks on the chart’s axes:
Property

Description

tickLength

The length, in pixels, of the major tick mark from the axis.

minorTickLength

The length, in pixels, of the minor tick mark from the axis.

The minor tick marks overlap the placement of major tick marks. So, if you hide major tick marks but still show
minor tick marks, the minor tick marks appear at the regular tick-mark intervals.
The following example sets tick marks to the inside of the axis line, sets the tick mark’s length to 12 pixels, and hides
minor tick marks:





.myAxisStyle {
placement:bottom;
minorTickPlacement:none;
tickLength:12;

ADOBE FLEX 3 97
Adobe Flex 3 Data Visualization Developer Guide

tickPlacement:inside;
}


















Formatting axis lines
Axes have lines to which the tick marks are attached. You can use style properties to hide these lines or change the
width of the lines.
To hide the axis line, set the value of the showLine property on the AxisRenderer object to false. The default value
is true. The following example sets showLine to false:
























You can also apply the showLine property as a CSS style property.
You can change the width, color, and alpha of the axis line with the  tag. You use an
 child tag to define these properties or define a stroke and then bind it to the axisStroke object, as
the following example shows:















{axisStroke}


















For more information about strokes, see “Using strokes with chart controls” on page 99.
You can change the placement of the axis lines (for example, move the axis line from the bottom of the chart control
to the top) by using the placement property of the AxisRenderer. For more information, see “Positioning chart axes”
on page 127.
You can also apply filters to axis lines to further customize their appearance. For more information, see “Using filters
with chart controls” on page 116.

Using strokes with chart controls
You use the Stroke class with the chart series and grid lines to control the properties of the lines that Flex uses to draw
chart elements.

ADOBE FLEX 3 100
Adobe Flex 3 Data Visualization Developer Guide

The following table describes the properties that you use to control the appearance of strokes:
Property

Description

color

Specifies the color of the line as a hexadecimal value. The default value is 0x000000, which corresponds to black.

weight

Specifies the width of the line, in pixels. The default value is 0, which corresponds to a hairline.

alpha

Specifies the transparency of a line. Valid values are 0 (invisible) through 100 (opaque). The default value is 100.

The following example defines a line width of 2 pixels, one with a dark gray border (0x808080) and the other with a
light gray border (0xC0C0C0) for the borders of chart items in a BarChart control’s BarSeries:























ADOBE FLEX 3 101
Adobe Flex 3 Data Visualization Developer Guide





Defining AxisRenderer properties with strokes
You can use strokes to define tick marks and other properties of an AxisRenderer, as the following example shows:





















ADOBE FLEX 3 102
Adobe Flex 3 Data Visualization Developer Guide










Notice that any time you use an AxisRenderer, you must explicitly set the axis to which it is applied with the
renderer’s axis property.
You can define a stroke object using an MXML tag, and then bind that stroke object to the chart’s renderer properties.
For an example, see “Applying styles by binding tag definitions” on page 87.

Using strokes in ActionScript
You can instantiate and manipulate a Stroke object in ActionScript by using the mx.graphics.Stroke class. You can
then use the setStyle() method to apply the Stroke object to the chart, as the following example shows:









ADOBE FLEX 3 103
Adobe Flex 3 Data Visualization Developer Guide





{baseAxisStroke}




{baseAxisStroke}












Defining strokes for LineSeries and AreaSeries
Some chart series have more than one stroke-related style property. For LineSeries, you use the stroke style property
to define a style for the chart item’s renderer. You use the lineStroke property to define the stroke of the actual line
segments.
The following example creates a thick blue line for the LineChart control’s line segments, with large red boxes at each
data point, which use the CrossItemRenderer object as their renderer:





ADOBE FLEX 3 104
Adobe Flex 3 Data Visualization Developer Guide






























Similarly, with the AreaSeries class, you use the stroke property to set a style for the chart item’s renderer. You use
the areaStroke style property to define the stroke of the line that defines the area.

ADOBE FLEX 3 105
Adobe Flex 3 Data Visualization Developer Guide

Using fills with chart controls
When charting multiple data series, or just to improve the appearance of your charts, you can control the fill for each
series in the chart or each item in a series. The fill lets you specify a pattern that defines how Flex draws the chart
element. You also use fills to specify the background colors of the chart or bands of background colors defined by
the grid lines. Fills can be solid or can use linear and radial gradients. A gradient specifies a gradual color transition
in the fill color.
You use fills in the following ways:

• fill Set the value of the fill property on a series to a single fill. This applies that fill to all chart items in that
series. For example, all columns in a single series will have the same fill.
• fills Set the value of the fills property on a series to an Array of fills. This applies a different fill from the
Array to each chart item in the series. For example, each column in a series will have a different fill. The LineSeries
and LineRenderer objects are not affected by the fill property’s settings.
• fillFunction Set the value of the fillFunction property on a series to point to a custom method. This
method returns a fill based on the values of the chart item in the series. The return value of this function takes precedence over fills specified as styles. For information on using the fillFunction property, see “Using per-item fills”
on page 190.
All series except the HLOCSeries class support setting the fill-related properties.
If you use the fills property or the fillFunction to define the fills of chart items, and you want a legend, you
must manually create the Legend object for that chart. For more information on creating Legend objects, see “Using
Legend controls” on page 205.
One of the most common uses of a fill is to control the color of the chart when you have multiple data series in a
chart. The following example uses the fill property to set the color for each ColumnSeries object in a ColumnChart
control:














ADOBE FLEX 3 106
Adobe Flex 3 Data Visualization Developer Guide














If you do not explicitly define different fills for multiple data series, Flex chooses solid colors for you.
You can also specify an array of colors using the fills property of the series. This property takes an Array of objects
that define the fills. You can use this property to define a different color for each item in the series. If you do not
define as many colors in the Array as there are items in the series, the chart starts with the first item in the Array on
the next item.
The following example defines two Arrays of SolidColor objects. The first Array defines the colors of the items in
the first series in the chart and the second Array defines the colors of the items in the second series. All of the fills in
this example are partially transparent (the alpha value in the SolidColor constructor is .5).









ADOBE FLEX 3 107
Adobe Flex 3 Data Visualization Developer Guide















This example does not have a legend. If you use the fills property or the fillFunction to define the fills of chart
items, and you want a legend, you must manually create the Legend object for that chart. For more information on
creating Legend objects, see “Using Legend controls” on page 205.
With the PieSeries, you typically use a single Array of fills to specify how Flex should draw the individual wedges.
For example, you can give each wedge that represents a PieSeries its own color, as the following example shows:



















alpha=".8"/>
alpha=".8"/>
alpha=".8"/>
alpha=".8"/>
alpha=".8"/>
alpha=".8"/>

This example also shows how you use the  tag inside a series to define an Array of fills for that series.
You can also use fills to set the background of the charts. You do this by adding an  child tag to the chart
tag, as the following example shows:




















Setting fills with CSS
You can use the fill or fills style properties in an  declaration by using CSS syntax. You can use a
type or a class selector. The following example sets the fill of the custom myBarChartStyle class selector to #FF0000:





.myBarChartStyle {
fill:#FF0000;
}














Flex converts the fill style in the class selector to a SolidColor object.
The following example defines colors for each of the series by setting the value of the fill style property in the
custom class selectors:







.myRedColumnSeries {
fill:#FF0033;
}

ADOBE FLEX 3 110
Adobe Flex 3 Data Visualization Developer Guide

.myGreenColumnSeries {
fill:#33FF00;
}

















To specify an Array for the fills property in CSS, you use a comma-separated list, as the following example shows:







.myRedColumnSeries {
fills: #FF0033, #FF3333, #FF6633;
}
.myGreenColumnSeries {
fills: #33FF00, #33FF33, #33FF66;
}


ADOBE FLEX 3 111
Adobe Flex 3 Data Visualization Developer Guide

















Using gradient fills with chart controls
Flex provides several classes that let you specify gradient fills. You use either the LinearGradient class or the RadialGradient class, along with the GradientEntry class to specify a gradient fill. The following table describes these
classes:
Class

Description

LinearGradient

Defines a gradient fill that starts at a boundary of the chart element. You specify an array of GradientEntry objects
to control gradient transitions with the LinearGradient object.

RadialGradient

Defines a gradient fill that radiates from the center of a chart element. You specify an array of GradientEntry
objects to control gradient transitions with the RadialGradient object.

GradientEntry

Defines the objects that control the gradient transition. Each GradientEntry object contains the following properties:

•

color

Specifies a color value.

•

alpha

Specifies the transparency. Valid values are 0 (invisible) through 1 (opaque). The default value is 1.

•

ratio Specifies where in the chart, as a percentage, Flex starts the transition to the next color. For
example, if you set the ratio property to .33, Flex begins the transition 33% of the way through the chart. If
you do not set the ratio property, Flex tries to evenly apply values based on the ratio properties for the other
GradientEntry objects. Valid values range from 0 to 1.

The following example uses a LinearGradient class with three colors for a gradient fill of the chart’s background:


























The LinearGradient object takes a single attribute, angle. By default, it defines a transition from left to right across
the chart. Use the angle property to control the direction of the transition. For example, a value of 180 causes the
transition to occur from right to left, rather than from left to right.
The following example sets the angle property to 90, which specifies that the transition occurs from the top of the
chart to the bottom.


























Using different alpha values with fills
When charting multiple data series, you can define the series to overlap. For example, the column chart lets you
display the columns next to each other or overlap them for multiple data series. To overlap series, you set the type
property of the chart to overlaid. The same is true for an area series.
When you have multiple data series that overlap, you can specify that the fill for each series has an alpha value less
than 100%, so that the series have a level of transparency. The valid values for the alpha property are 0 (invisible)
through 1 (opaque).
You cannot specify alpha values for fills if you apply the fills using CSS.
The following example defines an area chart in which each series in the chart uses a solid fill with the same level of
transparency:



ADOBE FLEX 3 114
Adobe Flex 3 Data Visualization Developer Guide































ADOBE FLEX 3 115
Adobe Flex 3 Data Visualization Developer Guide

If you define a gradient fill, you can set the alpha property on each entry in the Array of  tags,
as the following example shows:
































ADOBE FLEX 3 116
Adobe Flex 3 Data Visualization Developer Guide














In this example, you make the last gradient color in the series partially transparent by setting its alpha property to .2.

Using filters with chart controls
You can add filters such as drop shadows to your charts by using the classes in the flash.filters package. These filters
include:

•
•

BevelFilter

•
•

BlurFilter

•
•

DisplacementMapFilter

•
•

GlowFilter

•

GradientGlowFilter

BitmapFilter
ColorMatrixFilter
DropShadowFilter
GradientBevelFilter

ADOBE FLEX 3 117
Adobe Flex 3 Data Visualization Developer Guide

You can apply filters to the chart control itself, or to each chart series. When you apply a filter to a chart control, the
filter is applied to all aspects of that chart control, including gridlines, axis labels, and each data point in the series.
The following image shows a drop shadow filter applied to a ColumnChart control:

The following example applies a custom drop shadow filter to a ColumnChart control. The result is that every
element, including the grid lines, axis labels, and columns, has a background shadow.















ADOBE FLEX 3 118
Adobe Flex 3 Data Visualization Developer Guide









For more information on using filters, see “Using filters in Flex” on page 642 in Adobe Flex 3 Developer Guide.
Adding a drop shadow filter to some chart controls can have unexpected consequences. For example, if you add a
drop shadow filter to a PieChart control, Flex renders that drop shadow filter in addition to the default drop shadow
filter on the PieSeries.
You can remove filters by setting the filters Array to an empty Array, as the following example shows:



















ADOBE FLEX 3 119
Adobe Flex 3 Data Visualization Developer Guide

The following example creates a PieChart control and applies a drop shadow to it; it also removes the default drop
shadow filter from the PieSeries so that there is a single drop shadow:



























You can add filters to individual chart elements that are display objects, such as series, grid lines, legend items, and
axes. The following example defines set of filters, and then applies them to various chart elements:


















ADOBE FLEX 3 121
Adobe Flex 3 Data Visualization Developer Guide


















Using chart grid lines
All charts except the PieChart control have grid lines by default. You can control those grid lines with the CSS
gridLinesStyleName property, and with the chart series’ backgroundElements and annotationElements
properties.
You can include horizontal, vertical, or both grid lines in your chart with the GridLines object. You can set these
behind the data series by using the chart’s backgroundElements property or in front of the data series by using the
annotationElements property.
The following example turns on grid lines in both directions and applies them to the chart:





















Note: The annotationElements property refers to any chart elements that appear in the foreground of your chart, and
the backgroundElements property refers to any chart elements that appear behind the chart’s data series.
You can also define the grid lines inside each chart control’s definition, as the following example shows:















ADOBE FLEX 3 123
Adobe Flex 3 Data Visualization Developer Guide








To define the fills and strokes for grid lines, you use the horizontalStroke, verticalStroke, horizontalFill,
and verticalFill properties. The following properties also define the appearance of grid lines:

•
•

horizontalAlternateFill

•
•

horizontalOriginCount

•
•

horiztontalTickAligned

•
•

verticalChangeCount

•
•

verticalShowOrigin

horizontalChangeCount

horizontalShowOrigin

verticalAlternateFill

verticalOriginCount

verticalTickAligned

For information on working with strokes, see “Using strokes with chart controls” on page 99. For more information
on using the backgroundElements and annotationElements properties, see “Using ChartElement objects” on
page 88.
You can manipulate the appearance of the grid lines directly in MXML, with ActionScript, or with CSS. The
following sections describe techniques for formatting grid lines for chart objects.

Formatting chart grid lines with MXML
To control the appearance of the grid lines, you can specify an array of GridLines objects as MXML tags, as the
following example shows:








ADOBE FLEX 3 124
Adobe Flex 3 Data Visualization Developer Guide

























This example uses the changeCount property to specify that Flex draws grid lines at every tick mark along the axis,
and sets the direction property to both. This causes Flex to draw grid lines both horizontally and vertically. You
could also specify horizontal or vertical as values for the direction property.
To remove grid lines entirely, you can set the backgroundElements property to an empty Array, as the following
example shows:







ADOBE FLEX 3 125
Adobe Flex 3 Data Visualization Developer Guide













You can also change the appearance of grid lines by using filters such as a drop shadow, glow, or bevel. For more
information, see “Using filters with chart controls” on page 116.

Formatting chart grid lines with CSS
You can set the style of grid lines by applying a CSS style to the GridLines object. The following example applies the
myStyle style to the grid lines:





.myStyle {
direction:"both";
horizontalShowOrigin:true;
horizontalTickAligned:false;
horizontalChangeCount:1;
verticalShowOrigin:false;
verticalTickAligned:true;
verticalChangeCount:1;
horizontalFill:#990033;
horizontalAlternateFill:#00CCFF;
}






ADOBE FLEX 3 126
Adobe Flex 3 Data Visualization Developer Guide





















Formatting chart grid lines with ActionScript
You can manipulate the GridLines at run time with ActionScript. The following example adds filled grid lines in
front of and behind the chart’s series:


















Positioning chart axes
You can place axes on the left, right, top, or bottom of the chart control. This includes the axis line as well as labels
and any tick marks you added. You can place horizontal axes at the top or bottom of the chart (or both, if you have
multiple vertical axes). You can place vertical axes at the left or right of the chart (or both, if you have multiple
horizontal axes).
To change the location of axes, you use the placement property of the AxisRenderer. Valid values for this property
for a vertical axis are top and bottom. Valid values for this property for a horizontal axis are left and right.
The following example creates a ColumnChart control with the default axis locations (bottom and left). You can
select new locations by using the ComboBox controls at the bottom of the panel.


ADOBE FLEX 3 128
Adobe Flex 3 Data Visualization Developer Guide


























ADOBE FLEX 3 129
Adobe Flex 3 Data Visualization Developer Guide











Rotating chart axis labels
You can rotate axis labels by using the labelRotation property of the AxisRenderer object. You specify a number
from -90 to 90, in degrees. If you set the labelRotation property to null, Flex determines an optimal angle and
renders the axis labels.
The following example shows both sets of axis labels rotated 45 degrees:

To rotate axis labels, you must embed the font in the Flex application. If you rotate the the axis labels without
embedding a font, they are rendered horizontally.
The following  block embeds a font in the Flex application, and then applies that font to the chart control
that rotates its horizontal and vertical axis labels 45 degrees:





@font-face{

ADOBE FLEX 3 130
Adobe Flex 3 Data Visualization Developer Guide

src: url("../assets/MyriadWebPro.ttf");
fontFamily: myMyriad;
}
ColumnChart {
fontFamily: myMyriad;
fontSize: 20;
}





















To change the appearance of the axis labels, you can also use the labelRenderer property of the AxisRenderer class.
This lets you specify a class that defines the appearance of the label. The class must extend UIComponent and
implement the IDataRenderer and IFlexDisplayObject interfaces. Its data property will be the label used in the
chart. Typically, you write an ActionScript class that extends the ChartLabel class for the label renderer.
The following example defines a custom component inline by using the  tag. It adds ToolTip
objects to the labels along the chart’s horizontal axis so that the values of the longer labels are not truncated.






















 20) {
text = value.text.toString().substr(0, 20) + "...";
} else {
text = value.text;
}
}
]]>







ADOBE FLEX 3 132
Adobe Flex 3 Data Visualization Developer Guide








For an example of an ActionScript class that extends ChartLabel, see “Adding axis titles” on page 159.

Skinning ChartItem objects
A ChartItem object represents a data point in a series. There is one ChartItem instance for each item in the series’
data provider. ChartItem objects contain details about the data for the data point as well as the renderer (or skin) to
use when rendering that data point in the series. The ChartItem renderers define objects such as the icon that represents a data point in a PlotChart control or the box that makes up a bar in a BarChart control.
Each series has a default renderer that Flex uses to draw that series’ ChartItem objects. You can specify a new
renderer to use with the series’ itemRenderer style property. This property points to a class that defines the
appearance of the ChartItem object.
The following table lists the available renderer classes for the ChartItem objects of each chart type:
Chart type

Available renderer classes

AreaChart

AreaRenderer

BarChart

BoxItemRenderer

BubbleChart

CircleItemRenderer

ColumnChart

CrossItemRenderer

PlotChart

DiamondItemRenderer
ShadowBoxItemRenderer
TriangleItemRenderer

CandlestickChart

CandlestickItemRenderer

HLOCChart

HLOCItemRenderer

LineChart

LineRenderer
ShadowLineRenderer

PieChart

WedgeItemRenderer

The appearance of most renderers is self-explanatory. The BoxItemRenderer class draws ChartItem objects in the
shape of boxes. The DiamondItemRenderer class draws ChartItem objects in the shape of diamonds. The ShadowBoxItemRenderer and ShadowLineRenderer classes add shadows to the ChartItem objects that they draw.
You can use existing classes to change the default renderers of chart items. The DiamondItemRenderer class is the
default renderer for ChartItem objects in a data series in a PlotChart control. The following example uses the default
DiamondItemRenderer class for the first data series. The second series uses the CircleItemRenderer class, which
draws a circle to represent the data points in that series. The third series uses the CrossItemRenderer class, which
draws a cross shape to represent the data points in that series.

ADOBE FLEX 3 133
Adobe Flex 3 Data Visualization Developer Guide




















To apply a renderer to a series in ActionScript, you use the setStyle() method. In that method, you create a new
ClassFactory and pass the renderer to its constructor. Flex generates an instance of this class to be the renderer. Be
sure to import the appropriate classes when using renderer classes.
The following example sets the renderer for the second series to the CircleItemRenderer and the renderer for the
third series to the CrossItemRenderer in ActionScript.
















Using multiple renderer classes
You can sometimes choose from more than one renderer for a chart series, depending on the series. These renderers
let you change the appearance of your charts by adding shadows or graphics to the chart items.

ADOBE FLEX 3 135
Adobe Flex 3 Data Visualization Developer Guide

Some series types require multiple renderers to completely render their data. For example, a LineSeries object has
both an itemRenderer style property and a lineSegmentRenderer style property. The itemRenderer property
specifies the renderer for the data items. The lineSegmentRenderer specifies the appearance of the line segments
between items.
The other series type that requires two renderers is the AreaSeries. The areaRenderer property specifies the
appearance of the area, and the itemRenderer specifies the appearance of the data items.
You can also specify the renderer to use for legends. The default is the class that the series’ itemRenderer property
specifies. For more information, see “Formatting Legend controls” on page 140.
You can use multiple types of data series in a single chart. For example, you can use a ColumnSeries and a LineSeries
to show something like a moving average over a stock price. In this case, you can use all the renderers supported by
those series in the same chart. For more information on using multiple series, see “Using multiple data series” on
page 73.

Creating custom renderers
You can replace the itemRenderer property of a chart series with a custom renderer. You define the renderer on the
itemRenderer style property for the chart series. This renderer can be a graphical renderer or a class that programmatically defines the renderer.
Creating graphical renderers

You can use a graphic file such as a GIF or JPEG to be used as a renderer on the chart series. You do this by setting
the value of the itemRenderer style property to be an embedded image. This method of graphically rendering chart
items is similar to the graphical skimming method used for other components, as described in “Creating graphical
skins” on page 706 in Adobe Flex 3 Developer Guide.
The following example uses the graphic file to represent data points on a PlotChart control:



















This example uses the butterfly.gif graphic to represent each data point on the plot chart. It controls the size of the
embedded image by using the radius style property.
You are not required to set the value of the itemRenderer property inline. You can also embed a graphic file in
ActionScript as a Class, pass it to the ClassFactory class’s constructor, and then reference it inline, as the following
example shows:








ADOBE FLEX 3 137
Adobe Flex 3 Data Visualization Developer Guide













You can also use the setStyle() method to apply the custom class to the item renderer. The following example sets
the itemRenderer and legendMarkerRenderer style properties to the embedded image:



















Creating programmatic renderers

Creating a custom renderer class for your chart items can give you more control than creating simple graphical
renderers. Using class-based renderers is very similar to using programmatic skins, as described in “Creating
programmatic skins” on page 709 in Adobe Flex 3 Developer Guide.
One approach to is to extend the ProgrammaticSkin class and implement the IDataRenderer interface. In this
approach, you can provide all of the logic for drawing chart items in your custom class, and maintain the greatest
control over its appearance. For example, you use methods in the Graphics class to draw and fill the rectangles of the
bars in a BarChart control.
When you implement the IDataRenderer interface, you must define a setter and getter method to implement the
data property. This data property is of the type of the series item. In the case of a ColumnSeries, it is a
ColumnSeriesItem. Other item types include BarSeriesItem, BubbleSeriesItem, LineSeriesItem, and PlotSeriesItem.
In your class, you override the updateDisplayList() method with the logic for drawing the chart item as well as
setting any custom properties. You should also call the super.updateDisplayList() method.

ADOBE FLEX 3 139
Adobe Flex 3 Data Visualization Developer Guide

The following example renders the chart items and uses an Array of colors to color each column in the ColumnChart
control differently:
// charts/CycleColorRenderer.as
package { // Empty package.
import
import
import
import

mx.charts.series.items.ColumnSeriesItem;
mx.skins.ProgrammaticSkin;
mx.core.IDataRenderer;
flash.display.Graphics;

public class CycleColorRenderer extends mx.skins.ProgrammaticSkin
implements IDataRenderer {
private var colors:Array = [0xCCCC99,0x999933,0x999966];
private var _chartItem:ColumnSeriesItem;
public function CycleColorRenderer() {
// Empty constructor.
}
public function get data():Object {
return _chartItem;
}
public function set data(value:Object):void {
_chartItem = value as ColumnSeriesItem;
invalidateDisplayList();
}
override protected function
updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
var g:Graphics = graphics;
g.clear();
g.beginFill(colors[(_chartItem == null)? 0:_chartItem.index]);
g.drawRect(0, 0, unscaledWidth, unscaledHeight);
g.endFill();
}
} // Close class.
} // Close package.

In your Flex application, you use this class as the renderer by using the itemRenderer property of the ColumnSeries,
as the following example shows:









ADOBE FLEX 3 140
Adobe Flex 3 Data Visualization Developer Guide













For more information on overriding the updateDisplayList() method, see “Implementing the updateDisplayList() method” on page 713 in Adobe Flex 3 Developer Guide.

Formatting Legend controls
The Legend control is a subclass of the Tile class. You can use Tile properties and some properties of the Container
class to format the Legend control. Also, the Legend control has properties (such as labelPlacement,
markerHeight , and markerWidth) that you can use to format its appearance. For information on creating Legend
controls, see “Using Legend controls” on page 205.
The following table describes the Legend control properties:
Property

Type

Description

labelPlacement

String

Specifies the alignment of the LegendItem object’s label. Valid values are right, left, top,
and bottom.

markerHeight

Number

Specifies the height, in pixels, of the LegendItem object’s marker.

markerWidth

Number

Specifies the width, in pixels, of the LegendItem object’s marker.

renderer

Object

Specifies a class for the LegendItem object’s marker. The renderer must implement the
IBoxRenderer interface.

stroke

Object

Specifies the line stroke for the LegendItem object’s marker. For more information on defining
line strokes, see “Using strokes with chart controls” on page 99.

The following example sets styles by using CSS on the Legend control:




Legend {
labelPlacement:left;
markerHeight:30;
markerWidth:30;
}


ADOBE FLEX 3 141
Adobe Flex 3 Data Visualization Developer Guide

















You can also change the appearance of the lines on the LegendItem object’s marker. You do this with the stroke
property or the legendMarkerRenderer property. For more information, see “Using strokes with chart controls” on
page 99.
You can place a Legend control anywhere in your application, as long as the control has access to the scope of the
chart’s data. You can place the Legend control in your application without a container, inside the same container as
the chart, or in its own container, such as a Panel container. The latter technique gives the Legend control a border
and title bar, and lets you use the title attribute of the Panel to create a title for the Legend control, as the following
example shows:




import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Expense:"Taxes", Amount:2000, Cost:321, Discount:131},
{Expense:"Rent", Amount:1000, Cost:95, Discount:313},
{Expense:"Bills", Amount:100, Cost:478, Discount:841}
]);


ADOBE FLEX 3 142
Adobe Flex 3 Data Visualization Developer Guide


















Setting the direction of legends

The direction property is a commonly used property that is inherited from the Tile container. This property of the
 tag causes the LegendItem objects to line up horizontally or vertically. The default value of direction
is vertical ; when you use this value, Flex stacks the LegendItem objects one on top of the other.
The following example sets the direction property to horizontal:



















The following example shows the Legend with the direction property set to horizontal:

Formatting the legend markers

You can define the appearance of the legend markers by using a programmatic renderer class. Flex includes several
default renderer classes that you can use for legend markers.
You can change the renderer of the LegendItem object from the default to one of the ChartItem renderers by using
the series’ legendMarkerRenderer style property. This property specifies the class to use when rendering the
marker in all associated legends.
The following example sets the legend marker of all three series to the DiamondItemRenderer class:

















If you do not explicitly set the legendMarkerRenderer property, the property uses the default class that the series’
itemRenderer style property specifies. Each series has a default renderer that is used if neither of these style
properties is specified.
You can create your own custom legend marker class. Classes used as legend markers must implement the IFlexDisplayObject interface and, optionally, the ISimpleStyleClient and IDataRenderer interfaces.
For more information on available renderer classes, see “Skinning ChartItem objects” on page 132.

145

Chapter 4: Displaying Data and Labels
Adobe® Flex® provides some techniques for displaying data and labels in your charts.
Topics

Working with axes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
About the CategoryAxis class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
About the NumericAxis class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Adding axis titles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Defining axis labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Using data labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Using DataTip objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Using per-item fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Using the minField property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Stacking charts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Using Legend controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

Working with axes
Each chart, except for a pie chart, has horizontal and vertical axes. There are two axis types: category and numeric.
A category axis typically defines strings that represent groupings of items in the chart; for example, types of expenses
(such as rent, utilities, and insurance) or names of employees. A numeric axis typically defines continuous data such
as the amount of an expense or the productivity gains of the employee. These data define the height of a column, for
example. Numeric axes include the LinearAxis, LogAxis, and DateTimeAxis.
You work with the axes objects to define their appearance, but also to define what data is displayed in the chart.
The following sections describe the CategoryAxis and NumericAxis classes.

About the CategoryAxis class
The CategoryAxis class maps discrete categorical data (such as states, product names, or department names) to an
axis and spaces them evenly along it. This axis accepts any data type that can be represented by a String.
The dataProvider property of the CategoryAxis object defines the data provider that contains the text for the
labels. In most cases, this can be the same data provider as the chart’s data provider. A CategoryAxis object used in
a chart inherits its dataProvider property from the containing chart, so you are not required to explicitly set the
dataProvider property on a CategoryAxis object.
The dataProvider property of a CategoryAxis object can contain an Array of labels or an Array of objects. If the
data provider contains objects, you use the categoryField property to point to the field in the data provider that
contains the labels for the axis, as the following example shows:




ADOBE FLEX 3 146
Adobe Flex 3 Data Visualization Developer Guide
















If the data provider contains an Array of labels only, you do not specify the categoryField property.
You can customize the labels of the CategoryAxis object rather than use the axis labels in the data provider. You do
this by providing a custom data provider. To provide a custom data provider, set the value of the CategoryAxis
object’s dataProvider property to a custom Array of labels, as the following example shows:






ADOBE FLEX 3 147
Adobe Flex 3 Data Visualization Developer Guide














For more information about chart data providers, see “Defining chart data” on page 15.
You can also customize the labels using the labelFunction property of the CategoryAxis and NumericAxis classes.
This property points to a callback function that refines the labels based on the existing data provider. For more information, see “Defining axis labels” on page 164.

About the NumericAxis class
The NumericAxis class maps a set of continuous numerical values (such as sales volume, revenue, or profit) to
coordinates on the screen. You do not typically use the NumericAxis base class directly. Instead, you use the
following subclasses when you define your axis:

•
•

LinearAxis

•

DateTimeAxis

LogAxis

These classes give you significant control over how to set the appearance and values of elements such as labels and
tick marks along the axis.
You can use the parseFunction property to specify a custom method that formats the data points in your chart.
This property is supported by all subclasses of the NumericAxis class. For a detailed description of using this
property with the DateTimeAxis, see “Using the parseFunction property” on page 151.
If you want to change the values of the labels, use the labelFunction property of the NumericAxis class. For more
information, see “Defining axis labels” on page 164.

ADOBE FLEX 3 148
Adobe Flex 3 Data Visualization Developer Guide

About the LinearAxis subclass
The LinearAxis subclass is the simplest of the three NumericAxis subclasses. It maps numeric values evenly between
minimum and maximum values along a chart axis. By default, Flex determines the minimum, maximum, and
interval values from the charting data to fit all of the chart elements on the screen. You can also explicitly set specific
values for these properties. The following example sets the minimum and maximum values to 10 and 100,
respectively:






















ADOBE FLEX 3 149
Adobe Flex 3 Data Visualization Developer Guide

About the LogAxis subclass
The LogAxis subclass is similar to the LinearAxis subclass, but it maps values to the axis logarithmically rather than
linearly. You use a LogAxis object when the data in your chart has such a wide range that clusters of data points are
lost to scale. LogAxis data also cannot be rendered if it is negative. For example, if you track the stock price of a
successful company since 1929, it is useful to represent the data logarithmically rather than linearly so that the chart
is readable.
When you use a LogAxis object, you set a multiplier that defines the values of the labels along the axis. You set the
multiplier with the interval property. Values must be even powers of 10, and must be greater than or equal to 0. A
value of 10 generates labels at 1, 10, 100, and 1000. A value of 100 generates labels at 1, 100, and 10,000. The default
value of the interval property is 10. The LogAxis object rounds the interval to an even power of 10, if necessary.
As with the vertical and horizontal axes, you can also set the minimum and maximum values of a LogAxis object, as
the following example shows:























ADOBE FLEX 3 150
Adobe Flex 3 Data Visualization Developer Guide

About the DateTimeAxis subclass
The DateTimeAxis subclass maps time-based values to a chart axis. The DateTimeAxis subclass calculates the
minimum and maximum values to align with logical date and time units (for example, the nearest hour or the nearest
week). The DateTimeAxis subclass also selects a time unit for the interval so that the chart renders a reasonable
number of labels.
The dataUnits property of the DateTimeAxis subclass specifies how Flex should interpret the Date objects. Flex
determines this property by default, but you can override it. To display data in terms of days, set the dataUnits
property to days, as the following example shows:


Valid values for the dataUnits property are milliseconds , seconds, minutes, hours, days , weeks, months, and
years.
When assigning appropriate label units, a DateTimeAxis object does not assign any unit smaller than the units represented by the data. If the dataUnits property is set to days, the chart does not render labels for every hour, no matter
what the minimum or maximum range is. To achieve this, you must set the value explicitly.
When using the DateTimeAxis class, you can filter out units when you set the dataUnits property to days. This lets
you create a chart that shows a "work week" or some other configuration that omits certain days of the week. For
more information, see “Omitting days on a DateTimeAxis object” on page 154.
Some series use the value of the dataUnits property to affect their rendering. Specifically, most columnar series
(such as Column, Bar, Candlestick, and HLOC controls) use the value of dataUnits to determine how wide to
render their columns. If, for example, the ColumnChart control’s horizontal axis has its labels set to weeks and
dataUnits set to days, the ColumnChart control renders each column at one-seventh the distance between labels.
About supported types

Data points on the DateTimeAxis object support the Date, String, and Number data types.

• Date: If the value of the data point is an instance of a Date object, it already represents an absolute date-time value
and needs no interpretation. To pass a Date object as a data value, use the parseFunction property of the
DateTimeAxis subclass. The parseFunction property returns a Date object. For more information, see “Using the
parseFunction property” on page 151.
• String: You can use any format that the Date.parse() method supports. The supported formats are:
• Day Month DD Hours:Minutes:Seconds GMT Year (for example, Tue Feb 1 12:00:00 GMT-0800 2005)
•
•

Day Month DD YYYY Hours:Minutes:Seconds AM|PM (for example, Tue Feb 1 2005 12:00:00 AM)

•

MM/DD/YYYY (for example, 02/01/2005)

Day Month DD YYYY (for example, Tue Feb 1 2005)

You can also write custom logic that uses the parseFunction property of the DateTimeAxis to take any data
type and return a Date. For more information, see “Using the parseFunction property” on page 151.

• Number: If you use a number, it is assumed to be the number of milliseconds since Midnight, 1/1/1970; for
example, 543387600000. To get this value on an existing Date object, use the Date object’s getTime() method.
The following example uses a String value for the date that matches the MM/DD/YYYY pattern and specifies that
the dates are displayed in units of days:
















Using the parseFunction property

You use the parseFunction property of the DateTimeAxis object to specify a method that customizes the value of
the data points. With this property, you specify a method that accepts a value and returns a Date object. The Date
object is then used in the DateTimeAxis object of the chart. This lets you provide customizable input strings and
convert them to Date objects, which Flex can then interpret for use in the DateTimeAxis.
The parsing method specified by the parseFunction property is called every time a value for the DateTimeAxis
must be calculated. It is called each time a data point is encountered when the user interacts with the chart. Consequently, Flex might call the parsing method often, which can degrade an application’s performance. Therefore, you
should try to keep the amount of code in the parsing method to a minimum.
Flex passes only one parameter to the parsing method. This parameter is the value of the data point that you specified
for the series. Typically, it is a String representing some form of a date. You cannot override this parameter or add
additional parameters.
The following example shows a parsing method that creates a Date object from String values in the data provider that
match the “YYYY, MM, DD” pattern:
















Formatting DateTimeAxis labels

When assigning the units to display along the axis, the DateTimeAxis object uses the largest unit allowed to render
a reasonable number of labels. The following table describes the default label format and the minimum range for
each unit type:
Unit

Label format

Minimum range

Years

YYYY

If the minimum and maximum values span at least 2 years.

Months

MM/YY

Spans at least 2 months.

Weeks

DD/MM/YY

Spans at least 2 weeks.

Days

DD/MM/YY

Spans at least 1 day.

Hours

HH:MM

Spans at least 1 hour.

Minutes

HH:MM

Spans at least 1 minute.

Seconds

HH:MM:SS

Spans at least 1 second.

Milliseconds

HH:MM:SS:mmmm

Spans at least 1 millisecond.

You can restrict the list of valid units for a particular chart instance to a subset that makes sense for the use case. As
with a LinearAxis object, you can specify minimum, maximum, and interval values for a DateTimeAxis object.

ADOBE FLEX 3 153
Adobe Flex 3 Data Visualization Developer Guide

When rounding off values, the DateTimeAxis object determines if values passed to it should be displayed in the local
time zone or UTC. You can set the displayLocalTime property to true to instruct the DateTimeAxis object to treat
values as local time values. The default value is false.
To change the values of the labels, use the labelFunction property of the DateTimeAxis object. This property is
inherited from the NumericAxis class and is described in “Defining axis labels” on page 164.
Setting minimum and maximum values on a DateTimeAxis

You can define the range of values that any axis uses by setting the values of the minimum and maximum properties on
that axis. For the DateTimeAxis class, however, you must use Date objects and not Numbers or Strings to define that
range. To do this, you create bindable Date objects and bind the values of the minimum and maximum properties to
those objects.
When creating Date objects, remember that the month parameter in the constructor is zero-based. The following
example sets the minimum date for the axis to the first day of December 2006, and the maximum date for the axis
to the first day of February 2007. The result is that Flex excludes the first and last data points in the ArrayCollection
because those dates fall outside of the range set on the axis:













ADOBE FLEX 3 154
Adobe Flex 3 Data Visualization Developer Guide






You can also represent the range of dates in MXML by using the following syntax:










Omitting days on a DateTimeAxis object

You can exclude particular days or ranges of days from a chart. This lets you create charts that show only the days of
the work week or that exclude other days of the week for other reasons.
For example, if you create a LineChart control that shows a stock price over the course of an entire month, the source
data typically includes pricing data only for Monday through Friday. Values for the weekend days are typically not
in the data. So, the chart control extrapolates values by extending the line through the weekend days on the chart,
which makes it appear as though there is data for those days. If you disable the weekend days, the chart control
removes those days from the chart and the line draws only the days that are not disabled. There is no breakage or
other indicator that there are omitted days.
To disable days of the week or ranges of days in your charts, you must set the dataUnits property of the
DateTimeAxis object to days. You then use the disabledDays or disabledRanges properties of the DateTimeAxis
object.
The value of the disabledDays property of DateTimeAxis is an Array of numbers. These numbers correspond to
days of the week, with 0 being Sunday, 1 being Monday, and so on, up until 6 being Saturday.
The following example excludes Saturdays and Sundays from the chart by setting the value of the disabledDays
property to an Array that contains 0 and 6:

















To exclude a range of dates from the DateTimeAxis object, you use the disabledRanges property. This property
takes an Array of Date objects or date ranges. The following example excludes August 13, and then the range of days
between August 27 and August 31:

















The following example expands on the previous example, except it adds a DateChooser control. You can select days
on the DateChooser that are then removed from the chart.

























Adding axis titles
Each axis in a chart control can include a title that describes the purpose of the axis to the users. Flex does not add
titles to the chart’s axes unless you explicitly set them. To add titles to the axes of a chart, you use the title property
of the axis object. This is CategoryAxis or one of the NumericAxis subclasses such as DateTimeAxis, LinearAxis, or
LogAxis. To set a style for the axis title, use the axisTitleStyleName property of the chart control.
The following example sets the titles of the horizontal and vertical axes (in MXML and ActionScript), and applies
the styles to those titles:





.myStyle {
fontFamily:Verdana;
fontSize:12;
color:#4691E1;
fontWeight:bold;
fontStyle:italic;
}


















You can also use embedded fonts for your axis titles. The following example embeds the font and sets the style for
the vertical axis title:





@font-face{
src:url("../assets/MyriadWebPro.ttf");
fontFamily:myMyriad;
}
.myEmbeddedStyle {
fontFamily:myMyriad;
fontSize:20;
}















For information on embedding fonts, see “Using embedded fonts” on page 656 in Adobe Flex 3 Developer Guide.
You can take advantage of the fact that the chart applies the axisTitleStyleName property without explicitly specifying it, as the following example shows:





.axisTitles {
color:red;
fontWeight:bold;
fontFamily:Arial;
fontSize:20;
}
ColumnChart {
axisTitleStyleName:axisTitles;
}







ADOBE FLEX 3 162
Adobe Flex 3 Data Visualization Developer Guide










You can also apply the title style to the axis, as the following example shows:


To change the appearance of the title on a chart, you can also use the titleRenderer property of the AxisRenderer
class. This lets you specify a class that defines the appearance of the title. The class must extend UIComponent and
implement the IDataRenderer and IFlexDisplayObject interfaces. Its data property will be the title used in the chart.
Typically, you extend the ChartLabel class to create a custom title renderer. In that class, you must override the
createChildren() and updateDisplayList() methods. In the createChildren() method you create an

instance of the TextField class that Flex uses to render the title. In the updateDisplayList() method, you set the
properties of the TextField object.
The following example is a custom title renderer. It creates a gradient fill background for each of the axis titles.
// charts/MyTextRenderer.as
package {
import mx.charts.chartClasses.ChartLabel;
import mx.charts.*;
import flash.display.*;
import flash.geom.Matrix;
import flash.text.TextField;
public class MyTextRenderer extends ChartLabel {
// The title is renderered in a TextField.
private var myText:TextField;
public function MyTextRenderer() {
super();
}
override protected function createChildren():void{
super.createChildren();
myText = new TextField();
}
override protected function updateDisplayList(w:Number, h:Number):void {
super.updateDisplayList(w, h);
// The data property provides access to the title text.
if(data.hasOwnProperty('text')) {
myText.text = data.text;
} else {
myText.text = data.toString();
}

ADOBE FLEX 3 163
Adobe Flex 3 Data Visualization Developer Guide

this.setStyle("textAlign","center");
var g:Graphics = graphics;
g.clear();
var m:Matrix = new Matrix();
m.createGradientBox(w+100,h,0,0,0);
g.beginGradientFill(GradientType.LINEAR,[0xFF0000,0xFFFFFF],
[.1,1],[0,255],m,null,null,0);
g.drawRect(-50,0,w+100,h);
g.endFill();
}
}
}

To use this class in your Flex application, you just point the titleRenderer property to it. This assumes that the
class is in your source path. In this case, store both the MyTextRenderer.as and RendererExample.mxml files in the
same directory.
The following example applies the custom title renderer to all axis titles.













































Defining axis labels
You define the values of axis labels on the horizontal axis or vertical axis. You can customize these values by using
the available data in the series or you can disable these values altogether.

ADOBE FLEX 3 165
Adobe Flex 3 Data Visualization Developer Guide

Disabling axis labels
You can disable labels by setting the value of the showLabels property to false on the AxisRenderer object, as the
following example shows:
























Note that any time you want to use an AxisRenderer, you must explicitly set the axis to which it is applied with the
renderer’s axis property.

ADOBE FLEX 3 166
Adobe Flex 3 Data Visualization Developer Guide

Customizing axis labels
You can customize the value of axis labels by using the labelFunction callback function of the axis. The function
specified in labelFunction returns a String that Flex displays as the axis label.
The callback function signature for a NumericAxis object (including the DateTimeAxis, LinearAxis, and LogAxis
classes) is:
function_name(labelValue:Object, previousLabelValue:Object, axis:IAxis):return_type

The callback function signature for a CategoryAxis object is:
function_name(labelValue:Object, previousLabelValue:Object, axis:axis_type,
labelItem:Object):return_type

The following table describes the parameters of the callback function:
Parameter

Description

labelValue

The value of the current label.

previousLabelValue

The value of the label preceding this label. If this is the first label, the value of previousLabelValue is
null.

axis

The axis object, such as CategoryAxis or NumericAxis.

labelItem

A reference to the label object. This argument is only passed in for a CategoryAxis object. For NumericAxis
subclasses such as LogAxis, DateTimeAxis, and LinearAxis objects, you omit this argument.
This object contains a name/value pair for the chart data. For example, if the data provider defines the
Month, Profit, and Expenses fields, this object might look like the following:
Profit:1500
Month:Mar
Expenses:500

You can access the values in this object by using dot-notation for dynamic objects, as the following example
shows:
return "$" + labelItem.Profit;

The type of object that the callback function returns. This can be any object type, but is most commonly a
String for CategoryAxis axes, a Number for NumericAxis objects, or a Date object for DateTimeAxis objects.

return_type

When you use the labelFunction, you must be sure to import the class of the axis or the entire charts package; for
example:
import mx.charts.*;

The following example defines a labelFunction for the horizontal CategoryAxis object. In that function, Flex
appends ’07 to the axis labels, and displays the labels as Jan ’07, Feb ’07, and Mar ‘07. For the vertical axis, this
example specifies that it is a LinearAxis, and formats the values to include a dollar sign and a thousands separator.
The return types of the label formatting functions are Strings.





















In the previous example, if you use a CategoryAxis but do not specify the value of the categoryField property on
the axis, the label format function receives an object rather than a value for the first argument. In that case, you must
drill down into the object to return a formatted String.
You can also customize labels by using the labelFunction property of the AxisRenderer class. This lets you control
the labels if you use multiple axes. The callback function signature for the AxisRenderer’s label function is:
function_name(axisRenderer:IAxisRenderer, label:String):String

Because this particular callback function takes an argument of type IAxisRenderer, you must import that class when
you use this function:
import mx.charts.chartClasses.IAxisRenderer;

The following example specifies the value of the labelFunction property for one of the vertical axis renderers. The
resulting function, CMstoInches(), converts centimeters to inches for the axis’ labels.


































ADOBE FLEX 3 170
Adobe Flex 3 Data Visualization Developer Guide








displayName="25%"/>
displayName="50%"/>
displayName="75%"/>
displayName="90%"/>
displayName="95%"/>
Child X"

Another way to customize the labels on an axis is to set a custom data provider for the labels. This can be done if you
are using the CategoryAxis and not the NumericAxis class for the axis values. For more information, see “About the
CategoryAxis class” on page 145.
For the PieChart control, you can customize labels with the label function defined on the PieSeries class. For more
information, see “Using data labels with PieChart controls” on page 66.

Setting ranges
Flex determines the minimum and maximum values along an axis and sets the interval based on the settings of the
NumericAxis object. You can override the values that Flex calculates. By changing the range of the data displayed in
the chart, you also change the range of the tick marks.
The following table describes the properties of the axis that define the ranges along the axes:
Property

Description

minimum

The lowest value of the axis.

maximum

The highest value of the axis.

interval

The number of units between values along the axis.

The following example defines the range of the y-axis:






















In this example, the minimum value displayed along the y-axis is 10, the maximum value is 100, and the interval is
10. Therefore, the label text is 10, 20, 30, 40, and so on.
To set the minimum and maximum values on a DateTimeAxis, you must use Date objects rather than Strings or
Numbers in the axis’s tag. For more information, see “Setting minimum and maximum values on a DateTimeAxis”
on page 153.
For information about setting the length and location of tick marks, see “Formatting tick marks” on page 96.

Using data labels
Data labels show static data on the chart control. They typically appear on the chart for each chart element (such as
all pie wedges or all bars) for the entire time the chart is active. They are different from DataTip objects in that they
typically show only the simple value of a chart element in a series (for example, a column’s height or a pie wedge’s
percentage) and do not include other information such as the series name or complex formatting. DataTip controls
are more interactive, since they appear and disappear as the user moves the mouse over chart elements. For more
information about DataTip objects, see “Using DataTip objects” on page 179.

ADOBE FLEX 3 172
Adobe Flex 3 Data Visualization Developer Guide

The following example shows a column chart with an active DataTip object and visible data labels:

A

B

A. DataTip B. Data label

The following chart series support data labels:

•

BarSeries

•
•

ColumnSeries
PieSeries

Just like DataTip controls, data labels are not enabled by default. You can add data labels by setting the value of the
series’ labelPosition property to inside or outside (for BarSeries and ColumnSeries) or inside, outside,
callout, or insideWithCallout (for PieSeries). For more information, see “Adding data labels” on page 174. The
default value of the series’s labelPosition property is none.
The following example enables data labels on the columns by setting the value of the labelPosition style property
to inside. You can click the button to change the position of the labels to outside.






















ADOBE FLEX 3 174
Adobe Flex 3 Data Visualization Developer Guide

Adding data labels
By default, BarSeries, ColumnSeries, and PieSeries objects do not display data labels. To enable data labels on
BarSeries and ColumnSeries objects, set the value of the labelPosition property to inside or outside. To
enabled data labels on PieSeries, set the value of the labelPosition property to inside, outside, callout, or
insideWithCallout .
The default value of the labelPosition property is none.
Because labelPosition property is a style property, you can set it either inline in the series’ tag or by using the
setStyle() method, as the following example shows:
mySeries.setStyle("labelPosition", "outside");

The contents of the data label are determined by several factors, in order of precedence:

• labelField—Specifies a field in the data provider that sets the contents of the data label. This overrides any
method specified by the labelFunction property.
• labelFunction—Specifies a method that takes several arguments and returns a String that the chart series uses
for the data label’s contents. For more information, see “Customizing data label values” on page 176.
• Default—If neither the labelField nor the labelFunction are specified, the default content of the data label
is the value that the series uses to draw the chart element. This is the xField value for a ColumnSeries and the
yField value for a BarSeries. For a PieSeries, the default content of the data labels is the value of the field property.
Setting the labelPosition property to inside restricts the amount of styling you can perform on the data labels.
If the data labels are inside the chart elements (for example, inside the column in a ColumnSeries), their size is
restricted by the available space within that element. A data label cannot be bigger than the chart element that
contains it. If you try to set a data label to be larger than its underlying chart element, Flex scales and possibly
truncates the contents of the data label. As a result, you should usually set the value of the labelPosition property
to outside. For information about styling your data labels, see “Styling data labels” on page 174.
For 100%, stacked, and overlaid charts, the values of the series’s labelPosition property can only be inside. If you
set the labelPosition property to outside for these types of bar and column series, the value is ignored and the
labels are rendered as if the labelPosition was inside.
If you set the labelPosition property to inside, you cannot rotate data labels.

Styling data labels
You can style the data labels so that their appearance fits into the style of your application. You can apply the
following styles to data labels:

•

fontFamily

•
•

fontSize

•
•

fontWeight

•
•

labelPosition

fontStyle

labelAlign (when labelPosition is inside only)

labelSizeLimit

You can apply these styles by using type or class selectors in CSS or by using the setStyle() method. You can also
set these properties inline in the series’s MXML tag.
The following example shows how to use CSS class selectors to set the labelPosition and other properties that
affect the appearance of data labels in a chart:



ADOBE FLEX 3 175
Adobe Flex 3 Data Visualization Developer Guide




.incomeSeries {
fontSize:9;
fontWeight:bold;
labelPosition:inside;
labelAlign:top;
}
.expensesSeries {
fontSize:8;
labelPosition:inside;
labelAlign:middle;
}


















Labels are scaled and possibly truncated if they are too big for the area. Labels will never overlap each other or other
chart elements.
For PieSeries objects, you can also specify the gap and stroke of callout lines that associate a data label with a
particular wedge in the pie. For more information, see “Using data labels with PieChart controls” on page 66.
Aligning data labels

You can align data labels so that they are positioned, either vertically or horizontally, relative to the underlying chart
element. For example, you can center a data label over a column in a ColumnChart control, or align it to the left of
all bars in a BarChart control.
To align data labels, you use the series’ labelAlign style property. For ColumnSeries objects, valid values are
middle, top, and bottom. For BarSeries objects, valid values are left, center, and right. The defaults are middle
and center, respectively.
You can only set the labelAlign style if the labelPosition property is set to inside. Label alignment is ignored
if the labelPosition is outside.
You cannot change the alignment of data labels on a PieSeries object.
ColumnChart controls have two additional properties that you can use to control the way data labels are rendered:
showLabelVertically and extendLabelToEnd. These properties are important when the available space for labels
is not sufficient to render the entire label. If you set showLabelVertically to true, Flex can render the label vertically rather than horizontally if the columns are not wide enough to render them normally. If you set
extendLabelToEnd to true, then Flex can use the space between the data item’s edge and the outer boundary of the
chart to render the label in, rather than truncate the label at the end of the data item’s column.

Customizing data label values
You can customize the value of your data labels. For example, you can prepend a dollar sign ($) or apply numeric
formatters to the data labels to make your chart more readable. You can change the value of the data label altogther
if you want.
To customize the contents of a data label, you use the labelFunction property of the series to specify a callback
function. The function specified in labelFunction returns a String that Flex displays as the data label. Flex calls
this callback function for each chart element in the series when the data labels are first rendered, and calls this
method any time the labels are rendered again (for example, if the data changes).
The exact signature of the custom label callback function depends on the series that you are using it with. For
BarSeries and ColumnSeries objects, the function takes two arguments (see “Customizing data labels for
ColumnSeries and BarSeries objects” on page 176); for PieSeries objects, the function takes four arguments (see
“Customizing data labels for PieSeries objects” on page 178).
Customizing data labels for ColumnSeries and BarSeries objects

For a ColumnSeries or BarSeries object, the signature for the custom label callback function is:
function_name(element:ChartItem, series:Series):String { ... }

ADOBE FLEX 3 177
Adobe Flex 3 Data Visualization Developer Guide

The following table describes the parameters of the labelFunction callback function for a ColumnSeries or
BarSeries object:
Parameter

Description

element

A reference to the ChartItem that this data label applies to. The ChartItem represents a single data point in a
series.

series

A reference to the series that this data label is used on.

When you customize the value of the data label, you typically get a reference to the series item. You do this by casting
the element argument to a specific chart item type (BarSeriesItem or ColumnSeriesItem). You then point to either
the yNumber or xNumber property to get the underlying data.
You can also get a reference to the current series by casting the series argument to the specific series type
(ColumnSeries or BarSeries). This lets you access properties such as the yField or xField.
The following example creates data labels for each of the columns in the ColumnChart control:











ADOBE FLEX 3 178
Adobe Flex 3 Data Visualization Developer Guide













You can also access the specific field in the data provider that provides the data. For example, in the previous
example, you could get the value of the data item (in this case, the value of the Income field) by using code similar
to the following:
var item:ColumnSeriesItem = ColumnSeriesItem(element);
var s:String = item.item.Income;
return s;

This is not a recommended practice, however, because it makes the callback function less reusable and can force you
to use additional code to detect which column you are providing data labels for.
Customizing data labels for PieSeries objects

For a PieSeries object, the signature for the custom label callback function is:
function_name(data:Object, field:String, index:Number, percentValue:Number):String { ... }

The following table describes the parameters of the labelFunction callback function for a PieSeries:
Parameter

Description

data

A reference to the data point that chart element represents; type Object.

field

The field name from the data provider; type String.

index

The number of the data point in the data provider; type Number.

percentValue

The size of the pie wedge relative to the pie; type Number. If the pie wedge is a quarter of the size of the pie,
this value is 25.

The following example generates data labels for a PieSeries object that include data and formatting. It defines the
display() method as the labelFunction callback function to handle formatting of the label text.














Using DataTip objects
DataTip objects are similar to Flex ToolTip objects in that they cause a small pop-up window to appear that shows
the data value for the data point under the mouse pointer.
You use the showDataTips property of chart controls to enable DataTip objects.
The values displayed in the DataTip depends on the chart type, but typically it displays the names of the fields and
the values of the data from the data provider.
Note: DataTip controls and data labels are not the same, although they can show the same information. Data labels are
always visible regardless of the location of the user’s mouse pointer. For more information about data labels, see “Using
data labels” on page 171.

ADOBE FLEX 3 180
Adobe Flex 3 Data Visualization Developer Guide

The following image shows a simple DataTip:

To enable DataTip objects, set the value of the chart control’s showDataTips property to true, as the following
example shows:


















To change the styles of the DataTip, you can use the DataTip type selector in an  block or in an external
CSS file. The following example applies a new style to the text in the DataTip:




DataTip {
fontFamily: "Arial";

ADOBE FLEX 3 181
Adobe Flex 3 Data Visualization Developer Guide

fontSize: 12;
fontWeight:bold;
fontStyle:italic;
}
















Customizing the text inside a DataTip object
To make the information in the DataTip more understandable to users, you can define the series of your chart with
names that are easily understood. Adobe® Flash® Player or Adobe® AIR™ displays this name in the DataTip, as the
following image shows:

The following example names the data series by using the displayName property of the series:


ADOBE FLEX 3 182
Adobe Flex 3 Data Visualization Developer Guide


















You can also name the axis to display labels in the DataTip by using the displayName property. When the axis has
a name, this name appears in the DataTip in italic font before the label data, as the following image shows:

In some cases, you add an axis solely for the purpose of adding the label to the DataTip. The following example
names both axes so that both data points are labeled in the DataTip:





















Showing multiple DataTip objects
You can display more than one DataTip by using the dataTipMode property on the chart control. The display
options are single and multiple. When dataTipMode is set to multiple, the chart displays all DataTip objects
within range of the cursor. The following example sets the value of a ColumnChart control’s dataTipMode property
to multiple :


















The following example shows DataTip objects when the dataTipMode property is set to multiple:

The default value of dataTipMode depends on the chart type. Its setting is based on the likelihood that there are
overlapping DataTip objects in that chart type. The default value of the dataTipMode property for the following
chart types is single:

•

BarChart

•
•

CandlestickChart

•
•

HLOCChart

ColumnChart
PieChart

The default value is multiple for the dataTipMode property for all other chart types.
To determine the size of the interactive area around a data point, you set the mouseSensitivity property. The
mouseSensitivity property configures the distance, in pixels, around the data points where Flex reacts to mouse
events such as click and mouseOver. With this property, you can trigger DataTip objects to appear when the user
moves the mouse pointer near the data point rather than onto the data point. For more information, see “Changing
mouse sensitivity” on page 219.

ADOBE FLEX 3 185
Adobe Flex 3 Data Visualization Developer Guide

You can also show all the available data tips on a chart at one time by setting the value of the chart control’s
showAllDataTips property to true. The result is that all data tips are visible at all times. When you do this, you
typically set the value of the showDataTips property to false so that a second data tip does not appear when you
mouse over a chart item.

Customizing DataTip values
You can customize the text displayed in a DataTip by using the dataTipFunction callback function. When you
specify a dataTipFunction callback function, you can access the data of the DataTip before Flex renders it and
customizes the text.
The argument to the callback function is a HitData object. As a result, you must import mx.charts.HitData when
using a DataTip callback function.
Flex displays whatever the callback function returns in the DataTip box. You must specify a String as the callback
function’s return type.
The following example defines a new callback function, dtFunc, that returns a formatted value for the DataTip:



$" +
hd.item.Profit + "";
}
]]>

















You can also use the HitData object to get information about the series in which that data item appears. To do this,
you cast the HitData object to a Series class, as the following example shows:















ADOBE FLEX 3 187
Adobe Flex 3 Data Visualization Developer Guide





The series item is also accessible from the HitData object in a custom DataTip function. The chartItem property
refers to an instance of a subclass of the ChartItem class. The type depends on the series type; for example, the
chartItem for a ColumnSeries is an instance of the ColumnSeriesItem class.
In the following example, the yValue of the ColumnSeriesItem represents the percentage which a series takes up in
a 100% chart:



" + ColumnSeries(e.element).displayName + "\n";
s += "Income: $" +
e.item.Income + "\n";
s += "Expenses: $" +
(e.item.Income - e.item.Profit) + "\n";
s += "------------------------\n";
s += "Profit: $" + e.item.Profit + "\n";
// The value of the Income will always be 100%,
// so exclude adding that to the DataTip. Only
// add percent when the user gets the Profit DataTip.
var percentValue:Number =
Number(ColumnSeriesItem(e.chartItem).yValue);
if (percentValue < 100) {
s += "Profit was equal to about " +
Math.round(percentValue) + "% of the income.\n";
}
return s;
//return e.item.Month + ":$" + e.item.Profit + "";
}
]]>














For more information on using the HitData object of chart events, see “Using the HitData object” on page 213.
The DataTip callback function can return simple HTML for formatted DataTip objects. Flex supports a small subset
of HTML tags including , , , and 
.

Creating custom DataTip renderers
You can create a custom class that defines the appearance and content of the data tip. This class must implement the
IFlexDisplayObject and IDataRenderer interfaces.
You typically create a custom ActionScript class that extends DataTip, and override the createChildren() and
updateDisplayList() methods. In the createChildren() method, you create an instance of the TextField class.
In the updateDisplayList() method, you add text to the new text field, and you define the box for the data tip.
The chart assigns the custom data tip’s data property to be the HitData structure for the data point.
The following example class creates a custom data tip.
// charts/MyDataTip.as
package {
import mx.charts.chartClasses.DataTip;
import mx.charts.*;
import flash.display.*;
import flash.geom.Matrix;
import flash.text.TextField;
public class MyDataTip extends DataTip {
// The title is renderered in a TextField.
private var myText:TextField;
public function MyDataTip() {
super();
}
override protected function createChildren():void{
super.createChildren();
myText = new TextField();
}
override protected function updateDisplayList(w:Number, h:Number):void {
super.updateDisplayList(w, h);

ADOBE FLEX 3 189
Adobe Flex 3 Data Visualization Developer Guide

// The data property provides access to the data tip's text.
if(data.hasOwnProperty('text')) {
myText.text = data.text;
} else {
myText.text = data.toString();
}
this.setStyle("textAlign","center");
var g:Graphics = graphics;
g.clear();
var m:Matrix = new Matrix();
m.createGradientBox(w+100,h,0,0,0);
g.beginGradientFill(GradientType.LINEAR,[0xFF0000,0xFFFFFF],
[.1,1],[0,255],m,null,null,0);
g.drawRect(-50,0,w+100,h);
g.endFill();
}
}
}

To use the custom data tip, you set the value of the dataTipRenderer style property of the chart control to the
custom class. The following sample application applies the custom data tip to the chart control.


















If you want to prevent the data tip’s box from displaying when you mouse over a chart item, you can set the
dataTipRenderer style property to a dummy class, such as ProgrammaticSkin; for example:
myChart.setStyle("dataTipRenderer",mx.skins.ProgrammaticSkin);

Using per-item fills
You can customize the appearance of chart items in a series by using the fillFunction property to define the fill.
This function takes the chart item and its index as arguments, so that you can examine the chart item’s data values
and return a fill based on whatever criteria you choose to use.
Programmatically assigning fills lets you set a threshold for color values, or conditionalize the colors of your chart
items. For example, if the size of a pie wedge is greater than 25%, make it red, or if a column’s value is greater than
100, make it green.
You set the value of the fillFunction property on each series, so if you have multiple series, you can have multiple
fill functions, or all series can share the same fill function.
The signature of the fillFunction is as follows:
function_name(element:ChartItem, index:Number):IFill { ... }

The following table describes the arguments:
Argument

Description

element

The chart item for which the fill is created; type ChartItem.

index

The index of the chart item in the series’s data provider; type Number.

The fillFunction property returns a Fill object (an object that implements the IFill interface). This object is
typically an instance of the SolidColor class, but it can also be of type BitmapFill, LinearGradient, or RadialGradient.
For information on working with gradients, see “Using gradient fills with chart controls” on page 111.
The returned fill from a fillFunction takes precedence over fills that are set with traditional style methods. For
example, if you set the value of the fill or fills property of a series and also specify a fillFunction, the fills are
ignored and the fill returned by the fillFunction is used when rendering the chart items in the series.
The following example compares the value of the yField in the data provider when it fills each chart item. If the
yField value (corresponding to the CurrentAmount field) is greater than $50,000, the column is green. If it is less

than $50,000, the column is red.




= 50000) {
return c;
} else {
// They have not met their goal.
c.color = 0xFF0000;
}
return c;
}
]]>

















ADOBE FLEX 3 192
Adobe Flex 3 Data Visualization Developer Guide



















This example defines custom entries in the Legend. If you use the fillFunction property to define the fills of chart
items, and you want a Legend control in your chart, you must manually create the Legend object and its LegendItem
objects. For more information on creating Legend and LegendItem objects, see “Using Legend controls” on page 205.
By using the index argument that is passed to the fill function, you can also access other items inside the same series.
The following example sets the color of the fill to green for only the columns whose item value is greater than the
previous item’s value. Otherwise, it sets the color of the fill to red.




= 0) {
// Current column’s value is greater than the previous.
return c;
} else {
// Previous column’s value is greater than the current.
c.color = 0xFF0000;
}
}
return c;
}
]]>





























ADOBE FLEX 3 194
Adobe Flex 3 Data Visualization Developer Guide







This example defines custom entries in the Legend because using a fillFunction prevents you from using an
automatically generated Legend. For more information on creating Legend objects, see “Using Legend controls” on
page 205.
You can also access other series data inside a fill function so that you can perform comparisons against other series
in a data provider. While you cannot reference a series from inside the fill function by using the fill function’s
arguments, you can use the id property of a series to gain access to its data.
The following example uses chart items in more than one series to determine what color the fill for each chart item
should be. In this case, it compares the value of the current amount of sales in the currentSalesSeries series against
the sales goal in the salesGoalSeries series. If the goal is met, the positive difference between the goal and the actual
sales is green. If the goal is not yet met, the negative difference between the goal and the actual sales is red.




= 0) {
// Sales person met their goal.
return c;
} else if (diff < 0) {
// Sales person did not meet their goal.
c.color = 0xFF0000;
c.alpha = .2;
}
return c;
}
]]>


























ADOBE FLEX 3 196
Adobe Flex 3 Data Visualization Developer Guide
























This chart uses overlaid columns, and sets the value of the top-most column’s alpha property to .2 if it the sales goal
was not met. By using an alpha property, you can view the column underneath the current column. This lets you
show the difference for only the items that have missed sales goals without drawing stacked columns.

Using the minField property
Some series types let you specify a minimum value for the elements drawn on the screen. For example, in a ColumnChart control, you can specify the base value of the column. To specify a base value (or minimum) for the column,
set the value of the series object’s minField property to the data provider field.
You can specify the minField property for the following chart series types:

•

AreaSeries

•
•

BarSeries
ColumnSeries

Setting a value for the minField property creates two values on the axis for each data point in an area; for example:







ADOBE FLEX 3 197
Adobe Flex 3 Data Visualization Developer Guide












The resulting DataTip labels the current value “high” and the minField value “low.” The following example shows
an AreaChart that defines the base of each column:

For an example of using the minField property to create a waterfall or cascading ColumnChart control, see “Using
column charts” on page 50.
You can also use the baseAtZero property to determine whether or not the axis starts at zero. Set this property to
true to start the axis at zero; set it to false to let Flex determine a reasonable starting value relative to the values
along the axis.

ADOBE FLEX 3 198
Adobe Flex 3 Data Visualization Developer Guide

Stacking charts
When you use multiple data series in the AreaChart, BarChart, and ColumnChart controls, you can control how Flex
displays the series using the type property of the controls. The following table describes the values that the type
property supports:
Property

Description

clustered

Chart elements for each series are grouped by category. This is the default value for BarChart and ColumnChart
controls.

overlaid

Chart elements for each series are rendered on top of each other, with the element corresponding to the last series
on top. This is the default value for AreaChart controls.

stacked

Chart elements for each series are stacked on top of each other. Each element represents the cumulative value of the
elements beneath it.

100%

Chart elements are stacked on top of each other, adding up to 100%. Each chart element represents the percentage
that the value contributes to the sum of the values for that category.

The following example creates an AreaChart control that has four data series, stacked on top of each other:


















ADOBE FLEX 3 199
Adobe Flex 3 Data Visualization Developer Guide

The following example shows a stacked AreaChart control:

With an overlay, the last series appears on top, and can obscure the data series below it unless you use the alpha
property of the fill to make it transparent. For more information, see “Using fills with chart controls” on page 105.
If you set the type property to 100%, the control draws each series stacked on top of each other, adding up to 100%
of the area. Each column represents the percentage that the value contributes to the sum of the values for that
category, as the following example shows:

You can use the ColumnSet, BarSet, and AreaSet classes to combine groups of chart series, and thereby use different
types of series within the same chart. The following example uses BarSet classes to combine clustered and stacked
BarSeries in a single chart. The example shows how to do this in MXML and ActionScript:

























ADOBE FLEX 3 202
Adobe Flex 3 Data Visualization Developer Guide

The resulting chart shows two clustered series; one is a standalone series, and the other is a stacked series, as the
following example shows:

Normally, the values in stacked series are additive, which means that they are all added to one another to create an
ever larger data item (column or bar or area). When one or more values is negative, the rendering of the data items
can be unpredictable because adding a negative value would normally take away from the data item. You can also
use the allowNegativeForStacked property of the AreaSet, BarSet, and ColumnSet classes to let a stacked series
include data with negative values, and thereby render negative data items that are properly stacked.
The following example stacks the Profit and Expenses fields, in which some of the values are negative.













ADOBE FLEX 3 203
Adobe Flex 3 Data Visualization Developer Guide











The resulting chart shows three months of data, with all expenses and some income data rendering in negative
values:

ADOBE FLEX 3 204
Adobe Flex 3 Data Visualization Developer Guide

You can create cascading or waterfall column charts by using the ColumnChart control. One way to do this is to
create an invisible series and to use that to set the variable height of the other columns, creating the waterfall effect.
The following is an example of a waterfall chart:

The following code creates this chart:

























Using Legend controls
Legend controls match the fill patterns on your chart to labels that describe the data series shown with those fill
patterns. Each entry in a Legend control is known as a legend item. A legend item contains two basic parts: the
marker, and the label. Legend items are of type LegendItem. The following example shows the two parts of a legend
item:

A. Label B. Marker

In addition to matching fill patterns, legend markers also use the renderer classes of ChartItem objects, such as the
points on a PlotChart control. The following example shows a Legend control for a PlotChart control with three
series. Each series uses its own renderer class to draw a particular shape, and the Legend control reflects those shapes:

For information on styling Legend controls, see “Formatting Legend controls” on page 140.

Adding a Legend control to your chart
You use the Legend class to add a legend to your charts. The Legend control displays the label for each data series in
the chart and a key that shows the chart element for the series.
The simplest way to create a Legend control is to bind a chart to it by using the dataProvider property, as the
following example shows:




ADOBE FLEX 3 206
Adobe Flex 3 Data Visualization Developer Guide


import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Expense:"Taxes", Amount:2000, Cost:321, Discount:131},
{Expense:"Rent", Amount:1000, Cost:95, Discount:313},
{Expense:"Bills", Amount:100, Cost:478, Discount:841}
]);
















You add a Legend to a chart in ActionScript by instantiating a new object of type Legend, and then calling the
container’s addChild() method to add the Legend to the container, as the following example shows:


















The Legend control creates the legend using information from the chart control. It matches the colors and names of
the LegendItem markers to the fills and labels of the chart’s data series. In the previous example, Flex uses the
BarSeries control’s displayName property to define the LegendItem label.
Legend controls require that elements of the charts be named. If they are not named, the Legend markers appear, but
without labels.
A Legend control for a PieChart control uses the nameField property of the data series to find values for the legend.
The values that the nameField property point to must be Strings.
The following example sets the nameField property of a PieChart control’s data series to Expense. Flex uses the
value of the Expense field in the data provider in the Legend control.




import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Expense:"Taxes", Amount:2000},
{Expense:"Rent", Amount:1000},
{Expense:"Food", Amount:200}
]);




ADOBE FLEX 3 208
Adobe Flex 3 Data Visualization Developer Guide









The nameField property also defines the series for the DataTip objects and labels.

Creating a custom Legend control
You can create a custom Legend control in MXML by defining the  tag and populating it with
 tags. The following example creates a custom legend for the chart with multiple axes:
















{h1Stroke}


{h2Stroke}


























ADOBE FLEX 3 210
Adobe Flex 3 Data Visualization Developer Guide


















210

Chapter 5: Using Events and Effects
in Charts
You can use Adobe® Flex® charting controls to make interesting and engaging charts. Important factors to consider
are how users’ interactions with your applications trigger effects and events.
Topics

Handling user interactions with charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Using effects with charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Drilling down into data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Selecting chart items. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Drawing on chart controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

Handling user interactions with charts
Chart controls accept many kinds of user interactions, from moving the mouse over a data point to clicking or
double-clicking on that data point. You can create an event handler for each of these interactions and use the Event
object in that handler to access the data related to that interaction. For example, if a user clicks on a column in a
ColumnChart control, you can access that column’s data in the click event handler of that chart.
The chart controls support the mouse events that are inherited from the UIComponent class: mouseMove,
mouseOver, mouseUp, mouseDown, and mouseOut. These events are of type MouseEvent. In addition, the base class
for all chart controls, ChartBase, adds support for the the ChartEvent and ChartItemEvent events.
The ChartItemEvent class defines events that are specific to the chart components, such as when the user clicks a
data item in a chart. The ChartEvent class defines events that occur when the user clicks or double-clicks on a chart
control, but not on a chart item in that chart control.
The following table describes the ChartEvent event types:
Chart event type

Description

chartClick

Broadcast when the user clicks the mouse button while the mouse pointer is over a chart but not on a chart item.

chartDoubleClick

Broadcast when the user double-clicks the mouse button while the mouse pointer is over a chart but not on a
chart item.

The following table describes the ChartItemEvent event types:
Chart data event type

Description

change

Dispatched when the selected item or items changes in the chart.

itemClick

Broadcast when the user clicks the mouse button while over a data point.

itemDoubleClick

Broadcast when the user double-clicks the mouse button while over a data point.

itemMouseDown

Broadcast when the mouse button is down while over a data point.

itemMouseMove

Broadcast when the user moves the mouse pointer while over a data point.

itemMouseUp

Broadcast when the user releases the mouse button while over a data point.

ADOBE FLEX 3 211
Adobe Flex 3 Data Visualization Developer Guide

Chart data event type

Description

itemRollOut

Broadcast when the closest data point under the mouse pointer changes.

itemRollOver

Broadcast when the user moves the mouse pointer over a new data point.

In addition to the ChartEvent and ChartItemEvent classes, there is also the LegendMouseEvent. This class defines
events that are broadcast when the user clicks on legend items or mouses over them.

About chart events
Chart events are triggered when the user clicks or double-clicks the mouse button while the mouse pointer is over a
chart control, but not over a chart item in that chart control. These events are dispatched only if the hit data set is
empty.
Chart events are of type ChartEvent. Because ChartEvent events are part of the charts package, and not part of the
events package, you must import the appropriate classes in the mx.charts.events package to use a ChartEvent event.
The following example logs a ChartEvent when you click or double-click the chart control, but only if you are not
over a chart item or within it’s range, as determined by its mouseSensitivity property.





Panel {
paddingLeft:5;
paddingRight:5;
paddingTop:5;
paddingBottom:5;
}
















About chart data events
Chart data events are triggered only when the user moves the mouse pointer over a data point, whereas UIComponent events are triggered by any mouse interaction with a control.
The chart data events are of type ChartItemEvent. Because ChartItemEvent events are part of the charts package, and
not part of the events package, you must import the appropriate classes in the mx.charts.events package to use a
ChartItemEvent event.
The following example opens an alert when the user clicks a data point (a column) in the chart:

















Using the HitData object
Flex dispatches a ChartItemEvent object for each chart data event such as when you click on an item in the series. In
addition to the standard target and type properties that all Event objects have, Flex adds the hitData property to
the ChartItemEvent object. This property is an object instance of the HitData class. The hitData property contains
information about the data point that is closest to the mouse pointer at the time of the mouse event.
The item property of the HitData object refers to the data point. You can use that property to access its value by its
name, as the previous example shows. The HitData x and y properties refer to the screen coordinates of the data
point.
Only data points within the radius determined by the mouseSensitivity property can trigger an event on that data
point. For more information, see “Changing mouse sensitivity” on page 219.
The following example uses the itemDoubleClick event handler to display HitData information for data points in
a column chart when the user clicks on a column. Because each column in the ColumnChart control is associated
with a single data point value, clicking the mouse anywhere in the column displays the same information.


























Getting chart elements

The HitData object accesses the chart’s ChartItem objects. These objects represent data points on the screen. In
addition to providing access to the data of data points, ChartItem objects provide information about the size and
position of graphical elements that make up the chart. For example, you can get the x and y positions of columns in
a ColumnChart.
The following example uses a semitransparent Canvas container to highlight the data point that the user clicks on
with the mouse. The application also accesses the ChartItem object to get the current value to display in a ToolTip
on that Canvas:




ToolTip {
fontSize:24;
}
ColumnChart {
gutterLeft: 54;
}


















For information about changing the appearance of ChartItem objects, see “Skinning ChartItem objects” on page 132.
Getting data with coordinates

When you create charts, you can use the coordinates on the screen to get the nearest data point or data points, or
conversely, to pass the data point and get the coordinates.
The findDataPoints() and localToData() methods take coordinates and return data. The findDataPoints()
method returns a HitData object. For more information, see “Using the findDataPoints() method” on page 216. The
localToData() method returns an Array of the data. For more information, see “Using the localToData() method”
on page 217.
You can also pass the data itself and get the coordinates with the dataToLocal() method. For more information,
see “Using the dataToLocal() method” on page 219.
Using the findDataPoints() method

You can use the chart control’s findDataPoints() method to get an Array of HitData objects by passing in x and y
coordinates. If the coordinates do not correspond to the location of a data point, the findDataPoints() method
returns null. Otherwise, the findDataPoints() method returns an Array of HitData objects.
The findDataPoints() method has the following signature:
findDataPoints(x:Number, y:Number):Array

ADOBE FLEX 3 217
Adobe Flex 3 Data Visualization Developer Guide

The following example creates a PlotChart control and records the location of the mouse pointer as the user moves
the mouse over the chart. It uses the findDataPoints() method to get an Array of HitData objects, and then
displays some of the first object’s properties.













Using the localToData() method

The localToData() method takes a Point object that represents the x and y coordinates you want to get the data for
and returns an Array of data values, regardless of whether any data items are at or near that point.

ADOBE FLEX 3 218
Adobe Flex 3 Data Visualization Developer Guide

The following example creates a Point object from the mouse pointer’s location on the screen and displays the data
values associated with that point:

















ADOBE FLEX 3 219
Adobe Flex 3 Data Visualization Developer Guide














Individual chart types determine how coordinates are mapped, and how many values are returned in the Array. The
values returned are typically numeric values.
In a chart that is based on the CartesianChart class (for example, a BarChart or ColumnChart control), the first item
in the returned Array is the value of the x-coordinate along the horizontal axis, and the second item is the value of
the y-coordinate along the vertical axis.
In a chart based on the PolarChart class (such as PieChart), the returned Array maps the coordinates to a set of polar
coordinates—an angle around the center of the chart, and a distance from the center. Those values are mapped to
data values that use the first (angular) and second (radial) axes of the chart.
Using the dataToLocal() method

The dataToLocal() method converts a set of values to x and y coordinates on the screen. The values you give the
method are in the “data space” of the chart; this method converts these values to coordinates. The data space is the
collection of all possible combinations of data values that a chart can represent.
The number and meaning of arguments passed to the dataToLocal() method depend on the chart type. For CartesianChart controls, such as the BarChart and ColumnChart controls, the first value is used to map along the x axis,
and the second value is used to map along the y axis.
For PolarChart controls, such as the PieChart control, the first value maps to the angle around the center of the chart,
and the second value maps to the distance from the center of the chart along the radius.
The coordinates returned are based on 0,0 being the upper-left corner of the chart. For a ColumnChart control, for
example, the height of the column is inversely related to the x coordinate that is returned.

Changing mouse sensitivity
You use the mouseSensitivity property of the chart control to determine when the mouse pointer is considered
to be over a data point; for example:


The current data point is the nearest data point to the mouse pointer that is less than or equal to the number of pixels
that the mouseSensitivity property specifies.
The default value of the mouseSensitivity property is 3 pixels. If the mouse pointer is 4 or more pixels away from
a data point, Flex does not trigger a ChartItemEvent (of types such as itemRollOver or itemClick). Flex still
responds to events such as mouseOver and click by generating a ChartEvent object of type chartClick or
chartDoubleClick .
The following example initially sets the mouseSensitivity property to 20, but lets the user change this value with
the HSlider control:



ADOBE FLEX 3 220
Adobe Flex 3 Data Visualization Developer Guide





















ADOBE FLEX 3 221
Adobe Flex 3 Data Visualization Developer Guide

You can use the mouseSensitivity property to increase the area that triggers DataTip events or emits chart-related
events. If the mouse pointer is within the range of multiple data points, Flex chooses the closest data point. For
DataTip events, if you have multiple DataTip controls enabled, Flex displays all DataTip controls within range. For
more information, see “Showing multiple DataTip objects” on page 183.

Disabling interactivity
You can make the series in a chart ignore all mouse events by setting the interactive property to false for that
series. The default value is true. This lets you disable mouse interactions for one series while allowing it for another.
The following example disables interactivity for events on the first and third PlotSeries objects:
















Disabling the series interactivity has the following results:

•
•

The series does not show DataTip controls.
The series does not generate a hitData structure on any chart data event.

ADOBE FLEX 3 222
Adobe Flex 3 Data Visualization Developer Guide

•

The series does not return a hitData structure when you call the findDataPoints() method on the chart.

Using effects with charts
Chart controls support the standard Flex effects such as Zoom and Fade. You can use these effects to make the entire
chart control zoom in or fade out in your Flex applications. In addition, chart data series support the following effect
classes that apply to the data in the chart:

•
•
•

SeriesInterpolate
SeriesSlide
SeriesZoom

These effects zoom or slide the chart items inside the chart control. These classes are in the mx.charts.effects.effects
package. The base class for chart effects is SeriesEffect.
All chart controls and series support the standard Flex triggers and effects that are inherited from UIComponent.
These triggers include focusInEffect , focusOutEffect, moveEffect, showEffect, and hideEffect. The
charting controls also include the showDataEffect and hideDataEffect triggers.
For information on creating complex effects, see “Using Behaviors” on page 545 in Adobe Flex 3 Developer Guide.

Using standard effect triggers
Chart controls support standard effects triggers, such as showEffect and hideEffect.
The following example defines a set of wipe effects that Flex executes when the user toggles the chart’s visibility by
using the Button control. Also, Flex fades in the chart when it is created.















ADOBE FLEX 3 223
Adobe Flex 3 Data Visualization Developer Guide















A negative aspect of using standard effect triggers with charts is that the effects are applied to the entire chart control,
and not just the data in the chart control. The result is that an effect such as Fade causes the chart’s axes, gridlines,
labels, and other chart elements, in addition to the chart’s data, to fade in or out during the effect. To solve this, you
use special charting effect triggers (see “Using charting effect triggers” on page 223).

Using charting effect triggers
Charts have two unique effect triggers: hideDataEffect and showDataEffect. You set these triggers on the data
series for the chart. Whenever the data for a chart changes, Flex executes these triggers in succession on the chart’s
data. The chart control’s other elements, such as gridlines, axis lines, and labels are not affected by the effect.
The hideDataEffect trigger defines the effect that Flex uses as it hides the current data from view. The
showDataEffect trigger defines the effect that Flex uses as it moves the current data into its final position on the
screen.
Because Flex triggers the effects associated with hideDataEffect and showDataEffect when the data changes,
there is “old” data and “new” data. The effect associated with the hideDataEffect trigger is the “old” data that will
be replaced by the new data.
The order of events is:
Flex first uses the hideDataEffect trigger to invoke the effect set for each element of a chart that is about to
change. These triggers execute at the same time.

1

Flex then updates the chart with its new data. Any elements (including the grid lines and axes) that do not have
effects associated with them are updated immediately with their new values.

2

Flex then invokes the effect set with the showDataEffect trigger for each element associated with them. Flex
animates the new data in the chart.

3

ADOBE FLEX 3 224
Adobe Flex 3 Data Visualization Developer Guide

Charting effects with data series
Three effects are unique to charting: SeriesInterpolate, SeriesSlide, and SeriesZoom. You use these effects on a data
series to achieve an effect when the data in that series changes. These effects can have a great deal of visual impact.
Data series do not support other Flex effects.
The following example shows the SeriesSlide effect making the data slide in and out of a screen when the data
changes. You can trigger changes to data in a chart series in many ways. Most commonly, you trigger an effect when
the data provider changes for a chart control. In the following example, when the user clicks the button, the chart
control’s data provider changes, triggering the effect:


























This example explicitly defines the minimum and maximum values of the vertical axis. If not, Flex would recalculate
these values when the new data provider was applied. The result would be a change in the axis labels during the effect.
Changing a data provider first triggers the hideDataEffect effect on the original data provider, which causes that
data provider to “slide out,” and then triggers the showDataEffect effect on the new data provider, which causes
that data provider to “slide in.”
Note: If you set the data provider on the series and not the chart control, you must change it on the series and not the
chart control.
Another trigger of data effects is when a new data point is added to a series. The following example triggers the
showDataEffect when the user clicks the button and adds a new item to the series’ data provider:
















For more information about changing charting data at run time, see “Changing chart data at run time” on page 30.

ADOBE FLEX 3 227
Adobe Flex 3 Data Visualization Developer Guide

The charting effects have several properties in common that traditional effects do not have. All of these properties
are optional. The following table lists the common properties of the charting effects:
Property

Description

duration

The amount of time, in milliseconds, that Flex takes to complete the entire effect. This property defines
the speed with which the effect executes.
The duration property acts as a minimum duration. The effect can take longer based on the settings
of other properties.
The default value is 500.

elementOffset

The amount of time, in milliseconds, that Flex delays the effect on each element in the series.
Set the elementOffset property to 0 to make all elements start at the same time and end at the same
time.
Set the elementOffset property to an integer such as 30 to stagger the effect on each element by
that amount of time. For example, with a slide effect, the first element slides in immediately. The next
element begins 30 milliseconds later, and so on. The amount of time for the effect to execute is the
same for each element, but the overall duration of the effect is longer.
Set the elementOffset property to a negative value to make the effect display the last element in the
series first.
The default value is 20.

minimumElementDuration

The amount of time, in milliseconds, that an individual element should take to complete the effect.
Charts with a variable number of data points in the series cannot reliably create smooth effects with
only the duration property.
For example, an effect with a duration of 1000 and elementOffset of 100 takes 900 milliseconds per
element to complete if you have two elements in the series. This is because the start of each effect is
offset by 100, and each effect finishes in 1000 milliseconds. If there are four elements in the series, each
element takes 700 milliseconds to complete (the last effect starts 300 milliseconds after the first and
must be completed within 1000 milliseconds). With 10 elements, each element has only 100 milliseconds to complete the effect.
The value of the minimumElementDuration property sets a minimal duration for each element. No
element of the series takes less than this amount of time (in milliseconds) to execute the effect. As a
result, it is possible for an effect to take longer than a specified duration if you specify at least two of the
following three properties: duration, offset, and minimumElementDuration.
The default value is 0, which means that the duration property is used to control the total duration
of the effect.

offset

The amount of time, in milliseconds, that Flex delays the start of the effect. Use this property to stagger
effects on multiple series.
The default value is 0.

Using the SeriesSlide effect

The SeriesSlide effect slides a data series into and out of the chart’s boundaries. The SeriesSlide effect takes a
direction property that defines the location from which the series slides. Valid values of direction are left,
right, up, or down.
If you use the SeriesSlide effect with a hideDataEffect trigger, the series slides from the current position on the
screen to a position off the screen, in the direction indicated by the direction property. If you use SeriesSlide with
a showDataEffect trigger, the series slides from off the screen to a position on the screen, in the indicated direction.
When you use the SeriesSlide effect, the entire data series disappears from the chart when the effect begins. The data
then reappears based on the nature of the effect. To keep the data on the screen at all times during the effect, you can
use the SeriesInterpolate effect. For more information, see “Using the SeriesInterpolate effect” on page 230.

ADOBE FLEX 3 228
Adobe Flex 3 Data Visualization Developer Guide

The following example creates an effect called slideDown. Each element starts its slide 30 milliseconds after the
element before it, and takes at least 20 milliseconds to complete its slide. The entire effect takes at least 1 second (1000
milliseconds) to slide the data series down. Flex invokes the effect when it clears old data from the chart and when
new data appears.
















Using the SeriesZoom effect

The SeriesZoom effect implodes and explodes chart data into and out of the focal point that you specify. As with the
SeriesSlide effect, whether the effect is zooming to or from this point depends on whether it’s used with a
showDataEffect or hideDataEffect trigger.

ADOBE FLEX 3 229
Adobe Flex 3 Data Visualization Developer Guide

The SeriesZoom effect can take several properties that define how the effect acts. The following table describes these
properties:
Property

Description

horizontalFocus

Defines the location of the focal point of the zoom.

verticalFocus

You combine the horizontalFocus and verticalFocus properties to define the point from which the data
series zooms in and out. For example, set the horizontalFocus property to left and the verticalFocus
property to top to have the series data zoom to and from the upper-left corner of either element or the chart
(depending on the setting of the relativeTo property).
Valid values of the horizontalFocus property are left, center, right, and undefined.
Valid values of the verticalFocus property are top, center, bottom, and undefined.
If you specify only one of these two properties, the focus is a horizontal or vertical line rather than a point. For
example, when you set the horizontalFocus property to left, the element zooms to and from a vertical line
along the left edge of its bounding box. Setting the verticalFocus property to center causes the element to
zoom to and from a horizontal line along the middle of its bounding box.
The default value for both properties is center.

relativeTo

Controls the bounding box used to calculate the focal point of the zooms. Valid values for relativeTo are
series and chart.
Set the relativeTo property to series to zoom each element relative to itself. For example, each column of a
ColumnChart zooms from the upper-left of the column.
Set the relativeTo property to chart to zoom each element relative to the chart area. For example, each
column zooms from the upper-left of the axes, the center of the axes, and so on.

The following example zooms in the data series from the upper-right corner of the chart. While zooming in, Flex
displays the last element in the series first because the elementOffset value is negative.

















When you use the SeriesZoom effect, the entire data series disappears from the chart when the effect begins. The
data then reappears based on the nature of the effect. To have the data stay on the screen at all times during the effect,
you can use the SeriesInterpolate effect. For more information, see “Using the SeriesInterpolate effect” on page 230.
Using the SeriesInterpolate effect

The SeriesInterpolate effect moves the graphics that represent the existing data in the series to the new points.
Instead of clearing the chart and then repopulating it as with SeriesZoom and SeriesSlide, this effect keeps the data
on the screen at all times.
You use the SeriesInterpolate effect only with the showDataEffect effect trigger. It has no effect if set with a
hideDataEffect trigger.
The following example sets the elementOffset property of SeriesInterpolate to 0. As a result, all elements move to
their new locations without disappearing from the screen.
















Applying effects with ActionScript
You can define effects and apply them to chart series by using ActionScript. One way to apply an effect is the same
as the way you apply style properties. You use the setStyle() method and Cascading Style Sheets (CSS) to apply
the effect. For more information on using styles, see “Using Styles and Themes” on page 589 in Adobe Flex 3
Developer Guide.
The following example defines the slideIn effect that plays every time the user adds a data item to the chart control’s
ColumnSeries. The effect is applied to the series by using the setStyle() method when the application first loads.














When you define an effect in ActionScript, you must ensure that you import the appropriate classes. If you define an
effect by using MXML, the compiler imports the class for you.
Instead of applying effects with the setStyle() method, you can apply them with CSS if you predefine them in your
MXML application; for example:




ColumnSeries {
showDataEffect:slideDown;
hideDataEffect:slideDown;
}














You can use slider controls to adjust the effect’s properties. To bind the properties of an ActionScript object, such as
an effect, to a control, you use methods of the BindingUtils class, as the following example shows:




























For more information about databinding in ActionScript, see “Defining data bindings in ActionScript” on page 1247
in Adobe Flex 3 Developer Guide.

Drilling down into data
One common use of charts is to allow the user to drill down into the data. This usually occurs when the user
performs some sort of event on the chart such as clicking on a wedge in a PieChart control or clicking on a column
in a ColumnChart control. Clicking on a data item reveals a new chart that describes the make-up of that data item.
For example, you might have a ColumnChart control that shows the month-by-month production of widgets. To
initially populate this chart, you might make a database call (through a service or some other adapter). If the user
then clicks on the January column, the application could display the number of widgets of each color that were
produced that month. To get the individual month’s widget data, you typically make another database call and pass
a parameter to the listening service that describes the specific data you want. You can then use the resulting data
provider to render the new view.
Typically, when you drill down into chart data, you create new charts in your application with ActionScript. When
creating new charts in ActionScript, you must be sure to create a series, add it to the new chart’s series Array, and
then call the addChild() method on the container to add the new chart to the display list. For more information,
see “Creating charts in ActionScript” on page 10.
One way to provide drill-down functionality is to make calls that are external to the application to get the drill-down
data. You typically do this by using the chart’s itemClick event listener, which gives you access to the HitData object.
The HitData object lets you examine what data was underneath the mouse when the event was triggered. This
capability lets you perform actions on specific chart data. For more information, see “Using the HitData object” on
page 213.

ADOBE FLEX 3 236
Adobe Flex 3 Data Visualization Developer Guide

You can also use a simple Event object to get a reference to the series that was clicked. The following example shows
the net worth of a fictional person. When you click on a column in the initial view, the example drills down into a
second view that shows the change in value of a particular asset class over time.
The following example uses the Event object to get a reference to the clicked ColumnSeries. It then drills down into
the single ColumnSeries by replacing the chart’s series Array with the single ColumnSeries in the chart. When you
click a column again, the chart returns to its original configuration with all ColumnSeries.







ADOBE FLEX 3 237
Adobe Flex 3 Data Visualization Developer Guide
















Another approach to drilling down into chart data is to use unused data within the existing data provider. You can
do this by changing the properties of the series and axes when the chart is clicked.
The following example is similar to the previous example in that it drills down into the assets of a fictional person’s
net worth. In this case, though, it shows the value of the asset classes for the clicked-on month in the drill-down view
rather than the change over time of a particular asset class.
This example uses the HitData object’s item property to access the values of the current data provider. By building
an Array of objects with the newly-discovered data, the chart is able to drill down into the series without making
calls to any external services.
Drilling down into data is an ideal time to use effects such as SeriesSlide. This example also defines seriesIn and
seriesOut effects to slide the columns in and out when the drilling down (and the return from drilling down)

occurs.












ADOBE FLEX 3 240
Adobe Flex 3 Data Visualization Developer Guide









Another way to drill down into chart data is to use the selection API. You can select a subset of data points on a chart
to create a new data provider. For more information, see “Selecting chart items” on page 240.

Selecting chart items
As part of interacting with charts, you can select data points (ChartItem objects), examine the underlying data, and
then perform actions on those objects. A ChartItem class represents a single entry in the chart series’ data provider.
A series is made up of an Array of ChartItem objects.
To enable data point selection, you set the value of the selectionMode property on the chart. Possible values of this
property are none, single, and multiple. Setting the selectionMode property to none prevents any data points
in the chart from being selected. Setting selectionMode to single lets you select one data point at a time. Setting
selectionMode to multiple lets you select one or more data points at a time. The default value is none.
You also toggle the series’ selectability by setting the value of the selectable property. As a result, while you might
set the selectionMode on the chart to multiple, you can make the data points in some series selectable and others
not selectable within the same chart by using the series’ selectable property.

Methods of chart item selection
You can programmatically select data points or the application user can interactively select data points in the
following ways:

• Mouse selection—Move the mouse pointer over a data point and click the left mouse button to select data points.
For more information, see “Keyboard and mouse selection” on page 243.
• Keyboard selection—Use the keyboard to select one or more data points, as described in “Keyboard and mouse
selection” on page 243.
• Region selection—Draw a rectangle on the chart. This rectangle defines the range, and selects all data points
within that range. For more information, see “Region selection” on page 243.
• Programmatic selection—Programmatically select one or more data points using the chart selection API. For
more information, see “Programmatic selection” on page 244.
When understanding chart item selection, you should first understand the following terms:

• caret—The current chart item that could be selected or deselected if you press the space bar. If you select multiple
items, one at a time, the caret is the last item selected. If you selected multiple items by using a range, the caret is the
last item in the last series in the selection. This is not always the item that was selected last.
•

anchor—The starting chart item for a multiple selection operation.

The following example creates three different types of charts. You can select one or more data points in each chart
using the mouse, keyboard, and region selection techniques. The example displays the data points in each series that
are currently selected.



ADOBE FLEX 3 241
Adobe Flex 3 Data Visualization Developer Guide




































ADOBE FLEX 3 243
Adobe Flex 3 Data Visualization Developer Guide










You can specify the colors that are used to indicate if an item is selected, disabled, or being rolled over. You do this
by using the itemSelectionColor, itemDisabledColor, and itemRollOverColor style properties of the chart
controls. The following example specifies different colors for these states for several chart types:
BarChart, PieChart, PlotChart {
itemSelectionColor: red;
itemDisabledColor: green;
itemRollOverColor: blue;
}
Region selection

Users can select all data points in an area on a chart by drawing a rectangle (the region) on the chart. Users define a
rectangular region by clicking and holding the mouse button while they move the mouse, drawing a rectangle on the
chart. On the MOUSE_UP event, the items inside the rectangular region are selected. The starting point for a rectangular range must be over the chart. You cannot start the rectangle outside of the chart control’s bounds.
To select data points with region selection, the value of the chart’s selectionMode property must be multiple. If it
is single or none, then you cannot draw the selection rectangle on the chart.
For most charts, as long as any point inside the rectangle touches a data point (for example, a column in a ColumnChart control), you select that data point. For BubbleChart and PieChart controls, an item is selected only if its center
is inside the selection rectangle.
Keyboard and mouse selection

To select chart items, you can use the arrow keys, space bar, and enter key on your keyboard or the mouse pointer.
If you want to select more than data point, the value of the chart’s selectionMode property must be multiple.
Left and right arrow keys

You use the left and right arrows to move up and down the data in the series.
Click the left arrow to select the previous item and the right arrow to select the next item in the series. When you
reach the last item in a series, you move to the first item in the next series.
Up and down arrow keys

Click the up and down arrow keys to move to the next or previous series on the chart.
Click the up arrow key to select the next series in the chart’s series array. Click the down arrow key to select the
previous series.
The index of the item in each series remains the same. If there is only one series in the chart, then click the up arrow
key to select the first data point in the series; click the down arrow key to select the last data point in the series.
Shift and control keys

You can use the shift and control keys in conjunction with the other keys to select or deselect data points and change
the caret in the selection.
Hold the shift key down while clicking the right arrow key to add the next data point to the selection until you reach
the end of the series. Click the left arrow key to remove the last data point from the selection.

ADOBE FLEX 3 244
Adobe Flex 3 Data Visualization Developer Guide

Hold the shift key down while clicking the up arrow key to select the first item in the next series. Click the down
arrow key to select the last item in the previous series.
Hold the control key down while using the arrow keys to move the caret while not deselecting the anchor item. You
can then select the new caret by pressing the space bar.
Space bar

Click the space bar to toggle the selection of the caret item, if the control key is depressed. A deselected caret item
appears highlighted, but the highlight color is not the same as the selected item color.
Page Up/Home and Page Down/End keys

Click the Page Up/Home and Page Down/End keys to move to the first and last items in the current series, respectively. Moving to an item makes that item the caret item, but does not select it. You can press the space bar to select it.
Mouse pointer

The default behavior of the mouse pointer is to select the data point under the mouse pointer when you click the
mouse button and de-select all other data points.
If you click the mouse button and drag it over a chart, you create a rectangular region that defines a selection range.
All data points inside that range are selected.
If you select a data point, then hold the shift key down and click on another data point, you select the first point, the
target point, and all points that appear inside the rectangular range that you just created. If you select a data point,
then hold the control key down and click another data point, you select both data points, but not the data points in
between. You can add more individual data points by continuing to hold the control key down while you select
another data point.
If you click anywhere on the chart that does not have a data point without any keys held down, then you clear the
selection. Clicking outside of the chart control’s boundary does not clear the selection.
Programmatic selection

You can use the chart selection APIs to programmatically select one or more data points in a chart control. These
APIs consist of methods and properties of the ChartBase, ChartItem, and chart series objects.
Selections with multiple items include a caret and an anchor. You can access these items by using the caretItem and
anchorItem properties of the chart control.
Properties of the series

The series defines which ChartItem objects are selected. You can programmatically select items by setting the values
of the following properties of the series:

•
•

selectedItem

•
•

selectedIndex

selectedItems

selectedIndices

The index properties refer to the index of the chart item in the series. This index is the same as the index in the data
provider, assuming you did not sort or limit the series items.
Programmatically setting the values of these properties does not trigger a change event.
The following example increments and decrements the series’ selectedIndex property to select each item, one after
the other, in the series:



ADOBE FLEX 3 245
Adobe Flex 3 Data Visualization Developer Guide

















ADOBE FLEX 3 246
Adobe Flex 3 Data Visualization Developer Guide









label="|<" click="getFirst(event);" />
label="<" click="getPrev(event);" />
label=">" click="getNext(event);" />
label=">|" click="getLast(event);" />

To cycle through ChartItem objects in a series, you can use methods such as getNextItem() and
getPreviousItem() . For more information, see “Methods and properties of the ChartBase class” on page 249.
The selectedIndices property lets you select any number of ChartItems in a chart control. The following example
uses the selectedIndices property to select all items in all series when the user presses the Ctrl+a keys on the
keyboard:


















The following example is similar to the previous example, except that it lets you set a threshold value in the TextInput
control. The chart only selects chart items whose values are greater than that threshold.




=
Number(threshold.text)) {
selectedData.push(j);
}
}
// Use the series' selectedIndices property to select all the
// chart items that met the criteria.
allSeries[i].selectedIndices = selectedData;
}
}
]]>















ADOBE FLEX 3 249
Adobe Flex 3 Data Visualization Developer Guide

Methods and properties of the ChartBase class

The ChartBase class is the parent class of all chart controls. You can programmatically access ChartItem objects by
using the following methods of this class:

•
•

getNextItem()

•
•

getFirstItem()

getPreviousItem()

getLastItem()

These methods return a ChartItem object, whether it is selected or not. Which object is returned depends on which
one is currently selected, and which direction constant (ChartBase.HORIZONTAL or ChartBase.VERTICAL) you
pass to the method.
The following example uses these methods to cycle through the data points in a ColumnChart control. It sets the
value of the series’ selectedItem property to identify the new ChartItem as the currently selected item.





























These item getter methods do not have associated setters. You cannot set the selected ChartItem objects in the same
manner. Instead, you use the properties of the series, as described in “Properties of the series” on page 244.
Calling the getNextItem() and getPreviousItem() methods provides more control over the item selection than
simply incrementing and decrementing the series’ selectedIndex property as shown in “Properties of the series”
on page 244. With these methods, you can choose the direction in which you select the next or previous item, and
then decide whether to make the item appear selected.
The item getter methods also account for when you get to the end of the series, for example. If no ChartItems are
currently selected, then the getNextItem() method gets the first one in the series. If you are at the beginning of the
series, the getPreviousItem() gets the last item in the series.

ADOBE FLEX 3 251
Adobe Flex 3 Data Visualization Developer Guide

The ChartBase class defines two additional properties, selectedChartItem and selectedChartItems, that return
an item or Array of items that are selected. You cannot set the values of these properties to select chart items. These
properties are read-only. They are useful if your chart has multiple series and you want to know which items across
the series are selected without iterating over all the series.
ChartItem properties

You can set the value of the currentState property of a ChartItem object to make it appear selected or deselected,
or make it appear in some other state. The currentState property can be set to none, rollOver, selected,
disabled, focusedSelected, and focused.
Setting the state of the item does not add it to the selectedItems array. It only changes the appearance of the chart
item. Setting the value of this property also does not trigger a change event.
Defined range

You can use the getItemsInRegion() method to define a rectangular area and select those chart items that are
within that region. The getItemsInRegion() method takes an instance of the Rectangle class as its only argument.
This rectangle defines an area on the stage, in global coordinates.
Getting an array of ChartItem objects with the getItemsInRegion() method does not trigger a change event. The
state of the items does not change.
The following example lets you specify the x, y, height, and width properties of a rectangular range. It then calls
the getItemsInRegion() method and passes those values to define the range. All chart items that fall within this
invisible rectangle are selected and their values are displayed in the TextArea control.







































ADOBE FLEX 3 253
Adobe Flex 3 Data Visualization Developer Guide




Working with ChartItem objects to access chart data
To work with the data of a ChartItem, you typically cast it to its specific series type. For example, in a ColumnChart
control, the ChartItem objects are of type ColumnSeriesItem. Doing this lets you access series-specific properties
such as the yValue, xValue, and index of the ChartItem. You can also then access the data provider’s object by using
the item property. Finally, you can access the properties of the series by casting the element property to a series
object.
Assuming that a[i] is a reference to a ChartItem object from an Array, use the following syntax.
Access the properties of the series item
var csi:ColumnSeriesItem = ColumnSeriesItem(a[i]);
trace(csi.yValue);
Access the item’s fields
var csi:ColumnSeriesItem = ColumnSeriesItem(a[i]);
trace(csi.item.Profit);
Access the series properties
var csi:ColumnSeriesItem = ColumnSeriesItem(a[i]);
var cs:ColumnSeries = ColumnSeries(csi.element);
trace(cs.displayName);

About selection events
When a user selects a chart item using mouse, keyboard or region selection, the chart’s change event is dispatched.
When the following properties are updated through user interaction, a change event is dispatched:

•
•

selectedChartItem and selectedChartItems (on the chart)
selectedItem, selectedItems, selectedIndex, and selectedIndices (on the chart’s series)

The change event does not contain references to the HitData or HitSet of the selected chart items. To access that
information, you can use the chart’s selectedChartItem and selectedChartItems properties.
When you select an item programmatically, no change event is dispatched. When you change the selectedState
property of a chart item, no change event is dispatched.

Clearing selections
You can clear all selected data points by using the chart control’s clearSelection() method. The following
example clears all selected data points when the user presses the ESC key:


















In addition to clearing item selections programmatically, users can use the mouse or keyboard to clear items. If a user
clicks anywhere on the chart control’s background, and not over a data point, they clear all selections. If a user uses
the up and down arrow keys to select a data point, they clear the existing data points. For more information, see
“Keyboard and mouse selection” on page 243.

ADOBE FLEX 3 255
Adobe Flex 3 Data Visualization Developer Guide

Using the selection API to create new charts
You can use the selection API to get some or all of the ChartItem objects of one chart, and then create a new chart
with them. To do this, you create a new data provider for the new chart. To do this, you can call the ArrayCollection’s
getItemAt() method on the original chart’s data provider and pass to it the original series’ selected indices. This
method then returns an object whose values you then add to an object in the new data provider.
The selectedIndex and selectedIndices properties of a chart’s series represent the position of the chart item in
the series. This position is also equivalent to the position of the chart item’s underlying data object in the data
provider.
The following example creates a PieChart control from the selected columns in the ColumnChart control. The
PieChart control also allows selection; you can explode a piece by selecting it.















ADOBE FLEX 3 257
Adobe Flex 3 Data Visualization Developer Guide






Dragging and dropping ChartItem objects
As an extension of the selection API, you can drag and drop chart items from one chart to another (or from a chart
to some other object altogether).
To use drag and drop operations in your chart controls:

•
•

Make the source chart drag enabled by setting it’s dragEnabled property to true.
Make the target chart drop enabled by setting it’s dropEnabled property to true.

• Add event listeners for the dragEnter and dragDrop events on the target chart.
• In the dragEnter event handler, get a reference to the target chart and register it with the DragManager. To be
a drop target, a chart must define an event handler for this event. You must call the
DragManager.acceptDragDrop() method for the drop target to receive the drag and drop events.
• In the dragDrop event handler, get an Array of chart items that are being dragged and add that Array to the target
chart’s data provider. You do this by using the event.dragSource.dataForFormat() method. You must specify
the String "chartitems" as the argument to the dataForFormat() method. This is because the chart-based
controls have predefined values for the data format of drag data. For all chart controls, the format String is
"chartitems" .
The following example lets you drag chart items from the ColumnChart control to the PieChart control. When the
application starts, there is no PieChart control, but it becomes visible when the first chart item is dragged onto it.
This example also examines the dragged chart items to ensure that they are not added more than once to the target
chart. It does this by using the target data provider’s contains() method.






















ADOBE FLEX 3 260
Adobe Flex 3 Data Visualization Developer Guide

Chart controls also support the standard drag and drop methods of List-based controls such as
hideDropFeedback() and showDropFeedback(). These methods display indicators under the mouse pointer to
indicate whether drag and drop operations are allowed and where the items will be dropped.
For more information about drag and drop operations, see “Using Drag and Drop” on page 741 in Adobe Flex 3
Developer Guide.
Dropping ChartItem objects onto components

The target of a drag and drop operation from a chart control does not need to be another chart control. Instead, you
can drag an object onto any Flex component using simple drag and drop rules. The following example lets you drag
a column from the chart onto the TextArea. The TextArea then extracts data from the dropped item and displays that
information in text.























Changing the drag image

When you drag a chart item off of a source chart, an outline of the underlyig chart item appears as the drag image.
For example, if you drag a column from a ColumnChart control, a column appears under the mouse pointer to
represent the item that is being dragged.
You can customize the image that is displayed during a drag operation by overriding the default defintion of the
dragImage property in a custom chart class. You do this by embedding your new image (or defining it in ActionScript), overriding the dragImage() getter method, and returning the new image.
The default location, in coordinates, of the drag image is 0,0 unless you override the DragManager’s doDrag()
method. You can also set the starting location of the drag proxy image by using the x and y coordinates of the image
proxy in the dragImage() getter.
The following example custom chart class embeds an image and returns it in the dragImage() getter method. This
example also positions the drag image proxy so that the mouse pointer is near its lower right corner.
// charts/MyColumnChart.as
package {
import mx.charts.ColumnChart;

ADOBE FLEX 3 262
Adobe Flex 3 Data Visualization Developer Guide

import mx.core.IUIComponent;
import mx.controls.Image;
public class MyColumnChart extends ColumnChart {
[Embed(source="../../images/charting/dollarSign.png")]
public var dollarSign:Class;
public function MyColumnChart() {
super();
}
override protected function get dragImage():IUIComponent {
var imageProxy:Image = new Image();
imageProxy.source = dollarSign;
var imageHeight:Number = 50;
var imageWidth:Number = 32;
imageProxy.height = imageHeight;
imageProxy.width = imageWidth;
// Position the image proxy above and to the left of
// the mouse pointer.
imageProxy.x = this.mouseX - imageWidth;
imageProxy.y = this.mouseY - imageHeight;
return imageProxy;
}
}
}

The following example uses the MyColumnChart custom chart class to define its custom drag image:





















Drawing on chart controls
Flex includes the ability to add graphical elements to your chart controls such as lines, boxes, and elipses. Graphical
children of chart controls can also include any control that is a subclass of UIComponent, including list boxes,
combo boxes, labels, and even other chart controls.
When working with chart controls, Flex converts x and y coordinates into data coordinates. Data coordinates define
locations relative to the data in the chart’s underlying data provider. This lets you position graphical elements relative
to the location of data points in the chart without having to first convert their positions to x and y coordinates. For
example, you can draw a line from the top of a column in a ColumnChart to the the top of another column, showing
a trend line.

ADOBE FLEX 3 265
Adobe Flex 3 Data Visualization Developer Guide

To add data graphics to a chart control, you use the mx.charts.chartClasses.CartesianDataCanvas (for Cartesian
charts) class or the mx.charts.chartClasses.PolarDataCanvas (for polar charts) classes. You can either attach visual
controls to the canvas or you can draw on the canvas by using drawing methods.
You attach visual controls to the data canvases in the same way that you programmatically add controls to an application: you add them as child controls. In this case, the method you call to add children is addDataChild(), which
lets you add any DisplayObject instance to the canvas. This method lets you take advantage of the data coordinates
that the canvas uses. As with most containers, you can also use the addChild() and addChildAt() methods. With
these methods, you can then adjust the location of the DisplayObject to data coordinates by using the canvas’
updateDataChild() method.
To draw on the data canvases, you use drawing methods that are similar to the methods of the flash.display.Graphics
class. The canvases define a set of methods that you can use to create vector shapes such as circles, squares, lines, and
other shapes. These methods include the line-drawing methods such as lineTo() , moveTo(), and curveTo(), as
well as the fill methods such as beginFill(), beginGradientFill() , beginBitmapFill(), and endFill().
Convenience methods such as drawRect(), drawRoundedRect(), drawEllipse(), and drawCircle() are also
available on the data canvases.
All drawn graphics such as lines and shapes remain visible on the data canvas until you call the canvas’ clear()
method. To remove child objects, you can use the removeChild() and removeChildAt() methods.
A canvas can either be in the foreground (in front of the data points) or in the background (behind the data points).
To add a canvas to the foreground, you add it to the chart’s annotationElement Array. To add a canvas to the
background, you add it to the chart’s backgroundElements Array.
The data canvases have the following limitations:

•
•

There is no drag-and-drop support for children of the data canvases.
You cannot use the chart selection APIs to select objects on the data canvases.

The following example adds a CartesianDataCanvas as an annotation element to the ColumnChart control. It uses
the graphics methods to draw a line between the columns that you select.









ADOBE FLEX 3 267
Adobe Flex 3 Data Visualization Developer Guide





























The following example uses the addDataChild() method to add children to the data canvas. It adds labels to each
of the columns that you select in the ColumnChart control.






















ADOBE FLEX 3 270
Adobe Flex 3 Data Visualization Developer Guide













You can access an array of the data children by using the dataChildren property of the canvas. This property is an
Array of the child objects on the canvas.

Using offsets for data coordinates
The data canvas classes also let you add offsets to the position of data graphics. You do this by defining the data
coordinates with the CartesianCanvasValue constructor rather than passing a data coordinate to the drawing or
addDataChild() methods. When you define a data coordinate with the CartesianCanvasValue, you pass the data
coordinate as the first argument, but you can pass an offset as the second argument.
The following example lets you specify an offset with an HSlider control. This offset is used when adding a data child
to the canvas.


































Using multiple axes with data canvases
A CartesianDataCanvas is specific to a certain data space, which is defined by the bounds of the axis. If no axis is
specified, the canvas uses the primary axes of the chart as its bounds. If you have a chart with multiple axes, you can
specify which axes the data canvas should use by setting the values of the horizontalAxis or verticalAxis
properties, as the following example illustrates:




...


274

Part 2: Advanced Data Grid Controls and
Automation Tools
Topics

Creating OLAP Data Grids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Creating Custom Agents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381
Creating Applications for Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356

275

Chapter 6: Using the AdvancedDataGrid
Control
The AdvancedDataGrid control expands on the functionality of the standard DataGrid control to add data visualization capabilities to your Adobe® Flex™ application. These capabilities provide greater control of data display, data
aggregation, and data formatting.
For more information on the DataGrid control, see “DataGrid control” on page 395.
Topics

About the AdvancedDataGrid control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Sorting by multiple columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Styling rows and columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Selecting multiple cells and rows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Hierarchical and grouped data display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Displaying hierarchical data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Displaying grouped data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Creating column groups. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Using item renderers with the AdvancedDataGrid control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Keyboard navigation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320

About the AdvancedDataGrid control
The AdvancedDataGrid control extends the capabilities of the standard DataGrid control to improve data visualization. The following table describes the main data visualization capabilities of the AdvancedDataGrid control:
Capability

Description

Sorting by multiple columns

Sort by multiple columns when you click in the column header. For more information, see “Sorting by
multiple columns” on page 278.

Styling rows and columns

Use the styleFunction property to specify a function to apply styles to rows and columns of the
control. For more information, see “Styling rows and columns” on page 280.

Displaying hierarchical and
grouped data

Use an expandable navigation tree in a column to control the visible rows of the control. For more information, see “Hierarchical and grouped data display” on page 287.

Creating column groups

Collect multiple columns under a single column heading. For more information, see “Creating column
groups” on page 309.

Using item renderers

Span multiple columns with an item renderer and use multiple item renderers in the same column. For
more information, see “Using item renderers with the AdvancedDataGrid control” on page 313.

ADOBE FLEX 3 276
Adobe Flex 3 Data Visualization Developer Guide

Displaying hierarchical and grouped data
One of the most important aspects of the AdvancedDataGrid control is its support for the display of hierarchical and
grouped data. Hierarchical data is data already in a structure of parent and child data items. Grouped data is flat data
with no inherent hierarchy. Before passing flat data to the AdvancedDataGrid control, you specify one or more data
fields that are used to group the flat data into a hierarchy.
To support the display of hierarchical and grouped data, the AdvancedDataGrid control displays a navigation tree in
a column that lets you navigate the data hierarchy. The following example shows an AdvancedDataGrid control with
a navigation tree in the first column that controls the visible rows of the control, but it can be in any column:

Migrating from the DataGrid control
Besides the major new features added to the AdvancedDataGrid control described in the section “About the
AdvancedDataGrid control” on page 275, the AdvancedDataGrid control adds the following property:
firstVisibleItem Specifies the item that is currently displayed in the top row of the AdvancedDataGrid control.

For a complete list of properties and methods of the control, see the Adobe Flex Language Reference.
One consideration when migrating an existing application from the DataGrid control to the AdvancedDataGrid
control is that the data type of many event objects dispatched by the AdvancedDataGrid control is of type AdvancedDataGridEvent, not of type DataGridEvent as it is for the DataGrid control. If your application references the event
object by type, you must update your application so that it uses the correct data type.
To determine the type of the event object for any event, see the Adobe Flex Language Reference.

ADOBE FLEX 3 277
Adobe Flex 3 Data Visualization Developer Guide

Example: Creating column groups
Column grouping lets you collect multiple columns under a single column heading. The following example shows
the Actual and Estimate columns grouped under the Revenues column:

The AdvancedDataGrid control is defined by the mx.controls.AdvancedDataGrid class and additional classes in the
package mx.controls.advancedDataGridClasses. This package includes the AdvancedDataGridColumn class that
you use to define a column.
The following code creates the column grouping shown in the previous image:



















This example imports the data used by the AdvancedDataGrid control from a file named SimpleFlatData.as. You can
see the contents of that file in the topic “Hierarchical and grouped data display” on page 287.

ADOBE FLEX 3 278
Adobe Flex 3 Data Visualization Developer Guide

Sorting by multiple columns
By default, the AdvancedDataGrid control displays data in the order specified in the data passed to its
dataProvider property. The AdvancedDataGrid control also lets you sort data after the control displays it in a
single column or multiple columns.
To disable sorting for an entire AdvancedDataGrid control, set the AdvancedDataGrid.sortableColumns
property to false. To disable sorting for an individual column, set the AdvancedDataGridColumn.sortable
property to false.
The way that you sort multiple columns is based on the setting of the sortExpertMode property. By default, the
sortExpertMode property is set to false. This setting means that you click in the header area of a column to sort
the rows of the AdvancedDataGrid control by that column. Then you click in the multiple column sort area of the
header to sort by additional columns. To use the Control key to select every column after the first column to perform
sort, set the sortExpertMode property to true.
The following example shows an AdvancedDataGrid control with three columns with the sortExpertMode
property set to false:

A. Column header area B. Multiple column sort area

Sort the columns with sortExpertMode set to false

Click in the column header area of any column in the AdvancedDataGrid control to sort by that column. For
example, click in the column header for the Artist column to sort that column in ascending order. Click the Artist
column header again to sort in descending order.

1

Click in the multiple column sort area of any other column header. For example, click in the multiple column
sort area of the Price column to arrange it in ascending order while keeping the Artist column sorted in descending
order. You can now find the least expensive album for each artist.

2

3

Click in the multiple column sort area for the Price column again to arrange it in descending order.

4

Click in the multiple column sort area for any other column header to include other columns in the sort.

ADOBE FLEX 3 279
Adobe Flex 3 Data Visualization Developer Guide

Sort the columns with sortExpertMode set to true

Click in the column header area of any column in the AdvancedDataGrid control to sort by that column. For
example, click in the column header for the Artist column to sort that column in ascending order. Click the Artist
column header again to sort in descending order.

1

While holding down the Control key, click in any other column header. For example, click the column header
for the Price column to arrange it in ascending order while keeping the Artist column sorted in descending order.
You can now find the least expensive album for each artist.

2

While holding down the Control key, click the column header for the Price column again to arrange it in
descending order.

3
4

While holding down the Control key, select any other column header to include other columns in the sort.

The following code implements multiple column sort when the sortExpertMode property is set to true:















ADOBE FLEX 3 280
Adobe Flex 3 Data Visualization Developer Guide

Styling rows and columns
You apply styles to the rows and columns of the AdvancedDataGrid control by using callback functions. To control
the styling of a row, use the AdvancedDataGrid.styleFunction property to specify the callback function; to
control the styling of a column, use the AdvancedDataGridColumn.styleFunction property to specify the
callback function.
The callback function specified by the AdvancedDataGrid.styleFunction property is invoked first, followed by
the function specified by the AdvancedDataGridColumn.styleFunction property. Therefore, the
AdvancedDataGrid control applies styles to rows first, and then to columns.
The callback function must have the following signature:
function_name(data:Object, column:AdvancedDataGridColumn):Object

The function returns an Object that contains one or more styleName:value pairs to specify a style setting, or null. The
styleName field contains the name of a style property, such as color, and the value field contains the value for the
style property, such as 0x00FF00. For example, you could return two styles using the following code
{color:0xFF0000, fontWeight:"bold"}

The AdvancedDataGrid control invokes the callback function when it updates its display, such as when the control
is first drawn on application start up, or when you call the invalidateList()method.
The examples in this section use callback functions to set the style of an AdvancedDataGrid control. All of the
examples in this section use the following data from the StyleData.as file:
[Bindable]
private var dpADG:ArrayCollection = new ArrayCollection([
{Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
{Artist:'Pavement', Album:'Brighten the Corners', Price:11.99},
{Artist:'Saner', Album:'A Child Once', Price:11.99},
{Artist:'Saner', Album:'Helium Wings', Price:12.99},
{Artist:'The Doors', Album:'The Doors', Price:10.99},
{Artist:'The Doors', Album:'Morrison Hotel', Price:12.99},
{Artist:'Grateful Dead', Album:'American Beauty', Price:11.99},
{Artist:'Grateful Dead', Album:'In the Dark', Price:11.99},
{Artist:'Grateful Dead', Album:'Shakedown Street', Price:11.99},
{Artist:'The Doors', Album:'Strange Days', Price:12.99},
{Artist:'The Doors', Album:'The Best of the Doors', Price:10.99}
]);

Styling rows
The following example uses the AdvancedDataGrid.styleFunction property to specify a callback function to
apply styles to the rows of an AdvancedDataGrid control. In this example, you use Button controls to select an artist
in the AdvancedDataGrid control. Then the callback function highlights in red all rows for the selected artist.




















Styling columns
The following example modifies the example in the previous section to use a callback function to apply styles to the
rows and one column of an AdvancedDataGrid control. In this example, the Price column displays all cells with a
price less than $11.00 in green:




















ADOBE FLEX 3 283
Adobe Flex 3 Data Visualization Developer Guide

Using a data formatter in a column
The AdvancedDataGridColumn class contains a formatter property that lets you pass an instance of the Formatter
class to the column, or an instance of a subclass of the Formatter class. The formatter classes convert data into
customized strings. For example, you can use the CurrencyFormatter class to prefix the value in the Price column
with a dollar ($) sign.
You use a formatter class with a callback function specified by the labelFunction property or the styleFunction
property. If you specify a callback function, Flex invokes that formatter class after invoking the callback functions.
The following example modifies the example from the section “Styling rows” on page 280 to add a CurrencyFormatter class to the Price column to prefix the price with the $ sign:














ADOBE FLEX 3 284
Adobe Flex 3 Data Visualization Developer Guide












Selecting multiple cells and rows
All list-based controls support the allowMultipleSelection property. Setting the allowMultipleSelection
property to true lets you select more than one item in the control at the same time. For example, the DataGrid
control lets you select multiple rows so that you can drag and drop them to another DataGrid control.
The AdvancedDataGrid control adds the capability of letting you select multiple cells. You can drag the selected cells
to another AdvancedDataGrid control, copy them to the clipboard, or perform some other action on the cell data.
You use the selectionMode property of the AdvancedDataGrid control, with the allowMultipleSelection
property to configure multiple selection. The default value of the selectionMode property is singleRow, which
means that you can select only a single row at a time. You can also set the selectionMode property to singleCell,
multipleRows or to multipleCells.
Select contiguous items in the control
1

Click the first item, either a row or cell, to select it.

2

Hold down the Shift key as you select an additional item.

• If the selectionMode property is set to multipleRows, click any cell in another row to select multiple,
contiguous rows.
•

If the selectionMode property is set to multipleCells, click any cell to select multiple, contiguous cells.

Select discontiguous items in the control
1

Click the first item, either a row or cell, to select it.

2

Hold down the Control key as you select an additional item.

•

If the selectionMode property is set to multipleRows, click any cell in another row to select that single row.

•

If the selectionMode property is set to multipleCells, click any cell to select that single cell.

As you select cells or rows in the AdvancedDataGrid control, the control updates the selectedCells property with
information about your selection. The selectedCells property is an Array of Objects where each Object contains
a rowIndex and columnIndex property that represents the location of the selected row or cell in the control.

ADOBE FLEX 3 285
Adobe Flex 3 Data Visualization Developer Guide

The value of the selectionMode property determines the data in the rowIndex and columnIndex properties, as the
following tables describes:
Value of selectionMode prop- Value of rowIndex and columnIndex properties
erty
none

No selection allowed in the control, and selectedCells is null.

singleRow

Click any cell in the row to select the row.
After the selection, selectedCells contains a single Object:
[{rowIndex:selectedRowIndex, columnIndex: -1}]

multipleRows

Click any cell in the row to select the row.

•

While holding down the Control key, click any cell in another row to select the row for discontiguous
selection.

•

While holding down the Shift key, click any cell in another row to select multiple, contiguous rows.

After the selection, selectedCells contains one Object for each selected row:
[

{rowIndex: selectedRowIndex1, columnIndex: -1},
{rowIndex: selectedRowIndex2, columnIndex: -1},
...
{rowIndex: selectedRowIndexN, columnIndex: -1}

]
singleCell

Click any cell to select the cell.
After the selection, selectedCells contains a single Object:
[{rowIndex: selectedRowIndex, columnIndex:selectedColIndex}]

multipleCells

Click any cell to select the cell.

•

While holding down the Control key, click any cell to select the cell multiple discontiguous selection.

•

While holding down the Shift key, click any cell to select multiple, contiguous cells.

After the selection, selectedCells contains one Object for each selected cell:
[

{rowIndex: selectedRowIndex1, columnIndex: selectedColIndex1},
{rowIndex: selectedRowIndex2, columnIndex: selectedColIndex2},
...
{rowIndex: selectedRowIndexN, columnIndex: selectedColIndexN}

]

The following example sets the selectionMode property to multipleCells to let you select multiple cells in the
control. This application uses an event handler for the keyUp event to recognize the Control+C key combination and,
if detected, copies the selected cells from the AdvancedDataGrid control to your system’s clipboard.
After you copy the cells, you can paste the cells in another location in the Flex application, or paste them in another
application, such as Microsoft Excel. In this example, you paste them to the TextArea control located at the bottom
of the application:
















ADOBE FLEX 3 287
Adobe Flex 3 Data Visualization Developer Guide

Hierarchical and grouped data display
The AdvancedDataGrid control supports the display of hierarchical and grouped data. To support this display, the
AdvancedDataGrid control displays a navigation tree in a column that lets you navigate the data hierarchy.
Hierarchical data is data already in a structure of parent and child data items. You can pass hierarchical data directly
to the AdvancedDataGrid control. Grouped data is data that starts out as flat data with no inherent hierarchy. Before
passing the flat data to the AdvancedDataGrid control, you specify one or more data fields that are used to group the
flat data into a hierarchy.
The following code shows hierarchical data in the SimpleHierarchicalData.as file:
[Bindable]
private var dpHierarchy:ArrayCollection = new ArrayCollection([
{Region:"Southwest", children: [
{Region:"Arizona", children: [
{Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},
{Region:"Central California", children: [
{Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},
{Region:"Nevada", children: [
{Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},
{Region:"Northern California", children: [
{Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},
{Region:"Southern California", children: [
{Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
]}
]);

Notice that the data contains a top-level object that contains a Region field and multiple second-level children. Each
second-level child also contains a Region field and one or more additional children. The following example shows
the AdvancedDataGrid control displaying this data:

The code for this example is in the section “Controlling the navigation tree of the AdvancedDataGrid control” on
page 289.
To display flat data as a hierarchy, you group the rows of the flat data before passing the data to the
AdvancedDataGrid control. The following code contains a variation on the hierarchical data shown in the previous
image, but arranges the data in a flat data structure:
[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},

ADOBE FLEX 3 288
Adobe Flex 3 Data Visualization Developer Guide

{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
{Region:"Southwest", Territory:"Central California",
Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
{Region:"Southwest", Territory:"Nevada",
Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
]);

In this example, the data contains a single level of individual records with no inherent hierarchy. To group the data,
you specify one or more data fields used to arrange the data in a hierarchy. The following example shows the
AdvancedDataGrid control where the flat data has been grouped by the Region field of the data:

The code for this example is in the section “Displaying grouped data” on page 296.

Setting the data provider with hierarchical data
To configure the AdvancedDataGrid control to display hierarchical data and the navigation tree, you pass to the
dataProvider property an instance of the HierarchicalData class or of the GroupingCollection class. Use the
HierarchicalData class when your data is already arranged in a hierarchy. Use the GroupingCollection class when
your data is in a flat structure. As part of configuring an instance of the GroupingCollection class, you specify one
or more data fields that are used to arrange the flat data in a hierarchy.
For more information on displaying hierarchical data, see “Displaying hierarchical data” on page 294. For more
information on displaying grouped data, see “Displaying grouped data” on page 296.
You can create an instance of the HierarchicalData class or an instance of the GroupingCollection class from any data
that you can use as a data provider. However, the AdvancedDataGrid control modifies its internal representation of
the data as follows:

•

An Array is represented internally by the AdvancedDataGrid control as an instance of the ArrayCollection class.

• An ArrayCollection class is represented internally by the AdvancedDataGrid control as an instance of the ArrayCollection class.
• A String that contains valid XML text is represented internally by the AdvancedDataGrid control as an instance
of the XMLListCollection class.
• An XMLNode class or an XMLList class is represented internally by the AdvancedDataGrid control as an
instance of the XMLListCollection class.

ADOBE FLEX 3 289
Adobe Flex 3 Data Visualization Developer Guide

• Any object that implements the ICollectionView interface is represented internally by the AdvancedDataGrid
control as an instance of the ICollectionView interface.
•

An object of any other data type is wrapped in an Array instance with the object as its sole entry.

For example, you use an Array to create an instance of the HierarchicalData class, and then pass that
HierarchicalData instance to the AdvancedDataGrid.dataProvider property. If you read the data back from the
AdvancedDataGrid.dataProvider property, it is returned as an ArrayCollection instance.
Calling validateNow() after setting the data provider

In some situations, you may set the data provider of the AdvancedDataGrid control to hierarchical or grouped data,
and then immediately try to perform an action based on the new data provider. This typically occurs when you set
the dataProvider property in ActionScript, as the following example shows:
adg.dataProvider = groupedCollection;
adg.expandAll();

In this example, the call to expandAll() fails because the AdvancedDataGrid control is in the process of setting the
dataProvider property, and the expandAll() method either processes the old value of the dataProvider
property, if one existed, or does nothing.
In this situation, you must insert the validateNow() method after setting the data provider. The validateNow()
method validates and updates the properties and layout of the control, and then redraws it, if necessary. The
following example inserts the validateNow() method before the expandAll() method:
adg.dataProvider = groupedCollection;
adg.validateNow();
adg.expandAll();

Do not insert the validateNow() method every time you set the dataProvider property because it can affect the
performance of your application; it is only required in some situations when you attempt to perform an operation
on the control immediately after setting the dataProvider property.

Controlling the navigation tree of the AdvancedDataGrid control
The AdvancedDataGrid control is sometimes referred to as a tree datagrid because a column of the control uses an
expandable tree to determine which rows are currently visible in the control. Often, the tree appears in the left-most
column of the control, where the first column of the control is associated with a field of the control’s data provider.
That data field of the data provider provides the text for the labels of the tree nodes.
In the following example, you populate the AdvancedDataGrid control with the hierarchal data structure shown in
“Hierarchical and grouped data display” on page 287. The data contains a top-level object that contains a Region
field, and multiple second-level children. Each second-level child also contains a Region field and one or more
children.
The AdvancedDataGrid control in this example defines four columns to display the data: Region, Territory Rep,
Actual, and Estimate.







ADOBE FLEX 3 290
Adobe Flex 3 Data Visualization Developer Guide














The following image shows the AdvancedDataGrid control created by this example. The control displays a folder
icon to represent branch nodes of the tree, and a file icon to represent leaf nodes. The first column of the control is
associated with the Region field of the data provider, so the tree labels display the value of the Region field.

Notice that the leaf icon for the tree does not show a label. This is because the individual records for each territory
representative do not contain a Region field.
While the tree is often positioned in the left-most column of the control, you can use the treeColumn property to
specify any column in the control, as the following example shows:



















Setting navigation tree icons and labels
The navigation tree lets you control the icons and labels used for the branch and leaf nodes. For example, you can
display a tree of labels with no icons, a tree with just folder icons, a tree with no labels at all, or a tree in its own
column that is not associated with any data field.
The following table describes the style properties of the AdvancedDataGrid control that you use to set the tree icons:
Style property

Description

defaultLeafIcon

Specifies the leaf icon.

disclosureClosedIcon Specifies the icon that is displayed next to a closed branch node. The default icon is a black triangle.
disclosureOpenIcon

Specifies the icon that is displayed next to an open branch node. The default icon is a black triangle.

folderClosedIcon

Specifies the folder closed icon for a branch node.

folderOpenIcon

Specifies the folder open icon for a branch node.

The following example sets the default leaf icon to null to hide it, and uses custom icons for the folder open and
closed icons:



















You can also specify the styles by using the setStyle() method, and by using an  tag, as the following
example shows:

ADOBE FLEX 3 292
Adobe Flex 3 Data Visualization Developer Guide


AdvancedDataGrid {
defaultLeafIcon:ClassReference(null);
folderOpenIcon:Embed(source='assets/folderOpenIcon.jpg');
folderClosedIcon:Embed(source='assets/folderClosedIcon.jpg');
}


Using the groupIconFunction and groupLabelFunction properties
Use the groupIconFunction and groupLabelFunction properties of the AdvancedDataGrid class to define
callback functions to control the display of the leaf nodes of the navigation tree. The callback function specified by
the groupIconFunction property controls the icon, and the callback function specified by the
groupLabelFunction controls the label.
The following example uses the groupIconFunction property to display a custom icon for the top level node of the
navigation tree, and display the default icon for all other leaf nodes of the tree:



















ADOBE FLEX 3 293
Adobe Flex 3 Data Visualization Developer Guide

Creating a separate column for the navigation tree
In the examples in “Hierarchical and grouped data display” on page 287, the first column also displays the Region
field of the data. Therefore, as you expand the nodes of the navigation tree, the label of each tree node corresponds
to the value of the Region field in the data provider for that row. For the leaf nodes of the tree, the data provider does
not contain a value for the Region field, so the labels for the leaf nodes are blank.
You can also put the navigation tree in its own column, where the column is not associated with a data field, as the
following example shows:

This example does not associate a data field with the column that contains the tree, so the tree icons appear with no
label. This example also sets the folderClosedIcon, folderOpenIcon, and defaultLeafIcon properties of the
AdvancedDataGrid control to null, but does display the disclosure icons so that the user can still open and close tree
nodes.
The following code implements this example. Notice that the first column is not associated with a data field. Because
it is the first column in the data grid, the AdvancedDataGrid control automatically uses it to display the navigation
tree.


















ADOBE FLEX 3 294
Adobe Flex 3 Data Visualization Developer Guide




Displaying hierarchical data
Hierarchical data is data in a structured format where the data is already arranged in a hierarchy. To display hierarchical data in the AdvancedDataGrid control, you set the data provider of the control to an instance of the HierarchicalData class. The structure of the data in the data provider defines how the AdvancedDataGrid control displays
the data.

Defining hierarchical data with an ArrayCollection
Using an ArrayCollection is a common way to create hierarchical data, as the following example shows in the
SimpleHierarchicalData.as file. In this example, the data has three levels – a root level and two child levels:
[Bindable]
private var dpHierarchy:ArrayCollection = new ArrayCollection([
{Region:"Southwest", children: [
{Region:"Arizona", children: [
{Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},
{Region:"Central California", children: [
{Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},
{Region:"Nevada", children: [
{Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},
{Region:"Northern California", children: [
{Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},
{Region:"Southern California", children: [
{Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
]}
]);

This example uses the children keyword in the ArrayCollection definition to define the data hierarchy. The
children keyword is the default keyword used by the HierarchicalData class to define the hierarchy.
You can use a different keyword to define the hierarchy. The following example shows the HierarchicalDataCategories.as file, which uses the categories keyword:
[Bindable]
private var dpHierarchy:ArrayCollection = new ArrayCollection([
{Region:"Southwest", categories: [
{Region:"Arizona", categories: [
{Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},
{Region:"Central California", categories: [
{Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},
{Region:"Nevada", categories: [
{Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},
{Region:"Northern California", categories: [
{Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},
{Region:"Southern California", categories: [
{Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
]}
]);

ADOBE FLEX 3 295
Adobe Flex 3 Data Visualization Developer Guide

Use the HierarchicalData.childrenField property to specify the name of the field that defines the hierarchy, as
the following example shows:



















Displaying hierarchical XML data
The examples in the previous section use an ArrayCollection to populate the AdvancedDataGrid control. You can
also populate the control with hierarchical XML data. The following example modifies the data from the previous
section to format it as XML, and then passes that data to the AdvancedDataGrid control:






































Displaying grouped data
Grouped data is flat data that you arrange in a hierarchy for display in the AdvancedDataGrid control. To group your
data, you specify one or more data fields that collect the data into the hierarchy.
To populate the AdvancedDataGrid control with grouped data, create an instance of the GroupingCollection class
from your flat data, and then pass that GroupingCollection instance to the data provider of the AdvancedDataGrid
control. When you create the instance of the GroupingCollection from your flat data, you specify the fields for the
data that are used to create the hierarchy.
Most of the examples in this section use the following flat data to create an instance of the GroupingCollection class:
[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
{Region:"Southwest", Territory:"Central California",
Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
{Region:"Southwest", Territory:"Nevada",
Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},

ADOBE FLEX 3 297
Adobe Flex 3 Data Visualization Developer Guide

{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
]);

The following image shows an AdvancedDataGrid control that uses this data as input. This example specifies two
fields that are used to group the data: Region and Territory. The first column of the AdvancedDataGrid control is
associated with the Region field, so the navigation tree uses the Region field to define the labels for the leaf nodes of
the tree.

The following code implements this example:

























ADOBE FLEX 3 298
Adobe Flex 3 Data Visualization Developer Guide




The GroupingCollection instance reformats the data based on these fields so that internally it is represented by the
GroupingCollection instance, as the following example shows:
[{GroupLabel:"Southwest", children:[
{GroupLabel:"Arizona", children:[
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]}
{GroupLabel:"Central California", children:[
{Region:"Southwest", Territory:"Central California",
Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]}
{GroupLabel:"Nevada", children:[
{Region:"Southwest", Territory:"Nevada",
Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]}
{GroupLabel:"Northern California", children:[
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]}
{GroupLabel:"Southern California", children:[
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
]}]

Notice that the representation consists of a data hierarchy based on the Region and Territory fields of the flat data.
The GroupingCollection instance still contains the original rows of the input flat data, but those rows are now
arranged in a hierarchy based on the grouping fields.

Calling the GroupingCollection.refresh() method
The GroupingCollection.refresh() method applies the settings of the GroupingCollection class to the data. You
must call this method any time you modify the GroupingCollection class, such as by setting the grouping, source,
or summaries properties of the GroupingCollection class. You also call the GroupingCollection.refresh()
method when you modify a GroupingField of the GroupingCollection class, such as by changing the
caseInsensitive, compareFunction, or groupingFunction properties.
Notice that in the previous example, the AdvancedDataGrid control calls the GroupingCollection.refresh()
method in response to the initialize event of the AdvancedDataGrid control.

Using the default MXML property of the GroupingCollection class
The grouping property is the default MXML property of the GroupingCollection class, so you can rewrite the
previous example as follows:






ADOBE FLEX 3 299
Adobe Flex 3 Data Visualization Developer Guide





















Setting the name of the GroupLabel field
By default, GroupLabel is the field name for the data items added to the flat data to create the hierarchy. For an
example of the data structure created by the GroupingCollection class that uses the default field name, see
“Displaying grouped data” on page 296.
Use the Grouping.label property to specify a different name so that you can create a different group label for each
level of the generated hierarchy.

Creating a column for the GroupLabel field
The AdvancedDataGrid control uses the GroupLabel field to define the labels for the branch nodes of the navigation
tree. One option when displaying grouped data is to create a column for the top-level data items that the grouping
fields create. For example, you group your flat data by the Region and Territory fields. These fields appear as the
labels for the branch nodes of the navigation tree, so you omit separate columns for those fields, as the following
example shows:

ADOBE FLEX 3 300
Adobe Flex 3 Data Visualization Developer Guide

The following code creates this example. Notice that this example includes an AdvancedDataGridColumn instance
for the GroupLabel field, and no column definitions for the Region and Territory fields.
























Creating groups in ActionScript
The example in the previous section created the groups in MXML. However, you could let the user define the
grouping at run time. The following example creates the groups in ActionScript by using an event handler:

















Creating summary rows
Summary data provides a way for you to extract information from your data for display in the AdvancedDataGrid
control. For example, you can add summary data that contains the average value of a field across all rows of your
data, that contains the maximum field value, the minimum field value, or that contains other types of summaries.
Note: Summary data is not supported for hierarchical data represented by the HierarchicalData class. You can only
create summary data for data represented by the GroupingCollection class.
You create summary data about your groups by using the summaries property of the GroupingField class. You can
display the summary data in an existing row of the AdvancedDataGrid control, or display it in a separate row.

ADOBE FLEX 3 302
Adobe Flex 3 Data Visualization Developer Guide

The following example shows an AdvancedDataGrid control that displays two summary fields, Min Actual and Max
Actual:

The Min Actual and Max Actual fields in the top row correspond to summaries for all rows in the group, and the
Min Actual and Max Actual fields for each Territory correspond to summaries for all rows in the territory subgroup.
The following code creates this control:



























ADOBE FLEX 3 303
Adobe Flex 3 Data Visualization Developer Guide



















Notice in this example that you use the GroupingField.summaries property to specify the SummaryRow instance.
The SummaryRow instance contains all the information about a data summary. In this example, you use the
summaryPlacement property to add the summary data to the grouped data. Optionally, you can add new rows to
contain the summary data. For more information, see “Specifying the display location of the summary data in the
AdvancedDataGrid control” on page 305.
Each SummaryRow instance specifies one or more SummaryField instances that create the data summary. In this
example, you use the dataField property to specify that the summaries are determined by the data in the Actual
data field, the label property to specify the name of the data field created to hold the summary data, and the
operation property to specify how to create the summary for numeric fields. You can specify one of the following
values: SUM, MIN, MAX, AVG, or COUNT.
Internally, the GroupingCollection represents the grouped data, with the new summary data fields, as the following
example shows:
[{GroupLabel:"Southwest", Max Actual:55498, Min Actual:29134, children:[
{GroupLabel:"Arizona", Max Actual:38865, Min Actual:29885, children:[
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]}
{GroupLabel:"Central California", Max Actual:29134, Min Actual:29134, children:[
{Region:"Southwest", Territory:"Central California",
Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]}
{GroupLabel:"Nevada", Max Actual:52888, Min Actual:52888, children:[
{Region:"Southwest", Territory:"Nevada",
Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]}
{GroupLabel:"Northern California", Max Actual:55498, Min Actual:38805, children:[
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]}
{GroupLabel:"Southern California", Max Actual:44985, Min Actual:44913, children:[
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
]}]

ADOBE FLEX 3 304
Adobe Flex 3 Data Visualization Developer Guide

Using the default properties of the GroupingField and SummaryRow classes

The GroupingField.summaries property is the default property for the GroupingField class, and the
SummaryRow.fields property is the default property for the SummaryRow class; therefore, you can omit those
properties in your code and rewrite the previous example, as the following example shows:




































ADOBE FLEX 3 305
Adobe Flex 3 Data Visualization Developer Guide

Specifying the display location of the summary data in the AdvancedDataGrid control

The SummaryRow class contains the summaryPlacement property that determines where the summary data
appears in the AdvancedDataGrid control. The following table describes the values of the summaryPlacement
property:
Value of summaryPlacement Description
property
first

Creates a summary row as the first row in the group.

last

Creates a summary row as the last row in the group.

group

Adds the summary data to the row corresponding to the group.

The section “Creating summary rows” on page 301 shows an example of summary data added to the group by specifying group as the value of the summaryPlacement property. The following example shows the same grouped data
but with the summaryPlacement property set to last:

You can specify multiple values to the summaryPlacement property, separated by a space; for example, a value of
last group specifies to show the summary at the group level and as the last row of the group.

Internally, the GroupingCollection represents the grouped data, with the new summary data fields, as the following
example shows:
[{GroupLabel:"Southwest", children:[
{GroupLabel:"Arizona", children:[
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
{Max Actual:38865, Min Actual:29885}]}
{GroupLabel:"Central California", children:[
{Region:"Southwest", Territory:"Central California",
Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
{Max Actual:29134, Min Actual:29134}]}
{GroupLabel:"Nevada", children:[
{Region:"Southwest", Territory:"Nevada",
Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
{Max Actual:52888, Min Actual:52888}]}
{GroupLabel:"Northern California", children:[
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Region:"Southwest", Territory:"Northern California",

ADOBE FLEX 3 306
Adobe Flex 3 Data Visualization Developer Guide

Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},
{Max Actual:55498, Min Actual:38805}]}
{GroupLabel:"Southern California", children:[
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000},
{Max Actual:44985, Min Actual:44913}]}
{Max Actual:55498, Min Actual:29134}
]}]

Notice that a new row is added to the entire group to hold the summary data, and a new row is added to each
subgroup to hold its summary data.
Creating multiple summaries

You can specify multiple SummaryRow instances in a single GroupingField instance. In the following example, you
create summary data to define the following fields: Min Actual, Max Actual, Min Estimate, and Max Estimate for the
Region group:





























ADOBE FLEX 3 307
Adobe Flex 3 Data Visualization Developer Guide





dataField="Estimate"/>
dataField="Min Actual"/>
dataField="Max Actual"/>
dataField="Min Estimate"/>
dataField="Max Estimate"/>

Creating a custom summary function

Use the SummaryRow.summaryObjectFunction property and the SummaryField.summaryFunction property to
add custom summary logic to your application. Your custom summary can perform many types of actions, but the
result of the summary calculation must be of type Number.
The SummaryRow.summaryObjectFunction property defines a callback function that defines an instance of the
SummaryObject class that collects the summary data. The AdvancedDataGrid control adds the SummaryObject
instance to the data provider to display the summary data in the control. Therefore, you define within the SummaryObject instance the properties to display. In the following example, the callback function adds a property named
Territory_Rep. This field appears in the Territory Rep column of the control for the summary row.
The SummaryField.summaryFunction property defines a callback function to perform the summary calculation.
The callback function must return a Number that contains the summary. The Number is displayed in the summary
row in the column that corresponds to the field being summarized.
The following example implements callback functions for the summaryObjectFunction and summaryFunction
properties to calculate a summary of the actual sales revenue for every other row of each territory:
































ADOBE FLEX 3 309
Adobe Flex 3 Data Visualization Developer Guide

Creating column groups
You collect multiple columns under a single column heading by using column groups, as the following example
shows:

In this example, you use flat data to populate the data grid, and group the Actual and Estimate columns under a single
column named Revenues.
To group columns in an AdvancedDataGrid control, you must do the following:

• Use the AdvancedDataGrid.groupedColumns property, rather than the AdvancedDataGrid.columns
property, to specify the columns.
•

Use the AdvancedDataGridColumnGroup class to specify the column groups.

The following code implements the AdvancedDataGrid control shown in the previous figure:


















ADOBE FLEX 3 310
Adobe Flex 3 Data Visualization Developer Guide



The groupedColumns property contains instances of the AdvancedDataGridColumn class and of the
AdvancedDataGridColumn class. Instances of the AdvancedDataGridColumn class appear in the control as standalone columns. All the columns specified in an AdvancedDataGridColumnGroup instance appear together as a
grouped column.
You can add multiple groups to the control. The following example adds groups named Area and Revenues:





















You can nest groups so that one column group contains multiple column groups, as the following example shows:














ADOBE FLEX 3 311
Adobe Flex 3 Data Visualization Developer Guide











Dragging and dropping columns in the group
By default, you can drag the columns in a group within the group to reposition them. You can also drag the entire
group to reposition it in the AdvancedDataGrid control.
To disable dragging of all columns in a group, set the AdvancedDataGridColumnGroup.childrenDragEnabled
property to false. To disable dragging for a single column, set the AdvancedDataGridColumn.dragEnabled
property to false.

Using grouped columns with hierarchical data
You can use column groups with hierarchical data, as well as flat data. The following example modifies the example
in the section “Creating a separate column for the navigation tree” on page 293 to group the Actual and Estimates
columns under the Revenues group column:





















ADOBE FLEX 3 312
Adobe Flex 3 Data Visualization Developer Guide

Specify a data field for the AdvancedDataGridColumnGroup class
The previous examples for column groups do not specify a data field for the AdvancedDataGridColumnGroup class.
However, the AdvancedDataGridColumnGroup class is designed to work with hierarchical data. Therefore, if you
specify a data field for the AdvancedDataGridColumnGroup class, it automatically creates a column group for the
subfields of that data field.
In the following example, the HierarchicalDataForGroupedColumns.as file defines a hierarchical data set where the
Revenues field contains two subfields, Actual and Estimate:
[Bindable]
private var dpHierarchy:ArrayCollection = new ArrayCollection([
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Barbara Jennings",
Revenues:{Actual:38865, Estimate:40000}},
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Dana Binn",
Revenues:{Actual:29885, Estimate:30000}},
{Region:"Southwest", Territory:"Central California",
Territory_Rep:"Joe Smith",
Revenues:{Actual:29134, Estimate:30000}},
{Region:"Southwest", Territory:"Nevada",
Territory_Rep:"Bethany Pittman",
Revenues:{Actual:52888, Estimate:45000}},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"Lauren Ipsum",
Revenues:{Actual:38805, Estimate:40000}},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"T.R. Smith",
Revenues:{Actual:55498, Estimate:40000}},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Alice Treu",
Revenues:{Actual:44985, Estimate:45000}},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Jane Grove",
Revenues:{Actual:44913, Estimate:45000}}
]);

The following example uses this data and specifies the Revenues field as the value of the
AdvancedDataGridColumnGroup.dataField property, and creates the following output:

The following code implements this example:



ADOBE FLEX 3 313
Adobe Flex 3 Data Visualization Developer Guide





















Using item renderers with the AdvancedDataGrid
control
You customize the appearance and behavior of cells in an AdvancedDataGrid control by creating custom item
renderers and item editors. Use the same process for assigning item editors and item renderers to columns of the
AdvancedDataGrid control as you do with the DataGrid control. For an introduction to item renderers and item
editors, see “Using Item Renderers and Item Editors” on page 779 in Adobe Flex 3 Developer Guide.
The AdvancedDataGrid control adds capabilities to support item renderers. These capabilities let you perform the
following actions:

• Create rows or columns not associated with data in the data provider. For example, you can create summary rows
from the data provider.
• Span multiple columns with a renderer.
• Use multiple renderers in the same column. For example, when displaying hierarchical data, you can use a
different renderer in the column based on the level of the row in the hierarchy.
Note: These capabilities support item renderers only; use item editors as you do with the DataGrid control.

Using an item renderer
To use the item renderer capabilities of the AdvancedDataGrid control, you assign the item renderer to the
AdvancedDataGrid control itself, not to a specific column, by using the AdvancedDataGrid.rendererProviders
property. The following example assigns an item renderer to the Estimate column:


ADOBE FLEX 3 314
Adobe Flex 3 Data Visualization Developer Guide




dataField="Region"/>
dataField="Territory_Rep" headerText="Territory Rep"/>
dataField="Actual"/>
dataField="Estimate"/>






The rendererProviders property contains an Array of AdvancedDataGridRendererProvider instances. Each
AdvancedDataGridRendererProvider instance defines the characteristics for a single item renderer.
In the previous example, the AdvancedDataGridRendererProvider instance specifies to use the EstimateRenderer
for column 3, where the first column in the control is column 0, and the renderer spans a single column. If you set
the columnSpan property to 0, the renderer spans all columns in the row.
Rather than using the column index to assign the renderer, you specify an id property for the column, and then use
the column property to associate the renderer with the column, as the following example shows:




dataField="Region"/>
dataField="Territory_Rep" headerText="Territory Rep"/>
dataField="Actual"/>
id="estCol" dataField="Estimate"/>






The depth property lets you associate the renderer with a specific level in the hierarchy of the navigation tree of an
AdvancedDataGrid control, where the depth of the top-most node in the navigation tree is 1. The following example
associates the renderer with the third level of a navigation tree:




In the previous example, the AdvancedDataGrid control uses the default renderer for the column until you expand
it to the third level of the navigation tree, and then it uses EstimateRenderer component. You use the depth property
to assign different renderers to the same column, where the depth property specifies the renderer to use for each
level of the tree.
A renderer can span multiple columns. In the following example, you create a renderer that spans two columns:




ADOBE FLEX 3 315
Adobe Flex 3 Data Visualization Developer Guide










The previous example uses a single renderer that spans the Actual and Estimate columns to display a combined view
of the data for these columns. For an implementation of the SummaryRenderer component, see “Using a renderer
to generate column data” on page 315.
The following table describes the properties of the AdvancedDataGridRendererProvider class that you use to
configure the renderer:
Property

Description

column

The ID of the column for which the renderer is used. If you omit this property, you can use the columnIndex property
to specify the column.

columnIndex

The column index for which the renderer is used, where the first column has an index of 0.

columnSpan

The number of columns that the renderer spans. Set this property to 0 to span all columns. The default value is 1.

dataField

The data field in the data provider for the renderer. This property is optional.

depth

The depth in the tree at which the renderer is used, where the top-most node of the tree has a depth of 1. Use this
property when the renderer should be used only when the tree is expanded to a certain depth, not for all nodes in
the tree. By default, the control uses the renderer for all levels of the tree.

renderer

The renderer.

rowSpan

The number of rows that the renderer spans. The default value is 1.

Using a renderer to generate column data
The following example shows the results when an item renderer is used to calculate the value of the Difference
column of the AdvancedDataGrid control:

ADOBE FLEX 3 316
Adobe Flex 3 Data Visualization Developer Guide

This example defines a column with the id of diffCol that is not associated with a data field in the data provider.
Instead, you use the rendererProvider property to assign an item renderer to the column. The item renderer
calculates the difference between the actual and estimate values, and then displays a message based on whether the
representative exceeded or missed their estimate.
The following code implements this example:























The following code shows the SummaryRenderer component:









Using an item renderer that spans an entire row
You can use an item renderer with a hierarchical data set to display an entire row of data. The following example
shows a PieChart control that displays the data from the detail field of the hierarchical data set. Each row contains
detailed information about sales revenues for the representative, which is rendered as a segment of the pie chart:

The following code implements this example:




















The following code renders the ChartRenderer.mxml component:










You can modify this example to display the PieChart control in a column. In the following example, you add a Detail
column to the control, and then specify that the item renderer is for column 2 of the control:





















ADOBE FLEX 3 320
Adobe Flex 3 Data Visualization Developer Guide

Keyboard navigation
The following keystrokes are built into the AdvancedDataGrid control to let users navigate the control:
Keyboard action
Standard

Key assignments

•

Use the Up and Down Arrow keys to scroll vertically by one row.

•

Type characters to do incremental type-ahead look-ups in the first column.

•

Use the Home and End keys to move to the first and last rows.

•

Use the Page Up and Page Down keys to move to the last visible row and then scroll vertically
by the number of rows specified by the rowcount property.

In editable mode

•

Use the Tab and Shift+Tab keys to move to the next and previous cells, and start editing.

•

Use the Escape or Control+Period keys to cancel editing.

•

Use the Enter key based on the value of the

AdvancedDataGridColumn.editorUsesEnterKey property:

•

If editorUsesEnterKey=true, the Enter key is considered to be part of the input text.

•

If editorUsesEnterKey=false, if single-line editor, the Enter key saves the item and moves
down a row.

•

If you use the Tab key to move focus to the AdvancedDataGrid control, focus is placed on the
position of the last edited item.

•
For the expandable tree

Use the Control click keys to select multiple discontiguous items.

•

Use the Multiply key on the number pad (asterisk) to open or close all nodes under the current
node, with no animation.

•

Use the Add key on the number pad or the Space key to open nodes with animation.

•

Use the Subtract key on the number pad to close nodes with animation.

•

Use the Shift+Right Arrow key to open a closed node, or select the parent node.

•

Use the Shift+Left Arrow to close open nodes.

•

Use the Up and Down Arrow keys to move up and down one row.

ADOBE FLEX 3 321
Adobe Flex 3 Data Visualization Developer Guide

Keyboard action
For column headers

Key assignments

•

Use the arrow keys to move focus to a column header.

•

The first Space key pressed when a column header has focus sorts the column in descending
order. Each subsequent press of the Space key toggles the sort order between ascending and
descending order.

•

Use the Control+Space keys when a header has focus to sort multiple columns.

•

Use the Left Arrow and Right Arrow keys to move to the previous or next header, without
column wrapping.

To scroll vertically and horizontally
in pages

•

The first Page Up or Page Down key pressed move to the first or last visible row. The next Page
Up or Page Down key pressed scrolls vertically up or down by a page, which corresponds to the
number of visible rows.

•

Use the Shift+Page Up and Shift+Page Down keys to move to first or last visible column.

To move focus out of AdvancedDa- When you set AdvancedDataGrid.editable=true or AdvancedDataGridColumn=true:
taGrid while editing is in progress
• Use the Tab key to move focus to the AdvancedDataGrid control.

•

Use the Tab key again to move focus to the next component.

When focus is on the AdvancedDataGrid control:

•

Use the Left, Right, Up, and Down Arrow keys to move between cells.

•

Use the Shift+Home and Shift+End keys to move to the first and last column in current row.

•

Cells are only selected by default, they are not editable.

•

Press the F2 key to make a cell editable.

When editing the cell:

•

Use the arrow keys to move the cursor in the editing area.

•

Use the Escape key to cancel editing.

•

Use the Enter key to commit editing changes.

When you set AdvancedDataGrid.editable=false or AdvancedDataGridColumn=false:

•

Same behavior as when editable=true, but the F2 key does not make the cell editable.

•

Use the Home and End keys to move to first and last rows.

•

Use the Page Up and Page Down keys to move to the previous and next pages.

322

Chapter 7: Creating OLAP Data Grids
The OLAPDataGrid control lets you aggregate large amounts of data for easy display and interpretation. The control
supports a two-dimensional grid layout, where the columns and rows of the control can display a single level of information, or you can create hierarchical rows and columns to display more complex data.
The OLAPDataGrid controls is a subclass of the AdvancedDataGrid control, and therefore supports many of the
features of the AdvancedDataGrid control. For more information on the AdvancedDataGrid control, see “Using the
AdvancedDataGrid Control” on page 275.
Topics

About OLAP data grids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Creating an OLAP schema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Creating OLAP queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
Writing a query for a simple OLAP cube . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Writing a query for a complex OLAP cube . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
Creating a multidimensional axis in an OLAPDataGrid control. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Configuring the display of an OLAPDataGrid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352

About OLAP data grids
When working with large amounts of data, you can quickly get overwhelmed with the scope and size of the data. For
example, you collect sales information for different products, in different regions, and for different customers in a
typical two-dimensional spreadsheet. That spreadsheet could easily contain hundreds of rows and tens or even
hundreds of columns. Extracting useful information for such a large data collection can be difficult, and trying to
identify trends or other patterns in the data can be even harder.
Data visualization is a technique for examining large amounts of data in a compact format. One type of data visualization technique is to use a chart, such as a bar, column, or pie chart. Adobe® Flex™ supports many types of charts.
For more information, see “Introduction to Charts” on page 2.
Another data visualization technique is to aggregate the data in a compact format, such as in an OLAP (online
analytical processing) data grid. An OLAP data grid is similar to a pivot table in Microsoft Excel. An OLAP data grid
displays data aggregations in a two-dimensional grid of rows and columns, like a spreadsheet, but the data is
condensed based on your aggregation settings.
Note: While the Flex OLAP data grid is similar to a pivot table, it provides a much greater set of features for aggregating
data.
For example, you collect sales information on a server in a flat data structure of records, where each record contains
information for a single customer transaction, for a single product, in a single quarter. The following code shows the
format of this flat data:
data:Object = {
customer:"AAA",
product:"ColdFusion",
year:"2007",
quarter:"Q1"
revenue: "100.00"
}

ADOBE FLEX 3 323
Adobe Flex 3 Data Visualization Developer Guide

For a large company with hundreds of customers and tens or hundreds of products, this table could easily contain
several thousand rows. Rather than display this information in a standard spreadsheet, you download your data to a
Flex application to aggregate sales data by product and quarter, and then display the aggregated data in an OLAP
data grid. From this data aggregation, you can determine trends in sales of each product over time.

About the OLAPDataGrid control
You use the Flex OLAPDataGrid control to display an OLAP data grid. The following image shows the OLAPDataGrid control displaying the aggregated sales information for product and quarter:

Like all Flex data grid controls, the OLAPDataGrid control is designed to display data in a two-dimensional representation of rows and columns.
You can modify this example to compare quarterly sales from two different years, as the following example shows:

In the previous figure, the columns of the OLAPDataGrid control show a hierarchy of information for year and
quarter. You can add multiple-level hierarchies for both the columns and the rows of the control.

About creating an OLAP data grid
The following figure shows the data flow that you use to aggregate your data for display in the OLAPDataGrid
control:

The following steps describe this process in more detail:

ADOBE FLEX 3 324
Adobe Flex 3 Data Visualization Developer Guide

Start with flat data, which is typically data arranged as a set of records where each record contains the same data
fields. For example, you might start with flat data from a spreadsheet, or with data from a table of a relational
database.

1

The following code shows an example format of flat data:
data:Object = {
customer:"AAA",
product:"ColdFusion",
quarter:"Q1"
revenue: "100.00"
}

Define an OLAP schema that describes how your data gets transformed from a flat representation into an OLAP
cube. An OLAP schema defines the representation of your flat data in an OLAP cube, and defines how to aggregate
your data for an OLAP query.

2

An OLAP cube is analogous to a table in a relational database. But whereas a table typically has two dimensions
(row and column), an OLAP cube can have any number of dimensions. In this example, the cube has three
dimensions: customer, product, and quarter. Every possible set of values for customer, product, and quarter
defines a unique point in the cube. The value at each point in the cube is the sales revenue for that set of values
of customer, product, and quarter.
3

Create queries to extract aggregated data from the OLAP cube for display in the OLAPDataGrid control.
After your data is in an OLAP cube, you write queries to extract aggregated data for display in the OLAPDataGrid control. You can write multiple queries to create different types of data aggregations.

4

Use the query results as input to the OLAPDataGrid control to display the results.

About OLAP cubes
An OLAP cube can have any number of dimensions. In its simplest form, the dimensions of an OLAP cube correspond to a field of the flat data set. For example, you have flat data that contains three fields:
data:Object = {
product:"ColdFusion"
quarter :"Q1"
revenue: "100.00",
}

The data fields of each record can contain the following values:

•
•

The product field can have the values: ColdFusion, Flex, Dreamweaver, and Illustrator.

•

The revenue field contains the sales, in dollars, of the product for the quarter.

The quarter field can have the values: Q1, Q2, Q3, and Q4.

To aggregate your data, you create an OLAP cube with two dimensions: quarter and product. The value along each
dimension of the cube is called a member. For example, the product dimension of the cube has the following
members: ColdFusion, Flex, Dreamweaver, and Illustrator. For the quarter dimension, the members are Q1, Q2, Q3,
and Q4.
The value at any point in the cube defined by the two dimensions is called a measure of the cube. For example, the
measure at the point in the cube defined by (Q1, ColdFusion) is 100.00. A schema can define one or more measures
for a single point in the OLAP cube.

ADOBE FLEX 3 325
Adobe Flex 3 Data Visualization Developer Guide

Flex supports only numeric values for the measure of a cube. The advantage of numeric values is that they can be
easily aggregated for display in the OLAPDataGrid control. Some typical aggregation types include sum, average,
minimum, and maximum. For example, you specify the aggregation method of the revenue measure as SUM. You
then extract sales information from the cube for ColdFusion. The aggregated sales data contains the sum of all
ColdFusion sales for each quarter.

About OLAP schemas
To convert flat data into an OLAP cube, you create an OLAP schema that defines the dimensions of the cube, the
fields of the flat data that supply the members along each dimension, and the fields of the flat data that supply the
measure for any point in the cube.
For example, you have the following flat data that contains sales records:
data:Object = {
customer:"AAA",
product:"ColdFusion",
quarter:"Q1"
revenue: "100.00"
}

The following example shows the definition for an OLAPCube that includes the definition of the OLAP schema used
to represent this data in the cube. This schema defines a three-dimensional OLAP cube based on the customer,
product, and quarter fields of the data.






















Notice that in this schema:

•

All dimensions are defined first, and then all measures.

ADOBE FLEX 3 326
Adobe Flex 3 Data Visualization Developer Guide

• The first line of each dimension associates a data field of the flat data with an OLAPAttribute instance. You then
use the OLAPLevel.attributeName property to associate the attribute with a level of the dimension to populate the
members of the dimension. For example, in this schema you populate the Customer level of the CustomerDim
dimension with the data from the customer field of the data.
• A dimension of an OLAP schema always contains a hierarchy of one or more levels. In this schema, the hierarchy
of each dimension contains only a single level corresponding to a field of the flat data. This is the simplest form of a
dimension. Other schemas could define multiple levels in a hierarchy to create a complex dimension. For more information, see “Creating an OLAP schema” on page 330.
• A measure definition specifies the data field of the flat data that contains the value for each point in the OLAP
cube, and how the measure is aggregated by an OLAP query. In this example, you aggregate revenue by summing it.
That means all queries of this OLAP cube will return revenue summations. Other types of aggregation methods
include maximum, minimum, and average.
• This definition of the OLAPCube specifies an event handler for the complete event. You cannot invoke a query
on the cube until it completes initialization, which is signalled by the cube when it dispatches the complete event.
Based on the requirements of your application, you might create multiple OLAP cubes from the same flat data set,
where each cube uses a different schema to create its own arrangement of dimensions and measures. For more information and examples of OLAP schemas, see “Creating an OLAP schema” on page 330.

About OLAP queries
OLAP queries extract aggregated data from an OLAP cube for display in an OLAPDataGrid control. The query
specifies the dimensions that define the characteristics of the query, and the measure or measures aggregated to
create the query results.
In the previous section, you defined an OLAP schema for sales information where the schema defines
CustomerDim, ProductDim, and QuarterDim dimensions, and a single measure for revenue aggregated by the SUM
aggregation method. Therefore, you can create a query to sum revenue by the following criteria:

•

Product for each quarter

•
•

Customer for each product

•

Any other combination of members from each dimension

Customer for each quarter

You construct a query in ActionScript as an instance of the OLAPQuery class, and then execute the query by calling
the OLAPCube.execute() method, which returns an instance of the AsyncToken class.
A query is required to have two axes, a row axis and a column axis, of type IOLAPQueryAxis. The row axis defines
the data aggregation information for each row of the OLAPDataGrid control, and the column axis defines the data
aggregation information for each column of the control.
You use the OLAPSet class to specify the data aggregation information for each axis, as the following example shows:
// Create an instance of OLAPQuery to represent the query.
var query:OLAPQuery = new OLAPQuery;
// Get the row axis from the query instance.
var rowQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.ROW_AXIS);
// Create an OLAPSet instance to configure the axis.
var productSet:OLAPSet = new OLAPSet;
// Add the Product to the row to aggregate data
// by the Product dimension.
productSet.addElements(
cube.findDimension("ProductDim").findAttribute("Product").children);
// Add the OLAPSet instance to the axis.
rowQueryAxis.addSet(productSet);

ADOBE FLEX 3 327
Adobe Flex 3 Data Visualization Developer Guide

// Get the column axis from the query instance, and configure it
// to aggregate the columns by the Quarter dimension.
var colQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.COLUMN_AXIS);
var quarterSet:OLAPSet= new OLAPSet;
quarterSet.addElements(
cube.findDimension("QuarterDim").findAttribute("Quarter").children);
colQueryAxis.addSet(quarterSet);
// Execute the query.
var token:AsyncToken = cube.execute(query);
// Set up handlers for the query results.
token.addResponder(new AsyncResponder(showResult, showFault));

Notice that in this query:

•

You initialize each axis by calling the OLAPQuery.getAxis() method.

• You configure each OLAPSet instance by calling the OLAPSet.addElements() method to specify the information used to populate the axis.
• You set up two functions to handle the query result defined by the AsyncToken class. In this example, the
function showResult() handles the query results when the query succeeds, and the function showFault() handles
any errors detected during query execution. For more information on using the AsyncToken class, see “Executing a
query and returning the results to an OLAPDataGrid control” on page 336.
For more information and examples of OLAP queries, see “Creating OLAP queries” on page 333.

The differences between the OLAPDataGrid and the AdvancedDataGrid control
You use the OLAPDataGrid control to display the results of an OLAP query. The OLAPDataGrid control is a
subclass of the AdvancedDataGrid control and inherits much of its functionality. However, because of the way you
pass data to the OLAPDataGrid control, it has several differences from the AdvancedDataGrid control:

• Column dragging is not allowed in the OLAPDataGrid control.
• You cannot edit cells in the OLAPDataGrid control because cell data is a result of a query and does not correspond to a single data value in the OLAP cube.
• You cannot sort columns by clicking on headers in the OLAPDataGrid control. Sorting is supported at the
dimension level so that you can change the order of members of that dimension.
You populate an OLAPDataGrid control with data by setting its data provider to an instance of the OLAPResult class,
which contains the results of an OLAP query. For a complete example that uses this control, see “Example using the
OLAPDataGrid control” on page 327.

Example using the OLAPDataGrid control
The following example shows the complete code for creating the OLAPDataGrid control that appears in the section
“About OLAP data grids” on page 322. This example aggregates product sales by quarter. The example uses flat data
from the dataIntro.as file, which contains sales records in the following format:
data:Object = {
customer:"AAA",
product:"ColdFusion",
quarter:"Q1"
revenue: "100.00"
}

The following code implements this example:


ADOBE FLEX 3 328
Adobe Flex 3 Data Visualization Developer Guide






























ADOBE FLEX 3 330
Adobe Flex 3 Data Visualization Developer Guide

Creating an OLAP schema
An OLAP schema defines the representation of your flat data in an OLAP cube, and defines how to aggregate your
data for an OLAP query. You typically define your schema in MXML. While you can construct a schema programmatically in ActionScript, that method requires much more coding than MXML.
The following table describes the classes and interfaces that you use to define an OLAP schema:
Class

Interface

Description

OLAPSchema

IOLAPSchema

The schema instance.

OLAPCube

IOLAPCube

The OLAP cube created by the schema.

OLAPDimension

IOLAPDimension

A dimension of the schema.

OLAPAttribute

IOLAPAttribute

An attribute of a dimension

OLAPHierarchy

IOLAPHierarchy

A hierarchy of a dimension.

OLAPLevel

IOLAPLevel

A level of a hierarchy.

OLAPMeasure

IOLAPMeasure

A measure of a dimension.

General form of a schema definition
In MXML, you can define an OLAP schema as part of the definition of an OLAPCube instance. Typically, you set
any properties of the OLAPCube instance as tag attributes, and set the OLAPCube.dimensions and
OLAPCube.measures properties as child tags, as the following example shows:




...


...


The order of the OLAPDimension and OLAPMeasure definitions is not important, but you should not place
OLAPMeasure definitions between OLAPDimension definitions.

Specifying the aggregation method for a measure
As part of creating an OLAP schema, you specify the data field that provides the value of the measure for each point
in the cube. The measure corresponds to the data value at that point in the OLAP cube. For example, if you define a
schema for sales information, you might specify as a measure of the cube the revenue for a product, and the aggregation type as SUM.

ADOBE FLEX 3 331
Adobe Flex 3 Data Visualization Developer Guide

A schema can define one or more measures for a single point in the OLAP cube. The first measure in the schema is
called the default measure, and is the measure returned by an OLAP query when you do not explicitly specify the
measure to return. For more information on selecting a specific measure, see “Creating a query using a nondefault
measure” on page 349.
The following example shows a section of an MXML schema definition that specifies two measures for the schema:



When creating a schema, you specify the name of the measure, the data field in the input flat data that contains the
data for the measure, and an aggregation method of the measure. In this example, the aggregation method is SUM.
That means when you create an OLAP query for a measure, the query sums all revenue fields to generate the values
displayed by the OLAPDataGrid control. You could use this schema to define a cube so that you can total sales and
cost information for products, regions, and other characteristics of your data.
To aggregate the revenue data using a different aggregation method, such as average or maximum, create another
schema to define a second OLAP cube. The following example shows a section of another MXML schema definition
that specifies the aggregation method as MAX for the sales data and MIN for the cost data:



You should take care in how you define your schema because it can limit the types of queries that you can run on it,
or the level of detail at which you can create aggregations.

Creating a schema dimension
An OLAPSchema instance can define any number of dimensions, limited only by your input data. A dimension can
be a simple dimension with a single level, or it can be a complex dimension with multiple levels. The dimension of
a schema always has the same basic form:


...


...



Notice that in this schema:

• The dimension first uses OLAPAttribute class to specify the data fields of the input data set used to populate the
members of the dimension.
The dimension defines an instance of the OLAPHierarchy class. Therefore, a dimension is always assumed to contain
a hierarchy of levels, even if that hierarchy contains only a single level.

• The dimension specifies one or more instances of the OLAPLevel class to associate a field of the input with the
dimension.
Defining a dimension that contains a single level

To create a simple dimension (a dimension that contains a single level), you define a dimension hierarchy, as the
following example shows:






ADOBE FLEX 3 332
Adobe Flex 3 Data Visualization Developer Guide



In this example, the customer field of the input data defines the entire measure of the dimension.
Defining a dimension that contains multiple levels

Instead of creating a separate dimension for each field of your data, you can choose to group related data fields along
a single dimension. For example, your data might contain several fields related to the time of a transaction, such as
month, quarter, and year. Or your data might contain multiple fields associated with the geographical area of a transaction, such as region, state, province, or country.
The TimeDim dimension in the following example defines hierarchical dimensions that contain two levels, one for
year and one for quarter:












With this schema definition, you can aggregate data for all time, for individual years, for individual quarters, or for
individual quarters of a specific year.
Notice that the TimeDim dimension contains a Year level, the most general level, and a Quarter level, the more
detailed level. The first level in the hierarchy typically defines the most general level, and each subsequent level
provides a greater level of detail.
If your data contained a month field with the month of the year for a transaction, you can add the Month level to the
TimeDim dimension. Since month is a more detailed measure of time than quarter, add the Month level after the
Quarter level, as the following example shows:











The advantage of creating a hierarchical schema is that you can write queries to extract top-level data aggregations
or to drill down into the data to extract more granular data. For the previous schema definition, you can write an
OLAP query to aggregate data by the most general field, such as year, or drill down to obtain more granular results
by aggregating your data by quarter in each year, by month in each quarter, or by month in each year.

Creating a default member in a schema
Most of the OLAP schemas shown so far have been defined in the following form:

ADOBE FLEX 3 333
Adobe Flex 3 Data Visualization Developer Guide










In this schema, the hierarchy sets the OLAPHierarchy.hasAll property to true to create a default member for the
hierarchy. The default member is created automatically for the hierarchy and contains an aggregation of all levels in
the hierarchy. In the previous schema, the default member contains an aggregation of the measure of the schema for
all years and all quarters.
The default member is used by OLAP queries when you do not specify any criteria to aggregate the dimension. For
example, your OLAP schema contains a ProductDim, TimeDim, and CustomerDim dimension. You then write a
query to extract data by product and customer, but omit any specification in the query for time. The OLAP query
automatically uses the default member of the dimension to aggregate the information for the TimeDim dimension.
The default value of the OLAPHierarchy.hasAll property is true. If you set it to false, the OLAP query uses the
first level in the hierarchy to aggregate the dimension. The following schema sets the hasAll property to false:









Because the hasAll property is false, an OLAP query automatically aggregates the data in the dimension by the
Year level when you omit the TimeDim dimension from the query.
By default, the OLAP cube adds a member to the dimension named (All)to represent the default member. You can
use the OLAPHierarchy.allLevelName property to specify a different name, as the following example shows:









When you execute an OLAP query, you choose whether or not to include the default member in the query results.
For more information, see “Using the default member in a query” on page 337.

Creating OLAP queries
You use an OLAP query to extract data from an OLAP cube for display by the OLAPDataGrid control. An OLAP
query defines a result set in a two-dimensional table of rows and columns so that the data can be viewed in the
OLAPDataGrid control.

ADOBE FLEX 3 334
Adobe Flex 3 Data Visualization Developer Guide

The following table describes the classes and interfaces that you use the define a query:
Class

Interface

AsyncToken

Description
The result of the OLAPQuery.execute() method.

OLAPCell

IOLAPCell

An area of the cube defined by a tuple.

OLAPMember

IOLAPMember

A member of a dimension.

OLAPQuery

IOLAPQuery

The query instances.

OLAPQueryAxis

IOLAPQueryAxis

An axis of the query.

OLAPResult

IOLAPResult

The query result.

OLAPSet
OLAPTuple

A set of members for an axis.
IOLAPTuple

A tuple containing one or more members.

Note: Many of the examples in this topic use interfaces rather than classes. One of the reasons to use interfaces is that if
you define customized versions of classes that implement these interfaces, you do not have to modify your code.

Creating a query
The process of creating a query has the following steps:
1

Prepare the cube for a query. For more information, see “Preparing a cube for a query” on page 334.

2 Define an instance of the OLAPQuery class to represent the query. For more information, see “Creating a query
axis” on page 335.
3

Define an instance of the OLAPQueryAxis class to represent the rows of the query.

Define an instance of the OLAPSet class to define the members that provide the row axis information. For more
information, see “Writing a query for a simple OLAP cube” on page 338 and “Writing a query for a complex OLAP
cube” on page 344.
4

5

Define an instance of the OLAPQueryAxis class to represent the columns of the query.

6

Define an instance of the OLAPSet class to define the members that provide the axis column information.

Optionally define an instance of the OLAPQueryAxis class to specify a slicer axis. For more information, see
“Creating a slicer axis” on page 349

7
8

Define an instance of the OLAPSet class to define the members that provide the slicer axis information.

9 Execute the query on the cube by calling OLAPCube.execute(). For more information, see “Executing a query
and returning the results to an OLAPDataGrid control” on page 336.
10 Pass the query results to the OLAPDataGrid control.

Preparing a cube for a query
Before you can run the first query on an OLAP cube, you must call the OLAPCube.refresh() method to initialize
the cube from the input data. Upon completion of cube initialization, the OLAP cube dispatches the complete event
to signal that the cube is ready for you to query.
You can use event handlers to initialize the cube and to invoke the query. The following example uses the application’s
creationComplete event to initialize the cube, and then uses the cube’s complete event to execute the query:



ADOBE FLEX 3 335
Adobe Flex 3 Data Visualization Developer Guide




...


Creating a query axis
The following example shows an OLAPDataGrid control containing the results of a query for the sales of different
products for different quarters:

To create a query, you must define a row axis, a column axis, and optionally a slicer axis, where each axis is an
instance of the IOLAPQueryAxis interface. The following table describes the different types of axes:
Axis

Description

Row

Defines the data that appears in each row of the OLAPDataGrid control. In the previous image, you define the row to show each
product. This axis is required.

Column

Defines the data displayed in the column. In the previous image, you define the columns to show each year. This axis is required.

Slicer

Optionally defines a filter to reduce the size of the query results, often to reduce the dimensionality of the results from a dimension greater than two so that you can display the results in an OLAPDataGrid control. You also use a slicer access to return data
aggregations for the nondefault measure. For more information on using a slicer axis, see “Creating a slicer axis” on page 349.

When you construct the OLAPQueryAxis instance, you use the OLAPQuery.getAxis() method to initialize the axis
to configure it as either a row, column, or slicer axis, as the following example shows:
// Create an instance of OLAPQuery to represent the query.
var query:OLAPQuery = new OLAPQuery;

ADOBE FLEX 3 336
Adobe Flex 3 Data Visualization Developer Guide

// Get the row axis from the query instance.
var rowQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.ROW_AXIS);
// Create an OLAPSet instance to configure the axis.
...
var colQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.COLUMN_AXIS);
...
Populating a query axis

You use the OLAPSet class to specify the members of the dimensions of the OLAP cube that populate a query axis.
To add a member to an OLAPSet instance, you call the OLAPSet.addElement() or OLAPSet.addElements() method.
The following table describes these methods:
OLAPSet method

Description

addElement(e:IOLAPElement):void Adds a single element to the set.

•

If you pass an IOLAPHierarchy or IOLAPAttributeHierarchy instance to the method, it adds
the default member of the hierarchy to the set.

•

If you pass an IOLAPLevel instance to the method, it adds all the members of the level to
the set.

•

If you pass an IOLAPMember instance, it adds the member to the set.

addElements(members:IList):void Adds multiple elements to the set.

For more information, see “Writing a query for a simple OLAP cube” on page 338 and “Writing a query for a complex
OLAP cube” on page 344.

Executing a query and returning the results to an OLAPDataGrid control
OLAP cubes can be complex, so you do not want your application to pause while Flex calculates the results of an
OLAP query. Therefore, when you execute a query, you also set up two callback functions that handle the results of
the query. Flex then calls these functions when the query completes. This architecture lets the query run asynchronously so that your application can continue to execute during query processing.
You execute a query by calling the OLAPCube.execute() method, where the OLAPCube.execute() method returns
an instance of the AsyncToken class. You use the AsyncToken class, along with the AsyncResponder class, to specify
the two callback functions to handle the query results when execution completes.
In this example, the function showResult() handles the query results when the query succeeds, and the function
showFault() handles any errors detected during query execution:





...



Using the default member in a query
Many of the queries shown so far have referenced only two dimensions of the OLAP cube, such as ProductDim and
TimeDim. But what happens to the other dimensions when you omit them from the query?
All dimensions have a default member, either explicit or implicit. When you execute a query that does not reference
a dimension, the query aggregates the data for that dimension using the default member. For information on
defining the default member of a schema, see “Creating a default member in a schema” on page 332.

Specifying a default cell string for the OLAPDataGrid control
When you define your query, you might create a situation where a cell of the OLAPDataGrid does not contain a
value. For example, when aggregating data by customer and product, you might have a customer that has never
purchased Illustrator. For that customer and product combination, the corresponding cell of the OLAPDataGrid
displays the String "NaN".
You can customize this String by setting the OLAPDataGrid.defaultCellString. For example, if you want to set
the String to "No value", you would create an OLAPDataGrid control as shown here:


Writing a query for a simple OLAP cube
In a simple OLAP cube, all of the dimensions of the cube define a single level. For example, you have flat data that
contains three fields:
data:Object = {
product:"ColdFusion"
quarter :"Q1"
revenue: "100.00",
}

The data fields of each record can contain the following values:

•
•

The product field can have the values: ColdFusion, Flex, Dreamweaver, and Illustrator.
The quarter field can have the values: Q1, Q2, Q3, and Q4.

The OLAP schema for this data defines two dimensions, each with a single level, as the following code shows:
















After you call OLAPCube.refresh() to initialize the cube, it has the following structure:
ProductDim
Product
(All)
ColdFusion
Flex
Dreamweaver
Illustrator
ProductHier
(All)
ColdFusion
Flex
Dreamweaver

// Dimension
// Hierarchy
// Member
// Member
// Member
// Member
// Member
// Hierarchy
// Level
// Member
// Member
// Member

ADOBE FLEX 3 339
Adobe Flex 3 Data Visualization Developer Guide

Illustrator

// Member

Product
ColdFusion
Flex
Dreamweaver
Illustrator

// Level
// Member
// Member
// Member
// Member

QuarterDim
Quarter
(All)
Q1
Q2
Q3
Q4

// Dimension
// Hierarchy
// Member
// Member
// Member
// Member
// Member

QuarterHier
(All)
Q1
Q2
Q3
Q4

// Hierarchy
// Level
// Member
// Member
// Member
// Member

Quarter
Q1
Q2
Q3
Q4

// Level
// Member
// Member
// Member
// Member

Notice in this cube:

• The ProductDim dimension contains two hierarchies: Product and ProductHier. The cube creates a hierarchy
for each level specified by the OLAPLevel class, and for each hierarchy specified by the OLAPHierarchy class. The
same is true for the QuarterDim dimension; it also contains two hierarchies.
• The order of the members, meaning the values along each dimension, is based on the order in which the
members appear in the flat data. In this example, the quarters appear in order of Q1, Q2, Q3, and Q4 because the flat
data was sorted by quarter. However, if the data was not sorted by quarter, the members along the QuarterDim could
appear in any order.
• Each dimension contains a single level; therefore the (All) level contains the same data as the first level in the
hierarchy. For example, the (All) level of the ProdcutHier hierarchy contains the same data as the Product level. For
a complex cube, the (All) level would contain additional information.
For an example of a complex cube, see “Writing a query for a complex OLAP cube” on page 344.

Defining a query for a simple cube
An OLAP query has the following basic form:
// Create an instance of OLAPQuery to represent the query.
var query:OLAPQuery = new OLAPQuery;
// Get the row axis from the query instance.
var rowQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.ROW_AXIS);
// Create an OLAPSet instance to configure the axis.
var productSet:OLAPSet = new OLAPSet;
// Use OLAPSet.addElements() or OLAPSet.addElement() to add members to the row axis.
productSet.addElements(...);
// Add the OLAPSet instance to the axis.
rowQueryAxis.addSet(productSet);

ADOBE FLEX 3 340
Adobe Flex 3 Data Visualization Developer Guide

// Get the column axis from the query instance, and configure it
// to aggregate the columns by the Quarter dimension.
var colQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.COLUMN_AXIS);
var quarterSet:OLAPSet= new OLAPSet;
// Use OLAPSet.addElements() or OLAPSet.addElement() to add members to the column axis.
productSet.addElements(...);
colQueryAxis.addSet(quarterSet);

You use the following methods and properties to extract information from an OLAP cube based on the attributes of
the dimension, and pass it to the OLAPSet.addElements() or OLAPSet.addElement() method:
Method and property

Description

OLAPCube.findDimension(name:String):IOLAPDimension

Returns a dimension of a schema as an instance
of the OLAPDimension class.

OLAPDimension.findAttribute(name:String):IOLAPAttributeHierarchy Returns an instance of the IOLAPAttributeHier-

archy interface, which is an attribute hierarchy
that includes an IList instance of all members of
the attribute.
OLAPDimension.findMember(name:String):IOLAPMember

Returns an IOLAPMember instance that represents a member with the specified name within
the dimension.

IOLAPAttributeHierarchy.children

Contains all members of the level as an IList
instance, but does not include the (All)
member.

IOLAPAttributeHierarchy.members

Contains all members of the level as an IList
instance, including the (All) member.

The following table shows the information returned for combinations of these methods and properties:
Reference to method and property

Returns

findDimension("ProductDim").findAttribute("Product").children

ColdFusion, Flex, Dreamweaver, and Illustrator

findDimension("ProductDim").findAttribute("Product").members

(All), ColdFusion, Flex, Dreamweaver, and Illustrator

findDimension("ProductDim").findMember("Flex")

Flex

findDimension("QuarterDim").findAttribute("Quarter").children

Q1, Q2, Q3, and Q4

findDimension("QuarterDim").findAttribute("Quarter").members

(All), Q1, Q2, Q3, and Q4

findDimension("QuarterDim").findMember("Q2")

Q2

ADOBE FLEX 3 341
Adobe Flex 3 Data Visualization Developer Guide

Rather than use the findAttribute() method, you can drill down through the hierarchy of the cube by calling the
following methods:
Method

Description

OLAPDimension.findHierarchy(name:String):IOLAPHierarchy Returns a hierarchy of a dimension as an instance

of OLAPHierarchy. You can specify either an OLAPHierarchy
or an OLAPLevel instance to this method.
OLAPHierarchy.findLevel(name:String):IOLAPLevel

Returns a level of a hierarchy as an instance of OLAPLevel.

OLAPLevel.findMember(name:String):IList

Returns an IList instance that contains all IOLAPMember
instances that match the String argument. You can then use
the IList.getItemAt() method to access the any
element in the IList.

The following table shows the information returned for different combinations of these methods:
Reference to method

Returns

findDimension("ProductDim").findhHierarchy("ProductHier").
findLevel("Product").children

ColdFusion, Flex, Dreamweaver, and Illustrator

findDimension("ProductDim").findHierarchy("ProductHier").
findLevel("Product").members

(All), ColdFusion, Flex, Dreamweaver, and Illustrator

IOLAPElement(cube.findDimension("ProductDim").
findHierarchy("ProductHier").findLevel("Product").
findMember("Flex").getItemAt(0))

Flex. Cast the result to an instance of IOLAPElement
because getItemAt() returns an Object.

findDimension("QuarterDim").findHierarchy("QuarterHier").
findLevel("Quarter").children

Q1, Q2, Q3, and Q4

findDimension("QuarterDim").findHierarchy("QuarterHier").
findLevel("Quarter").members

(All), Q1, Q2, Q3, and Q4

IOLAPElement(cube.findDimension("QuarterDim").
findHierarchy("QuarterHier").findLevel("Quarter").
findMember("Q2").getItemAt(0))

Q2. Cast the result to an instance of IOLAPElement
because getItemAt() returns an Object.

In the case of a simple cube, the OLAPDimension.findHierarchy(), OLAPHierarchy.findLevel(), and
OLAPLevel.findMember() methods do not provide you with additional functionality from the
OLAPDimension.findAttribute() and OLAPDimension.findMember() methods. They are more commonly
used with complex cubes that contain dimensions with multiple levels. For more information, see “Writing a query
for a complex OLAP cube” on page 344.

Add all members to an axis
The most common type of query returns a data aggregation for all members of an attribute of a schema. For example,
you define an OLAP cube using a schema that contains a ProductDim and a QuarterDim dimension, as shown in
the section “Writing a query for a simple OLAP cube” on page 338. You then want to generate a query for all products
for all quarters. The following query extracts this information:
private function getQuery(cube:IOLAPCube):IOLAPQuery {
// Create an instance of OLAPQuery to represent the query.
var query:OLAPQuery = new OLAPQuery;
// Get the row axis from the query instance.
var rowQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.ROW_AXIS);
// Create an OLAPSet instance to configure the axis.
var productSet:OLAPSet = new OLAPSet;
productSet.addElements(

ADOBE FLEX 3 342
Adobe Flex 3 Data Visualization Developer Guide

cube.findDimension("ProductDim").findAttribute("Product").children);
rowQueryAxis.addSet(productSet);
var colQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.COLUMN_AXIS);
var quarterSet:OLAPSet= new OLAPSet;
quarterSet.addElements(
cube.findDimension("QuarterDim").findAttribute("Quarter").children);
colQueryAxis.addSet(quarterSet);
return query;
}

In this example, the column axis uses the findDimension() and findAttribute() methods to drill down into the
ProductDim and QuarterDim dimensions to extract sales data. For each axis, you use the
IOLAPAttributeHierarchy.children property to populate it with the all members of the attribute, but do not
include the (All) member.
This query uses the default measure to populate the query result, where the default measure is the first measure
defined in the cube’s schema. Therefore, you do have to specify the measure as part of the query. For information on
explicitly specifying the measure in the query, see “Creating a query using a nondefault measure” on page 349.
Notice that in this example, you did not have to specify the hierarchy name, ProductHier and QuarterDim, to extract
the member from the schema. It is unnecessary to specify the hierarchy name when you only want to extract data
for a single level of a dimension.
However, you could rewrite this example to explicitly drill down through the cube by calling the methods
OLAPDimension.findHierarchy() and OLAPHierarchy.findLevel() , as the following example shows:
private function getQuery(cube:IOLAPCube):IOLAPQuery {
// Create an instance of OLAPQuery to represent the query.
var query:OLAPQuery = new OLAPQuery;
// Get the row axis from the query instance.
var rowQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.ROW_AXIS);
// Create an OLAPSet instance to configure the axis.
var productSet:OLAPSet = new OLAPSet;
productSet.addElements(cube.findDimension(
"ProductDim").findHierarchy("ProductHier").findLevel("Product").members);
rowQueryAxis.addSet(productSet);
var colQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.COLUMN_AXIS);
var quarterSet:OLAPSet= new OLAPSet;
quarterSet.addElements(
cube.findDimension("QuarterDim").findHierarchy("QuarterHier").
findLevel("Quarter").members);
colQueryAxis.addSet(quarterSet);
return query;
}

In this example, you drill down through the dimension to access the Product and Quarter levels. You typically use
this technique with complex cubes where you are interested in an explicit member of a dimension.

Add explicit members to a query
In the query shown in the previous section, you obtain sales data for all members of the Product and Quarter levels
of the schema. But, what if you only want sales data for a single product, or for a single quarter? When you drill down
into a dimension, you can specify the individual member of the dimension that you want to query.

ADOBE FLEX 3 343
Adobe Flex 3 Data Visualization Developer Guide

For example, you want to create a query to aggregate quarterly sales data only for Flex, but not for any other products.
You therefore use the OLAPDimension.findMember() method to specify the name of the member. This method
takes a String containing the name of the member, and returns an IOLAPMember instance that defines the member,
as the following example shows:
private function getQuery(cube:IOLAPCube):IOLAPQuery {
// Create an instance of OLAPQuery to represent the query.
var query:OLAPQuery = new OLAPQuery;
// Get the row axis from the query instance.
var rowQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.ROW_AXIS);
// Create an OLAPSet instance to configure the axis.
var productSet:OLAPSet = new OLAPSet;
productSet.addElement(cube.findDimension("ProductDim").findMember("Flex"));
rowQueryAxis.addSet(productSet);
var colQueryAxis:IOLAPQueryAxis =
query.getAxis(OLAPQuery.COLUMN_AXIS);
var quarterSet:OLAPSet= new OLAPSet;
quarterSet.addElements(
cube.findDimension("QuarterDim").findAttribute("Quarter").children);
colQueryAxis.addSet(quarterSet);
return query;
}

Notice that in the previous example, you use the OLAPSet.addElement() method to add the Flex member to the
OLAPSet instance, rather than the OLAPSet.addElements() method. This is because you are adding a single
member to the axis, rather than multiple members.
The only issue with using the OLAPDimension.findMember() method is that it returns the first IOLAPMember
instance in the cube that matches the String argument. If you think that you might have multiple instances of a
member, you can rewrite this example to explicitly drill down through the cube by calling the
OLAPDimension.findHierarchy(), OLAPHierarchy.findLevel(), and OLAPLevel.findMember() methods.
This situation is more common with cubes that contain complex dimensions. For more information and examples,
see “Writing a query for a complex OLAP cube” on page 344.
The OLAPLevel.findMember() method returns an IList instance that contains all IOLAPMember instances that
match the String argument. You can then use the IList.getItemAt() method to access any element in the IList, as
the following example shows:
private function getQuery(cube:IOLAPCube):IOLAPQuery {
// Create an instance of OLAPQuery to represent the query.
var query:OLAPQuery = new OLAPQuery;
// Get the row axis from the query instance.
var rowQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.ROW_AXIS);
// Create an OLAPSet instance to configure the axis.
var productSet:OLAPSet = new OLAPSet;
// Get the first IOLAPElement instance in the IList instance.
productSet.addElement(
IOLAPElement(cube.findDimension("ProductDim").findHierarchy("ProductHier").
findLevel("Product").findMember("Flex").getItemAt(0)));
rowQueryAxis.addSet(productSet);
var colQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.COLUMN_AXIS);
var quarterSet:OLAPSet= new OLAPSet;
quarterSet.addElement(IOLAPMember(cube.findDimension("TimeDim").
findHierarchy("Month").findMember("January")));
quarterSet.addElement(IOLAPMember(cube.findDimension("TimeDim").

ADOBE FLEX 3 344
Adobe Flex 3 Data Visualization Developer Guide

findHierarchy("Month").findMember("February")));
colQueryAxis.addSet(quarterSet);
return query;
}

Writing a query for a complex OLAP cube
In a complex cube, at least one dimension of the schema contains multiple levels. For example, you have flat data that
contains three fields:
data:Object = {
product:"ColdFusion"
year :"2006"
quarter :"Q1"
revenue: "100.00",
}

The data fields of each record can contain the following values:

•

The product field can have the values: ColdFusion, Flex, Dreamweaver, and Illustrator.

•
•

The year field can have the values: 2006 and 2007.
The quarter field can have the values: Q1, Q2, Q3, and Q4.

In this example, your schema defines two dimensions, with the TimeDim dimension containing levels for year and
quarter, as the following code shows:


















The cube has the following structure:
ProductDim
Product
(All)
ColdFusion
Flex

// Dimension
// Hierarchy
// Member
// Member
// Member

ADOBE FLEX 3 345
Adobe Flex 3 Data Visualization Developer Guide

Dreamweaver
Illustrator

// Member
// Member

ProductHier
(All)
ColdFusion
Flex
Dreamweaver
Illustrator

// Hierarchy
// Level
// Member
// Member
// Member
// Member

Product
ColdFusion
Flex
Dreamweaver
Illustrator

// Level
// Member
// Member
// Member
// Member

TimeDim
Year
(All)
2006
2007

// Dimension
// Hierarchy
// Member
// Member
// Member

Quarter
(All)
Q1
Q2
Q3
Q4

// Hierarchy
// Member
// Member
// Member
// Member
// Member

Time-PeriodHier
(All)
2006
Q1
Q2
Q3
Q4
2007
Q1
Q2
Q3
Q4

// Hierarchy
// Level

Year
2006
2007
Quarter
Q1 (having
Q1 (having
Q2 (having
Q2 (having
Q3 (having
Q3 (having
Q4 (having
Q4 (having

// Level
// Member
// Member

2006
2007
2006
2007
2006
2007
2006
2007

as
as
as
as
as
as
as
as

a
a
a
a
a
a
a
a

// Level
parent) // Member
parent) // Member
parent) // Member
parent) // Member
parent) // Member
parent) // Member
parent) // Member
parent) // Member

Notice in this cube:

• The information for the quarter is added as a hierarchy under the TimeDim dimension, and as a level under the
Time-PeriodHier hierarchy.

ADOBE FLEX 3 346
Adobe Flex 3 Data Visualization Developer Guide

• The Quarter level under the Time-PeriodHier hierarchy contains multiple entries for each quarter. In this
example, there is an entry for each quarter for each year.
• The order of the members, meaning the values along each dimension, is based on the order in which the member
values appear in the flat data.
The reason for the multiple entries for a single quarter in the Quarter level under the Time-PeriodHier hierarchy is
that a cube has to be able to return results for each quarter for each year. For example, this structure lets you write a
query to return data aggregations for all quarters for all years, for all quarters for 2006, or for all quarters for 2007.
Since the ProductDim contains a single level, you can write queries for it in the same way as you did for a simple
cube. See “Writing a query for a simple OLAP cube” on page 338 for more information.
The following table shows the information returned for different ways to access the TimeDim by calling the
findAttribute() method:
Reference to method and property

Returns

findDimension("TimeDim").findAttribute("Year").children

2006, 2007

findDimension("TimeDim").findAttribute("Year").members

(All), 2006, 2007

findDimension("TimeDim").findMember("2006")

2006

findDimension("TimeDim").findAttribute("Quarter").children

Q1, Q2, Q3, and Q4

findDimension("TimeDim").findAttribute("Quarter").members

(All), Q1, Q2, Q3, and Q4

findDimension("TimeDim").findMember("Q2")

Q2 having 2006 as a parent. This is the first instance
of Q2 in the cube.

The following table shows the information returned for different ways to use the
OLAPDimension.findHierarchy(), OLAPHierarchy.findLevel(), and OLAPLevel.findMember() methods:
Reference to method and property

Returns

findDimension("TimeDim").findHierarchy("Time-PeriodHier").
findLevel("Year").children

2006, 2007

findDimension("TimeDim").findHierarchy("Time-PeriodHier").
findLevel("Year").members

(All), 2006, 2007

IOLAPElement(cube.findDimension("TimeDim").
findHierarchy("Time-PeriodHier").findLevel("Year").
findMember("2006").getItemAt(0))

2006

findDimension("QuarterDim").findHierarchy("QuarterHier").
findLevel("Quarter").children

Q1, Q2, Q3, and Q4

findDimension("QuarterDim").findHierarchy("QuarterHier").
findLevel("Quarter").members

(All), Q1, Q2, Q3, and Q4

findDimension("TimeDim").findHierarchy("TimePeriodHier").findLevel("Quarter").findMember("Q1")

All Q1 members

IOLAPElement(cube.findDimension("QuarterDim").
findHierarchy("QuarterHier").findLevel("Quarter").
findMember("Q2").getItemAt(0))

Q2 having 2006 as a parent. Cast the result to an
instance of IOLAPElement because getItemAt()
returns an Object.

IOLAPElement(cube.findDimension("QuarterDim").
findHierarchy("QuarterHier").findLevel("Quarter").
findMember("Q2").getItemAt(1))

Q2 having 2007 as a parent. Cast the result to an
instance of IOLAPElement because getItemAt()
returns an Object.

You could add a Month level to the TimeDim, as the following definition of TimeDim shows:


ADOBE FLEX 3 347
Adobe Flex 3 Data Visualization Developer Guide











For this example, the structure of the TimeDim dimension is:
TimeDim
Year
(All)
2006
2007

// Dimension
// Hierarchy
// Member
// Member
// Member

Quarter
(All)
Q1
Q2
Q3
Q4

// Hierarchy
// Member
// Member
// Member
// Member
// Member

Month
(All)
Jan
Feb
...

// Hierarchy
// Member
// Member
// Member
// Adiitional members for each month

Time-PeriodHier
(All)
2006
Q1

// Hierarchy
// Level

Jan
Feb
Mar
...
2007
Q1
Jan
Feb
Mar
...
Year
2006
2007
Quarter
Q1 (having
Q1 (having
Q2 (having
Q2 (having
Q3 (having
Q3 (having
Q4 (having
Q4 (having

// Level
// Member
// Member

2006
2007
2006
2007
2006
2007
2006
2007

as
as
as
as
as
as
as
as

a
a
a
a
a
a
a
a

// Level
parent) // Member
parent) // Member
parent) // Member
parent) // Member
parent) // Member
parent) // Member
parent) // Member
parent) // Member

Month
// Level
Jan (having Q1 having 2006 as a parent) // Member

ADOBE FLEX 3 348
Adobe Flex 3 Data Visualization Developer Guide

Feb (having Q1 having 2006 as a parent) // Member
Jan (having Q1 having 2007 as a parent) // Member
Feb (having Q1 having 2007 as a parent) // Member
...
// Additional members for each possible
// combination of month, quarter,
// and year

Notice in this cube:

• The Month level contains a value for each month, and for each quarter for each year. Therefore, there should be
two entries for January; one for Q1 of 2006 and one for Q1 of 2007.

Creating a multidimensional axis in an OLAPDataGrid
control
The OLAPDataGrid control displays information along two axes: row and column. However, limiting yourself to
writing queries that return only two dimensions can restrict your ability to examine your data.
To allow you greater flexibility in displaying query results, the OLAPDataGrid control supports hierarchical display
along its axis. The following image shows quarterly sales information, grouped by year, displayed in the columns of
the OLAPDataGrid control.

To create a multidimensional axis in the OLAPDataGrid control, you create two or more OLAPSet instances for the
axis, and then combine the OLAPSet instances by doing a crossjoin or a union, as the following table describes:
Combination type OLAPSet method Description
Crossjoin

crossJoin()

Creates a crossjoin of two OLAPSet instances, where a crossjoin contains all possible combinations of the two sets. A crossjoin is also called a cross product of the members of the two
different sets.

Union

union()

Creates a union of two OLAPSet instances.

In the following example, you create an OLAPSet instance for the year, and then crossjoin that set with the OLAPSet
instance for quarter to create the OLAPDataGrid control shown in the previous image:
private function getQuery(cube:IOLAPCube):IOLAPQuery {
var query:OLAPQuery = new OLAPQuery;
var rowQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.ROW_AXIS);
var productSet:OLAPSet = new OLAPSet;
productSet.addElements(
cube.findDimension("ProductDim").findAttribute("Product").children);
rowQueryAxis.addSet(productSet);

ADOBE FLEX 3 349
Adobe Flex 3 Data Visualization Developer Guide

var colQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.COLUMN_AXIS);
var yearSet:OLAPSet= new OLAPSet;
yearSet.addElements(
cube.findDimension("TimeDim").findAttribute("Year").children);
var quarterSet:OLAPSet= new OLAPSet;
quarterSet.addElements(
cube.findDimension("TimeDim").findAttribute("Quarter").children);
colQueryAxis.addSet(yearSet.crossJoin(quarterSet));
return query;
}

Creating a slicer axis
An OLAP query can have three axes: row, column, and slicer. A slicer axis lets you reduce the size of the query results,
often to reduce the dimensionality of the results from a dimension greater than two so that you can display the
results. Another common use of a slicer axis is to aggregate data on a measure other than the default measure.

Creating a query using a nondefault measure
The following schema defines two measures for the points in the cube: Revenue and Cost. The first measure defined
in the schema is the default measure, and it is the data that is aggregated by a query if you do not explicitly specify
the measure.

















To aggregate by the Cost measure, you create a slicer axis to explicitly specify the measure for the query, as the
following example shows:
private function getQuery(cube:IOLAPCube):IOLAPQuery {
// Create an instance of OLAPQuery to represent the query.
var query:OLAPQuery = new OLAPQuery;
// Get the row axis from the query instance.
var rowQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.ROW_AXIS);
// Create an OLAPSet instance to configure the axis.
var productSet:OLAPSet = new OLAPSet;

ADOBE FLEX 3 350
Adobe Flex 3 Data Visualization Developer Guide

productSet.addElements(
cube.findDimension("ProductDim").findAttribute("Product").children);
rowQueryAxis.addSet(productSet);
var colQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.COLUMN_AXIS);
var quarterSet:OLAPSet= new OLAPSet;
quarterSet.addElements(
cube.findDimension("TimeDim").findAttribute("Month").children);
colQueryAxis.addSet(quarterSet);
// Create the slicer axis.
var slicerQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.SLICER_AXIS);
// Create an OLAPSet instance to configure the axis.
var costSet:OLAPSet= new OLAPSet;
// Use OLAPDimension.findMember() to add the Cost measure.
costSet.addElement(cube.findDimension("Measures").findMember("Cost"));
slicerQueryAxis.addSet(costSet);
return query;
}

In this example, you use the keyword Measures to identify the measure dimension, and then use the
OLAPDimension.findMember() method to access the Cost measure.

Using a slicer axis to reduce the dimensionality of the query result
The OLAPDataGrid control displays information in two dimensions along its row and column axis. However, to
display product sales by region and by month, you require a three-dimensional display: one dimension each for
product, region, and month.
For example, your data has the following format:
data:Object = {
customer:"IBM",
country:"US",
state:"MA",
region:"NewEngland",
product:"ColdFusion",
year:2005,
quarter:"Q1"
month:"January",
revenue: 12,575.00,
cost: 500
}

The examples use the following OLAP schema to represent this data in an OLAP cube:










ADOBE FLEX 3 351
Adobe Flex 3 Data Visualization Developer Guide





























You can use a slicer axis to filter the results of a query for display in two dimensions. In this example, you set the row
axis to the region and the column axis to the month. You then define a slicer axis to specify the product as Flex so
that you end up with a two-dimensional table of sales by region and month for Flex.
private function getQuery(cube:IOLAPCube):IOLAPQuery {
// Create an instance of OLAPQuery to represent the query.
var query:OLAPQuery = new OLAPQuery;
// Get the row axis from the query instance.
var rowQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.ROW_AXIS);
// Create an OLAPSet instance to configure the axis.
var productSet:OLAPSet = new OLAPSet;
productSet.addElements(
cube.findDimension("GeographyDim").findAttribute("Region").children);
rowQueryAxis.addSet(productSet);
var colQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.COLUMN_AXIS);
var quarterSet:OLAPSet= new OLAPSet;
quarterSet.addElements(
cube.findDimension("TimeDim").findAttribute("Month").children);
colQueryAxis.addSet(quarterSet);
// Create the slicer axis.
var slicerQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.SLICER_AXIS);

ADOBE FLEX 3 352
Adobe Flex 3 Data Visualization Developer Guide

// Create an OLAPSet instance to configure the axis.
var flexSet:OLAPSet= new OLAPSet;
flexSet.addElement(
IOLAPElement(cube.findDimension("ProductDim").findHierarchy("ProductHier").
findLevel("Product").findMember("Flex").getItemAt(0)));
slicerQueryAxis.addSet(flexSet);
return query;
}

You can specify more than one member for the slicer access. For example, if your cube contains information on
different product such as Flex and Adobe® Flash®, you could create the two slicer axes as the following example
shows:
// Create the slicer axis.
var slicerQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.SLICER_AXIS);
// Create an OLAPSet instance to configure the axis.
var sliceSet:OLAPSet= new OLAPSet;
sliceSet.addElement(IOLAPElement(cube.findDimension("ProductDim").
findHierarchy("ProductHier").findLevel("Product").findMember("Flex").getItemAt(0)));
sliceSet.addElement(IOLAPElement(cube.findDimension("ProductDim").
findHierarchy("ProductHier").findLevel("Product").findMember("Flash").getItemAt(0)));
slicerQueryAxis.addSet(sliceSet);

In this example, your query result would show sales of Flex and Flash for each region and month.

Configuring the display of an OLAPDataGrid
To control the display of an OLAPDataGrid control, you can apply styles to the cells of the control by using a callback
function, or use item renderers to control the display.

Styling cells of the OLAPDataGrid control by using a callback function
To control the styling of a cell by using a callback function, use the OLAPDataGrid.styleFunction property to
specify the callback function. The callback function must have the following signature:
function_name(row:IOLAPAxisPosition, column:IOLAPAxisPosition, value:Number):Object

where row is the IOLAPAxisPosition associated with this cell on the row axis, column is the IOLAPAxisPosition
associated with this cell on the column axis, and value is the cell value.
The function returns an Object that contains one or more styleName:value pairs to specify a style setting, or null. The
styleName field contains the name of a style property, such as color, and the value field contains the value for the
style property, such as 0x00FF00. For example, you could return two styles using the following syntax:
{color:0xFF0000, fontWeight:"bold"}

The OLAPDataGrid control invokes the callback function when it updates its display, such as when the control is
first drawn on application start up, or when you call the invalidateList()method.
The following example modifies the example shown in the section “Example using the OLAPDataGrid control” on
page 327 to add a callback function to display all cells with a value greater than 1000 in green:

= 1000)
return {color:0x00FF00};
// Return null if value is less than 1000.
return null;
}
]]>

...


Using an item renderer with the OLAPDataGrid control
You customize the appearance and behavior of cells in an OLAPDataGrid control by creating custom item renderers.
For an introduction to item renderers and item editors, see “Using Item Renderers and Item Editors” on page 779 in
Adobe Flex 3 Developer Guide.
To use an item renderer with the OLAPDataGrid control, you assign the item renderer to the OLAPDataGrid control
itself, not to a specific column, by using the OLAPDataGrid.itemRendererProviders property. The
itemRendererProviders property contains an Array of OLAPDataGridItemRendererProvider instances, where
each OLAPDataGridItemRendererProvider instance defines the characteristics for a single item renderer.
You can use the OLAPDataGridRendererProvider.renderer property to assign an item renderer to the OLAPDataGrid control, much in the way that you can by using the AdvancedDataGrid.rendererProviders property, or
can use the OLAPDataGridRendererProvider.formatter property to assign a formatter class. The following
example modifies the example shown in the section “Example using the OLAPDataGrid control” on page 327 to add
an item renderer that applies the CurrencyFormatter formatter to each cell in the control:
...

...






ADOBE FLEX 3 354
Adobe Flex 3 Data Visualization Developer Guide

To assign the item renderer, use the uniqueName and type properties of the OLAPDataGridItemRendererProvider
class. The uniqueName property specifies the elements of the query, and therefore the corresponding cells of the
OLAPDataGrid control, that you modify by using the item renderer. The type properly specifies the element type,
such as dimension, hierarchy, or level of the element specified by the uniqueName property.
The function that defines the query for this example is shown below:
// Create the OLAP query.
private function getQuery(cube:IOLAPCube):IOLAPQuery {
// Create an instance of OLAPQuery to represent the query.
var query:OLAPQuery = new OLAPQuery;
// Get the row axis from the query instance.
var rowQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.ROW_AXIS);
// Create an OLAPSet instance to configure the axis.
var productSet:OLAPSet = new OLAPSet;
// Add the Product to the row to aggregate data
// by the Product dimension.
productSet.addElements(
cube.findDimension("ProductDim").findAttribute("Product").children);
// Add the OLAPSet instance to the axis.
rowQueryAxis.addSet(productSet);
// Get the column axis from the query instance, and configure it
// to aggregate the columns by the Quarter dimension.
var colQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.COLUMN_AXIS);
var quarterSet:OLAPSet= new OLAPSet;
quarterSet.addElements(
cube.findDimension("QuarterDim").findAttribute("Quarter").children);
colQueryAxis.addSet(quarterSet);
return query;
}

Notice that the axis for the QuarterDim creates a query for the Quarter hierarchy of the QuarterDim dimension.
Therefore, you set the uniqueName property to [QuarterDim].[Quarter], and set the type property to
OLAPDataGrid.OLAP_HIERARCHY. For more information on the structure of the OLAP code for this example, see
“Writing a query for a simple OLAP cube” on page 338.
You can modify this example to drill down through the cube by specifying the query as shown below for the
QuarterDim:
quarterSet.addElements(
cube.findDimension("QuarterDim").findHierarchy("QuarterHier").
findLevel("Quarter").members);

You therefore modify the uniqueName and type properties as shown below:






Notice in this example that the query for the QuarterDim specifies the dimension, hierarchy, and level of the OLAP
cube. Therefore, you modify the uniqueName property to match this structure, and set the type property to
OLAPDataGrid.OLAP_LEVEL .

ADOBE FLEX 3 355
Adobe Flex 3 Data Visualization Developer Guide

Resolving item renderer conflicts
Each cell in an OLAPDataGrid control is a result of an intersection between the members along a row and the
members along a column of the control. However, when you assign an item renderer to an OLAPDataGrid control,
you only specify the uniqueName and type properties for one of the dimensions, either row or column. Therefore,
you can create a situation where two different item renderers are assigned to the same cell of the control.
In case of a conflict between two or more item renderers, the OLAPDataGrid control applies the item renderer based
on the following priorities:
1

type = OLAPDataGrid.OLAP_MEMBER

2

type = OLAPDataGrid.OLAP_LEVEL

3

type = OLAPDataGrid.OLAP_HIERARCHY

4

type = OLAPDataGrid.OLAP_DIMENSION

Therefore, if an item renderer with a type value of OLAPDataGrid.OLAP_LEVEL and an item renderer with a type
value of OLAPDataGrid.OLAP_HIERARCHY are applied to the same cell, the OLAPDataGrid control applies the item
renderer with a type value of OLAPDataGrid.OLAP_LEVEL.
If two item renderers have the same value for the type property, the OLAPDataGrid control determines which
renderer more closely matches the item, and uses it.

Using an item renderer to apply styles to an OLAPDataGrid control
You can use an item renderer to apply styles to specific cells in the OLAPDataGrid control, as the following example
shows:

.cellStyle
{
color:#ff0000;
fontWeight:"bold"
}

...






In this example, you create a style definition, then apply it to the cells of the OLAPDataGrid control so that it applies
to the same cells as the CurrencyFormatter formatter.

356

Chapter 8: Creating Applications for
Testing
You can create applications and components that can be tested with automated testing tools such as Mercury
QuickTest Professional™ (QTP). The information in this topic is intended for Adobe® Flex™ developers who write
applications that are tested by Quality Control (QC) professionals who use these testing tools. For information on
installing and running the Flex plug-in with QTP, QC professionals should see Testing Adobe Flex Applications with
Mercury QuickTest Professional.
Full support for the Flex automation features is included in Adobe® Flex® Builder™ Professional. Adobe Flex Builder
Standard allows only limited use of this feature.
Topics

About automating applications with Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Tasks and techniques for testable applications overview. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
Compiling applications for testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
Creating testable applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
Understanding the automation framework. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
Instrumenting events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
Instrumenting custom components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
Instrumenting composite components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373
Example: Instrumenting the RandomWalk custom component for QTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375

About automating applications with Flex
The Flex automation feature provides developers with the ability to create Flex applications that use the automation
APIs. You can use these APIs to create automation agents or to ensure that your applications are ready for testing. In
addition, the Flex automation feature includes support for the QTP automation tool.
The Flex automation feature includes the following:

• Automation libraries — The automation.swc, automation_dmv.swc, automation_agent.swc libraries are the
implementations of the delegates for the Flex framework components. The automation_agent.swc file and its
associated resource bundle are the generic agent mechanism. An agent such as QTP builds on top of these libraries.
The automation_dmv.swc library provides the delegates for the Flex charting and AdvancedDataGrid classes.
• QTP files — The QTP files let QTP and Flex applications communicate directly. You can only use these files if
you also have QTP. These files include the QTP plug-in, a QTP demonstration video, a QTP-specific environment
XML file, and the QTP-specific library, qtp.swc. For more information, see Testing Adobe Flex Applications with
Mercury QuickTest Professional.
• Samples — Sample applications include the CustomAgent, AutoQuick, RandomWalk, and FlexStore applications. The CustomAgent sample shows a simple agent that records metrics information for Flex applications. The
AutoQuick example includes a component that lets you record and play back interactions with a Flex application.
Testing-enabled versions of the FlexStore and RandomWalk applications are also available.

ADOBE FLEX 3 357
Adobe Flex 3 Data Visualization Developer Guide

The following table shows the locations of the automation sample applications:
Automation-enabled application

Location

CustomAgent

http://www.adobe.com/go/flex_automation_agent_apps

AutoQuick

http://www.adobe.com/go/flex_automation_agent_apps

RandomWalk

http://www.adobe.com/go/flex_automation_randomwalk_apps

FlexStore

http://www.adobe.com/go/flex_flexstore_automation

When working with the automation APIs, you should understand the following terms:

• automation agent (or, simply, agent) — An agent facilitates communication between a Flex application and an
automation tool. The Flex Automation Package includes a plugin that acts as an agent between your Flex applications
and the QTP testing tool.
• automation tool — Automation tools are applications that use the Flex application data that is derived through
the agent. These tools include QTP, Omniture, and Segue. In some cases.
The following illustration shows the relationship between a Flex application, an agent, and an automation tool.
Automation
Tool

Agent

Flex
Application

Tasks and techniques for testable applications
overview
Flex developers should review the information about tasks and techniques for creating testable applications, and
then update their Flex applications accordingly. QC testing professionals who use QTP should use the documentation provided in the separate book, Testing Adobe Flex Applications with Mercury QuickTest Professional. That
document is available for download with the Flex plug-in for QTP.
Use the following general steps to create a testable application:
Review the guidelines for creating testable applications. For more information, see “Creating testable applications” on page 360.
1
2

Prepare the application to use automation at run time or build your own testable application.

• To use automation at run time, you use a wrapper SWF file that is compiled with the automation libraries.
This wrapper SWF file uses the SWFLoader to load your application SWF file that you plan to test only at run
time. The HTML template and the MXML source code for the wrapper SWF file are included for you in the
flex_builder_install_dir/sdks/3.0.0/templates/automation-runtimeloading-files directory. For more information, see “Use run-time loading” on page 359.

ADOBE FLEX 3 358
Adobe Flex 3 Data Visualization Developer Guide

• To build a testable application, you include automation libraries at compile time. Compile the application’s
SWF file with the automation.swc and automation_agent.swc files specified in the compiler’s includelibraries option. If your application uses charts or the AdvancedDataGrid classes, you must also add the
automation_dmv.swc file. If you are using the QTP plug-in, add the qtp.swc file. For information on the compilation process, see “Compiling applications for testing” on page 358.
If you build your own testable application, you must also create an HTML wrapper with proper object naming.
If you are using Flex Builder, you can generate a wrapper automatically. If you are using the SDK, you can use
the wrapper templates in the flex_sdk/templates directory to create a wrapper for your application. When using
a wrapper, the value of the id attributes can not contain any periods or hyphens.
Prepare customized components for testing. If you have custom components that extend UIComponent, make
them testable. For more information, see “Instrumenting custom components” on page 367.

3

Deploy the application’s assets to a web server. Assets can include the SWF file; HTML wrapper and related files;
external assets such as theme files, graphics, and video files; module SWF files; resource modules; CSS SWF files;
and run-time shared libraries (RSLs). For information about what files to deploy with your application, see
“Deployment checklist” on page 304 in Building and Deploying Adobe Flex 3 Applications.

4

Compiling applications for testing
If you do not use run-time testing, you must compile applications that you plan to test with the testing libraries. The
functional testing classes are embedded in the application at compile time, and the application typically has no
external dependencies for automated testing at run time.
For information about run-time testing, see “Use run-time loading” on page 359.
When you embed functional testing classes in your application SWF file at compile time, you increase the size of the
SWF file. If the size of the SWF file is not important, you can use the same SWF file for functional testing and
deployment. If the size of the SWF file is important, you typically generate two SWF files: one with functional testing
classes embedded and one without.
To compile the Flex application for testing, you must reference the automation.swc and automation_agent.swc files
in your include-libraries compiler option. If your application uses charts or the AdvancedDataGrid classes, you
must also add the automation_dmv.swc file. You might also be required to add automation tool-specific SWC files;
for example, for QTP, you must also add the qtp.swc file to your application’s library path. If you are using the
AutoQuick example, you must add the AutoQuick.swc file.
By default, Flex Builder includes the automation SWC files in its library path, but you must add these libraries by
using the include-libraries compiler option.
When you create the final release version of your Flex application, you recompile the application without the references to these SWC files. For more information about using the automation SWC files, see the Flex Automation
Release Notes.
If you do not deploy your application to a server, but instead request it by using the file protocol or run it from within
Adobe Flex Builder, you must put the SWF file into the local-trusted sandbox. This requires configuration information that is separate from the SWF file and the wrapper. For more information that is specific to QTP, see Testing
Adobe Flex Applications with Mercury QuickTest Professional.
To include the SWC files, you can add them to the compiler’s configuration file or as a command-line option. For
the SDK, the configuration file is located at sdk_install_dir/frameworks/flex-config.xml. To add the automation.swc
and automation_agent.swc libraries, add the following lines to the configuration file:

...

ADOBE FLEX 3 359
Adobe Flex 3 Data Visualization Developer Guide

/libs/automation.swc
/libs/automation_agent.swc


You must uncomment the include-libraries code block. By default it is commented out in the configuration file.
You can also specify the location of the SWC files when you use the command-line compiler with the includelibraries compiler option. The following example adds automation.swc and automation_agent.swc files to the
application:
mxmlc -include-libraries+=../frameworks/libs/automation.swc;
../frameworks/libs/automation_agent.swc MyApp.mxml

Explicitly setting the include-libraries option on the command line overwrites, rather than appends, any
existing libraries that you include in the configuration file. As a result, if you add the automation.swc and
automation_agent.swc files by using the include-libraries option on the command line, ensure that you use the
+= operator. This appends rather than overwrites the existing libraries that are included.
To add automated testing support to a Flex Builder project, you also add the SWC files to the include-libraries
compiler option.
Add SWC files to Flex Builder projects
1

In Flex Builder, select your Flex project in the Navigator.

2

Select Project > Properties. The Properties dialog box appears.

3

Select Flex Compiler in the tree to the left. The Flex Compiler properties panel appears.

4

In the “Additional compiler arguments” field, enter the following command:
-include-libraries "sdks\3.0.0\frameworks\libs\automation.swc"
"sdks\3.0.0\frameworks\libs\automation_agent.swc"

In Flex Builder, the entries in the include-libraries compiler option are relative to the Flex Builder installation directory; the default location of this directory on Windows is C:\Program Files\Adobe\Flex Builder 3.
If your application uses charts or the AdvancedDataGrid classes, you must also add the automation_dmv.swc
file.
5

Click OK to save your changes.

Use run-time loading
You use the run-time testing files rather than building your applications with testing libraries. This lets you test SWF
files that are compiled without automated testing support. To do this, you use a SWF file that does include the
automated testing libraries. In that SWF file, the SWFLoader class loads your application’s SWF file which does not
include the testing libraries. The result is that you can test the target SWF file in a testing tool such as QTP, even
though the application SWF file was not compiled with automated testing support.
Flex Builder includes a wrapper SWF file and an HTML template that supports run-time loading. The source MXML
file for the wrapper SWF file is also included. The following files are located in the
flex_builder_install_dir/sdks/3.0.0/templates/automation-runtimeloading-files directory:

• RunTimeLoading.html — The HTML template that loads the run-time loader SWF file. This template includes
code that converts the automationswfurl query string parameter to a flashVars variable that it passes to the
application. You use this query string parameter to specify the name of the application you want to test.
• runtimeloading.mxml — The source code for the runtimeloading.swf file that you compile. The SWF file acts as
a wrapper for your application. This SWF file includes the testing libraries so that you do not have to compile them
into your application SWF file.

ADOBE FLEX 3 360
Adobe Flex 3 Data Visualization Developer Guide

Compile the runtimeloading.swf file. You can use the batch file in the
flex_builder_install_dir/sdks/3.0.0/templates/automation-runtimeloading-files directory. Execute this batch file
from the sdks/3.0.0/frameworks directory. This batch file ensures that your runtimeloading.swf file includes the
automation.swc, automation_agent.swc, automation_dmv.swc, automation_flashflexkit.swc, and qtp.swc libraries.

1

Deploy the runtimeloading.swf, RunTimeLoading.html, and your application’s SWF file to a web server. Request
the RunTimeLoading.html file and pass the name of your SWF file as the value to the automationswfurl query
string parameter. For example:

2

http://localhost/RunTimeLoading.html?automationswfurl=MyApp.swf

If you want to recompile the runtimeloading.swf file without the batch file, be sure to include automated testing
support by adding the appropriate automation SWC files with the include-libraries compiler option.
The batch file for compiling the runtimeloading.swf file is Windows only. To compile the SWF file on Mac OS or
Linux, you must write your own batch file.

Testing applications that load external libraries
Applications that load other SWF file libraries require a special setting for automated testing to function properly. A
library that is loaded at run time (including run-time shared libraries (RSLs)) must be loaded into the ApplicationDomain of the loading application. If the SWF file used in the application is loaded in a different application domain,
automated testing record and playback will not function properly.
The following example shows a library that is loaded into the same ApplicationDomain:
import
import
import
import

flash.display.*;
flash.net.URLRequest;
flash.system.ApplicationDomain;
flash.system.LoaderContext;

var ldr:Loader = new Loader();
var urlReq:URLRequest = new URLRequest("RuntimeClasses.swf");
var context:LoaderContext = new LoaderContext();
context.applicationDomain = ApplicationDomain.currentDomain;
loader.load(request, context);

Creating testable applications
As a Flex developer, there are some techniques that you can employ to make Flex applications as “test friendly” as
possible. One of the most important tasks that you can perform is to make sure that objects are identifiable in the
testing tool’s scripts. This means that you should set the value of the id property for all controls that are tested, and
ensure that you use a meaningful string for that id property. If you can use unique IDs for each control, the testing
scripts are more readable.

Providing meaningful identification of objects
When working with testing tools such as QTP, a QC professional only sees the visual representation of objects in your
application. A QC professional generally does not have access to the underlying code. When a QC professional
records a script, it’s very helpful to see IDs that help the tester identify the object clearly. You should take some time
to understand how testing tools interpret Flex applications and determine what names to use for the test objects in
the test scripts.

ADOBE FLEX 3 361
Adobe Flex 3 Data Visualization Developer Guide

In most cases, testing tools use a visual cue, such as the label of a Button control, to identify the control in the script.
Sometimes, however, testing tools use the Flex id property of an MXML tag to identify an object in the test script; if
there is no value for the id property, testing tools use other properties, such as the childIndex property.
You should give all testable MXML components an ID to ensure that the test script has a unique identifier to use
when referring to that Flex control. You should also try to make these identifiers as human-readable as possible to
make it easier for a QC professional to identify that object in the testing script. For example, set the id property of a
Panel container inside a TabNavigator to submit_panel rather than panel1 or p1.
In some cases, agents do not use the id property, but it is a good practice to include it to avoid naming collisions or
confusion. For more information about how QTP identifies Flex objects, see Testing Adobe Flex Applications with
Mercury QuickTest Professional.
You should set the value of the automationName property for all objects that are part of the application’s test. The
value of this property appears in the testing scripts. Providing a meaningful name makes it easier for QC professionals to identify that object. For more information about using the automationName property, see “Setting the
automationName property” on page 371.

Avoiding duplication of objects
Automation agents rely on the fact that some properties of object instances should not be changed during run time.
If you change the Flex component property that is used by the agent as the object name at run time unexpected
results can occur.
For example, if you create a Button control without an automationName property, and you do not initially set the
value of its label property, and then later set the value of the label property, the agent might get confused. This is
because agents often use the value of the label property of Button controls to identify an object in its object repository if the automationName property is not set. If you later set the value of the label property, or change the value
of an existing label while the QC professional is recording a test, an automation tool such as QTP will create a new
object in its repository instead of using the exising reference.
As a result, you should try to understand what properties are used to identify objects in the agent, and try to avoid
changing those properties at run time. You should set unique, human-readable id or automationName properties
for all objects that are included in the recorded script.

Coding containers
Containers are different from other kinds of controls because they are used both to record user interactions (such as
when a user moves to the next pane in an Accordion container) and to provide unique locations for controls in the
testing scripts.
Adding and removing containers from the automation hierarchy

In general, the automated testing feature reduces the amount of detail about nested containers in its scripts. It
removes containers that have no impact on the results of the test or on the identification of the controls from the
script. This applies to containers that are used exclusively for layout, such as the HBox, VBox and Canvas containers,
except when they are being used in multiple-view navigator containers such as the ViewStack, TabNavigator or
Accordion containers. In these cases, they are added to the automation hierarchy to provide navigation.
Many composite components use containers, such as Canvas or VBox, to organize their children. These containers
do not have any visible impact on the application. So, you usually exclude these containers from being tested because
there is no user interaction and no visual need for their operations to be recordable. By excluding a container from
being tested, it does not clutter the test scripts and make them harder to read.

ADOBE FLEX 3 362
Adobe Flex 3 Data Visualization Developer Guide

To exclude a container from being recorded (but not exclude its children), set the container’s
showInAutomationHierarchy property to false. This property is defined by the UIComponent class, so all
containers that subclass UIComponent have this property. Children of containers that are not visible in the hierarchy
appear as children of the next highest visible parent.
The default value of the showInAutomationHierarchy property depends on the type of container. For containers
such as Panel, Accordion, Application, DividedBox, and Form, the default value is true; for other containers, such
as Canvas, HBox, VBox, and FormItem, the default value is false.
The following example forces the VBox containers to be included in the test script’s hierarchy:


















Working with multiview containers

You should avoid using the same label on multiple tabs in multiview containers, such as TabNavigator and Accordion
containers. Although it is possible to use the same labels, this is generally not an acceptable UI design practice and
can cause problems with control identification in your testing environment. QTP, for example, uses the label
properties to identify those views to testers. When two labels are the same, QTP uses different strategies to uniquely
identify the tabs, which can result in a confusing name list.
Also, dynamically adding children to multiview containers can cause delays that might confuse the testing tool. You
should try to avoid this.

Understanding the automation framework
The automation interfaces and the flow of the automation framework change as you initialize, record, and play back
an automatable event.

ADOBE FLEX 3 363
Adobe Flex 3 Data Visualization Developer Guide

About the automation interfaces
The Flex class hierarchy includes the following interfaces in the mx.automation.* package that enable automation:
Interface

Description

IAutomationClass

Defines the interface for a component class descriptor.

IAutomationEnvironment

Provides information about the objects and properties of automatable components needed for
communicating with agents.

IAutomationEventDescriptor

Defines the interface for an event descriptor.

IAutomationManager

Defines the interface expected from an AutomationManager by the automation module.

IAutomationMethodDescriptor

Defines the interface for a method descriptor.

IAutomationObject

Defines the interface for a delegate object implementing automation for a component.

IAutomationObjectHelper

Provides helper methods for the IAutomationObject interface.

IAutomationPropertyDescriptor

Describes a property of a test object as well as properties of an event object.

About the IAutomationObjectHelper

The IAutomationObjectHelper interface helps the components accomplish the following tasks:

• Replay mouse and keyboard events; the helper generates proper sequence of player level mouse and key events.
• Generate AutomationIDPart for a child: AutomationIDPart would be requested by the Automation for representing a component instance to agents.
• Find a child matching a AutomationIDPart: Automation would request the component to locate a child
matching the AutomationIDPart supplied by an agent to it.
• Avoid synchronization issues: Agents invoke methods on Automation requesting operations on components in
a sequence. Components may not be ready all the time to perform operations.
For example, an agent can invoke comboBox.Open, comboBox.select "Item1" operations in a sequence. Because it
takes time for the drop-down list to open and initialize, it is not possible to run the select operation immediately. You
can place a wait request during the open operation execution. The wait request should provide a function for
automation, which can be invoked to check the ComboBox control’s readiness before invoking the next operation.

Automated testing workflow with the QTP automation tool
Before you automate custom components, you might find it helpful to see the order of events during which Flex’s
automation framework initializes, records, and plays back events with QTP. You should keep in mind that the QTP
adapter class’ implementation is only one way to use the automation API for automated testing.
Automated testing initialization

The user launches the Flex application. Automation initialization code associates component delegate classes
with component classes. Component delegate classes implement the IAutomationObject interface.

1
2

AutomationManager is a mixin. Its instance is created in the mixin init() method.

The SystemManager initializes the application. Component instances and their corresponding delegate
instances are created. Delegate instances add event listeners for events of interest.

3

4 QTPAgent class is a mixin. In its init() method, it registers itself for the FlexEvent.APPLICATION_COMPLETE
event which is dispatched from the SystemManager. On receiving the event, it creates a QTPAdapter object.

QTPAdapter sets up the ExternalInterface function map. QTPAdapter loads the QTP Plugin DLLs by creating
the ActiveX object to communicate with QTP.

5

ADOBE FLEX 3 364
Adobe Flex 3 Data Visualization Developer Guide

The QTPAdapter requests the XML environment information from the plugin and passes it to the AutomationManager.

6

The XML information is stored in a chain of AutomationClass, AutomationMethodDescriptor, and AutomationPropertyDescriptor objects.

7

Automated testing recording
1

The user clicks the Record button in QTP.

2

QTP calls the QTPAdapter.beginRecording() method. QTPAdapter adds a listener for

AutomationRecordEvent.RECORD from the AutomationManager.

The QTPAdapter notifies AutomationManager about this by calling the beginRecording() method. The
AutomationManager adds a listener for the AutomationRecordEvent.RECORD event from the SystemManager.
3
4

The user interacts with the application. In this example, suppose the user clicks a Button control.

5

The ButtonDelegate.clickEventHandler() method dispatches an AutomationRecordEvent event with the

click event and Button instance as properties.

6 The AutomationManager record event handler determines which properties of the click event to store, based
on the XML environment information. It converts the values into proper type or format. It dispatches the record
event.

The QTPAdapter event handler receives the event. It calls the AutomationManager.createID() method to
create the AutomationID object of the button. This object provides a structure for object identification.

7

The AutomationID structure is an array of AutomationIDParts. An AutomationIDPart is created by using
IAutomationObject. (The UIComponent.id, automationName, automationValue, childIndex, and label
properties of the Button control are read and stored in the object. The label property is used because the XML
information specifies that this property can be used for identification for the Button.)
8 The QTPAdapter uses the AutomationManager.getParent() method to get the logical parent of the Button
control. The AutomationIDPart objects of parent controls are collected at each level up to the application level.
9

All these AutomationIDParts are made part of an AutomationID object.

10 The QTPAdapter sends the information in a call to QTP.
11 At this point, QTP might call the AutomationManager.getProperties() method to get the property values

of the Button control. The property type information and codec that should be used to modify the value format are
gotten from the AutomationPropertyDescriptor.
12 User stops recording. This is propagated by a call to the QTPAdapter.endRecording() method.
Automated testing playback
1

The user clicks the Playback button in QTP.

The QTPAdapter.findObject() method is called to determine whether the object on which the event has to
be played back can be found. The AutomationID object is built from the XML data received. The
AutomationManager.resolveIDToSingleObject() method is invoked to see if QTP can find one unique object
matching the AutomationID. The AutomationManager.getChildren() method is invoked from application level
to find the child object. The IAutomationObject.numAutomationChildren property and the
IAutomationObject.getAutomationChildAt() method are used to navigate the application.
2

3 The AutomationManager.isSynchronized() and AutomationManager.isVisible() methods ensure that
the object is fully initialized and is visible so that it can receive the event.
4

QTP invokes the QTPAdpater.run() method to play back the event. The

AutomationManager.replayAutomatableEvent() method is called to replay the event.

ADOBE FLEX 3 365
Adobe Flex 3 Data Visualization Developer Guide

The AutomationMethodDescriptor for the click event on the Button is used to copy the property values (if
any).

5
6

The AutomationManager.replayAutomatableEvent() method invokes the

IAutomationObject.replayAutomatableEvent() method on the delegate class. The delegate uses the
IAutomationObjectHelper.replayMouseEvent() method (or one of the other replay methods, such as
replayKeyboardEvent() ) to play back the event.

If there are check points recorded in QTP, the AutomationManager.getProperties() method is invoked to
verify the values.

7

Instrumenting events
When you extend Flex components that are already instrumented, you do not have to change anything to ensure that
those components’ events can be recorded by a testing tool. For example, if you extend a Button class, the class still
dispatches the automation events when the Button is clicked, unless you override the Button control’s default event
dispatching behavior.
Automation events (sometimes known in automation tools such as QTP as operations) are not the same as Flex
events. Flex must dispatch an automation event as a separate action. Flex dispatches them at the same time as Flex
events, and uses the same event classes, but you must decide whether to make a Flex event visible to the automation
tool.
Not all events on a control are instrumented. You can instrument additional events by using the instructions in
“Instrumenting existing events” on page 365.
If you change the instrumentation of a component, you must edit that component’s entry in the TEAFlex.xml file.
This is described in “Using the class definitions file” on page 369.

Instrumenting existing events
Events have different levels of relevance for the QC professional. For example, a QC professional is generally interested in recording and playing back a click event on a Button control. The QC professional is not generally interested in recording all the events that occur when a user clicks the Button, such as the mouseOver, mouseDown,
mouseUp, and mouseOut events. For this reason, when a tester clicks on a Button control with the mouse, testing tools
only record and play back the click event for the Button control and not the other lower-level events.
There are some circumstances where you would want to record events that are normally ignored by the testing tool.
But the testing tool’s object model only records events that represent the end-user’s gesture (such as a click or a drag
and drop). This makes a script more readable and it also makes the script robust enough so that it does not fail if you
change the application slightly. So, you should carefully consider whether you add a new event to be tested or you
can rely on events in the existing object model.
You can see a list of events that the QTP automation tool can record for each Flex component in the QTP Object Type
Information document. The Button control, for example, supports the following operations:

•
•

ChangeFocus

•
•

MouseMove

•

Type

Click

SetFocus

All of these events except for MouseMove are automatically recorded by QTP by default. The QC professional must
explicitly add the MouseMove event to their QTP script for QTP to play back the event.

ADOBE FLEX 3 366
Adobe Flex 3 Data Visualization Developer Guide

However, you can alter the behavior of your application so that this event is recorded by the testing tool. To add a
new event to be tested, you override the replayAutomatableEvent() method of the IAutomationObject interface.
Because UIComponent implements this interface, all subclasses of UIComponent (which include all visible Flex
controls) can override this method. To override the replayAutomatableEvent() method, you create a custom
class, and override the method in that class.
The replayAutomatableEvent() method has the following signature:
public function replayAutomatableEvent(event:Event):Boolean

The event argument is the Event object that is being dispatched. In general, you pass the Event object that triggered
the event. Where possible, you pass the specific event, such as a MouseEvent, rather than the generic Event object.
The following example shows a custom Button control that overrides the replayAutomatableEvent() method.
This method checks for the mouseMove event and calls the replayMouseEvent() method if it finds that event.
Otherwise, it calls its superclass’ replayAutomatableEvent() method.








In the application, you call the AutomationManager’s recordAutomatableEvent() method when the user moves
the mouse over the button. The following application uses this custom class:









If the event is not one that is currently recordable, you also must define the new event for the agent. For QTP, the
class definitions are in the TEAFlex.xml file. Automation tools can use files like this to define the events, properties,
and arguments for each class of test object. For more information, see “Instrumenting events” on page 365. For
example, if you wanted to add support for the mouseOver event, you would add the following to the FlexButton’s
entry in the TEAFlex.xml file:




Occurs when the user moves mouse over the
component



In the preceding example, however, the mouseMove event is already in the FlexButton control’s entry in that file, so
no editing is necessary. The difference now is that the QC professional does not have to explicitly add the event to
their script. After you compile this application and deploy the new TEAFlex.xml file to the QTP testing environment,
QTP records the mouseMove event for all of the CustomButton objects.
For more information on using a class definitions file, see “Using the class definitions file” on page 369.

Instrumenting custom components
The process of creating a custom component that supports automated testing is called instrumentation. Flex
framework components are instrumented by attaching a delegate class to each component at run time. The delegate
class defines the methods and properties required to perform instrumentation.
If you extend an existing component that is instrumented, such as a Button control, you inherit its parent’s instrumentation, and are not required to do anything else to make that component testable. If you create a component that
inherits from UIComponent, you must instrument that class in one of the following ways:

•
•

Create a delegate class that implements the required interfaces.
Add testing-related code to the component.

You usually instrument components by creating delegate classes. You can also instrument components by adding
automation code inside the components, but this is not a recommended practice. It creates tighter coupling between
automated testing code and component code, and it forces the automated testing code to be included in a production
SWF file.

ADOBE FLEX 3 368
Adobe Flex 3 Data Visualization Developer Guide

In both methods of instrumenting a component, you must specify any new events to the agent. For QTP, you must
add your new component’s information to a class definitions XML file so that QTP recognizes that component. For
more information about this file, see “Using the class definitions file” on page 369.
Consider the following additional factors when you instrument custom components:

• Composition. When instrumenting components, you must consider whether the component is a simple
component or a composite component. Composite components are components made up of several other components. For example, a TitleWindow that contains form elements is a composite component.
• Container hierarchy. You should understand how containers are viewed in the automation hierarchy so that the
QC professional can easily test the components. Also, you should be aware that you can manipulate the hierarchy to
better suit your application by setting some automation-related properties.
• Automation names. Custom components sometimes have ambiguous or unclear default automation names. The
ambiguous name makes it more difficult in automation tools to determine what component a script is referring to.
Component authors can manually set the value of the automationName property for all components except item
renderers. For item renderers, use the automationValue.

Creating a delegate class
To instrument custom components with a delegate, you must do the following:

• Create a delegate class that implements the required interfaces. In most cases, you extend the UIComponentAutomationImpl class. You can instrument any component that implements IUIComponent.
•
•

Register the delegate class with the AutomationManager.
Define the component in a class definitions XML file.

The delegate class is a separate class that is not embedded in the component code. This helps to reduce the
component class size and also keeps automated testing code out of the final production SWF file. All Flex controls
have their own delegate classes. These classes are in the mx.automation.delegates.* package. The class names follow
a pattern of ClassnameAutomationImpl. For example, the delegate class for a Button control is
mx.automation.delegates.controls.ButtonAutomationImpl.
Instrument with a delegate class
1

Create a delegate class.

2

Mark the delegate class as a mixin by using the [Mixin] metadata keyword.

3

Register the delegate with the AutomationManager by calling the

AutomationManager.registerDelegateClass() method in the init() method. The following code is a simple

example:
[Mixin]
public class MyCompDelegate {
public static init(root:DisplayObject):void {
// Pass the component and delegate class information.
AutomationManager.registerDelegateClass(MyComp, MyCompDelegate);
}
}

You pass the custom class and the delegate class to the registerDelegateClass() method.
4

Add the following code to your delegate class:
Override the getter for the automationName property and define its value. This is the name of the object as
it usually appears in automation tools such as QTP. If you are defining an item renderer, use the
automationValue property instead.
a

ADOBE FLEX 3 369
Adobe Flex 3 Data Visualization Developer Guide

b Override the getter for the automationValue property and define its value. This is the value of the object in
automation tools such as QTP.
c

In the constructor, add event listeners for events that the automation tool records.

Override the replayAutomatableEvent() method. The AutomationManager calls this method for
replaying events. In this method, return whether the replay was successful. You can use methods of the helper
classes to replay common events.

d

For examples of delegates, see the source code for the Flex controls in the mx.automation.delegates.*
packages.
5

Link the delegate class with the application SWF file in one of these ways:

•

Add the following includes compiler option and link in the delegate class:
mxmlc -includes MyCompDelegate -- FlexApp.mxml

•

Build a SWC file for the delegate class by using the compc component compiler:
compc -source-path+=. -include-classes MyCompDelegate -output MyComp.swc

Then include this SWC file with your Flex application by using the following include-libraries compiler
option:
mxmlc -include-libraries MyComp.SWC -- FlexApp.mxml

This approach is useful if you have many components and delegate classes and want to include them as a
single file.
After you compile your Flex application with the new delegate class, you must define the new interaction for the
agent and the automation tool. For QTP, you must add the new component to QTP’s custom class definition XML
file. For more information, see “Using the class definitions file” on page 369.

6

For an example that shows how to instrument a custom component, see “Example: Instrumenting the RandomWalk
custom component for QTP” on page 375.

Using the class definitions file
The class definitions file contains information about all instrumented Flex components. This file provides information about the components to the automation agent, including what events can be recorded and played back, the
name of the component, and the properties that can be tested.
An example of a class definitions file is the TEAFlex.xml file, which is specific to the QTP automation tool. This file
is included in the Flex Automation Package. Another example is the FlexEnv.xml file included in the AutoQuick
example. These files are very similar, but represent only one way that class definitions can be represented to the agent
and automation tool.
The TEAFlex.xml file is located in the “QTP_plugin_install\Flex 3 Plug-in for Mercury QuickTest Pro” directory.
QTP recognizes any file in that directory that matches the pattern TEAFlex*.xml, where * can be any string. This
directory also contains a TEAFlexCustom.xml file that you can use as a starting point for adding custom component
definitions.
The TEAFlex.xml and FlexEnv.xml class definitions files describe instrumented components with the following
basic structure:






...


ADOBE FLEX 3 370
Adobe Flex 3 Data Visualization Developer Guide



...




The top level tag is  . You define a new class that uses the  tag, which is a child tag
of the  tag. The  tag has child tags that further define the instrumented classes.
The following table describes these tags:
Tag

Description

ClassInfo

Defines the class that is instrumented, for example, FlexButton. This is the name that the automation tools use
for the Button control.
Attributes of this tag include Name, GenericTypeID, Extends, and SupportsTabularData.

Description

Defines the text that appears in the automation tool to define the component. This is not implemented in the
AutoQuick example, but is implemented for QTP.

Implementation

Defines the class name, as it is known by the Flex compiler, for example, Button or MyComponent.

TypeInfo

Defines events for this class. Each event is defined in an  child tag, which has two child tags:

Properties

•

The  child tag associates the operation with the actual event.

•

Each operation can also define properties of the event object by using an  child tag.

Defines properties of the class. Each property is defined in a  child tag. Inside this tag, you define
the property’s type, name, and description.
For each Property, if the ForDescription attribute is true, the property is used to uniquely identify a
component instance in the automation tool; for example, the label property of a Button control. QTP lists this
property as part of the object in QTP object repository.
If the ForVerfication attribute is true, the property is visible in the properties dialog box in QTP.
If the ForDefaultVerification tag is true, the property appears selected by default in the dialog box in
QTP. This results in verification of the property value in the checkpoint.

The following example adds a new component, MyComponent, to the class definition file. This component has one
instrumented event, click:


FlexMyComponent









This is MyComponent.



The name used by tools to id an object.

ADOBE FLEX 3 371
Adobe Flex 3 Data Visualization Developer Guide




To be written.



Developer-assigned ID.



The index relative to its parent.



...


You can edit the class definitions file to add a new recordable event to an existing component. To do this, you insert
a new  in the control’s  block. This includes the implementation class of the event, and any
arguments that the event might take.
The following example adds a new event, MouseOver, with several arguments to the Button control:


















When you finish editing the class definitions file, you must distribute the new file to the automation tool users. For
QTP, users must copy this file manually to the “QTP_plugin_install\Flex 3 Plug-in for Mercury QuickTest Pro”
directory. When you replace the class definitions file in the QTP environment, you must restart QTP.

Setting the automationName property
The automationName property defines the name of a component as it appears in testing scripts. The default value
of this property varies depending on the type of component. For example, a Button control’s automationName is the
label of the Button control. Sometimes, the automationName is the same as the control’s id property, but this is not
always the case.
For some components, Flex sets the value of the automationName property to a recognizable attribute of that
component. This helps QC professionals recognize that component in their scripts. Because they do not usually have
access to the underlying source code of the application, having a control’s visible property define that control can be
useful. For example, a Button labeled “Process Form Now” appears in the testing scripts as FlexButton("Process
Form Now").

ADOBE FLEX 3 372
Adobe Flex 3 Data Visualization Developer Guide

If you implement a new component, or derive from an existing component, you might want to override the default
value of the automationName property. For example, UIComponent sets the value of the automationName to the
component’s id property by default, but some components use their own methods of setting its value.
For example, in the Flex Store sample application, containers are used to create the product thumbnails. A container’s
default automationName (it is the same as the container’s id property) would not be very useful because it is
programmatically generated. So in Flex Store, the custom component that generates a product thumbnail explicitly
sets the automationName to the product name to make testing the application easier.
The following example from the CatalogPanel.mxml custom component sets the value of the automationName
property to the name of the item as it appears in the catalog. This is much more recognizable than the default
automation name.
thumbs[i].automationName = catalog[i].name;

The following example sets the automationName property of the ComboBox control to “Credit Card List”; rather
than using the id property, the testing tool typically uses “Credit Card List” to identify the ComboBox in its scripts:
















If you do not set the value of the automationName property, the name of an object in a testing tool is sometimes a
property that can change while the application runs. If you set the value of the automationName property, testing
scripts use that value rather than the default value. For example, by default, QTP uses a Button control’s label
property as the name of the Button in the script. If the label changes, the script can break. You can prevent this from
happening by explicitly setting the value of the automationName property.

ADOBE FLEX 3 373
Adobe Flex 3 Data Visualization Developer Guide

Buttons that have no label, but have an icon, are recorded by their index number. In this case, you should ensure that
you set the automationName property to something meaningful so that the QC professional can recognize the
Button in the script. This might not be necessary if you set the toolTip property of the Button because QTP uses
that value if there is no label.
After the value of the automationName property is set, you should never change the value during the component’s
life cycle.
For item renderers, use the automationValue property rather than the automationName property. You do this by
overriding the createAutomationIDPart() method and returning a new value that you assign to the
automationName property, as the following example shows:






This technique works for any container or list-like control to add index values to their children. There is no method
for a child to specify an index for itself.

Instrumenting composite components
Composite components are custom components made up of two or more components. A common composite
component is a form that contains several text fields, labels, and buttons. Composite components can be MXML files
or ActionScript classes.
By default, you can record operations on all instrumented child controls of a container. If you have a Button control
inside a custom TitleWindow container, the QA professional can record actions on that Button control just like on
any Button control. You can, however, create a composite component in which some of the child controls are instrumented and some are not. To prevent the operations of a child component from being recorded, you override the
following methods:

•

numAutomationChildren getter

•

getAutomationChildAt()

The numAutomationChildren property is a read-only property that stores the number of automatable children that
a container has. This property is available on all containers that delegate implementation classes. To exclude some
children from being automated, you return a number that is less than the total number of children.
The getAutomatedChildAt() method returns the child at the specified index. When you override this method, you
return null for the unwanted child at the specified index, but return the other children as you normally would.
The following custom composite component is written in ActionScript. It consists of a VBox container with three
buttons (OK, Cancel, and Help). You cannot record the operations of the Help button. You can record the operations
of the other Button controls, OK and Cancel. The following example sets the values of the OK and Cancel buttons’
automationName properties. This makes those button controls easier to recognize in the automated testing tool’s
scripts.

ADOBE FLEX 3 374
Adobe Flex 3 Data Visualization Developer Guide

// MyVbox.as
package { // Empty package
import mx.core.UIComponent;
import mx.containers.VBox;
import mx.controls.Button;
import mx.automation.IAutomationObject;
import mx.automation.delegates.containers.BoxAutomationImpl;
public class MyVBox extends VBox {
public var btnOk : Button;
public var btnHelp : Button;
public var btnCancel : Button;
public function MyVBox():void { // Constructor
}
override protected function createChildren():void {
super.createChildren();
btnOk = new Button();
btnOk.label = "OK";
btnOk.automationName = "OK_custom_form";
addChild(btnOk);
btnCancel = new Button();
btnCancel.label = "Cancel";
btnCancel.automationName = "Cancel_custom_form";
addChild(btnCancel);
btnHelp = new Button();
btnHelp.label = "Help";
btnHelp.showInAutomationHierarchy = false;
addChild(btnHelp);
}
override public function get numAutomationChildren():int {
return 2; //instead of 3
}
override public function
getAutomationChildAt(index:int):IAutomationObject {
switch(index) {
case 0:
return btnOk;
case 1:
return btnCancel;
}
return null;
}
} // Class
} // Package

To make this solution more portable, you could create a custom Button control and add a property that determines
whether a Button should be testable. You could then set the value of this property based on the Button instance (for
example, btnHelp.useInAutomation = false), and check against it in the overridden
getAutomationChildAt() method, before returning null or the button instance.

ADOBE FLEX 3 375
Adobe Flex 3 Data Visualization Developer Guide

Example: Instrumenting the RandomWalk custom
component for QTP
The RandomWalk component is an example of a complex custom component. It has custom events and custom item
renderers. Showing how it is instrumented can be helpful in instrumenting your custom components. For example,
you can instrument the RandomWalk custom component so that interaction with it can be recorded and played back
by using the QTP automation tool.
You can find the source code used in this section at the following location:
http://www.adobe.com/go/flex_automation_randomwalk_apps

Instrumenting the RandomWalk custom component
The first task when instrumenting a custom component is to create a delegate and add the new component to the
class definitions XML file.
Create a RandomWalkDelegate class that extends UIComponentAutomationImpl, similar to RandomWalk
extending the UIComponent class. The UIComponentAutomationImpl class implements the IAutomationObject
interface.

1

2

Mark the delegate class as a mixin with the [Mixin] metadata tag; for example:
package {
...
[Mixin]
public class RandomWalkDelegate extends UIComponentAutomationImpl {
}
}

This results in a call to the static init() method in the class when the SWF file loads.
3

Add a public static init() method to the delegate class, and add the following code to it:
public static init(root:DisplayObject):void {
Automation.registerDelegateClass(RandomWalk, RandomWalkDelegate);
}

Add a constructor that takes a RandomWalk object as parameter. Add a call to the super constructor and pass
the object as the argument:

4

private var walker:RandomWalk
public function RandomWalkDelegate(randomWalk:RandomWalk) {
super(randomWalk);
walker = randomWalk;
}

Update the TEAFlexCustom.xml file so that QTP recognizes the RandomWalk component. To do this, add the
text between the  root tags. The TEAFlexCustom.xml file is located in the
“QTP_plugin_install\Flex 3 Plug-in for Mercury QuickTest Pro” directory. For more information about the
TEAFlexCustom.xml file, see “Using the class definitions file” on page 369.

5


...

FlexRandomWalk

ADOBE FLEX 3 376
Adobe Flex 3 Data Visualization Developer Guide







To be written.



The name used by the automation system to
identify an object.



To be written.



Developer-assigned ID.



The object's index relative to its parent.






This defines the name of the FlexRandomWalk component and its implementing class. It specifies the
automationClassName, automationName, className, id and automationIndex properties as available for
identifying an instance of the RandomWalk class in the Flex application. This is possible because the RandomWalk
class is derived from the UIComponent class, and these properties are defined on that parent class.
If your component has a property that you can use to differentiate between component instances, you can also add
that property. For example, the label property of a Button control, though not unique when the whole application
is considered, can be assumed to be unique within a container; therefore, you can use it as an identification property.

Instrumenting RandomWalk events
The next step in instrumenting a custom component is to identify the important events that must be recorded by
QTP. The RandomWalk component dispatches a RandomWalkEvent.ITEM_CLICK event. Because this event
indicates user navigation, it is important and must be recorded.
Instrument the ITEM_CLICK event
1

Add an event listener for the event in the RandomWalkDelegate constructor:
randomWalk.addEventListener(RandomWalkEvent.ITEM_CLICK, itemClickHandler)

Identify the event in the TEAFlexCustom.xml file so that QTP recognizes the event. Add the following text in
the  tag in the TEAFlexCustom.xml file:

2





ADOBE FLEX 3 377
Adobe Flex 3 Data Visualization Developer Guide

Adding this block to the TEAFlexCustom.xml file names the event as Select and indicates that it is tied to the
RandomWalkEvent class, which is available in the randomWalkClasses namespace. It also defines the event of
type itemClick.
When using the RandomWalk component, users click on items to expand them. The component records the item
label so that QC professionals can easily recognize their action in the QTP script.
The RandomWalkEvent class has only a single property, item, that stores the XML node information. In the
RandomWalk component’s implementation, the RandomWalkRenderer item renderer is used to display the data on
the screen. This class is derived from the Label control, which is already instrumented. The Label control returns the
label text as its automationName, which is what you want to record.
Record the label text
1

Add a new property, itemRenderer, to the RandomWalkEvent class.

2

Add the code to initialize this property for the event before dispatching the event; for example:
var rEvent:RandomWalkEvent = new RandomWalkEvent(RandomWalkEvent.ITEM_CLICK,node);
rEvent.itemRenderer = child as Label;
dispatchEvent(rEvent);

3

Add the new itemRenderer property as an argument to the Select operation in the TEAFlexCustom.xml file:




User-clicked item.



This code block specifies the type of argument as String and the codec as automationObject. The Codec
property is an optional attribute of the  tag in the  and  tags. It defines a class
that converts ActionScript types to agent-specific types.
4 In the event handler, call the recordAutomatableEvent() method with event as the parameter, as the
following example shows:
private function itemClickHandler(event:RandomWalkEvent):void {
recordAutomatableEvent(event);
}

In some cases, the component does not dispatch any events or the event that was dispatched does not have the information that is required during the recording or playing back of the test script. In these circumstances, you must
create an event class with the required properties. In the component, you create an instance of the event and pass it
as a parameter to the recordAutomatableEvent() method.
For example, the ListItemSelect event has been added in automation code and is used by the List automation
delegate to record and play back select operations for list items.
To locate the item renderer object, the automation classes require some help. Copy the standard implementation for
the following methods:
override public function createAutomationIDPart(child:IAutomationObject):Object {
var help:IAutomationObjectHelper = Automation.automationObjectHelper;
return help.helpCreateIDPart(this, child);
}
override public function resolveAutomationIDPart(part:Object):Array {
var help:IAutomationObjectHelper = Automation.automationObjectHelper;
return help.helpResolveIDPart(this, part as AutomationIDPart);

ADOBE FLEX 3 378
Adobe Flex 3 Data Visualization Developer Guide

}

Preparing the RandomWalk component for playback
Flex components display the data in a data provider after processing and formatting the data. Playback code requires
a way to trace back the visual data to the data provider and the component displaying that data. For example, from
the visual label of an item in the List, playback code should be able to find the item renderer that shows the element
so that the item’s click can be played back.
When playing back a RandomWalkEvent event, you must identify the item renderer with the automationName
given. Because the RandomWalk component has many item renderers that are children that are derived from
UIComponent subclasses, you must identify them by using the automationName property.
The IAutomationObject interface already has APIs to support this. The UIComponentAutomationImpl interface
provides default implementations for some methods, but you must override some methods to return information
that is specific to the RandomWalk component.
Prepare the RandomWalk component for playback

Instruct QTP as to how many renderers are being used by the instance of the RandomWalk component.
RandomWalk uses an array of arrays for all the renderers. Add the following code in RandomWalkDelegate class to
find the total number of instances:

1

override public function get numAutomationChildren():int {
var numChildren:int = 0;
var renderers:Array = walker.getItemRenderers();
for (var i:int = 0;i< renderers.length;i++) {
numChildren += renderers[i].length;
}
return numChildren;
}

Access the itemRenderers property in the delegate class; this property, however, is private. As a result, you must
add the following accessor method to the RandomWalk component:

2

public function getItemRenderers():Array {
return _renderers;
}

Alternatively, you can make the property public or change its namespace.
3

QTP requests each child renderer. Add the following code to determine the exact renderer and return it:
override public function getAutomationChildAt(index:int):IAutomationObject {
var numChildren:int = 0;
var renderers:Array = walker.getItemRenderers();
for(var i:int = 0; i < renderers.length; i++) {
if(index >= numChildren) {
if(i+1 < renderers.length && (numChildren + renderers[i].length)
<= index) {
numChildren += renderers[i].length;
continue;
}
var subIndex:int = index - numChildren;
var instances:Array = renderers[i];
return (instances[subIndex] as IAutomationObject);
}
}
return null;
}

ADOBE FLEX 3 379
Adobe Flex 3 Data Visualization Developer Guide

Linking the delegate to an application
There are two options to link the delegate class with the application SWF file. You can use the includes compiler
option and link to the delegate as follows:
mxmlc -includes RandomWalkDelegate FlexApp.mxml

You can also build a SWC file for the delegate class. You then include the SWC file with the Flex application by using
the include-libraries compiler option, as the following code shows:
mxmlc -include-libraries RandomWalkAT.SWC -- FlexApp.mxml

This approach is useful if you have many components and many delegate classes.

Adjusting event recording
You can compile and record any application that uses a RandomWalk component. While recording, you might notice
that the FlexLabel().Click operation is recorded in addition to the Select operation. Generally, you do not want
to record both operations for each user interaction.
In the following example, you stop the AutomationRecordEvent.RECORD event from being recorded. Because it is
a bubbling event, you can listen to the event from the children, and prevent the event from being recorded.
Prevent an event from being recorded
1

Add an event handler in the constructor of the delegate, as the following example shows:
obj.addEventListener(AutomationRecordEvent.RECORD, labelRecordHandler);

2 Prevent the recording of this event by calling the preventDefault() method or by stopping the propagation of
the event:
public function labelRecordHandler(event:AutomationRecordEvent):void {
// if the event is not from the owning component reject it.
if (event.replayableEvent.target != uiComponent)
//event.preventDefault(); can also be used.
event.stopImmediatePropagation();
}

The RandomWalkDelegate class must handle the playback of the RandomWalkEvent event only. Any other event
must be handled by the super class implementation.
3

Override the replayAutomatableEvent() method and handle the RandomWalkEvent event:
override public function replayAutomatableEvent(event:Event):Boolean {
if (event is RandomWalkEvent) {
}
return super.replayAutomatableEvent(event);
}

(Optional) To replay the RandomWalkEvent, you must replay a click on the item renderer. You do this by calling
the replayClick () method. To use the replayClick() method to play back a click on the item renderer, use the
following code:
4

override public function replayAutomatableEvent(event:Event):Boolean {
var help:IAutomationObjectHelper = Automation.automationObjectHelper;
if (event is RandomWalkEvent) {
var rEvent:RandomWalkEvent = event as RandomWalkEvent
help.replayClick(rEvent.itemRenderer);
return true;
} else
return super.replayAutomatableEvent(event);
}

ADOBE FLEX 3 380
Adobe Flex 3 Data Visualization Developer Guide

For playing back an event, the Automation.automationObjectHelper class providers some helper methods, the
following table describes:
Method

Description

replayClick()

Dispatches the mouseDown, mouseClick, and mouseUp events on a UIComponent object.

replayMouseEvent()

Dispatches the specified mouse event on a UIComponent.

replayKeyDownKeyUp()

Dispatches a keyboard event with keyCode and key modifiers specified.

replayKeyboardEvent()

Dispatches the specified keyboard event on a UIComponent.

For more information, see the documentation for the IAutomationObjectHelper class in the Adobe Flex
Language Reference.
5

Record and play back your application.

6

To ensure that the view is updated, add the following code after the call to the replayClick() method:
override public function replayAutomatableEvent(event:Event):Boolean {
var help:IAutomationObjectHelper = Automation.automationObjectHelper;
if (event is RandomWalkEvent) {
var rEvent:RandomWalkEvent = event as RandomWalkEvent
help.replayClick(rEvent.itemRenderer);
(uiComponent as IInvalidating).validateNow();
return true;
} else
return super.replayAutomatableEvent(event);
}

Adjustments like this might be required in the delegate to adjust the behavior of the component during playback
because QTP does not wait for actions to be completed. The same can also be achieved by adding Wait statements in the QTP script.
You should now be able to compile, record, and play back any application with the RandomWalk component.

Adding checkpoints
To add checkpoints on public properties of the component, you add a small description of the property to the
component description in the custom class definitions XML file (TEAFlexCustom.xml). You also add a getter for
those public properties.
For the openChildrenCount property of the RandomWalk component to appear in checkpoints, add the following
element as a child of the  tag:


Number of children open currently.


When you use a checkpoint operation with a RandomWalk component, QTP displays the openChildrenCount
property in the Checkpoint dialog box.
Also, add the following getter method to the RandomWalk class:
public function get openChildrenCount():int {
return numAutomationChildren;
}

The numAutomationChildren property is inherited from the UIComponent class.

381

Chapter 9: Creating Custom Agents
Topics

About creating custom agents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381
About the automation APIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
Understanding the automation flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385
Creating agents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
Creating a recording agent. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Creating a replaying agent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391

About creating custom agents
The automation API in Adobe® Flex® can be used for many tasks, including gathering metrics information,
automated testing, and collaborative browsing (co-browsing).
To use the automation API, you should understand the following terminology:

• agent — An agent facilitates the communication between the Flex application and the automation tool. The way
in which the communication happens depends on the automation tool, but it can include using the ExternalInterface
API to access the browser’s DOM or ActiveX plug-in. Agents are typically implemented in ActionScript and
packaged as a SWC file.
• automation tool — An automation tool records, and sometimes plays back, interactions with Flex applications.
An automation tool requires an agent to provide communication between it and the Flex application. Automation
tools include Mercury QuickTest Professional™ (QTP) and Segue.
Full support for the Flex automation features is included in Adobe® Flex® Builder™ Professional. Adobe Flex Builder
Standard allows only limited use of this feature.
To use the examples in this topic, you should download the customagent_src.zip and autoquick_src.zip files. The
customagent_src.zip file includes a set of classes that define a custom automation agent that records user interaction
with a Flex application. The interaction is then written out to a database. The autoquick_src.zip file records a user
interaction and then plays it back. You can download these examples from the following location:
http://www.adobe.com/go/flex_automation_agent_apps

The sample files also include an XML file that the custom agents use to define their environment.
In addition to these samples, you can also download and run a testing-enabled version of the Adobe FlexStore application from http://www.adobe.com/go/flex_flexstore_automation.
The Automation Framework defines a single API that has two parts:

• Component API — Components must implement this API to support automation features. Developers can
choose to put the code either in the main component itself or in a mixin class. Mixin classes implement this API for
Flex components.
•

Agent API — Agents use this API to communicate with the component API.

Component developers implement the component API for their component once and then the component is ready
to converse with any agent. Agent developers implement the agent API for their specific feature or tool and it is able
to work with any Flex application. For more information, see “About the automation APIs” on page 382.

ADOBE FLEX 3 382
Adobe Flex 3 Data Visualization Developer Guide

Uses for agents
You can use agents to gather metrics information, to use automated testing, and to run applications at different
locations at the same time.
Metrics

You might want to analyze how your online applications are being used. By gathering metrics information, you can
answer the following questions:

•
•

What product views are most popular?

•
•

What is a typical path through my application?

When do users abandon the checkout process?
How many product views does a user look at during a session?

Automated testing

Maintaining the quality of a large software application is difficult. Verifying lots of functionality in any individual
build can take a QA engineer many hours or even days, and much of the work between builds is repetitive. To
alleviate this difficulty, automated testing tools have been created that can use applications and verify behavior
without human intervention. Major application environments such as Java and .NET have testing tool support from
vendors such as QTP and Segue.
By using the Flex automation API, you can:

•
•

Record and replay events in a separate tool
Manage communication between components and agents

Co-browsing

You might want to run the same application at different locations and view the application at the same time. By using
the automation API, you can ensure that the applications are synchronized as users navigate through the them. User
interaction at any location can be played at other locations and other users can see the action in real time.

About the automation APIs
There are four main parts that enable the automation framework in Flex:

•

Core Flex API

•
•

Automation APIs

•

Automation tools

Agent class (also known as an adapter)

ADOBE FLEX 3 383
Adobe Flex 3 Data Visualization Developer Guide

The following illustration shows the relationship between these parts:

SystemManager

Core Flex API

Automation

AutomationManager

Delegate
Delegate
Delegate

Automation
APIs

Omniture
Agent

Mercury QTP
Agent

JAWS
Agent

User-created
agent classes

Omniture

Mercury QTP

JAWS

Automation
tools

About the SystemManager class
The SystemManager class is one of the highest level classes in a Flex application. Every Flex application has a SystemManager class. It is the parent of all displayable objects in the application, such as the main mx.core.Application
instance and all pop-up windows, ToolTip instances, cursors, and so on.
SystemManager calls the init() method on all mixins. The SystemManager is responsible for creating the AutomationManager class as well as the Agent and the delegate classes. SystemManager is also responsible for adding the
Application object to Adobe® Flash® Player or Adobe® AIR™ stage (root).

About the AutomationManager class
The AutomationManager class is a Singleton that extends the EventDispatcher class. It implements the IAutomationManager, IAutomationObjectHelper, and IAutomationMouseSimulator interfaces.
AutomationManager is a mixin, so its init() method is called by the SystemManager class when the application is
initialized. In the init() method, the AutomationManager class adds an event listener for the Event.ADDED event.
This event is dispatched by Flash Player or AIR whenever a display object is added to the display list. When that
happens, Flash Player or AIR calls the childAddedHandler() method:
root.addEventListener(Event.ADDED, childAddedHandler, false, 0, true);

In the childAddedHandler() method, the AutomationManager class:

•
•

Creates a new instance of a delegate for each display object.
Adds the display object to a delegate class map. This maps the display object to a delegate instance; for example:
Automation.delegateClassMap[componentClass] = Automation.delegateClassMap[className];

The delegate class map is a property of the Automation class.

•

Ensures that all children of the new display object are added to the class map as well.

ADOBE FLEX 3 384
Adobe Flex 3 Data Visualization Developer Guide

In the recordAutomatableEvent() method, the AutomationManager:

•
•

Creates an AutomationRecordEvent.RECORD event.
Dispatches the RECORD events. The agent listens for these events.

The recordAutomatableEvent() method is called by the delegates.

About the Automation class
During application initialization, the Automation class is created. This is a static class that maintains a map of its
delegate class to its component class.
This class does the following for recording events:

•
•

Provides access to the AutomationManager class
Creates delegateClassMap as a static property

For example, there is a MyButton class that extends the Button class, but it does not have its own delegate class
(MyButton might not add any new functionality to be recorded or played back). When AutomationManager
encounters an instance of the MyButton class, it checks with the Automation class for a corresponding delegate class.
When it fails to find one, it uses the getSuperClassName() method to get the super class of the MyButton class,
which is the Button class.
AutomationManager then tries to find the delegate for this Button class. At that point, AutomationManager adds a
new entry into the delegate-component class for the MyButton class, associating it with the ButtonDelegateAutomationImpl class, so that next time AutomationManager can find this mapping without searching the inheritance
hierarchy.

About the delegate classes
The delegate classes provide automation hooks to the Flex framework and charting components. The delegate classes
are in the mx.automation.delegates package, and they extend the UIComponentAutomationImpl class. The
delegates are named ControlNameAutomationImpl. For example, the Button control’s delegate class is ButtonAutomationImpl.
The delegate classes register themselves with their associated Automation class by providing the component class
and their own class as input. The AutomationManager class uses the Automation class-to-delegate class map to
create a delegate instance that corresponds to a component instance in the childAddedHandler() method.
The delegate classes are mixins, so their init() method is called by the SystemManager class. The init() method
of the delegate classes:
Calls the registerDelegateClass() method of the Automation class. This method maps the class to an
automation component class; for example:

1

var className:String = getQualifiedClassName(compClass);
delegateClassMap[className] = delegateClass;

2

Adds event listeners for the mouse and keyboard events; for example:
obj.addEventListener(KeyboardEvent.KEY_UP, btnKeyUpHandler, false,
EventPriority.DEFAULT+1, true);
obj.addEventListener(MouseEvent.CLICK, clickHandler, false, EventPriority.DEFAULT+1,
true);

These event handlers call the AutomationManager class recordAutomatableEvent() method, which in turn
dispatches the AutomationRecordEvent.RECORD events that the automation agent listens for.

ADOBE FLEX 3 385
Adobe Flex 3 Data Visualization Developer Guide

All core framework and charting classes have delegate classes already created. You are not required to create any
delegate classes unless you have custom components that dispatch events that you want to automate. In this case, you
must create a custom delegate class for inclusion in your Flex application. For more information, see “Example:
Instrumenting the RandomWalk custom component for QTP” on page 375.

About the agent
The agent facilitates communication between the Flex application and automation tools such as QTP and Segue.
When recording, the agent class is typically responsible for implementing a persistence mechanism in the
automation process. It gets information about events, user sessions, and application properties and typically writes
them out to a database, log file, LocalConnection, or some other persistent storage method.
When you create an agent, you compile it and its supporting classes into a SWC file. You then add that SWC file to
your Flex application by using the include-libraries command-line compiler option.
The custom agent class must be a mixin, which means that its init() method is called by the SystemManager class.
The init() method of the agent:

• Defines a handler for the RECORD events.
• Defines the environment. The environment indicates what components and their methods, properties, and
events can be recorded with the automation API.
The sample custom agent class uses an XML file that contains Flex component API information. The agent loads
it with a call to the URLRequest() constructor, as the following example shows:
var myXMLURL:URLRequest = new URLRequest("AutomationGenericEnv.xml");
myLoader = new URLLoader(myXMLURL);
automationManager.automationEnvironment = new CustomEnvironment(new XML(source));

In this example, the source is an XML file that defines the Flex metadata (or environment information). This
metadata includes the events and properties of the Flex components.
Note that representing events as XML is agent specific. The general-purpose automation API does not require it, but
the XML file makes it easy to adjust the granularity of the events that are recorded.
You are not required to create an instance of your adapter in the init() method. You can also create this instance
in the APPLICATION_COMPLETE event handler if your agent requires that the application must be initialized before
it is instantiated.
Most agents require a set of classes that handle the way in which the agent persists automation information and
defines the environment. For more information, see “Creating a recording agent” on page 388.

Understanding the automation flow
When the application is initialized, the AutomationManager class is created. In its init() method, it adds a listener
for Event.ADDED events.

ADOBE FLEX 3 386
Adobe Flex 3 Data Visualization Developer Guide

The following image shows the order of events when the application is initialized and the AutomationManager class
constructs the delegate map.
1. Creates the display list.

3. Listens for ADDED event.

SystemManager

AutomationManager

Display List
HBox
Automation

Accordion
Button
TextArea
HBox
TextInput
TextInput
Button

4. Maintains map of component
class to delegate class.

{

2. Dispatches the ADDED
event for each UIComponent.

map[Button] = map[mx.controls.Button]
map[HBox] = map[mx.containers.HBox]
...

}

Delegate
5. Handles component events.
Records and plays back events
on component instances.

{
1

map[mx.controls.Button] = ButtonAutoImpl
map[mx.containers.HBox] = HBoxAutoImpl
...

}

The SystemManager class creates the display list, a tree of visible objects that make up your application.

Each time a new component is added, either at the root of the display list or as a child of another member of the
display list, SystemManager dispatches an Event.ADDED event.

2

3 AutomationManager listens for the ADDED event. In its ADDED event handler, it calls methods on the Automation
class. It then instantiates the delegate for that class.
4

The Automation class maps each component in the display list to its full class name.

When it is created, the delegate class adds a reference to its instance in the delegate class map. The delegate class
then handles events during record and play-back sequences.

5

The delegate is now considered registered with the component. It adds event listeners for the component’s events
and calls AutomationManager when the component triggers those events.
After the components in the display list are instantiated and mapped to instances of their delegate classes, AutomationManager is ready to listen for events and forward them to the agent for processing.

ADOBE FLEX 3 387
Adobe Flex 3 Data Visualization Developer Guide

The following image shows the flow of operation when a user performs an action that is a recordable event. In this
case, the user clicks a Button control in the application.
1. User clicks on a Flex component.
Flex application

3. recordAutomationEvent() called.
AutomationManager

Delegate

4. Dispatches RECORD event.

Agent
5. Handles RECORD events.

Button
2. Listens for component events
such as CLICK.

The user clicks the Button control in the Flex application. The SystemManager dispatches a MouseEvent.CLICK
event.

1

The ButtonAutomationImpl class, the Button control’s automation delegate, listens for click events. In the
delegate’s click event handler, the delegate calls the AutomationManager recordAutomationEvent() method. (It
is likely that the button also defines a click event handler to respond to the user action, but that is not shown.)
2

3

The AutomationManager recordAutomationEvent() method dispatches an

AutomationRecordEvent.RECORD event. In that event, the replayableEvent property points to the original
click event.

4

The custom agent class listens for RECORD events. When it receives the RECORD event, it uses the

replayableEvent property to access the properties of the original event.

The agent records the event properties in a database, logs the event properties, or gets information about the user
before recording them.

5

Creating agents
You create an agent as a SWC file and link it into the Flex application by using the include-libraries compiler
option. You can link multiple agents in any number of SWC files to the same Flex application. However, to use
multiple agents at the same time, you must use the same environment configuration files for all agents.
The general process for creating a custom agent is:

• Mark the agent class as a mixin; this triggers a call to a static init() method from the SystemManager class on
application start up.
•
•

Get a reference to the AutomationManager class.
Add event listeners for the APPLICATION_COMPLETE and RECORD events.

• Load the environment information (Flex metadata that describes the objects and operations of the Flex application). Environment information can be an XML file, as the samples use, or it can be in some other data format.
•

Define a static init() method that creates an instance of the agent.

•

Define a method that handles RECORD events. In that method, you can access:

•

Automation details such as the automation name

•

User information such as the FlexSession object (through a RemoteObject)

ADOBE FLEX 3 388
Adobe Flex 3 Data Visualization Developer Guide

•
•

The event that triggered the RECORD event
The target object and its properties that triggered the RECORD event

The RECORD event handler in the agent gets an AutomationRecordEvent whose target is the object on which
recording happened. The automationManager.createID() method converts the object to a string that can be
recorded on the screen. Some tools may require the entire automation hierarchy that needs to be generated in
this method.
You also use the custom agent class to enable and disable recording of automation events.
For more information on creating a custom agent, see “Creating a recording agent” on page 388.

Creating a recording agent
You can use the classes in the customagent_src.zip file to create a custom agent that records metrics data as a user
interacts with an application. For information about creating an agent that records and plays back user interactions,
see “Creating a replaying agent” on page 391.
The custom agent in the customagent_src.zip file is the CustomAdapter class. This class calls an HTTPService that
writes event data out to a database.
Supporting classes for the CustomAdapter class include:

•

CustomEnvironment class that implements IAutomationEnvironment

•
•

CustomAutomationClass that implements IAutomationClass

•
•

CustomAutomationMethodDescriptor class

CustomAutomationEventDescriptor class
CustomAutomationPropertyDescriptor class

In addition to these classes, the ZIP file also includes the environment XML file and a utility class that parses that file.
You can also access a RemoteObject from the custom agent that provides user session information. To simplify, this
example writes the data out to a trace log rather than to a database.

Using the CustomAdapter class
Follow the step-by-step instructions in this section to create a Flex application that records automation events by
using the CustomAdapter class and its supporting files.
You cannot use this custom agent with agents that use different environment information, such as the QTP agent
included in the Flex automation feature. So, if you use the agent in this example, do not use QTP to record scripts.
Set up your Flex installation

Before you can create an application that uses the automation API to record automatable events, you must do the
following:
1

Make sure that you are running Flex Builder Professional.

Extract all the files in the customagent_src.zip file to a directory; for example, c:/myfiles/flex3/agent. This file
contains the agent and helper classes in the custom.* package. It also includes MySQL and PHP code that you can
use to connect your Flex application to a database.

2

Save the AutomationGenericEnv.xml file at the top level directory where you will put the Flex application. In this
case, store it in c:/myfiles/flex3/agent.

3

ADOBE FLEX 3 389
Adobe Flex 3 Data Visualization Developer Guide

After you set up your environment, you can edit the CustomAdapter class to record an interaction with a Flex application.
Edit the CustomAdapter class

The CustomAdapter class handles the RECORD events in the recordHandler() method. The RECORD event has the
following properties:

• name — The agent’s name of the event that triggered the call to the agent; for example, Click. This is the name as
it is defined in the agent’s environment.
• replayableEvent — The event that triggered the call to the agent.
• automationObject — The control that triggered the replayableEvent; for example, if the user clicked a
button, this property contains a reference to the Button control. You can access the automationObject property by
casting it to an IAutomationObject. You can then access properties of that object, such as a Button label property,
by using the AutomationManager getProperties() method, as the following example shows:
var obj:IAutomationObject = event.automationObject;
var label:String = automationManager.getProperties(obj, ["label"])[0];

• args — Additional information about the event, such as the text entered in a TextInput control or whether the
Alt key was held down during a mouse click. You can view all of the arguments by using code similar to the following:
for (var i:int = 0; i







Compile the Flex application. You must include the CustomAgent.swc file as a library, as the following example
shows:

2

mxmlc -include-libraries+=c:/myfiles/flex3/agent/CustomAgent.swc
c:/myfiles/flex3/agent/Main.mxml

This creates Main.swf in the c:/myfiles/flex3/agent directory.
Flex Builder creates an HTML wrapper for you. If you use the command-line compiler, you must create one
manually. In the wrapper, you request the SWF file; if you try to run the SWF file directly, file security errors prevent
you from loading the environment XML file. The following example wrapper loads the mysource.js file:

3





Create a JavaScript file that defines the