Flex Examples
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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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 :)
Hello,
Is the above example of action script working fine?
I am also facing the same problem.
Please help.
Hello
mx script after the
after
Hi,
How is it possible that the chart reacts to data changes to an array? I thought that data binding to an array is not possible and that you would have to use an ArrayCollection (for example).
Thanks,
Eugene
I have used ArrayCollection as data provider for pie chart. Still interpolation through action script is not working.
Thanks,
sai
I am working with LieChart with LineSeries. I have data coming from webservice and I want to show only the 30 latest values. So in the dataproveider I am deleting the oldest value and pusing the new value with SeriesInterpolate effect of duration being the time arrival of two successive values from the webservice. Now for soem reason flex interpolates all the values again when I do that and there is a noticeable ups and downs going on in the grpah. What I would rather like to do is only to interplate betwen wo latest values and shift left the rest of the graph. I have been trying for quite a while to see how the values are interpolated in the LineSeries.as class but could not get anywhere.
I know the post is very old but if you or anyone else come across this problem with a slight direction on how to approach, it would be very helpful.
There is an initializeInterpolationData function in Series.as but I am not sure how would I go about using it.