by Adobe
adobe_logo

Modified

28 June 2011

 
 

Add pie and column charts

 

 

 

Code

<s:Application ...> <fx:Script> <![CDATA[ (...) import mx.charts.events.ChartItemEvent; protected function chartBtn_clickHandler(event:MouseEvent):void { currentState="DepartmentChart"; } protected function deptPieCht_itemClickHandler(event:ChartItemEvent):void { currentState="DepartmentDetails"; deptColCht.dataProvider=createDataProvider(event.hitData.item); expenseAxis.title=event.hitData.item.name+" Expenses"; } protected function createDataProvider(item:Object):Array{ var dp:Array= [{field:'salaries',actual:item.actualsalary,est:item.estsalary}, {field:'travel',actual:item.actualtravel,est:item.esttravel}, {field:'supplies',actual:item.actualsupplies,est:item.estsupplies}, {field:'contractors',actual:item.actualcontractors,est:item.estcontractors}]; return dp; } ]]> </fx:Script> <fx:Declarations> (...) <mx:SeriesInterpolate id="interpolate" duration="1000"/> </fx:Declarations> (...) <mx:PieChart id="deptPieCht" includeIn="DepartmentDetails,DepartmentChart" x="50" y="250" width="282" height="282" dataProvider="{deptDg.dataProvider}" showDataTips="true" itemClick="deptPieCht_itemClickHandler(event)"> <mx:series> <mx:PieSeries field="budget" nameField="name" labelField="name" labelPosition="inside"/> </mx:series> </mx:PieChart> <s:Button id="chartBtn" x="580" y="217" includeIn="DepartmentDetails,Departments,DepartmentChart" label="Chart Data" click="chartBtn_clickHandler(event)" styleName="actionButton" enabled.DepartmentChart="false" enabled.DepartmentDetails="false"/> <mx:ColumnChart id="deptColCht" includeIn="DepartmentDetails" x="337" y="254" width="363" height="278" showDataTips="true"> <mx:series> <mx:ColumnSeries displayName="Estimated" yField="est" showDataEffect="{interpolate}"/> <mx:ColumnSeries displayName="Actual" yField="actual" showDataEffect="{interpolate}"/> </mx:series> <mx:horizontalAxis> <mx:CategoryAxis id="expenseAxis" title="Expenses" categoryField="field"/> </mx:horizontalAxis> <mx:verticalAxis> <mx:LinearAxis title="Amount" minimum="0" maximum="500000"/> </mx:verticalAxis> </mx:ColumnChart> <mx:Legend includeIn="DepartmentDetails" x="580" y="290" dataProvider="{deptColCht}"/> </s:Application>
 

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.
Add a PieChart component.
Figure 1. Add a PieChart component.
Lay out the DepartmentChart state as shown in this figure.
Figure 2. Lay out the DepartmentChart state as shown in this figure.

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:
<mx:PieChart id="deptPieCht" includeIn="DepartmentChart" x="50" y="250" width="282" height="282" dataProvider="{deptDg.dataProvider}"> <mx:series> <mx:PieSeries field="budget" nameField="name"/> </mx:series> </mx:PieChart> <mx:Legend includeIn="DepartmentChart" dataProvider="{deptPieCht}" x="339" y="252"/>

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:
protected function chartBtn_clickHandler(event:MouseEvent):void { currentState="DepartmentChart"; }
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:
<s:Button id="chartBtn" includeIn="DepartmentChart,Departments" x="580" y="217" label="Chart Data" styleName="actionButton" click="chartBtn_clickHandler(event)" enabled.DepartmentChart="false" />

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.

 

View the department budget data in a pie chart.
Figure 3. View the department budget data in a pie chart.

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:
<mx:PieChart id="deptPieCht" includeIn="DepartmentChart" x="50" y="250" width="282" height="282" dataProvider="{deptDg.dataProvider}" showDataTips="true"> <mx:series> <mx:PieSeries field="budget" nameField="name" labelField="name" labelPosition="inside"/> </mx:series> </mx:PieChart>
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).
Add labels and data tips to the pie chart.
Figure 4. Add labels and data tips to the pie chart.

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.
 Lay out the DepartmentDetails state as shown in this figure.
Figure 5. Lay out the DepartmentDetails state as shown in this figure.

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:

<mx:PieChart id="deptPieCht" includeIn="DepartmentChart,DepartmentDetails" x="50" y="250" width="282" height="282" dataProvider="{deptDg.dataProvider}" showDataTips="true" itemClick="deptPieCht_itemClickHandler(event)">

Your handler should appear as shown here:

protected function deptPieCht_itemClickHandler(event:ChartItemEvent):void { currentState="DepartmentDetails"; }

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:

import mx.charts.events.ChartItemEvent;

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

Display a column chart when a pie slice is clicked.

Figure 6. Display a column chart when a pie slice is clicked.

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.

protected function createDataProvider(item:Object):Array{ var dp:Array= [{field:'salaries',actual:item.actualsalary,est:item.estsalary}, {field:'travel',actual:item.actualtravel,est:item.esttravel}, {field:'supplies',actual:item.actualsupplies,est:item.estsupplies}, {field:'contractors',actual:item.actualcontractors, est:item.estcontractors}]; return dp; }

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:

protected function deptPieCht_itemClickHandler(event:ChartItemEvent):void { currentState="DepartmentDetails"; deptColCht.dataProvider=createDataProvider(event.hitData.item); }

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:

<mx:ColumnChart id="deptColCht" includeIn="DepartmentDetails" x="337" y="254" height="278" width="363"> <mx:series> <mx:ColumnSeries displayName="Estimated" yField="est"/> </mx:series> </mx:ColumnChart> <mx:Legend includeIn="DepartmentDetails" dataProvider="{deptColCht}" x="580" y="290"/>

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).

View department expense data in a column chart.

Figure 7. View department expense data in a column chart.

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:

<mx:ColumnChart id="deptColCht" includeIn="DepartmentDetails" x="337" y="254" height="278" width="363"> <mx:horizontalAxis> <mx:CategoryAxis title="Expenses" categoryField="field"/> </mx:horizontalAxis> <mx:verticalAxis> <mx:LinearAxis title="Amount" minimum="0" maximum="500000"/> </mx:verticalAxis> <mx:series> <mx:ColumnSeries displayName="Estimated" yField="est"/> </mx:series> </mx:ColumnChart>

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

 

Specify axis types and titles.

Figure 8. Specify axis types and titles.

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:

<mx:ColumnChart id="deptColCht" includeIn="DepartmentDetails" x="337" y="254" height="278" width="363" showDataTips="true"> <mx:horizontalAxis> <mx:CategoryAxis title="Expenses" categoryField="field"/> </mx:horizontalAxis> <mx:verticalAxis> <mx:LinearAxis title="Amount" minimum="0" maximum="1000000"/> </mx:verticalAxis> <mx:series> <mx:ColumnSeries displayName="Estimated" yField="est"/> <mx:ColumnSeries displayName="Actual" yField="actual"/> </mx:series> </mx:ColumnChart>

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

Add a second data series and data tips.

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:

<mx:CategoryAxis id="expenseAxis" title="Expenses" categoryField="field"/>

Your handler should appear as shown here:

protected function deptPieCht_itemClickHandler(event:ChartItemEvent):void { currentState="DepartmentDetails"; deptColCht.dataProvider=createDataProvider(event.hitData.item); expenseAxis.title=event.hitData.item.name+" Expenses"; }

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

Display the selected department name in the axis title.

Figure 10. Display the selected department name in the axis title.

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:

<fx:Declarations> (...) <mx:SeriesInterpolate id="interpolate" duration="1000"/> </fx:Declarations>

Your ColumnSeries objects should appear as shown here:

<mx:ColumnSeries displayName="Estimated" yField="est" showDataEffect="{interpolate}"/> <mx:ColumnSeries displayName="Actual" yField="actual" showDataEffect="{interpolate}"/>

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

 

ActionScript 3 Reference

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.