Flex Examples » SeriesInterpolate http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Animating a Flex PieChart control’s rotation when a user clicks on an item http://blog.flexexamples.com/2007/11/22/animating-a-flex-piechart-controls-rotation-when-a-user-clicks-on-an-item/ http://blog.flexexamples.com/2007/11/22/animating-a-flex-piechart-controls-rotation-when-a-user-clicks-on-an-item/#comments Thu, 22 Nov 2007 08:12:46 +0000 Peter deHaan http://blog.flexexamples.com/2007/11/22/animating-a-flex-piechart-controls-rotation-when-a-user-clicks-on-an-item/ 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 [...]]]> 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.

View MXML

<?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! ;)

 
]]> http://blog.flexexamples.com/2007/11/22/animating-a-flex-piechart-controls-rotation-when-a-user-clicks-on-an-item/feed/ 11 Using data effects to animate chart data http://blog.flexexamples.com/2007/10/15/using-data-effects-to-animate-chart-data/ http://blog.flexexamples.com/2007/10/15/using-data-effects-to-animate-chart-data/#comments Mon, 15 Oct 2007 14:19:51 +0000 Peter deHaan http://blog.flexexamples.com/2007/10/15/236/ In a previous example, “Animating data changes in a Flex Pie Chart”, we looked at using the SeriesInterpolate effect to animate a pie chart when the data changed.

The following example shows how you can use the SeriesInterpolate, SeriesSlide, and SeriesZoom effects to create different animations.

Full code after the jump.

In a previous example, “Animating data changes in a Flex Pie Chart”, we looked at using the SeriesInterpolate effect to animate a pie chart when the data changed.

The following example shows how you can use the SeriesInterpolate, SeriesSlide, and SeriesZoom effects to create different animations.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/15/using-data-effects-to-animate-chart-data/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function updateDP():void {
                var str:String = categoryFieldComboBox.selectedItem.data;
                barSeries.xField = str;
                barSeries.displayName = str;
            }
        ]]>
    </mx:Script>

    <mx:SeriesInterpolate id="seriesInterpolate" duration="1000" />
    <mx:SeriesSlide id="seriesSlide" duration="1000" direction="right" />
    <mx:SeriesZoom id="seriesZoom" duration="1000" />

    <mx:Array id="dataEffects">
        <mx:Object label="seriesInterpolate" data="{seriesInterpolate}" />
        <mx:Object label="seriesSlide" data="{seriesSlide}" />
        <mx:Object label="seriesZoom" data="{seriesZoom}" />
    </mx:Array>

    <mx:Array id="categoryFields">
        <mx:Object data="obp" label="OBP" />
        <mx:Object data="slg" label="SLG" />
        <mx:Object data="avg" label="AVG" />
    </mx:Array>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
                <mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
                <mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
                <mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
                <mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="categoryField:">
                <mx:ComboBox id="categoryFieldComboBox"
                    dataProvider="{categoryFields}"
                        change="updateDP();" />
            </mx:FormItem>
            <mx:FormItem label="showDataEffect:">
                <mx:ComboBox id="showDataEffectComboBox"
                        dataProvider="{dataEffects}"
                        change="updateDP();" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

     <mx:BarChart id="barChart"
             showDataTips="true"
             dataProvider="{arrColl}"
             width="100%"
             height="100%">
        <mx:verticalAxis>
            <mx:CategoryAxis categoryField="name"/>
        </mx:verticalAxis>
        <mx:series>
            <mx:BarSeries id="barSeries"
                    yField="name"
                    xField="obp"
                    displayName="obp"
                    showDataEffect="{showDataEffectComboBox.selectedItem.data}" />
        </mx:series>
    </mx:BarChart>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/10/15/using-data-effects-to-animate-chart-data/feed/ 6 Animating data changes in a Flex Pie Chart http://blog.flexexamples.com/2007/09/24/animating-data-changes-in-a-flex-pie-chart/ http://blog.flexexamples.com/2007/09/24/animating-data-changes-in-a-flex-pie-chart/#comments Tue, 25 Sep 2007 02:13:22 +0000 Peter deHaan http://blog.flexexamples.com/2007/09/24/animating-data-changes-in-a-flex-pie-chart/ 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)“.

View MXML

<?xml [...]]]> 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)“.

View MXML

<?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.

 
]]> http://blog.flexexamples.com/2007/09/24/animating-data-changes-in-a-flex-pie-chart/feed/ 10