Monday, January 31, 2011

Creating charts using AS3: Part 8

Today we will start creating a pie chart using Actionscript 3!

Here's what we'll be making today:


The first part of the code is basically setting everything up.

import flash.display.Shape;

var myChart:Shape = new Shape();
addChild(myChart);

drawChart(200,150,100);

function drawChart(centerX:Number, centerY:Number, radius:Number):void
{
myChart.graphics.clear();
myChart.x = centerX;
myChart.y = centerY;

myChart.graphics.lineStyle(1, 0x000000);

drawWedge(radius, 5, 220, 0x00CCFF);
drawWedge(radius, 220, 365, 0x00CC00);
}

As you can see, there are 3 parameters in the drawChart method for now - centerX, centerY and radius (self-explanatory). In the end of the drawChart() function we call a drawWedge method twice, which has 4 parameters - radius, starting point (degrees), ending point (degrees) and the color of the wedge.

Here's the function itself:

function drawWedge(radius, startDeg, endDeg, color):void
{
myChart.graphics.beginFill(color);
myChart.graphics.moveTo(0, 0);
myChart.graphics.lineTo(radius * Math.cos(startDeg / 180 * Math.PI), radius * Math.sin(startDeg / 180 * Math.PI));
for (var i:int = startDeg; i<=endDeg; i++)
{
myChart.graphics.lineTo(radius * Math.cos(i / 180 * Math.PI), radius * Math.sin(i / 180 * Math.PI));
}
myChart.graphics.lineTo(0,0);
myChart.graphics.endFill();

}

What I do is first draw a straight line to the starting point on the circle, then draw a curve using a loop and then draw a line back to the center of the circle. In the end, I fill the shape with a color.

Full code:

import flash.display.Shape;

var myChart:Shape = new Shape();
addChild(myChart);

drawChart(200,150,100);

function drawChart(centerX:Number, centerY:Number, radius:Number):void
{
myChart.graphics.clear();
myChart.x = centerX;
myChart.y = centerY;

myChart.graphics.lineStyle(1, 0x000000);

drawWedge(radius, 5, 220, 0x00CCFF);
drawWedge(radius, 220, 365, 0x00CC00);
}

function drawWedge(radius, startDeg, endDeg, color):void
{
myChart.graphics.beginFill(color);
myChart.graphics.moveTo(0, 0);
myChart.graphics.lineTo(radius * Math.cos(startDeg / 180 * Math.PI), radius * Math.sin(startDeg / 180 * Math.PI));
for (var i:int = startDeg; i<=endDeg; i++)
{
myChart.graphics.lineTo(radius * Math.cos(i / 180 * Math.PI), radius * Math.sin(i / 180 * Math.PI));
}
myChart.graphics.lineTo(0,0);
myChart.graphics.endFill();

}

Thanks for reading!

Related:

Creating charts using AS3: Part 1
Creating charts using AS3: Part 2
Creating charts using AS3: Part 3
Creating charts using AS3: Part 4
Creating charts using AS3: Part 5
Creating charts using AS3: Part 6
Creating charts using AS3: Part 7
Creating charts using AS3: Part 9
Creating charts using AS3: Part 10
Creating charts using AS3: Part 11
Creating charts using AS3: Part 12
Creating charts using AS3: Part 13
Creating charts using AS3: Part 14
Creating charts using AS3: Part 15
Creating charts using AS3: Part 16
Creating charts using AS3: Part 17
Creating charts using AS3: Part 18
Creating charts using AS3: Part 19
Creating charts using AS3: Part 20
Creating charts using AS3: Part 21

No comments:

Post a Comment