Copy link to clipboard
Copied
Hi,
I have a class file of LoadXML its not working can anyone help me in that.
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);
}
for(i =0; i < values.length; i++)
{
radians.push(Number(values)/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; n += .0001)
{
piechart.graphics.lineTo(Math.sin((radiansSoFar+n)*Math.PI)*radius, Math.cos((radiansSoFar+n)*Math.PI)*radius);
}
radiansSoFar += radians;
stage.addChild(piechart);
addLabel(radians, titles, 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
<?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>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
Copy link to clipboard
Copied
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);
radians.push(Number(values) / 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; n += .0001)
{
piechart.graphics.lineTo(Math.sin((radiansSoFar + n) * Math.PI) * radius, Math.cos((radiansSoFar + n) * Math.PI) * radius);
}
radiansSoFar += radians;
stage.addChild(piechart);
addLabel(radians, titles, 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);
}
}
}
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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);
radians.push(Number(values) / 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; n += .0001)
{
piechart.graphics.lineTo(Math.sin((radiansSoFar + n) * Math.PI) * radius, Math.cos((radiansSoFar + n) * Math.PI) * radius);
}
radiansSoFar += radians;
stage.addChild(piechart);
addLabel(radians, titles, 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);
}
}
}
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
No, I did not test it.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
Remove package path - it is my local environment and I forgot to remove it. You don't need it.
Copy link to clipboard
Copied
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; 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;
addLabel(radians, titles, 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];
}
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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);
}
for(i = 0; i < values.length; i++)
{
radians.push(Number(values) / 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 / 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; 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;
addLabel(radians, titles, 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);
}
}
}
Copy link to clipboard
Copied
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);
}
for(i = 0; i < values.length; i++)
{
radians.push(Number(values) / 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 / 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; 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;
segment.label = addLabel(radians, titles, 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;
}
}
}