Adding Animations to the Charts

The customizations that can be applied to the charts in Flex are nearly limitless. Among the myriad of customizations you can make include the ability to have data animate into the chart or to apply colors, gradients, and so on to the elements of a chart.

There are three types of built-in animations that can be easily applied to charts. They are all built as subclasses of the mx.charts.effects.SeriesEffect class. These classes can be used with a series showDataEffect or hideDataEffect attribute. The classes are the following:

  • SeriesInterpolate The SeriesInterpolate effect moves the graphics that represent the existing data in a series to the new points. Instead of clearing the chart and then repopulating it, it creates a nice smooth animation between the original data points and the new ones. You use the SeriesInterpolate effect only with a showDataEffect effect trigger. It has no effect if set with a hideDataEffect.

  • SeriesSlide The SeriesSlide effect slides a data series into and out of the chart's boundaries. The direction property specifies the location from which the series slides. If you use SeriesSlide with a hideDataEffect effect trigger, the series slides from the current position onscreen to a position off the screen in the indicated direction. If you use SeriesSlide as a showDataEffect, the series slides from offscreen to a position onto the screen, in the indicated direction.

  • SeriesZoom The SeriesZoom effect implodes and explodes chart data into and out of the focal point that you specify. As with the SeriesSlide effect, whether the effect is zooming to or from this point depends on whether it is assigned to the showDataEffect or hideDataEffect effect triggers.


Open TypeChart.mxml from your flexGrocer/views/dashboard directory.

Alternately, you can open TypeChart_events.mxml from the intermediate directory and save it as TypeChart.mxml in your flexGrocer/views/dashboard directory.


Right before the <mx:ViewStack> tag, add an <mx:SeriesInterpolate> tag with an id attribute of interpolate and an elementOffset of 5.

<mx:SeriesInterpolate  elementOffset="5"/> 

The elementOffset attribute specifies a number of milliseconds to delay before starting the effect.


Find the <mx:PieSeries> tag and add an attribute showDataEffect="interpolate".

<mx:PieSeries field="{grossOrNet}"    labelPosition="insideWithCallout"    labelFunction="renderLabel"    showDataEffect="interpolate"> 

This attribute instructs the series to animate the data when it is added to the chart.


Save and run the application.

Notice the effects as data is rendered in the pie chart or any time the data changes. The completed file should closely resemble TypeChart_interpolate.mxml in the intermediate directory.

Adobe Flex 2.Training from the Source
Adobe Flex 2: Training from the Source
ISBN: 032142316X
EAN: 2147483647
Year: 2006
Pages: 225 © 2008-2017.
If you may any questions please contact us: