Tuesday, February 1, 2011

Creating charts using AS3: Part 9

Today we'll make our pie chart draw itself based on the values in an array.

Here's how it is going to look like:


First, we create the array that holds numeric values and color information:

var myData:Array = [{val:50,color:0xFF0000},{val:5,color:0x00FF00},{val:30,color:0xFF00FF},{val:40,color:0x00CCFF}];

Next, we add a new parameter to drawChart() that will be used to pass our array inside the method.

drawChart(200,150,100, myData);

function drawChart(centerX:Number, centerY:Number, radius:Number, givenData:Array):void
{

Then, in the drawChart function, we set up a variable totalVal and run through a loop to get the total numeric value of the val parameters in the array:

var totalVal:Number = 0;

for (var u:int = 0; u<givenData.length; u++)
{
totalVal +=  givenData[u].val;
}

After that we can create 2 new variables called degreesPerVal and previousDegree, used to store information on how many degrees does 1 equal and what is the end edge of our last wedge. Next - another loop to draw the wedges.

var degreesPerVal:Number = 360 / totalVal;
var previousDegree:Number = 0;

for (var l:int = 0; l<givenData.length; l++)
{
drawWedge(radius, previousDegree, degreesPerVal * givenData[l].val + previousDegree, givenData[l].color);
previousDegree = degreesPerVal * givenData[l].val + previousDegree;
}

Here's the full code:

import flash.display.Shape;

var myData:Array = [{val:50,color:0xFF0000},{val:5,color:0x00FF00},{val:30,color:0xFF00FF},{val:40,color:0x00CCFF}];

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

drawChart(200,150,100, myData);

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

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

var totalVal:Number = 0;

for (var u:int = 0; u<givenData.length; u++)
{
totalVal +=  givenData[u].val;
}

var degreesPerVal:Number = 360 / totalVal;
var previousDegree:Number = 0;

for (var l:int = 0; l<givenData.length; l++)
{
drawWedge(radius, previousDegree, degreesPerVal * givenData[l].val + previousDegree, givenData[l].color);
previousDegree = degreesPerVal * givenData[l].val + previousDegree;
}
}

function drawWedge(radius, startDeg, endDeg, color):void
{
myChart.graphics.beginFill(color);
myChart.graphics.moveTo(0, 0);
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.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 8
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