Flex Examples
In a previous example, “Rotating a Flex PieChart control when a user clicks on an item”, we looked at changing a PieChart’s rotation when the user clicked on a pie wedge. In the following example, we look at how to add a nice animation effect with some easing to make the effect a bit more smooth.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/22/animating-a-flex-piechart-controls-rotation-when-a-user-clicks-on-an-item/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.effects.easing.*;
import mx.charts.series.items.PieSeriesItem;
import mx.charts.events.ChartItemEvent;
private function pieChart_itemClick(evt:ChartItemEvent):void {
var item:PieSeriesItem = evt.hitData.chartItem as PieSeriesItem;
var degrees:Number = radiansToDegrees(item.startAngle);
var arr:Array = [];
if (checkBox.selected) {
arr[item.index] = 0.2;
}
pieSeries.perWedgeExplodeRadius = arr;
pieSeries.startAngle -= degrees;
dp.refresh();
}
private function radiansToDegrees(radians:Number):Number {
return radians * (180 / Math.PI);
}
]]>
</mx:Script>
<mx:XMLListCollection id="dp">
<mx:source>
<mx:XMLList>
<product label="Product 1" data="3" />
<product label="Product 2" data="1" />
<product label="Product 3" data="4" />
<product label="Product 4" data="1" />
<product label="Product 5" data="5" />
<product label="Product 6" data="9" />
</mx:XMLList>
</mx:source>
</mx:XMLListCollection>
<mx:ApplicationControlBar dock="true">
<mx:CheckBox id="checkBox"
label="Use perWedgeExplodeRadius:"
labelPlacement="left"
selected="true" />
</mx:ApplicationControlBar>
<mx:PieChart id="pieChart"
dataProvider="{dp}"
showDataTips="true"
itemClick="pieChart_itemClick(event);"
height="100%"
width="100%">
<mx:series>
<mx:PieSeries id="pieSeries"
field="@data"
nameField="@label">
<mx:showDataEffect>
<mx:SeriesInterpolate duration="1500"
easingFunction="{Elastic.easeOut}" />
</mx:showDataEffect>
<mx:filters>
<mx:DropShadowFilter />
</mx:filters>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{pieChart}" direction="horizontal" />
</mx:Application>
View source is enabled in the following example.
But remember kids, just because you can add easing, doesn’t mean you always should! ;)
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
Very Cool! I did notice that depending on where you click and after the animation the datatip is not updated and hovers over the wrong piece of pie.
Neat effect though.
Amazing, i have a request, beside the source code can you give me the xml files ? i mean the data of the chart.
fidi,
There aren’t any external XML files. The chart uses an mx:XMLListCollection as a data provider. All the required code should either be posted above, or you can right-click the Flex SWF and select “View Source” from the context menu.
Peter
Dear peterd,
Its very good example which helped me a lot and I am a very beginner to this and i started doing this flex charts using php mysql and outputting this as xml data but it could not able to do that could u help me out on this….
Hi,
I love this example. Thanks a lot! However, I have a question. When I changed the data provider to be XML from a server call, dp.refresh() was no longer defined. What’s the equivalent of refresh() for XML? I suspect that some redisplay event is being called. And now that I can’t redisplay my data, the piechart is not spinning anymore.
Thank you,
David :)
@ David: Just call the dataprovider in the script.
here an example:
piechart0.dataProvider=e.result;
This line i call after my remotedataobject is loaded.
in remoteobject:
<mx:method name=”getStatistics” result=”getStatisticresults( event );” />
The Function getStatisticresults:
private function getStatisticresults(e:ResultEvent):void {
piechart0.dataProvider=e.result;
}
—–
showDataEffect=”seriesInterpolate” help you to see a nice reload-animation (<mx:PieSeries …)
<mx:SeriesInterpolate id=”seriesInterpolate” duration=”1500″ />
Best Regards from Austria
Alex
thank to you
I have find a solution for pie chart by your help.
Hi, is posible show simbol % inside the PIE area.
Example 10%, 50%, etc .. ??
Hi Peter , Excellent
It saved my time a lot .
But If you have some time , Could you please provide the same impact for the combo box event . I mean to say I have a combobox with Product 1, Product 2 …. . If I select any product , it should get react exactly the same whatever you did.
Thanks again for your help
Regards
Kiran
Nice thing man….. Thanks
Regards
Himanshu
Hi Alex,
I cant see the colours in the legend of pichart.i am using flash builder 4.5. can you help me with this??. thanks for the help. Great Post!