15 Replies Latest reply: Aug 26, 2010 4:53 PM by Andrei1 RSS

    Pie chart not loading

    pinalbhuta Community Member

      Hi,

      I have a class file of LoadXML its not working can anyone help me in that.

      ActionScript Code:
      package
      {
           import flash.display.MovieClip;
           import fl.transitions.Tween;
           import fl.transitions.easing.Strong;
           import flash.display.Sprite;
           import flash.text.TextField;
           import flash.text.TextFormat;
           import flash.text.TextFieldAutoSize;
           import flash.net.URLLoader;
           import flash.net.URLRequest;
           import flash.events.Event;
           import flash.filters.DropShadowFilter;
           
           public class PieChart extends MovieClip
           {
                private var piechart:MovieClip = new MovieClip();
                private var titles:Array = new Array();
                private var values:Array = new Array();
                private var xmlFile:XML;
                private var pie:Number;
                private var radiansSoFar:Number = 0;
                private var urlLoader:URLLoader = new URLLoader();
                private var tween:Tween;
                private var format:TextFormat = new TextFormat();
                
                
                public function PieChart():void
                {
                     /*Text Format*/
                     format.color = 132744;
                     format.align = "left";
                     format.font = "Century Gothic";
                     format.size = 11;
                     
                     LoadXML();
                     buildPieChart(xmlData);
                }
                     
                private function LoadXML(file:String = "pie.xml"):void
                     {
                          urlLoader.load(new URLRequest(file));
                          urlLoader.addEventListener(Event.COMPLETE, parseXML);
                                         
                     }
                     private function parseXML(e:Event):void
                     {
                          xmlFile = new XML(e.target.data);
                          //trace(xmlFile);
                          pie = xmlFile.children().length;
                          //trace(pie);
                          buildPieChart(xmlData);
                     }
                          private function buildPieChart(xmlData:XML):void
                          {
                                var titleList:XMLList = xmlFile.item.title;
                                var valueList:XMLList = xmlFile.item.value;
                                for each (var titleElement:XML in titleList)
                                {
                                     titles.push(titleElement);
                                }
                                for each (var valueElement:XML in valueList)
                                {
                                       values.push(valueElement);
                                }
                               
                                var colors:Array = new Array();
                                    colors.push(0x990000);
                                    colors.push(0x000066);
                                    colors.push(0x990099);
                                    colors.push(0xFFFF99);
                                    colors.push(0x336699);
                                    colors.push(0x330000);
                                    colors.push(0x99CC00);
                                    colors.push(0x000033);
                                    colors.push(0x663366);
                                    colors.push(0x333300);
                                    colors.push(0x330033);

                                 var radians:Array = new Array();
                                 var totalValue:Number = 0;
                     
                                 for(var i:int = 0; i < values.length; i++)
                                 {
                                     totalValue = totalValue + Number(values[i]);
                                 }     
                                 for(i =0; i < values.length; i++)
                                 {
                                     radians.push(Number(values[i])/totalValue*2);
                                 }
                                drawlines(250, 250, 200, radians);

                                 function drawlines(centerx, centery, radius, radians)
                                 {
                                     var colorkey:Number = 0;
                                     var coloralpha:Number = 1;
                                     var shadow:DropShadowFilter = new DropShadowFilter();
                                     shadow.distance = 2;
                                     shadow.angle = 45;
                                     shadow.color =0x000000;
                                  
                                     for(var i:int = 0; i < radians.length; i++)
                                     {
                                         piechart.graphics.beginFill(colors[colorkey], coloralpha);
                                         piechart.graphics.moveTo(0,0);
                                         piechart.graphics.lineTo(Math.sin(radiansSoFar*Math.PI)*radius, Math.cos(radiansSoFar*Math.PI)*radius);
                                         piechart.graphics.lineTo(0,0);
                                         piechart.graphics.endFill();
                                         piechart.filters = [shadow];
                                         piechart.x = stage.stageWidth/2;
                                           piechart.y = stage.stageHeight/2;
                                         
                                         for(var n:Number = 0; n <= radians[i]; n += .0001)
                                         {
                                              piechart.graphics.lineTo(Math.sin((radiansSoFar+n)*Math.PI)*radius, Math.cos((radiansSoFar+n)*Math.PI)*radius);
                                         }
                                         radiansSoFar += radians[i];
                                              
                                         stage.addChild(piechart);
                                                        
                                         addLabel(radians[i], titles[i], radiansSoFar, radius, colors[colorkey], coloralpha);
                                         if(colorkey == colors.length-1)
                                         {
                                              colorkey = 0;
                                              coloralpha -= .25;
                                          }
                                          else
                                          {
                                              colorkey += 1;
                                          }
                                      }
                                  }
                                 function addLabel(radians, itemtitle, radiansSoFar:Number, radius:Number, color, coloralpha)
                                    {
                                          var format:TextFormat = new TextFormat();
                                         format.align = "left";
                                         format.font = "Century Gothic";
                                         format.size = 11;
                                              //format.bold = true;
                                         var label:TextField = new TextField();
                                         label.width = 1;
                                         label.height = 1;
                                         label.autoSize = "left";
                                         label.antiAliasType = "advanced";
                                         label.text = itemtitle +  "( "+ Math.round((radians/2*100)).toString() + "%)";
                                         label.border = false;
                                         label.setTextFormat(format);
                                         var textRadians:Number = radiansSoFar-(radians/2);
                                         label.x = (stage.stageWidth/2)+Math.sin(textRadians*Math.PI)*radius;
                                         label.y = (stage.stageHeight/2)+Math.cos(textRadians*Math.PI)*radius;
                                         if(textRadians > 0 && textRadians < .5)
                                         {
                                              label.y -= label.height/2;
                                              label.y += 10;
                                              label.x += 10;
                                         }
                                         if(textRadians > .5 && textRadians < 1)
                                         {
                                              label.y -= label.height/2;
                                              label.x += 10;
                                              label.y -= 10;
                                         }
                                         if(textRadians > 1 && textRadians < 1.5)
                                         {
                                              label.y -= label.height/2;
                                              label.x -= label.width;
                                              label.x -= 10;
                                              label.y -= 10;
                                         }
                                         if(textRadians > 1.5 && textRadians <= 2)
                                         {
                                              label.y -= label.height/2;
                                              label.x -= label.width;
                                              label.x -= 10;
                                              label.y += 10;
                                         }
                                         if(textRadians == 0 || textRadians == 2)
                                         {
                                              label.y += 10+label.height/2;
                                         }
                                         if(textRadians == .5)
                                         {
                                              label.x += 10+label.width/2;
                                         }
                                         if(textRadians == 1)
                                         {
                                              label.y -= 10+label.height/2;
                                         }
                                         if(textRadians == 1.5)
                                         {
                                              label.x -= 10+label.width/2;
                                         }
                                         stage.addChild(label);
                                     }
                               }
           }
      }

       

      here is the XML file

       

       

       

      Quote:

      <?xml version=”1.0? encoding=”utf-8??>

       

      <items>

       

      <item>

       

      <title>a</title>

       

      <value>26</value>

       

      </item>

       

      <item>

       

      <title>b</title>

       

      <value>14</value>

       

      </item>

       

      <item>

       

      <title>c</title>

       

      <value>9</value>

       

      </item>

       

      <item>

       

      <title>d</title>

       

      <value>6</value>

       

      </item>

       

      <item>

       

      <title>e</title>

       

      <value>3</value>

       

      </item>

       

      <item>

       

      <title>f</title>

       

      <value>3</value>

       

      </item>

       

      <item>

       

      <title>g</title>

       

      <value>2</value>

       

      </item>

       

      <item>

       

      <title>h</title>

       

      <value>1</value>

       

      </item>

       

      <item>

       

      <title>TV</title>

       

      <value>36</value>

       

      </item>

       

      </items>
        • 1. Re: Pie chart not loading
          Andrei1 Community Member

          The reason may be that you add COMPLETE listener AFTER you call load(). Also, you need to get rid of nested functions. Your class should look like something this:

           

          package
          {
               import flash.display.MovieClip;
               import fl.transitions.Tween;
               import fl.transitions.easing.Strong;
               import flash.display.Sprite;
               import flash.text.TextField;
               import flash.text.TextFormat;
               import flash.text.TextFieldAutoSize;
               import flash.net.URLLoader;
               import flash.net.URLRequest;
               import flash.events.Event;
               import flash.filters.DropShadowFilter;
               
               public class PieChart extends MovieClip
               {
                    private var piechart:MovieClip = new MovieClip();
                    private var titles:Array = new Array();
                    private var values:Array = new Array();
                    private var xmlFile:XML;
                    private var pie:Number;
                    private var radiansSoFar:Number = 0;
                    private var urlLoader:URLLoader = new URLLoader();
                    private var tween:Tween;
                    private var format:TextFormat = new TextFormat();
                    public function PieChart()
                    {
                         /*Text Format*/
                         format.color = 132744;
                         format.align = "left";
                         format.font = "Century Gothic";
                         format.size = 11;
                         loadXML();
                    }
                         
                    private function loadXML(file:String = "pie.xml"):void 
                    {
                         // event listener should be added BEFORE load is called
                         urlLoader.addEventListener(Event.COMPLETE, parseXML);
                         urlLoader.load(new URLRequest(file));
                    }
                    private function parseXML(e:Event):void
                    {
                         xmlFile = new XML(e.target.data);
                         //trace(xmlFile);
                         pie = xmlFile.children().length;
                         //trace(pie);
                         buildPieChart(xmlFile);
                    }
                    
                    private function buildPieChart(xmlData:XML):void 
                    {
                         var titleList:XMLList = xmlData.item.title;
                         var valueList:XMLList = xmlData.item.value;
                         for each (var titleElement:XML in titleList)
                         {
                              titles.push(titleElement);
                         }
                         for each (var valueElement:XML in valueList) 
                         {
                            values.push(valueElement);
                         }
                         var colors:Array = new Array();
                         colors.push(0x990000);
                         colors.push(0x000066);
                         colors.push(0x990099);
                         colors.push(0xFFFF99);
                         colors.push(0x336699);
                         colors.push(0x330000);
                         colors.push(0x99CC00);
                         colors.push(0x000033);
                         colors.push(0x663366);
                         colors.push(0x333300);
                         colors.push(0x330033);
          
                         var radians:Array = new Array();
                         var totalValue:Number = 0;
                         
                         for(var i:int = 0; i < values.length; i++)
                         {
                              totalValue = totalValue + Number(values[i]);
                              radians.push(Number(values[i]) / totalValue * 2);
                         }     
                         
                         drawlines(250, 250, 200, radians);
                    }
                    
                    private function drawlines(centerx:Number, centery:Number, radius:Number, radians:Array):void
                    {
                         var colorkey:Number = 0;
                         var coloralpha:Number = 1;
                         var shadow:DropShadowFilter = new DropShadowFilter(); 
                         shadow.distance = 2; 
                         shadow.angle = 45; 
                         shadow.color = 0x000000;
                         for(var i:int = 0; i < radians.length; i++) 
                         {
                              piechart.graphics.beginFill(colors[colorkey], coloralpha);
                              piechart.graphics.moveTo(0, 0);
                              piechart.graphics.lineTo(Math.sin(radiansSoFar*Math.PI)*radius, Math.cos(radiansSoFar*Math.PI)*radius);
                              piechart.graphics.lineTo(0,0);
                              piechart.graphics.endFill();
                              piechart.filters = [shadow];
                              piechart.x = stage.stageWidth / 2;
                              piechart.y = stage.stageHeight / 2;
                              
                              for(var n:Number = 0; n <= radians[i]; n += .0001) 
                              {
                                   piechart.graphics.lineTo(Math.sin((radiansSoFar + n) * Math.PI) * radius, Math.cos((radiansSoFar + n) * Math.PI) * radius);
                              }
                              radiansSoFar += radians[i];
                              stage.addChild(piechart);
                              addLabel(radians[i], titles[i], radiansSoFar, radius, colors[colorkey], coloralpha);
                              if (colorkey == colors.length - 1) 
                              {
                                   colorkey = 0;
                                   coloralpha -= .25;
                              }
                              else 
                              {
                                   colorkey += 1;
                              }
                         }
                    }
                    
                    private function addLabel(radians:Array, itemtitle:String, radiansSoFar:Number, radius:Number, color:uint, coloralpha:Number):void
                    {
                         var format:TextFormat = new TextFormat();
                         format.align = "left";
                         format.font = "Century Gothic";
                         format.size = 11;
                         //format.bold = true;
                         var label:TextField = new TextField();
                         label.width = 1;
                         label.height = 1;
                         label.autoSize = "left";
                         label.antiAliasType = "advanced";
                         label.text = itemtitle +  "( " + Math.round((radians / 2 * 100)).toString() + "%)";
                         label.border = false;
                         label.setTextFormat(format);
                         var textRadians:Number = radiansSoFar - (radians / 2);
                         label.x = (stage.stageWidth / 2) + Math.sin(textRadians * Math.PI) * radius;
                         label.y = (stage.stageHeight / 2) + Math.cos(textRadians * Math.PI) * radius; 
                         if(textRadians > 0 && textRadians < .5) 
                         {
                              label.y -= label.height / 2 - 10;
                              label.x += 10;
                         }
                         if(textRadians > .5 && textRadians < 1) 
                         {
                              label.y -= 10 + label.height / 2;
                              label.x += 10;
                         }
                         if(textRadians > 1 && textRadians < 1.5) 
                         {
                              label.y -= 10 + label.height / 2;
                              label.x -= 10 + label.width;
                         }
                         if (textRadians > 1.5 && textRadians <= 2) 
                         {
                              label.y -= label.height / 2 - 10;
                              label.x -= label.width + 10;
                         }
                         if(textRadians == 0 || textRadians == 2) 
                         {
                              label.y += 10 + label.height / 2;
                         }
                         if(textRadians == .5)
                         {
                              label.x += 10 + label.width / 2;
                         }
                         if(textRadians == 1) 
                         {
                              label.y -= 10 + label.height / 2;
                         }
                         if(textRadians == 1.5) 
                         {
                              label.x -= 10 + label.width / 2;
                         }
                         stage.addChild(label);
                    }
               }
          }
          
          • 2. Re: Pie chart not loading
            dmeN Community Member

            First off you're using nested functions - which is a poor practice. You should get rid of them...

             

            Also you have:

             

            public function PieChart():void
            {
               /*Text Format*/
               format.color = 132744;
               format.align = "left";
               format.font = "Century Gothic";
               format.size = 11;
              
               LoadXML();
               buildPieChart(xmlData);
            }

             

            Get rid of the buildPieChart(xmlData); call - you don't have xmlData until it's loaded - and you call that from your parse method already.

            • 3. Re: Pie chart not loading
              pinalbhuta Community Member

              Hi,

               

              Thanks for the Reply. I tried it with the same code but now its giving me another error.

               

              that is,

               

              1120: Access of undefined property colors.

               

              1067: Implicit coercion of a value of type Array to an unrelated type Number.

               

              what it means?

               

              Thanks

              • 4. Re: Pie chart not loading
                Andrei1 Community Member

                colors were not declared as class level variable. Try this code:

                 

                package com.cumba.testcases 
                {
                     import flash.display.MovieClip;
                     import fl.transitions.Tween;
                     import fl.transitions.easing.Strong;
                     import flash.display.Sprite;
                     import flash.text.TextField;
                     import flash.text.TextFormat;
                     import flash.text.TextFieldAutoSize;
                     import flash.net.URLLoader;
                     import flash.net.URLRequest;
                     import flash.events.Event;
                     import flash.filters.DropShadowFilter;
                     
                     public class PieChart extends MovieClip
                     {
                          private var piechart:MovieClip = new MovieClip();
                          private var titles:Array = new Array();
                          private var values:Array = new Array();
                          private var xmlFile:XML;
                          private var pie:Number;
                          private var radiansSoFar:Number = 0;
                          private var urlLoader:URLLoader = new URLLoader();
                          private var tween:Tween;
                          private var format:TextFormat = new TextFormat();
                            private var colors:Array;
                          public function PieChart()
                          {
                               /*Text Format*/
                               format.color = 132744;
                               format.align = "left";
                               format.font = "Century Gothic";
                               format.size = 11;
                               loadXML();
                          }
                               
                          private function loadXML(file:String = "pie.xml"):void 
                          {
                               // event listener should be added BEFORE load is called
                               urlLoader.addEventListener(Event.COMPLETE, parseXML);
                               urlLoader.load(new URLRequest(file));
                          }
                          private function parseXML(e:Event):void
                          {
                               xmlFile = new XML(e.target.data);
                               //trace(xmlFile);
                               pie = xmlFile.children().length;
                               //trace(pie);
                               buildPieChart(xmlFile);
                          }
                          
                          private function buildPieChart(xmlData:XML):void 
                          {
                               var titleList:XMLList = xmlData.item.title;
                               var valueList:XMLList = xmlData.item.value;
                               for each (var titleElement:XML in titleList)
                               {
                                    titles.push(titleElement);
                               }
                               for each (var valueElement:XML in valueList) 
                               {
                                  values.push(valueElement);
                               }
                               colors = new Array();
                               colors.push(0x990000);
                               colors.push(0x000066);
                               colors.push(0x990099);
                               colors.push(0xFFFF99);
                               colors.push(0x336699);
                               colors.push(0x330000);
                               colors.push(0x99CC00);
                               colors.push(0x000033);
                               colors.push(0x663366);
                               colors.push(0x333300);
                               colors.push(0x330033);
                 
                               var radians:Array = new Array();
                               var totalValue:Number = 0;
                               
                               for(var i:int = 0; i < values.length; i++)
                               {
                                    totalValue = totalValue + Number(values[i]);
                                    radians.push(Number(values[i]) / totalValue * 2);
                               }     
                               
                               drawlines(250, 250, 200, radians);
                          }
                          
                          private function drawlines(centerx:Number, centery:Number, radius:Number, radians:Array):void
                          {
                               var colorkey:Number = 0;
                               var coloralpha:Number = 1;
                               var shadow:DropShadowFilter = new DropShadowFilter(); 
                               shadow.distance = 2; 
                               shadow.angle = 45; 
                               shadow.color = 0x000000;
                               for(var i:int = 0; i < radians.length; i++) 
                               {
                                    piechart.graphics.beginFill(colors[colorkey], coloralpha);
                                    piechart.graphics.moveTo(0, 0);
                                    piechart.graphics.lineTo(Math.sin(radiansSoFar*Math.PI)*radius, Math.cos(radiansSoFar*Math.PI)*radius);
                                    piechart.graphics.lineTo(0,0);
                                    piechart.graphics.endFill();
                                    piechart.filters = [shadow];
                                    piechart.x = stage.stageWidth / 2;
                                    piechart.y = stage.stageHeight / 2;
                                    
                                    for(var n:Number = 0; n <= radians[i]; n += .0001) 
                                    {
                                         piechart.graphics.lineTo(Math.sin((radiansSoFar + n) * Math.PI) * radius, Math.cos((radiansSoFar + n) * Math.PI) * radius);
                                    }
                                    radiansSoFar += radians[i];
                                    stage.addChild(piechart);
                                    addLabel(radians[i], titles[i], radiansSoFar, radius, colors[colorkey], coloralpha);
                                    if (colorkey == colors.length - 1) 
                                    {
                                         colorkey = 0;
                                         coloralpha -= .25;
                                    }
                                    else 
                                    {
                                         colorkey += 1;
                                    }
                               }
                          }
                          
                          private function addLabel(radians:Number, itemtitle:String, radiansSoFar:Number, radius:Number, color:uint, coloralpha:Number):void
                          {
                               var format:TextFormat = new TextFormat();
                               format.align = "left";
                               format.font = "Century Gothic";
                               format.size = 11;
                               //format.bold = true;
                               var label:TextField = new TextField();
                               label.width = 1;
                               label.height = 1;
                               label.autoSize = "left";
                               label.antiAliasType = "advanced";
                               label.text = itemtitle +  "( " + Math.round((radians / 2 * 100)).toString() + "%)";
                               label.border = false;
                               label.setTextFormat(format);
                               var textRadians:Number = radiansSoFar - (radians / 2);
                               label.x = (stage.stageWidth / 2) + Math.sin(textRadians * Math.PI) * radius;
                               label.y = (stage.stageHeight / 2) + Math.cos(textRadians * Math.PI) * radius; 
                               if(textRadians > 0 && textRadians < .5) 
                               {
                                    label.y -= label.height / 2 - 10;
                                    label.x += 10;
                               }
                               if(textRadians > .5 && textRadians < 1) 
                               {
                                    label.y -= 10 + label.height / 2;
                                    label.x += 10;
                               }
                               if(textRadians > 1 && textRadians < 1.5) 
                               {
                                    label.y -= 10 + label.height / 2;
                                    label.x -= 10 + label.width;
                               }
                               if (textRadians > 1.5 && textRadians <= 2) 
                               {
                                    label.y -= label.height / 2 - 10;
                                    label.x -= label.width + 10;
                               }
                               if(textRadians == 0 || textRadians == 2) 
                               {
                                    label.y += 10 + label.height / 2;
                               }
                               if(textRadians == .5)
                               {
                                    label.x += 10 + label.width / 2;
                               }
                               if(textRadians == 1) 
                               {
                                    label.y -= 10 + label.height / 2;
                               }
                               if(textRadians == 1.5) 
                               {
                                    label.x -= 10 + label.width / 2;
                               }
                               stage.addChild(label);
                          }
                     }
                }
                
                
                • 5. Re: Pie chart not loading
                  pinalbhuta Community Member

                  Hi,

                   

                  Thanks for the Reply. You have done a great job thanks again.I could not recognize that what changes have u made but i am getting only text but not displaying pie. dont know why? i think you test it and if its working then y its not working with me.

                   

                  Thanks

                  • 6. Re: Pie chart not loading
                    Andrei1 Community Member

                    No, I did not test it.


                    • 7. Re: Pie chart not loading
                      pinalbhuta Community Member

                      Hi,

                       

                      Thanks for the help. i am trying to solve this since one week so i am bit upset. its not showing me pie chart now. can u please tell me what mistake i made into code. i have the same pie chart with normal fla file and its working very well. but i need to embeded this into my main file so i need .as file so i am just trying to convert the code for .as file and trying to load this into my main file but its not happening. i also want to ask u one question how u have given package name to the code. i want to learn that i mean when entire project finishes i want manage my all file but i dont know how to set this path like com.. something. can u also able help me in that.

                       

                      Thanks

                      • 8. Re: Pie chart not loading
                        Andrei1 Community Member

                        I think the reason color don't show is because you call endFill() too early. The following code should fix it. Also it remedies some other inefficiencies:

                         

                        private function drawlines(centerx:Number, centery:Number, radius:Number, radians:Array):void
                        {
                             var colorkey:Number = 0;
                             var coloralpha:Number = 1;
                             var shadow:DropShadowFilter = new DropShadowFilter(); 
                             shadow.distance = 2; 
                             shadow.angle = 45; 
                             shadow.color = 0x000000;
                             var gr:Graphics = piechart.graphics;
                             for(var i:int = 0; i < radians.length; i++) 
                             {
                                  gr.beginFill(colors[colorkey], coloralpha);
                                  gr.moveTo(0, 0);
                                  gr.lineTo(Math.sin(radiansSoFar * Math.PI) * radius, Math.cos(radiansSoFar * Math.PI) * radius);
                                  gr.lineTo(0,0);
                                  for(var n:Number = 0; n <= radians[i]; n += .0001) 
                                  {
                                       gr.lineTo(Math.sin((radiansSoFar + n) * Math.PI) * radius, Math.cos((radiansSoFar + n) * Math.PI) * radius);
                                  }
                                  gr.endFill();// this line should be here
                                  radiansSoFar += radians[i];
                                  addLabel(radians[i], titles[i], radiansSoFar, radius, colors[colorkey], coloralpha);
                                  if (colorkey == colors.length - 1) 
                                  {
                                       colorkey = 0;
                                       coloralpha -= .25;
                                  }
                                  else 
                                  {
                                       colorkey += 1;
                                  }
                             }
                             addChildAt(piechart, 0);
                             piechart.x = stage.stageWidth / 2;
                             piechart.y = stage.stageHeight / 2;
                             piechart.filters = [shadow];
                        }
                        
                        • 9. Re: Pie chart not loading
                          Andrei1 Community Member

                          Remove package path - it is my local environment and I forgot to remove it. You don't need it.

                          • 10. Re: Pie chart not loading
                            pinalbhuta Community Member

                            Hi,

                             

                            Oh Yeah. Thanks a lot. Its working now. do i also need to use removeEventListener. because i have exported into my main file with a movieclip and that movie clip loads with alpha 0 to 100 and once it shows that pie chart. that movie clip has a alpha0 . now my movie clip disappering but pie chart stays there and other things are overLaping it. how do i fix that?

                             

                            Thanks a lot once again.

                            • 11. Re: Pie chart not loading
                              Andrei1 Community Member

                              You are welcome. Please mark the thread as answered if you can.

                               

                              Alpha in AS3 is from 0 to 1, not from 0 to 100

                              • 12. Re: Pie chart not loading
                                pinalbhuta Community Member

                                Hi,

                                 

                                I also want to animate my pie chart. i just want my each pie comes out one by one and goes in. how do i start with. should i use tween for it. how do i get the centre of the pie from where i want to move out my pie chart. can anyone will be able to help me to do that?

                                 

                                thanks

                                • 13. Re: Pie chart not loading
                                  Andrei1 Community Member

                                  I also want to animate my pie chart.

                                  With your approach it is practically impossible to animate segments. You need to create each segment separately. As it stands now it draws segments over each other.

                                  • 14. Re: Pie chart not loading
                                    Andrei1 Community Member

                                    Here is a quick an dirty segments animation. You have to have TweenMax package to see it work. Download it here if you still don't have it:

                                     

                                    http://www.greensock.com/tweenmax/

                                     

                                    package 
                                    {
                                         import com.greensock.TweenMax;
                                         import flash.display.Graphics;
                                         import flash.display.MovieClip;
                                         import flash.events.Event;
                                         import flash.filters.DropShadowFilter;
                                         import flash.net.URLLoader;
                                         import flash.net.URLRequest;
                                         import flash.text.TextField;
                                         import flash.text.TextFormat;
                                         
                                         public class PieChart extends MovieClip
                                         {
                                              private var piechart:MovieClip = new MovieClip();
                                              private var segments:Array;
                                              private var titles:Array = new Array();
                                              private var values:Array = new Array();
                                              private var xmlFile:XML;
                                              private var pie:Number;
                                              private var radiansSoFar:Number = 0;
                                              private var urlLoader:URLLoader = new URLLoader();
                                              private var format:TextFormat = new TextFormat();
                                                private var colors:Array;
                                              public function PieChart()
                                              {
                                                   /*Text Format*/
                                                   format.color = 132744;
                                                   format.align = "left";
                                                   format.font = "Century Gothic";
                                                   format.size = 11;
                                                   loadXML();
                                              }
                                                   
                                              private function loadXML(file:String = "pie.xml"):void 
                                              {
                                                   // event listener should be added BEFORE load is called
                                                   urlLoader.addEventListener(Event.COMPLETE, parseXML);
                                                   urlLoader.load(new URLRequest(file));
                                              }
                                              private function parseXML(e:Event):void
                                              {
                                                   xmlFile = new XML(e.target.data);
                                                   //trace(xmlFile);
                                                   pie = xmlFile.children().length;
                                                   //trace(pie);
                                                   buildPieChart(xmlFile);
                                              }
                                              
                                              private function buildPieChart(xmlData:XML):void 
                                              {
                                                   var titleList:XMLList = xmlData.item.title;
                                                   var valueList:XMLList = xmlData.item.value;
                                                   for each (var titleElement:XML in titleList)
                                                   {
                                                        titles.push(titleElement);
                                                   }
                                                   for each (var valueElement:XML in valueList) 
                                                   {
                                                      values.push(valueElement);
                                                   }
                                                   
                                                   colors = new Array();
                                                   colors.push(0x990000);
                                                   colors.push(0x000066);
                                                   colors.push(0x990099);
                                                   colors.push(0xFFFF99);
                                                   colors.push(0x336699);
                                                   colors.push(0x330000);
                                                   colors.push(0x99CC00);
                                                   colors.push(0x000033);
                                                   colors.push(0x663366);
                                                   colors.push(0x333300);
                                                   colors.push(0x330033);
                                                   
                                                   var radians:Array = new Array();
                                                   var totalValue:Number = 0;
                                                   trace(values.length);
                                                   for(var i:int = 0; i < values.length; i++)
                                                   {
                                                        totalValue = totalValue + Number(values[i]);
                                                   }     
                                                   for(i = 0; i < values.length; i++)
                                                   {
                                                        radians.push(Number(values[i]) / totalValue * 2);
                                                   }
                                                   drawlines(250, 250, 200, radians);
                                              }
                                              
                                              private function drawlines(centerx:Number, centery:Number, radius:Number, radians:Array):void
                                              {
                                                   var colorkey:Number = 0;
                                                   var coloralpha:Number = 1;
                                                   var shadow:DropShadowFilter = new DropShadowFilter(); 
                                                   shadow.distance = 2; 
                                                   shadow.angle = 45; 
                                                   shadow.color = 0x000000;
                                                   var gr:Graphics = piechart.graphics;
                                                   var segment:MovieClip;
                                                   segments = [];
                                                   var midPoint:Number;
                                                   for(var i:int = 0; i < radians.length; i++) 
                                                   {
                                                        segment = new MovieClip();
                                                        segment.midPoint = radiansSoFar + radians[i] / 2;
                                                        gr = segment.graphics;
                                                        gr.beginFill(colors[colorkey], coloralpha);
                                                        gr.moveTo(0, 0);
                                                        gr.lineTo(Math.sin(radiansSoFar * Math.PI) * radius, Math.cos(radiansSoFar * Math.PI) * radius);
                                                        for(var n:Number = 0; n <= radians[i]; n += .0001) 
                                                        {
                                                             gr.lineTo(Math.sin((radiansSoFar + n) * Math.PI) * radius, Math.cos((radiansSoFar + n) * Math.PI) * radius);
                                                             
                                                        }
                                                        gr.lineTo(0,0);
                                                        gr.endFill();
                                                        radiansSoFar += radians[i];
                                                        addLabel(radians[i], titles[i], radiansSoFar, radius, colors[colorkey], coloralpha);
                                                        if (colorkey == colors.length - 1) 
                                                        {
                                                             colorkey = 0;
                                                             coloralpha -= .25;
                                                        }
                                                        else 
                                                        {
                                                             colorkey += 1;
                                                        }
                                                        segments.push(segment);
                                                        piechart.addChild(segment);
                                                   }
                                                   gr = piechart.graphics;
                                                   gr.beginFill(0xff0000);
                                                   gr.drawCircle(0, 0, 10);
                                                   addChildAt(piechart, 0);
                                                   piechart.x = stage.stageWidth / 2;
                                                   piechart.y = stage.stageHeight / 2;
                                                   piechart.filters = [shadow];
                                                   animateSegements();
                                              }
                                              
                                              private function animateSegements():void {
                                                   var distance:Number = 200;
                                                   for each(var segment:MovieClip in segments) {
                                                        segment.x = Math.sin(segment.midPoint * Math.PI) * distance;
                                                        segment.y = Math.cos(segment.midPoint * Math.PI) * distance;
                                                        TweenMax.to(segment, 2, { x:0, y:0, onComplete: moveOne } );
                                                   }
                                              }
                                              
                                              private function moveOne():void {
                                                   var distance:Number = 100;
                                                   var segment:MovieClip = segments[2];
                                                   TweenMax.to(segment, 1, { x:Math.sin(segment.midPoint * Math.PI) * distance, y:Math.cos(segment.midPoint * Math.PI) * distance, onComplete: moveOne } );
                                              }
                                              
                                              private function addLabel(radians:Number, itemtitle:String, radiansSoFar:Number, radius:Number, color:uint, coloralpha:Number):void
                                              {
                                                   var format:TextFormat = new TextFormat();
                                                   format.align = "left";
                                                   format.font = "Century Gothic";
                                                   format.size = 11;
                                                   //format.bold = true;
                                                   var label:TextField = new TextField();
                                                   label.width = 1;
                                                   label.height = 1;
                                                   label.autoSize = "left";
                                                   label.antiAliasType = "advanced";
                                                   label.text = itemtitle +  "( " + Math.round((radians / 2 * 100)).toString() + "%)";
                                                   label.border = false;
                                                   label.setTextFormat(format);
                                                   var textRadians:Number = radiansSoFar - (radians / 2);
                                                   label.x = (stage.stageWidth / 2) + Math.sin(textRadians * Math.PI) * radius;
                                                   label.y = (stage.stageHeight / 2) + Math.cos(textRadians * Math.PI) * radius; 
                                                   if(textRadians > 0 && textRadians < .5) 
                                                   {
                                                        label.y -= label.height / 2 - 10;
                                                        label.x += 10;
                                                   }
                                                   if(textRadians > .5 && textRadians < 1) 
                                                   {
                                                        label.y -= 10 + label.height / 2;
                                                        label.x += 10;
                                                   }
                                                   if(textRadians > 1 && textRadians < 1.5) 
                                                   {
                                                        label.y -= 10 + label.height / 2;
                                                        label.x -= 10 + label.width;
                                                   }
                                                   if (textRadians > 1.5 && textRadians <= 2) 
                                                   {
                                                        label.y -= label.height / 2 - 10;
                                                        label.x -= label.width + 10;
                                                   }
                                                   if(textRadians == 0 || textRadians == 2) 
                                                   {
                                                        label.y += 10 + label.height / 2;
                                                   }
                                                   if(textRadians == .5)
                                                   {
                                                        label.x += 10 + label.width / 2;
                                                   }
                                                   if(textRadians == 1) 
                                                   {
                                                        label.y -= 10 + label.height / 2;
                                                   }
                                                   if(textRadians == 1.5) 
                                                   {
                                                        label.x -= 10 + label.width / 2;
                                                   }
                                                   stage.addChild(label);
                                              }
                                         }
                                    }
                                    
                                    
                                    • 15. Re: Pie chart not loading
                                      Andrei1 Community Member

                                      Here is the code that moves labels too. Also there are several optimization things done. Note how it deals with label positioning.

                                       

                                      package 
                                      {
                                           import com.greensock.TweenMax;
                                           import flash.display.Graphics;
                                           import flash.display.MovieClip;
                                           import flash.events.Event;
                                           import flash.filters.DropShadowFilter;
                                           import flash.net.URLLoader;
                                           import flash.net.URLRequest;
                                           import flash.text.TextField;
                                           import flash.text.TextFormat;
                                           
                                           public class PieChart extends MovieClip
                                           {
                                                private var piechart:MovieClip = new MovieClip();
                                                private var segments:Array;
                                                private var titles:Array = new Array();
                                                private var values:Array = new Array();
                                                private var xmlFile:XML;
                                                private var pie:Number;
                                                private var radiansSoFar:Number = 0;
                                                private var urlLoader:URLLoader = new URLLoader();
                                                private var format:TextFormat = new TextFormat();
                                                 private var colors:Array;
                                                 private var radius:Number = 200;
                                                 private var labelDistance:Number = 25;
                                                public function PieChart()
                                                {
                                                     /*Text Format*/
                                                     format.color = 132744;
                                                     format.align = "left";
                                                     format.font = "Century Gothic";
                                                     format.size = 11;
                                                     loadXML();
                                                }
                                                     
                                                private function loadXML(file:String = "pie.xml"):void 
                                                {
                                                     // event listener should be added BEFORE load is called
                                                     urlLoader.addEventListener(Event.COMPLETE, parseXML);
                                                     urlLoader.load(new URLRequest(file));
                                                }
                                                private function parseXML(e:Event):void
                                                {
                                                     xmlFile = new XML(e.target.data);
                                                     pie = xmlFile.children().length;
                                                     buildPieChart(xmlFile);
                                                }
                                                
                                                private function buildPieChart(xmlData:XML):void 
                                                {
                                                     var titleList:XMLList = xmlData.item.title;
                                                     var valueList:XMLList = xmlData.item.value;
                                                     for each (var titleElement:XML in titleList)
                                                     {
                                                          titles.push(titleElement);
                                                     }
                                                     for each (var valueElement:XML in valueList) 
                                                     {
                                                        values.push(valueElement);
                                                     }
                                                     
                                                     colors = new Array();
                                                     colors.push(0xFF0000);
                                                     colors.push(0xFFFF00);
                                                     colors.push(0x00FF00);
                                                     colors.push(0x0000FF);
                                                     colors.push(0xFF0080);
                                                     colors.push(0x808000);
                                                     colors.push(0xFF8000);
                                                     colors.push(0x000033);
                                                     colors.push(0x663366);
                                                     colors.push(0x333300);
                                                     colors.push(0x330033);
                                                     
                                                     var radians:Array = new Array();
                                                     var totalValue:Number = 0;
                                                     trace(values.length);
                                                     for(var i:int = 0; i < values.length; i++)
                                                     {
                                                          totalValue = totalValue + Number(values[i]);
                                                     }     
                                                     for(i = 0; i < values.length; i++)
                                                     {
                                                          radians.push(Number(values[i]) / totalValue * 2);
                                                     }
                                                     drawlines(250, 250, radius, radians);
                                                }
                                                
                                                private function drawlines(centerx:Number, centery:Number, radius:Number, radians:Array):void
                                                {
                                                     var colorkey:Number = 0;
                                                     var coloralpha:Number = 1;
                                                     var shadow:DropShadowFilter = new DropShadowFilter(); 
                                                     shadow.distance = 2; 
                                                     shadow.angle = 45; 
                                                     shadow.color = 0x000000;
                                                     var gr:Graphics = piechart.graphics;
                                                     var segment:MovieClip;
                                                     segments = [];
                                                     var rads:Number;
                                                     for(var i:int = 0; i < radians.length; i++) 
                                                     {
                                                          segment = new MovieClip();
                                                          segment.midPoint = radiansSoFar + radians[i] / 2;
                                                          gr = segment.graphics;
                                                          gr.beginFill(colors[colorkey], coloralpha);
                                                          gr.moveTo(0, 0);
                                                          rads = radiansSoFar * Math.PI;
                                                          gr.lineTo(Math.sin(rads) * radius, Math.cos(rads) * radius);
                                                          for(var n:Number = 0; n <= radians[i]; n += .0001) 
                                                          {
                                                               rads = (radiansSoFar + n) * Math.PI;
                                                               gr.lineTo(Math.sin(rads) * radius, Math.cos(rads) * radius);
                                                          }
                                                          gr.lineTo(0,0);
                                                          gr.endFill();
                                                          radiansSoFar += radians[i];
                                                          segment.label = addLabel(radians[i], titles[i], radiansSoFar, radius, colors[colorkey], coloralpha);
                                                          // original label positions
                                                          segment.labelX = segment.label.x;
                                                          segment.labelY = segment.label.y;
                                                          if (colorkey == colors.length - 1) 
                                                          {
                                                               colorkey = 0;
                                                               coloralpha -= .25;
                                                          }
                                                          else 
                                                          {
                                                               colorkey += 1;
                                                          }
                                                          segments.push(segment);
                                                          piechart.addChild(segment);
                                                     }
                                                     gr = piechart.graphics;
                                                     // just to indicate center
                                                     gr.beginFill(0x000000);
                                                     gr.drawCircle(0, 0, 10);
                                                     addChildAt(piechart, 0);
                                                     piechart.x = stage.stageWidth / 2;
                                                     piechart.y = stage.stageHeight / 2;
                                                     piechart.filters = [shadow];
                                                     animateSegements();
                                                }
                                                
                                                private function animateSegements():void {
                                                     var distance:Number = 200;
                                                     var label:TextField;
                                                     var mprads:Number;
                                                     for each(var segment:MovieClip in segments) {
                                                          mprads = segment.midPoint * Math.PI;
                                                          segment.x = Math.sin(mprads) * distance;
                                                          segment.y = Math.cos(mprads) * distance;
                                                          label = segment.label;
                                                          label.x =  Math.sin(mprads) * (distance + labelDistance + radius) - label.width / 2;
                                                          label.y =  Math.cos(mprads) * (distance + labelDistance + radius) - label.height / 2;
                                                          piechart.addChild(label);
                                                          TweenMax.to(segment, 2, { x:0, y:0, onComplete: moveOne } );
                                                          TweenMax.to(label, 2, { x: segment.labelX, y: segment.labelY, onComplete: moveOne } );
                                                     }
                                                }
                                                
                                                private function moveOne():void {
                                                     var distance:Number = 100;
                                                     var segment:MovieClip = segments[1];
                                                     var label:TextField = segment.label;
                                                     var mprads:Number = segment.midPoint * Math.PI;
                                                     TweenMax.to(segment, 1, { x:Math.sin(mprads) * distance, y:Math.cos(mprads) * distance, onComplete: moveOne } );
                                                     TweenMax.to(label, 1, { x:Math.sin(mprads) * (distance + labelDistance + radius) - label.width / 2, y: Math.cos(mprads) * (distance + labelDistance + radius) - label.height / 2 } );
                                                }
                                                
                                                private function addLabel(radians:Number, itemtitle:String, radiansSoFar:Number, radius:Number, color:uint, coloralpha:Number):TextField
                                                {
                                                     var format:TextFormat = new TextFormat();
                                                     format.align = "left";
                                                     format.font = "Century Gothic";
                                                     format.size = 11;
                                                     var label:TextField = new TextField();
                                                     label.autoSize = "left";
                                                     label.antiAliasType = "advanced";
                                                     label.defaultTextFormat = format;
                                                     label.text = itemtitle +  "( " + Math.round((radians / 2 * 100)).toString() + "%)";
                                                     var textRadians:Number = radiansSoFar - (radians / 2);
                                                     label.x = Math.sin(textRadians * Math.PI) * (radius + labelDistance) - label.width / 2;
                                                     label.y = Math.cos(textRadians * Math.PI) * (radius + labelDistance) - label.height / 2; 
                                                     piechart.addChild(label);
                                                     return label;
                                                }
                                           }
                                      }