Beyond the DataGrid Control: Better Data Visualization with Flex Charting Components

Specifying the Axes

Although chart types differ in how they display data, fundamentally they are all about mapping (typically two dimensions of) data to a coordinate on the screen. You specify how a particular chart performs that mapping by specifying its axes.

For example, consider the typical column chart. In most column charts, you see a series of category labels along the horizontal axis (for example, cities, products, demographic groups, and so on) and a numeric range (for example, 0 to 100, 1000 to 5000, and so on) along the vertical axis. The chart maps the position of the column along the horizontal axis based on what category it represents and the height of the bar along the vertical axis based on the numeric value it represents.

In Flex, you dictate how the chart should map values along each axis by specifying an axis type and value.

To map the column's position by category, place a CategoryAxis object in the chart's horizontalAxis property. Use a CategoryAxis object when you want to map a series of discrete categories evenly along the axis onscreen. The CategoryAxis object draws the categories from its own dataProvider property. In this tutorial, you use the same dataProvider property to generate the category labels and specify which field of the dataProvider property's content it should draw from by setting the categoryField property.

1. Add a CategoryAxis object to the horizontalAxis property inside the ColumnChart tag:

   <mx:ColumnChart ...>
       <mx:horizontalAxis>
           <mx:CategoryAxis dataProvider="{zingerManufacturingData}" categoryField="Month" />
       </mx:horizontalAxis>
   </mx:ColumnChart>

   Note: As with other Flex controls, the categoryField property is optional. You can assign an array of strings to the CategoryAxis object's dataProvider property instead and leave categoryField blank.

   Similarly, to map the height of each column to a numeric value in the dataProvider property, specify a LinearAxis object in the chart's verticalAxis property. You use a LinearAxis object when you want to map numeric values within a specific range. You can either explicitly specify the minimum and maximum values of the range or let the LinearAxis object determine them automatically from the data being rendered in the chart.

2. Add a LinearAxis object to the verticalAxis property inside the ColumnChart tag:

   <mx:ColumnChart ...>
       ...
       <mx:verticalAxis>
           <mx:LinearAxis />
       </mx:verticalAxis>
   </mx:ColumnChart>

   Note: The vertical and horizontal axis of all the standard chart types (except for the pie chart) default to LinearAxis objects. You don't have to declare them in your chart if you have no additional properties to specify.

3. Save your application and load it in the browser. Your chart should appear as shown in Figure 3.

   

   Figure 3. This is your column chart with a horizontal category axis

   Now your axes are all set to map the chart data properly. Next let's add a couple of series objects to specify which of the dataProvider fields to display.

Page 3 of 7

Previous Page

Next Page