So you wanna build a Flex application - Part 6 - Tables Bar Charts and Pie Charts

Posted By : Dan Wilson January 28, 2008 8:09 AM

To date, in our series on Surfing Stats, we have covered the intent, directory structure, data sets, main application file, ChartToggle component, states, implicit getters/setters, navigational elements and ViewStacks. (download the code using the download link at the bottom of the the Intro to Surfing Stats post). In this series, we'll discuss the 3 display components, TableView, BarChart and PieChart.

Table View component

By far the simplest component in our application, TableView.mxml is essentially a DataGrid with a VBox wrapper. This component receives the bound selectedDatasetAC property, keeping the contents of the DataGrid in sync when a different tab is chosen by the user. When we declare the tag in ChartToggle.mxml the height and the width are passed in as follows:

view plain print about

1<c:TableView width="575" height="450" id="tableView" selectedDatasetAC="{selectedDatasetAC}" />

The column designated by DGColumnCategory calculates its own width partially based on the value passed into the tag instantiation. We've also made a few other customizations for visual appeal like background transparency, specifying nice labels for each column and other minor points.

view plain print about

1<?xml version="1.0" encoding="utf-8"?>
2<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle">
3 <mx:Script>
4 <![CDATA[
5 import mx.collections.ArrayCollection;
6 [Bindable] public var selectedDatasetAC:ArrayCollection;
7 ]]>
8 </mx:Script>
9
10 <mx:DataGrid id="dgDisplayData" dataProvider="{selectedDatasetAC}" rowCount="12" backgroundAlpha=".5">
11 <mx:columns>
12 <mx:DataGridColumn id="DGColumnCategory" width="{this.width-120}" dataField="category" headerText="Category"/>
13 <mx:DataGridColumn id="DGColumnAmount" width="100" dataField="amount" headerText="Amount" />
14 </mx:columns>
15 </mx:DataGrid>
16</mx:VBox>

Pie Chart

PieChart.mxml contains a Pie Chart declaration. The bound selectedDatasetAC is passed to the component in the tag declaration in ChartToggle.mxml. While there is a little more code in PieChart.mxml when compared with TableView.mxml, the PieChart.mxml is very simple.

If you recall, we defined a SeriesSlide effect in ChartToggle.mxml. We pass in a reference to the effect in this tag declaration:

view plain print about

1<c:PieChart width="575" height="450" id="pieChart" selectedDatasetAC="{selectedDatasetAC}" showDataEffect="{eff}" />

Each time the ShowData event is thrown, the SeriesSlide effect will be used to provide a nice visual animation. There are many other useful and fun effects that could have been used. Explore the Flex documentation for more examples of effects and charts in Flex.

Our chart also has a function used to render the labels. In our case, some of the datasets (Commented Entries for example) have large strings of text. This text does not look good when shown on one line. Our doLabel function merely adds new lines in between words when the lines get too long. Here is the function:

view plain print about

1private function doLabel(...args):String{
2 var t:Array = args[0].category.split(" ");
3 var l:int = 0;
4 for( var i:int = 0; i < t.length; i++){
5 l+=t[i].length;
6 if( l > 25 ){
7 t[i] += '\n';
8 l=0;
9 }
10 }
11 return t.join(" ");
12}

The PieChart uses the selectedDatasetAC as a dataProvider. The field property of the PieSeries identifies the member of the ArrayCollection containing our numeric values and the nameField property identifies the string labels.

view plain print about

1<mx:PieSeries fontSize="14" field="amount" nameField="category" labelPosition="inside" showDataEffect="{showDataEffect}" labelFunction="doLabel" />

Bar Chart

BarChart.mxml follows along similar lines as PieChart.mxml. We pass in the bound selectedDatasetAC and also a reference to the SeriesSlide effect.

view plain print about

1<c:BarChart width="575" height="450" id="barChart" selectedDatasetAC="{selectedDatasetAC}" showDataEffect="{eff}" hideDataEffect="{eff}" />

As you can see from the above declaration, we also use the same effect for the showDataEffect as for the hideDataEffect. We could pass a different effect here if we wished, but I chose to use the same one for consistancy.

Our Bar Chart faces the same challenges with the oversize strings present in the Commented Entries dataset. We have the same doLabel function present in BarChart.mxml as is used in PieChart.mxml.

As an added customization, we used a custom itemRenderer in the BarSeries declaration. Implementing this itemRenderer shows one point of extention and customization. In this case, we are using specific colors for each bar, though as always, the limit is your imagination.

view plain print about

1<mx:BarSeries itemRenderer="components.PerColumnFill" showDataEffect="{showDataEffect}" hideDataEffect="{hideDataEffect}" yField="category" xField="amount" displayName="Totals"/>

In the BarSeries tag above, the xField identifies the member of the selectedDatasetAC containing the values that will be shown on the x Axis (numeric values). The yField identifies the member of the selectedDatasetAC containing the string labels, which will be shown on the Y Axis.

Closing Thoughts

These three custom layout components provide the visual data representation in our application. Each uses the same dataset, with the same labels and values, but uses a different mode of display. There are many different kinds of available Chart types in Flex 2. If you finish this series and want to work with more Flex charts, I recommend the charting section maintained by Ely Greenfield at Quietly Scheming. Ely has forgotten more about Flex than I will ever know.

Parting Words

Thank you for continuing this series until the end. I trust you have learned some interesting things about Flex programming and that this has helped you in some way. I have made every effort to clarify the SurfingStats application and functionality. Keep in mind, SurfingStats was designed to serve as an application that can be quickly build by n00b Flex programmers in a very short time. Care was taken to include many different features of the Flex framework. Care was not taken to show Enterprise Level Flex development, Best Practices nor even to fix all the bugs in the application. Use this as a learning tool, not a production quality application. :)

If there are sections or topics I have glossed over, or not explained at all, please leave a comment and let me know. If you would like to contact me directly, you can do so using my contact form.

As always, the latest code can be found using the download link at the bottom of the the Intro to Surfing Stats post)