Thursday, February 3, 2011

Creating charts using AS3: Part 11

Today we'll add labels to the pie chart.

It will look like this:


Before we call any functions, we need to define an array to hold all our label objects.

var labelArray:Array = [];

Now we can change our loop to draw the wedges in the drawChart function to this:

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

var newLabel:TextField = new TextField();
addChild(newLabel);
newLabel.text = givenData[l].lab;
newLabel.selectable = false;
newLabel.x = centerX + radius * Math.cos((degreesPerVal * givenData[l].val /2 + previousDegree)/ 180 * Math.PI);
newLabel.y = centerY + radius * Math.sin((degreesPerVal * givenData[l].val /2 + previousDegree)/ 180 * Math.PI);
labelArray.push(newLabel);

previousDegree = degreesPerVal * givenData[l].val + previousDegree;
}

As you can see, we create new textfield for each wedge and place it in the center of each pie slice. Remember that AS3 works in radians so we need to remember to convert degrees to rads.

Here's the full code:

import flash.display.Shape;
import flash.text.TextField;

var myData:Array = [{val:51,color:0x00CCFF,lab:"Internet Explorer"},{val:31,color:0xCC0000,lab:"Firefox"},{val:10,color:0x00CC66,lab:"Chrome"},{val:4,color:0xFF9966,lab:"Safari"},{val:3,color:0x999999,lab:"Other"}];

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

var labelArray:Array = [];

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;

for (var i:int = 0; i < labelArray.length; i++)
{
labelArray[l].parent.removeChild(labelArray[i]);
}
labelArray = [];

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);

var newLabel:TextField = new TextField();
addChild(newLabel);
newLabel.text = givenData[l].lab;
newLabel.selectable = false;
newLabel.x = centerX + radius * Math.cos((degreesPerVal * givenData[l].val /2 + previousDegree)/ 180 * Math.PI);
newLabel.y = centerY + radius * Math.sin((degreesPerVal * givenData[l].val /2 + previousDegree)/ 180 * Math.PI);
labelArray.push(newLabel);

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 9
Creating charts using AS3: Part 10
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

1 comment:

Anonymous said...

Thank you for an awesome collection of graph stuff, really helped me a lot! Quick question: is there an easy way to make the slices of the pie chart clickable?

Thanks again for a great resource!

Post a Comment