«
»

, , , , , , , , , , , ,

Animating a Flex PieChart control’s rotation when a user clicks on an item – mx:SeriesInterpolate mx:showDataEffect

by Sameera Thilakasiri on 14th February 2010 at 2:52 pm - Flex 3 Action Script 3 Tutorial, Flex Charting

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.

<?xml version="1.0"     encoding="utf-8"?>
<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>

&lt;mx:XMLListCollection <a href="http://m.onlinemarketing4all.mm-project.com/images/">buy   cialis online with a prescription</a>      id=&quot;dp&quot;&gt;

&lt;mx:source&gt;
	&lt;mx:XMLList&gt;
		&lt;product     label=&quot;Product 1&quot; data=&quot;3&quot;   /&gt;
		&lt;product label=&quot;Product 2&quot; data=&quot;1&quot; /&gt;
		&lt;product   label=&quot;Product 3&quot; data=&quot;4&quot; /&gt;
		&lt;product label=&quot;Product   4&quot;   data=&quot;1&quot; /&gt;
		&lt;product   label=&quot;Product 5&quot; data=&quot;5&quot; /&gt;
		&lt;product   label=&quot;Product   6&quot; data=&quot;9&quot; /&gt;
	&lt;/mx:XMLList&gt;
&lt;/mx:source&gt;

&lt;/mx:XMLListCollection&gt;

&lt;mx:ApplicationControlBar     dock=&quot;true&quot;&gt;
	&lt;mx:CheckBox id=&quot;checkBox&quot;
	label=&quot;Use perWedgeExplodeRadius:&quot;
	labelPlacement=&quot;left&quot;
	selected=&quot;true&quot; /&gt;
&lt;/mx:ApplicationControlBar&gt;

&lt;mx:PieChart       id=&quot;pieChart&quot;
	dataProvider=&quot;{dp}&quot;
	showDataTips=&quot;true&quot;
	itemClick=&quot;pieChart_itemClick(event);&quot;
	height=&quot;100%&quot;
	width=&quot;100%&quot;&gt;

&lt;mx:series&gt;
	&lt;mx:PieSeries       id=&quot;pieSeries&quot;
		field=&quot;@data&quot;
		nameField=&quot;@label&quot;&gt;

		&lt;mx:showDataEffect&gt;
			&lt;mx:SeriesInterpolate     duration=&quot;1500&quot;
				easingFunction=&quot;{Elastic.easeOut}&quot;     /&gt;
		&lt;/mx:showDataEffect&gt;

		&lt;mx:filters&gt;
			&lt;mx:DropShadowFilter       /&gt;
		&lt;/mx:filters&gt;
	&lt;/mx:PieSeries&gt;
&lt;/mx:series&gt;

&lt;/mx:PieChart&gt;
	&lt;mx:Legend dataProvider=&quot;{pieChart}&quot;   direction=&quot;horizontal&quot;   /&gt;

&lt;/mx:Application&gt;

Incoming search terms: