Flex Test Drive: Add charts and graphs

Video | Code | Tutorial | Links

Add pie and column charts

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

Code

Tutorial

In the previous five modules, you learned to build, debug, deploy, style, and skin a Flex application. In this final module, you add and format charts.

In this tutorial, you first display department budget data in a pie chart. Then when a pie chart item is clicked, individual expenses for that department are displayed in a column chart.

Step 1: Create a new DepartmentChart state with a pie chart.

Base the chart on the Departments state. Add a PieChart from the Charts section of the Components view and name it deptPieCht (see Figure 1). Arrange it as shown in Figure 2.

Step 2: Specify the data for the chart.

In Source mode, bind the PieChart dataProvider to that for the DataGrid, deptDg.dataProvider. Set the PieSeries field to budget and its nameField to name. Remove the displayName property.

The field is the property of the objects in the dataProvider to chart. The nameField is the property of the objects in the dataProvider to display in the legend.

Your code should appear as shown here:

Step 3: Switch states when a button is clicked.

Add a button below the lower-right corner of the DataGrid. Give it an id of chartBtn, a label of Chart Data, and include it in the Departments and DepartmentChart states. Disable it in the DepartmentChart state. Generate a click handler for it. Make it the click handler for all states. Inside the handler, set the currentState to DepartmentChart. Make this button the action button instead of the Bigger Text ToggleButton.

Your handler should appear as shown here:

To make the Chart Data button the action button, move the styleName property from the Bigger Text ToggleButton to the tag for this button. Your Button tag should appear as shown here:

Run the application and click the Chart Data button. The budget data is displayed in the pie chart (see Figure 3). Mouse over the chart; nothing happens.

Step 4: Display chart labels and data tips.

Set the PieChart showDataTips property to true. Set the PieSeries labelField property to name and the labelPosition style to inside. Delete the legend, which is no longer needed.

The labelField is the property of the objects in the dataProvider to display on the PieChart. You have to set the labelPosition to inside, outside, callout, or insideWithCallout to specify where the labels should appear; the default value is none.

Your code should appear as shown here:

Run the application and click the Chart Data button in the Departments state. You should now see labels on the chart and when you mouse over a slice, you should see a data tip (see Figure 4).

Step 5: Create a new state, DepartmentDetails, with a column chart.

Base it on the DepartmentChart state. Add a ColumnChart from the Components view called deptColCht. Arrange it as shown in Figure 5.

Step 6: Switch states when a department slice is clicked in the pie chart.

Add an itemClick handler to the PieChart and inside the handler set the currentState to DepartmentDetails. Make it the handler for all states.

Your opening PieChart tag should appear as shown here:

Your handler should appear as shown here:

If you did not generate the event handler automatically, be sure to select ChartItemEvent from Code Assist so the appropriate import statement is written for you:

Run the application and click an item in the pie chart. You should see a column chart with no data displayed (see Figure 6).

Step 7: Create the ColumnChart dataProvider.

Inside the PieChart itemClick handler, set the ColumnChart dataProvider equal to the array of objects returned by the function below.

Copy and paste the following createDataProvider() function into your Script block. It creates an array of objects with properties called field, actual, and est for each of the items in a department's budget and expense data.

Call this function inside the PieChart itemClick handler and pass to it the selected item in the PieChart—which you get from the event object, event.hitData.item. Set the ColumnChart dataProvider equal to the array of objects returned by this function. Your code should appear as shown here:

Step 8: Specify the data to chart.

Set the ColumnSeries yField property to est and its displayName property to Estimated.

Your ColumnChart should appear as shown here:

Run the application. When you click an item in the pie chart, you should see details for that department in the column chart (see Figure 7).

Step 9: Specify axis types and titles.

Set the ColumnChart horizontalAxis property to an instance of the CategoryAxis class with a categoryField of field and a title of Expenses. Set the ColumnChart verticalAxis property to an instance of the LinearAxis class with a minimum of 0, a maximum of 500000, and a title of Amount.

Your ColumnChart should appear as shown here:

Run the application. You should see the names of the fields displayed on the horizontal axis and titles for both axes (see Figure 8).

Step 10: Add a second series and show data tips.

Add a second ColumnSeries tag to the ColumnChart series property and set its yField to actual and its displayName to Actual. Set the ColumnChart showDataTips property to true.

Your ColumnChart tag should appear as shown here:

Run the application. You should see two sets of data, a legend, and data tips when you mouse over the columns (see Figure 9).

Step 11: Display the selected department name in the axis title.

Assign the CategoryAxis an id of expenseAxis and inside the PieChart itemClick handler, set the title of this axis to the name of the selected item plus the string, Expenses.

Your CategoryAxis should appear as shown here:

Your handler should appear as shown here:

Run the application and select different items in the pie chart. You should see the horizontal axis title change (see Figure 10).

Step 12: Animate the data change.

In the Declarations block, create an instance of the SeriesInterpolate class called interpolate and set its duration property to 1000. To both of the ColumnSeries objects, add a new attribute called showDataEffect and set it equal to the interpolate object.

The duration property is set to a length of time in milliseconds. Your new declaration should appear as shown here:

Your ColumnSeries objects should appear as shown here:

Run the application and click different department slices in the pie chart. Instead of instantly changing size, the columns should now grow larger or smaller as the underlying data changes.

In this tutorial, you displayed data in pie and column charts. In the next tutorial, you customize the pie and column charts, setting colors and formatting titles, labels, and data tips.

Learn more

Documentation: Using Flex 4.5

• Introduction to charts
• Chart types
• Using pie charts
• Using column charts
• Using multiple data series
• Displaying data and labels in charts
• Events and effects in charts

ActionScript 3 Reference

• mx.charts
• mx.charts.effects