Sunday, March 28, 2010

Pie Chart Animation through Script

hi,

i want to animate a pie chart which created dynamically through script.

please help.

Thanks

Pie Chart Animation through Script

Hi there

Not sure how you want to animate your chart but, in the example below the chart is created in code.?I've instansiated a SeriesInterpolate class and set the showDataEffect of the series.?This then aminates the chart when the data changes.

%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;
%26lt;mx:Application xmlns:mx=''http://www.adobe.com/2006/mxml'' layout=''absolute'' creationComplete=''createChart()'' %26gt;
?%26lt;mx:Script%26gt;
?%26lt;![CDATA[
?import mx.controls.Button;
?import mx.charts.effects.SeriesInterpolate;
?import mx.charts.series.PieSeries;
?import mx.charts.PieChart;
?import mx.collections.ArrayCollection;
?
?private var pie:PieChart;
?
?[Bindable]
?private var medalsAC:ArrayCollection = new ArrayCollection( [
?{ Country: ''USA'', Gold: 35, Silver:39, Bronze: 29 },
?{ Country: ''China'', Gold: 32, Silver:17, Bronze: 14 },
?{ Country: ''Russia'', Gold: 27, Silver:27, Bronze: 38 } ]);
?
?[Bindable]
?private var medalsAC2:ArrayCollection = new ArrayCollection( [
?{ Country: ''USA'', Gold: 105, Silver:25, Bronze: 15 },
?{ Country: ''China'', Gold: 32, Silver:22, Bronze: 20 },
?{ Country: ''Russia'', Gold: 85, Silver:55, Bronze: 35 } ]);
?
?
?private function createChart():void {
?pie = new PieChart();
?pie.width = 300; pie.height=300;
?pie.x = 100; pie.y = 100;
?pie.dataProvider = medalsAC;
?
?// Series interpolate is one type of animation available
?var si:SeriesInterpolate = new SeriesInterpolate();
?si.duration = 2000;
?
?var ps:PieSeries = new PieSeries();
?ps.field = 'Gold';
?ps.setStyle('showDataEffect',si);
?
?pie.series = [ps];
?addChild(pie);
?
?var btn:Button = new Button()
?btn.label = 'ChangeData';
?btn.x =10; btn.y = 10;
?btn.addEventListener(MouseEvent.CLICK, changeData);
?addChild(btn);
?}
?
?private function changeData(event:MouseEvent):void {
?pie.dataProvider = medalsAC2;
?}
?]]%26gt;
?%26lt;/mx:Script%26gt;
%26lt;/mx:Application%26gt;

Hope this helps you on your way.

Andrew

  • back blackheads
  • No comments:

    Post a Comment