Tuesday, February 8, 2011

Creating charts using AS3: Part 16

Today we will add labels to our pyramid chart.

And it will look like this:


Here's the full code:

import flash.display.Shape;

var myData:Array = [{val:52,col1:0xD7FFD4,col2:0xB1EEAC,lab:"Internet Explorer"},{val:31,col1:0xFFC885,col2:0xFCB865,lab:"Firefox"},{val:10,col1:0xC6EAFF,col2:0x9BD8FC,lab:"Chrome"},{val:7,col1:0xD7B5FA,col2:0xCE9FFC,lab:"Other"}];

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

var labelArray:Array = [];

drawChart(300, 300, 200, 350, 40);

function drawChart(theHeight:Number, theBase: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 + closure)/totalVal;
var diagPerValY:Number = theHeight / totalVal;
var diagPerValX:Number = theBase/(2 * totalVal);
var previousHeight:Number = baseCenterY + closure;

var previousDiagY:Number = baseCenterY;
var previousDiagX:Number = baseCenterX - theBase / 2;
var previousDiagX2:Number = baseCenterX + theBase / 2;

for (var a:int = 0; a<myData.length; a++)
{
myChart.graphics.beginFill(myData[a].col1);

myChart.graphics.moveTo(baseCenterX, previousHeight);
myChart.graphics.lineTo(baseCenterX, previousHeight - myData[a].val * heightPerVal);
myChart.graphics.lineTo(previousDiagX + diagPerValX * myData[a].val, previousDiagY - diagPerValY * myData[a].val);
myChart.graphics.lineTo(previousDiagX, previousDiagY);
myChart.graphics.lineTo(baseCenterX, previousHeight);

myChart.graphics.beginFill(myData[a].col2);

myChart.graphics.lineTo(previousDiagX2, previousDiagY);
myChart.graphics.lineTo(previousDiagX2 - diagPerValX * myData[a].val, previousDiagY - diagPerValY * myData[a].val);
myChart.graphics.lineTo(baseCenterX, previousHeight - myData[a].val * heightPerVal);

previousDiagX = previousDiagX + diagPerValX * myData[a].val;
previousDiagX2 = previousDiagX2 - diagPerValX * myData[a].val;
previousDiagY = previousDiagY - diagPerValY * myData[a].val;
previousHeight = previousHeight - myData[a].val * heightPerVal;

var newLabel:TextField = new TextField();
addChild(newLabel);
newLabel.text = myData[a].lab;
newLabel.y = previousDiagY;
newLabel.x = previousDiagX2;
newLabel.selectable = false;
labelArray.push(newLabel);
}
}

As you can see, there's a new parameter for each element in the array - lab. A labelArray is created to store all the text fields to perform a clean up when needed. Labels are created in the loop in the drawChart function.

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