Animated Chart Series
I first saw this effect at MAX 2004 in New Orleans, LA. Ely (Flex Engineer) was on stage demonstrating some of the Flex 1.5 charting features, and he had a number of the charts animate from one data set to the next. It was amazingly smooth looking and worked for all the charts. It’s not been until recently that I’ve come across the effect again, and just had to investigate further. Here’s the tip for all you Flex developers out there - animating charts between data sets.
As it turns out, this effect is actually pretty easy to accomplish. The charts can take effects, and some of the effects have been designed specifically with the charts in mind. The main one that I was interested in was the SeriesInterpolate effect which (as described) animates the chart from one data set to another. There’s an example of this effect in action recorded in the Captivate demonstration at the bottom of this post.
The first thing you need is a chart and some data.
The chart should be pretty self-explanatory (refer the the Flex Explorer if you get stuck), and I’ve included a simple Java object that can provide randomly generated data points. This keeps the chart changing its values without having to refer to any real data on the server - perfect for a demonstration. The Java object can also take an argument telling it just how many data points to generate.
Now that we have the chart and some data, we need to add an effect. This effect just like any other declarative effect is called out in an Effect block. Once we’ve defined that, all we need to do is tell the respective chart series that we want them to use the effect whenever the chart goes to show data. The two code blocks that apply to get this effect going are as follows.
<!– The effect block –>
<mx:Effect>
<mx:SeriesInterpolate duration=”500″ elementOffset=”5″ name=”transition” />
</mx:Effect>
<!– The chart series definition –>
<mx:series>
<mx:Array>
<mx:ColumnSeries yField=”vertical” xField=”horizontal” showDataEffect=”transition” />
</mx:Array>
</mx:series>
In the provided source code I’ve defaulted to twelve values, and a maximum data point of 100. I originally designed the example with stock tracking in mind, which might explain the nature of my source code if you get into over analyzing it. To deploy the example, unpack the sole MXML and CSS files into a Flex directory, and the CLASS files into {Flex root}\WEB-INF\classes.