Saturday, February 5, 2011

Creating charts using AS3: Part 13

In this tutorial we will calculate the heights of different sections of the pyramid, generated from an array of data.

We have an array of data (a numeric value and a color value for each element).

var myData:Array = [{val:30,col:0xFF0000},{val:50,col:0x00FF00},{val:20,col:0x0000FF}];

Percentage is calculated and displayed on the pyramid as the different-sized colored lines:


Here's the code used in the example:

import flash.display.Shape;

var myData:Array = [{val:30,col:0xFF0000},{val:50,col:0x00FF00},{val:20,col:0x0000FF}];

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

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

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

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

myChart.graphics.beginFill(0xD7FFD4);

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

myChart.graphics.beginFill(0xB1EEAC);

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

var totalVal:Number = 0;

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

var heightPerVal:Number = (theHeight + closure)/totalVal;
var previousHeight:Number = baseCenterY+closure;

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

As you can see, we first calculate the total value of the data array to define the heightPerVal value. This way we can just multiply the values from array to this number and we will get the needed height for our line.

Next, we set up a variable called previousHeight. At first it equals the lowest possible point on the vertical line.

After that, we simply draw the lines, calculating their heights using everything we've got before.

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