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 Level 3

          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