1 Reply Latest reply on Sep 2, 2009 6:02 AM by Andrew Rosewarn

    Pie Chart Animation through Script

    GauriP

      hi,

       

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

      please help.

       

      Thanks

        • 1. Re: Pie Chart Animation through Script
          Andrew Rosewarn

          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.

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="createChart()" >
              <mx:Script>
                  <![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;
                      }
                  ]]>
              </mx:Script>
          </mx:Application>

           

          Hope this helps you on your way.

           

          Andrew