Flex Test Drive: Add charts and graphs

Video | Code | Tutorial | Links

Format charts

Download the Test Drive solution files (ZIP, 14 MB)

Code

FlexWebTestDrive.css

FlexWebTestDrive.mxml

Tutorial

In this tutorial, you customize the pie and column charts. You change fill, axis, and tick colors; rotate axis titles; format axis titles and labels; and format data tips.

Step 1: Set chart fill colors.

In FlexWebTestDrive.css, create a PieSeries type selector with the fills style set to a list of at least seven colors (#6B96D0, #5B7FB2,#81A4D0, #7EC2EA, #6B84A5, #686BD0, #6A8AD0). Create a class selector called grayFill with fill set to some color (#5B7FB2). In FlexWebTestDrive.mxml, set the styleName property of the Actual ColumnSeries to grayFill.

Your new selectors should appear as shown here:

Your ColumnSeries should appear as shown here:

Run the application and drill down into department data. You should see your new colors in the pie and column charts (see Figure 1). You will set the color of the first column series to match the color of the selected item in the pie chart next.

Step 2: Set a column fill color dynamically.

Assign the first ColumnSeries an id of estSeries and in the deptPieCht itemClick handler, use setStyle() to set the fill style to the color of the selected pie chart item: (event.hitData.chartItem as PieSeriesItem).fill.

Your ColumnSeries should appear as shown here:

Your handler should appear as shown here:

Be sure to select PieSeriesItem from Code Assist so the appropriate import statement is written for you:

Run the application. When you select a department in the pie chart, the first series in the column chart is now the same color (see Figure 2). Look at the position of the vertical axis title; you will flip this in the next step.

Step 3: Rotate the axis title.

Set the LinearAxis id to amountAxis and set the ColumnChart verticalAxisRenderers property to an instance of the AxisRenderer class. For the AxisRenderer, set the verticalAxisTitleAlignment style to vertical and the axis property to amountAxis.

Your code should appear as shown here:

Run the application. The vertical axis title should now be rotated (see Figure 3).

Step 4: Make the axis titles bold.

In FlexWebTestDrive.css, create a ColumnChart type selector and set axisTitleStyleName to a class selector called boldTitles. Create the class selector called boldTitles and set its fontWeight to bold.

Your selectors should appear as shown here:

Run the application. The axis titles should now be bold (see Figure 4).

Step 5: Set axis and tick colors.

In the Declarations block, create a SolidColorStroke object called dkgrayStrokeThick and set its color (#4D4D4D) and its weight (5). Create a second SolidColorStroke object called dkGrayStrokeThin and set its color (#4D4D4D) and its weight (1). In the ColumnChart verticalAxisRenderer, set axisStroke and tickStroke to the dkgrayStrokeThick and dkgrayStrokeThin objects. Set the horizontalAxisRenderers property to an instance of the AxisRenderer class and set its axis to expenseAxis and its stroke styles the same as the other renderer.

Your declarations should appear as shown here:

Your axis renderers should appear as shown here:

Run the application. The axes and ticks should now be dark gray (see Figure 5).

Step 6: Format axis labels as currencies.

In the Declarations block, create a Spark CurrencyFormatter called moneyFormatter and set its properties to format in your currency. In the LinearAxis tag, set its labelFunction to axisMoneyFormatter. In the Script block, include the formatter function shown below.

Here is an example of currency displayed in US dollars with no decimal places:

Your LinearAxis should appear as shown here:

Here is the formatter function to place in your Script block:

This function is called by the chart component for every label on the vertical axis. Its method signature (its arguments and return type) are defined by the component using it. You can look up the method's required signature in the API for the LinearAxis class.

Run the application. The vertical axis labels should now be formatted as currencies (see Figure 6).

Step 7: Format data tips.

Set the PieChart dataTipFunction to formatDeptPieTips. In the Script block, include the formatter function shown below.

Your PieChart opening tag should appear as shown here:

Here is the formatter function to place in your Script block:

This function is called by the chart component before displaying every data tip. Just as for the labelFunction in the last step, its method signature is defined by the component using it, the PieChart, and you can look it up in the API for the PieChart class. Notice you can use basic HTML formatting in this function.

Run the application. The pie chart data tips should now be formatted to display currency amounts (see Figure 7).

In this module you learned to add charts to your Flex application. You used a pie chart and a column chart and accomplished all the common customization tasks including drilling down into data; animating data changes; and formatting fills, axes, titles, labels, and data tips. 

This concludes your Test Drive of Flash Builder 4.5. In less than a day, you learned to build a Flex application that retrieves, displays, updates, adds, and deletes data in a database and you learned to debug, deploy, customize, and add charts to this application (see Figure 8). To build on your knowledge, continue on to the Flex in a Week training.

Learn more

Documentation: Using Flex 4.5

• Formatting charts
• Displaying data and labels in charts
• Using data tip objects
• Spark formatters

ActionScript 3 Reference

• mx.charts
• mx.charts.effects
• spark.formatters