Sunday, February 13, 2011

Creating charts using AS3: Part 21

In this tutorial we'll add labels to our brick chart.

And it is going to look like this:


As usual, we're adding a labelArray to store the label textfields to perform a clean up. The labels are being added to the chart in the drawChart() function's loop, the same place where we draw each segment of the chart.

Here is the full code:

import flash.display.Shape;

var myData:Array = [{val:51,col:0x00CCFF,col2:0x07ABD4,lab:"Internet Explorer"},{val:31,col:0xCC0000,col2:0xB10101,lab:"Firefox"},{val:10,col:0x00CC66,col2:0x03A654,lab:"Chrome"},{val:4,col:0xFF9966,col2:0xE2723A,lab:"Safari"},{val:3,col:0x999999,col2:0x777575,lab:"Other"}];

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

var labelArray:Array = [];

drawChart(300, 140, 200, 380, 40);

function drawChart(theHeight:Number, theWidth:Number, baseCenterX:Number, baseCenterY:Number, closure:Number):void
{
myChart.graphics.clear();

var totalVal:Number = 0;

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


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

var heightPerVal:Number = theHeight / totalVal;
var previousHeight:Number = baseCenterY;

for (var a:int = 0; a<myData.length; a++)
{
myChart.graphics.beginFill(myData[a].col);
myChart.graphics.moveTo(baseCenterX-theWidth/2, previousHeight);
myChart.graphics.lineTo(baseCenterX-theWidth/2, previousHeight - myData[a].val * heightPerVal);
myChart.graphics.lineTo(baseCenterX+theWidth/2, previousHeight - myData[a].val * heightPerVal);
myChart.graphics.lineTo(baseCenterX+theWidth/2, previousHeight);
myChart.graphics.lineTo(baseCenterX-theWidth/2, previousHeight);
myChart.graphics.endFill();
myChart.graphics.beginFill(myData[a].col2);
myChart.graphics.moveTo(baseCenterX+theWidth/2, previousHeight);
myChart.graphics.lineTo(baseCenterX+theWidth/2+closure, previousHeight-closure);
myChart.graphics.lineTo(baseCenterX+theWidth/2+closure, previousHeight - myData[a].val * heightPerVal - closure);
myChart.graphics.lineTo(baseCenterX+theWidth/2, previousHeight - myData[a].val * heightPerVal);
myChart.graphics.endFill();

var newLabel:TextField = new TextField();
addChild(newLabel);
newLabel.text = myData[a].lab + ", " + Math.round(myData[a].val * 100 / totalVal) + "%";
newLabel.y = previousHeight - myData[a].val * heightPerVal / 2 - 10;
newLabel.x = baseCenterX - theWidth / 2;
newLabel.selectable = false;
newLabel.width = theWidth;
labelArray.push(newLabel);

previousHeight = previousHeight - myData[a].val * heightPerVal;
}

myChart.graphics.beginFill(myData[myData.length-1].col);
myChart.graphics.moveTo(baseCenterX+theWidth/2, baseCenterY-theHeight);
myChart.graphics.lineTo(baseCenterX-theWidth/2, baseCenterY-theHeight);
myChart.graphics.lineTo(baseCenterX-theWidth/2+closure, baseCenterY-theHeight-closure);
myChart.graphics.lineTo(baseCenterX+theWidth/2+closure, baseCenterY-theHeight-closure);
myChart.graphics.endFill();

}

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

No comments:

Post a Comment