The following example shows how you can animate a pie chart using the showDataEffect effect and SeriesInterpolate class.
Full code after the jump.
For more information on setting up charting in an Adobe Flex 3 Beta 1 project, see “Charting in Flex Builder 3 (public beta 1 edition)“.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/24/animating-data-changes-in-a-flex-pie-chart/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="initDP();">
<mx:Script>
<![CDATA[
private const MAX_ITEMS:uint = 10;
private function initDP():void {
var i:uint;
dp = [];
for (i = 0; i < MAX_ITEMS; i++) {
dp.push({data:getRandomUint(100), label:"item " + i});
}
}
private function getRandomUint(max:uint):uint {
return Math.round(Math.random() * max);
}
]]>
</mx:Script>
<mx:Array id="dp" />
<mx:ApplicationControlBar dock="true">
<mx:Button label="Change Data"
click="initDP();" />
</mx:ApplicationControlBar>
<mx:PieChart id="chart"
height="100%"
width="100%"
dataProvider="{dp}">
<mx:series>
<mx:PieSeries field="data">
<mx:showDataEffect>
<mx:SeriesInterpolate duration="1000" />
</mx:showDataEffect>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
</mx:Application>
View source is enabled in the following example.
Hi,
I have been reading your blog for quite some time and let me tell you it is absolutely fantastic. I have been working with flex for quite a some time now but havent explored so many minor things that you work on.
Your examples are simple yet useful to all.
Keep the good work up.
On initial load of this page, the pie chart seems to build itself in a counter-clockwise fashion, how is this effect accomplished? I cannot seem to duplicate it.
Thanks!
Scott,
I believe it is because of the
showDataEffectandSeriesInterpolateon the PieSeries (although I really only tested this in Flex 3):<mx:PieChart id="chart" height="100%" width="100%" dataProvider="{dp}"> <mx:series> <mx:PieSeries field="data"> <mx:showDataEffect> <mx:SeriesInterpolate duration="1000" /> </mx:showDataEffect> </mx:PieSeries> </mx:series> </mx:PieChart>Peter
Hi,
First of all thank you a lot for this example, but I would like to know how to specify colors depending on the value? for example if I have number 5 I would like color the area representing this number with red.
thank you again :).
Thank you I’ve found the response of my question, now what I try to do is the interpolation but in actionscript. this is what I did:
var sI:SeriesInterpolate = new SeriesInterpolate(); sI.duration=1000; pieSeries.setStyle("showDataEffect",sI);But it doesn’t change anything. I guess that I miss something but I don’t know what exactly!
Help please :)