Using pictures to convey information is as old as man. We first used cave drawings to get a point across. The old saying "a picture is worth a thousand words" is never truer when it comes to looking at spreadsheet data. Perhaps cave art was primitive man's way to consolidate a lot of information.

Flex has its own way of drawing pictures - Chart controls. Since Flex is based on Flash, you can expect a lot from the graphics package built into Flex. The Flex Chart controls not only draw your standard business graphics, they can be animated to drive home the point.

In this article I'll introduce you to the Chart controls and show you how to make a simple chart and animate it to add another dimension to the information the chart already displays.

As you know, looking at a column of numbers in a spreadsheet is tedious. Charts help to decipher the information in meaningful ways. But what happens if the data isn't just last quarter's sales, but last year's sales, month by month? To see any significant changes in the figures you could either flip between charts or digest those numbers into a single chart and show trend lines or regression fits: something to indicate what's been happening to your sales.

Another way to look at the data is to animate it and control the animation. Your chart begins with January and morphs into February, then into March. You can watch as the numbers show the sales of Widgets dropping as Cogs rise. You can even stop the animation and go back and see it over and over again.

This kind of animation is easy to do with Flex. First you need your data. For this article, I'm going to keep it simple because of space constraints, but you should get the picture (no pun intended).

Our sales figures for January are shown in Table 1.

This data set has one row for each sale item: widgets and cogs. Each column represents a region.

A bar chart is used to show the figures. The time is advanced by telling the chart to use a different data set from moment to moment. This is similar to what a real-life application would do: a query would be made to a server to fetch the sales figures by region for a particular month. The data from the server would be bound to the chart.

Figure 1 shows the application. You can't see the animation in print, but just imagine the bars sliding gracefully up and down as the date advances along the slider below the chart.

Building the Chart
This kind of chart is easy to do in Flex using the <mx:ColumnChart> tag. You define the chart and each series. In this case there are three series: one for each region. The series is told which fields from the data set to graph.

<mx:ColumnChart id="salesChart" showDataTips="true" dataProvider="{zero_data}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="product" dataProvider="{zero_data}" />
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis maximum="3600" minimum="0" name="Sales" />
</mx:verticalAxis>
<mx:series>
<mx:Array>
<mx:ColumnSeries name="Northeast" yField="northeast" showDataEffect="morph" />
<mx:ColumnSeries name="Mid-west" yField="midwest" showDataEffect="morph" />
<mx:ColumnSeries name="Southeast" yField="southeast" showDataEffect="morph" />
</mx:Array>
</mx:series>
</mx:ColumnChart>

The ColumnChart tag provides the space for a chart as a series of columns (Flex also has a BarChart if you want horizontal bars). Since the data being charted doesn't contain any X co-ordinates, you can use a CategoryAxis to divide up the horizontal elements. In this case, those elements are the products widgets and cogs so the categoryField is set to the column name product.

Flex automatically calculates the minimum and maximum values for the vertical axis from the data. Because the chart is going to display many sets of data, the chart's axis range might change, which would look odd. To prevent that, a vertical axis is specified with specific minimum and maximum values.

Finally the ColumnSeries is defined for each region. You can see how the yField attribute relates to the data. The name field is used as a label. The showDataEffect attribute names the special effect to use when the data changes.

Effects
The animation is also easy since Flex comes with several effects specifically for charts. For this example I chose the SeriesInterpolate, which allows for a smooth transition as the data changes.

<mx:Effect>
    <mx:SeriesInterpolate name="morph" />
   </mx:Effect>

That is, if the value of Widgets in the Northeast for March was 2400 and then changes to 2500, the SeriesInterpolate effect would gradually increase the height of the bar from the 2400 mark to the 2500 mark.

You can see how easy it is to specify animation for the chart. The effect's name (morph) is used as the value of the showDataEffect on each series.

You can also control aspects of the effect such as how long the effect should last and how much the graphic should change.

Animating the Chart
Some of the data for the chart is shown in Listing 1. For the sake of this demonstration, I have coded the data in ActionScript in a <mx:Script> block. But just imagine that this data is available on a server.

You would call these ActionScript statements from within a function that would be invoked when you retrieved data from the server.