Exploring Flex Charting Components

Among the many powerful tools available with Flex framework is a robust set of Charting components. The Flex Charting components enable you to create some of the most common chart types and also give you a great deal of control over the appearance of your charts. After you understand the API for the charts, it becomes easy to add rich interactive charts to any application. Throughout this lesson, you will be adding charts to the Dashboard application, enabling users to better visualize how sales are going for the FlexGrocer company.

Available Charts

Flex provides a number of different types of charts, including the following:

• Area

• Bar

• Bubble

• Candlestick

• Column

• HighLowOpenClose

• Line

• Plot

You can see the various types of charts being used in the Charting section of Adobe's Flex 2 Component Explorer: http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html.

Chart Packaging

Although the Flex Charting components are available for all versions of Flex Builder, they are not included free of charge. The standard install of Flex Builder includes a limited trial of the Charting components; there is a separate version of Flex Builder available that includes these components and another package that makes these components available for developers using the Flex SDK.

Parts of a Chart

All Flex Charting components have a similar API, so after you learn to work with one type of chart, it should be pretty easy to pick up any of the others.

There are a number of different tags you need to use to define a particular chart, but in general, most charts follow this structure:

<ChartType>   <mx:series>     <mx:SeriesName/>   </mx:series>   <!-- Define the axes. -->   <mx:horizontalAxis>     <mx:AxisType/>   </mx:horizontalAxis>   <mx:verticalAxis>     <mx:AxisType/>   </mx:verticalAxis>   <!-- Style the axes and ticks. -->   <mx:horizontalAxisRenderer/>   <mx:verticalAxisRenderer/>   <!-- Add grid lines and other elements to the chart. -->   <mx:annotationElements/>   <mx:backgroundElements/> </mx:ChartType> <mx:Legend/> 

In the pseudo code, you can see that a chart can contain a chart type, one or more series, one or more axes, renderers, and other elements.

The <ChartType> tag is the root tag for each chart. It is required and is used to determine what kind of chart will be used (such as LineChart, ColumnChart, PieChart, and so on). This tag can also be used to customize elements of the chart, such as the data to render, whether ToolTips should be shown as elements are moused over, and so on.

The series defines an array of Series classes, which are used to specify data to render in a chart. For each series of data, specific styles (such as fill, stroke, and so on) can be used to customize how that data is rendered. Because an array of Series is provided, a chart can contain multiple sets of data, such as you will implement in the comparison chart later in this lessongraphing both Net and Gross sales. Every chart must have a series defined before any data will be rendered. Each chart type has its own Series class that can be used; for example, the series for an <mx:ColumnChart> is an <mx:ColumnSeries>, whereas the series for an <mx:PieChart> is an <mx:PieSeries>.

The Axis class is required for any of the rectangular two-dimensional charts (known as Cartesian charts), because it specifies what data should be rendered for the horizontal and vertical axes of the chart. There are Axis subclasses that enable you to specify whether the Axis is numeric (LinearAxis) or string-based (CategoryAxis).

An AxisRenderer can optionally be used to describe how the horizontal and vertical axes of a chart should be shown. For example, an axis is responsible for rendering the labels, tick marks, and title along the axis. Among the items that can be specified with an AxisRenderer are Cascading Style Sheets (CSS), text properties, label rotation, and spacing (such as the capability to drop labels to make the axis fit better).

Other chart elements, which can also be provided, include annotationElements and backgroundElements, both of which are subclasses of the ChartElement class. The background-Elements subclass enables you to add things such as background images, whereas the annotationElements subclass enables you to add items to further describe the chart, such as gridLines.