adobe flex can animate a pie chart using the showDataEffect

adobe flex can animate a pie chart using the showDataEffect

Postby haretu » Wed Apr 13, 2011 9:40 am

The following example shows how adobe flex can animate a pie chart using the showDataEffect effect and SeriesInterpolate class.

Code: Select all
<?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>
Attachments
Screen shot 2011-04-13 at 9.40.23 AM.jpg
Screen shot 2011-04-13 at 9.40.23 AM.jpg (36.03 KiB) Viewed 1103 times
haretu
 
Posts: 132
Joined: Sat Jan 08, 2011 9:56 pm

Return to Adobe FLEX Flash

Who is online

Users browsing this forum: No registered users and 1 guest

cron