Friday, February 11, 2011

Creating charts using AS3: Part 19

Today we'll show the heights of different sections of the brick chart, according to data in an array.

Here's how it is going to look like:


First of all, we set up the array. I just took the one from the previous tutorials:

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

Next, we set up the totalVal, heightPerVal and previousHeight variables inside the drawChart() function to help us draw the proportioned sections:

var totalVal:Number = 0;

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

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

And now we simply draw the lines using a loop.

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

Here's the full code:

import flash.display.Shape;

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

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

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

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

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

myChart.graphics.beginFill(0xD7FFD4);

myChart.graphics.drawRect(baseCenterX-theWidth/2, baseCenterY-theHeight, theWidth, theHeight);
myChart.graphics.endFill();

myChart.graphics.beginFill(0xB1EEAC);

myChart.graphics.moveTo(baseCenterX+theWidth/2, baseCenterY);
myChart.graphics.lineTo(baseCenterX+theWidth/2+closure, baseCenterY-closure);
myChart.graphics.lineTo(baseCenterX+theWidth/2+closure, baseCenterY-theHeight-closure);
myChart.graphics.lineTo(baseCenterX+theWidth/2, baseCenterY-theHeight);

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

var totalVal:Number = 0;

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

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

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

}

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 16
Creating charts using AS3: Part 17
Creating charts using AS3: Part 18
Creating charts using AS3: Part 20
Creating charts using AS3: Part 21

No comments:

Post a Comment