Wednesday, February 2, 2011

Creating charts using AS3: Part 10

Today we'll create legends with labels for our pie chart.

The example below displays the usage of internet browsers in 2010:


This first thing we do is add labels to each element of our array:

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"}];

Next, we create a shape object and an array to hold text fields:

var myLegends:Shape = new Shape();
addChild(myLegends);
var legendArray:Array = [];

Then we can call the function drawLegends, which has 5 parameters - x, y, color square size, interval between rows and the array of data.

drawLegends(20, 230, 15, 25, myData);

Here's the function itself:

function drawLegends(theX:Number, theY:Number, theSize:Number, theInterval:Number, givenArray:Array):void
{
myLegends.graphics.clear();

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

var totalVal:Number = 0;

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

var valPercent:Number = 100/totalVal;

for (var d:int = 0; d < givenArray.length; d++)
{
myLegends.graphics.beginFill(givenArray[d].color);
myLegends.graphics.drawRect(theX, theY + d * theInterval, theSize, theSize);
var newLegend:TextField = new TextField();
addChild(newLegend);
newLegend.x = theX + theSize;
newLegend.y = theY + d * theInterval;
newLegend.selectable = false;
newLegend.width = 200;
newLegend.text = " - " + givenArray[d].lab + ", " + Math.round(valPercent * givenArray[d].val) + "%";
}
}

As you can see, in the beginning of the function we clear the graphics and the text fields we might have made before. Then we calculate how much in values equals one percent, and then we draw the legends.

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 myLegends:Shape = new Shape();
addChild(myLegends);
var legendArray:Array = [];

drawChart(200,110,100, myData);
drawLegends(20, 230, 15, 25, 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();

}

function drawLegends(theX:Number, theY:Number, theSize:Number, theInterval:Number, givenArray:Array):void
{
myLegends.graphics.clear();

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

var totalVal:Number = 0;

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

var valPercent:Number = 100/totalVal;

for (var d:int = 0; d < givenArray.length; d++)
{
myLegends.graphics.beginFill(givenArray[d].color);
myLegends.graphics.drawRect(theX, theY + d * theInterval, theSize, theSize);
var newLegend:TextField = new TextField();
addChild(newLegend);
newLegend.x = theX + theSize;
newLegend.y = theY + d * theInterval;
newLegend.selectable = false;
newLegend.width = 200;
newLegend.text = " - " + givenArray[d].lab + ", " + Math.round(valPercent * givenArray[d].val) + "%";
}
}

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