Skip navigation
pinalbhuta
Currently Being Moderated

Pie chart not loading

Aug 25, 2010 3:17 AM

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>
 
Replies
  • Currently Being Moderated
    Aug 25, 2010 7:36 AM   in reply to pinalbhuta

    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);
              }
         }
    }
    
     
    |
    Mark as:
  • Currently Being Moderated
    Aug 25, 2010 7:43 AM   in reply to pinalbhuta

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 26, 2010 5:42 AM   in reply to pinalbhuta

    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);
              }
         }
    }
     
    
     
    |
    Mark as:
  • Currently Being Moderated
    Aug 26, 2010 5:56 AM   in reply to pinalbhuta

    No, I did not test it.


     
    |
    Mark as:
  • Currently Being Moderated
    Aug 26, 2010 6:21 AM   in reply to pinalbhuta

    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];
    }
    
     
    |
    Mark as:
  • Currently Being Moderated
    Aug 26, 2010 6:24 AM   in reply to pinalbhuta

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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 26, 2010 10:12 AM   in reply to pinalbhuta

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 26, 2010 2:00 PM   in reply to pinalbhuta

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 26, 2010 3:40 PM   in reply to pinalbhuta

    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);
              }
         }
    }
     
    
     
    |
    Mark as:
  • Currently Being Moderated
    Aug 26, 2010 4:53 PM   in reply to pinalbhuta

    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;
              }
         }
    }
     
    
     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points