Adding Horizontal and Vertical Axes to Line and Column Charts


After data has been provided to the charts, you can refine how the axis labels are rendered by using the <mx:horizontalAxis> and <mx:verticalAxis> tags. These tags can be used to specify valid ranges for the chart and also to map the data on the chart.

There are four supported Axis types in Flex:

  • CategoryAxis Maps a particular property of the objects in the chart to the axis. For example, a chart showing the total enrollment of a school based on the students' demographics could use a CategoryAxis to map the students' race property to the horizontal axis.

  • LinearAxis Maps numeric data to the points on an axis. This can allow for easily specifying valid numeric ranges, numbers to skip, and so on.

  • LogAxis Maps logarithmic data to an axis. To facilitate this, the Log axis has labels for each power of 10 (1, 10, 100, 1000, and so on).

  • DateTimeAxis Maps time-based values to an axis. This can also be used to set the format for the labels.

Flex assumes that any axis not specifically defined is mapping a numeric field to the axis. This is why, in the previous exercise, the horizontal axis was showing the index number of the item instead of the date.

1.

Open SalesChart.mxml from your flexGrocer/views/dashboard directory.

Alternately, you can open SalesChart_labels.mxml from the intermediate directory and save it as SalesChart.mxml in your flexGrocer/views/dashboard directory.

2.

Add an <mx:horizontalAxis> tag pair inside the <mx:LineChart> tag. Within the <mx:HorizontalAxis> tags, add an <mx:CategoryAxis> with the categoryField attribute set to DTSALE.

<mx:LineChart    dataProvider="{dp}"   height="100%" width="100%">   <mx:horizontalAxis>     <mx:CategoryAxis categoryField="DTSALE"/>   </mx:horizontalAxis>   <mx:series>     <mx:LineSeries yField="{grossOrNet}">     </mx:LineSeries>   </mx:series> </mx:LineChart> 


You are now telling the chart what data to plot along the horizontal axis. By specifying a CategoryAxis with a categoryField of DTSALE, you are mapping the DTSALE property across the x-axis. It would also be possible to use a DateTimeAxis instead of a CategoryAxis; if you had a situation in which you had more day data than you wanted to graph, you could use DataTimeAxis and specify a start and end date. In this case, you want to graph any data returned by the server, so a CategoryAxis is more appropriate.

3.

Save SalesChart.mxml and run the application.

The dates are now showing across the bottom of the chart. Notice that it is showing too many to effectively read the labels. If you change the dates in the ApplicationControlBar (at the top of the Dashboard application) to limit the search to only one week's worth of data, you can more clearly see that part of the problem is that the labels are too long and not particularly user-friendly.

4.

In the <mx:Script> block, add a function called renderDate(), which will format the labels on the horizontal axis as dates.

[View full width]

private function renderDate(value:Object, previousValue:Object, axis:CategoryAxis, item :Object):String{ return mmddyyyy.format(value); }


A label function for a CategoryAxis is automatically passed four arguments:

  • value the value of the property for the object being rendered. In this case, that value is the DTSALE property, which contains the date.

  • previousValue the value of the property for the previous column.

  • axis a reference to the axis.

  • item the whole data object.

In your case, all you need to do is return the formatted version of the date as a String. You can use the DateFormatter named mmddyyyy, which is already present in this file.

If you use the code completion feature, the import for CategoryAxis will automatically be added; otherwise, you will need to explicitly add it:

import mx.charts.CategoryAxis; 


5.

Specify renderDate as the labelFunction for the CategoryAxis.

<mx:CategoryAxis categoryField="DTSALE" labelFunction="renderDate" /> 


This tells the axis to use the renderDate() function when creating labels.

6.

Save SalesChart.mxml and run the application.

You can now see the dates rendered properly. There are still too many dates shown at once; you will fix that soon, when you learn about AxisRenderers. This file should resemble SalesChart_labelFunction.mxml in the intermediate directory.

7.

Open ComparisonChart.mxml from your flexGrocer/views/dashboard directory.

Alternately, you can open ComparisonChart_labels.mxml from the intermediate directory and save it as ComparisonChart.mxml in your flexGrocer/views/dashboard directory.

8.

Add an <mx:horizontalAxis> tag pair inside the <mx:ColumnChart> tag. Within the <mx:horizontalAxis> tags, add an <mx:CategoryAxis> with the categoryField attribute set to DTSALE.

<mx:ColumnChart    dataProvider="{dp}"   width="100%" height="100%">   <mx:horizontalAxis>     <mx:CategoryAxis categoryField="DTSALE" />   </mx:horizontalAxis>   ... </mx:ColumnChart> 


Just like the line chart, the column chart will use DTSALE as its field on the horizontal axis. You already discovered the need for a label function, so next you will add a label function for the horizontal axis.

9.

In the <mx:Script> block, add a function called renderDate(), which will format the labels on the horizontal axis as dates.

[View full width]

private function renderDate(value:Object, previousValue:Object, axis:CategoryAxis, item :Object):String{ return mmddyyyy.format(value); }


Just like the line chart, you are using this function to format DTSALE as a date. If you use the code completion feature, the import for CategoryAxis will automatically be added; otherwise, you will need to explicitly add it.

10.

Specify renderDate as the labelFunction for the CategoryAxis.

<mx:CategoryAxis categoryField="DTSALE"   labelFunction="renderDate"/> 


This tells the axis to use the renderDate() function when creating labels.

11.

Save ComparisonChart.mxml and run the application.

The comparison chart now shows the dates correctly. Next, you will add a labelFunction for the vertical axis as well.

12.

Just after the </mx:horizontalAxis> tag, add an <mx:verticalAxis> tag pair. Inside the vertical axis pair, add an <mx:LinearAxis> tag, to specify a labelFunction called renderDollars.

<mx:horizontalAxis>   <mx:CategoryAxis dataProvider="{dp}"   categoryField="DTSALE" labelFunction="renderDate"/> </mx:horizontalAxis> <mx:verticalAxis>   <mx:LinearAxis labelFunction="renderDollars"/> </mx:verticalAxis> 


A LinearAxis will work fine for the vertical column because the values are all numeric. In the next step, you will create the renderDollars() function.

13.

In the <mx:Script> block, create a function called renderDollars(), which accepts three arguments: value, previousValue and Axis.

private function renderDollars(value:Number, previousValue:Number, axis:LinearAxis):String{   return dollars.format(value); } 


The labelFunction for a LinearAxis is automatically passed thee arguments: the value, the previous value, and a reference to the axis. If you use the code completion feature, the import for LinearAxis will automatically be added; otherwise, you will need to explicitly add it.

14.

Save ComparisonChart.mxml and run the application.

The comparison chart now shows the dates and dollars correctly. The current file should resemble ComparisonChart_labelFunctions.mxml in the intermediate directory.




Adobe Flex 2.Training from the Source
Adobe Flex 2: Training from the Source
ISBN: 032142316X
EAN: 2147483647
Year: 2006
Pages: 225

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net