Sunday, February 6, 2011

Creating charts using AS3: Part 14

Today we'll see the proportioned lines on the diagonal lines of our pyramid too!

Here's how it is going to look like:


And here's the full code:

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 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.lineStyle(4, myData[a].col);
myChart.graphics.moveTo(baseCenterX, previousHeight);
myChart.graphics.lineTo(baseCenterX, previousHeight - myData[a].val * heightPerVal);

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

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

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

As you can see, we have 5 more variables: diagPerValY, diagPerValX, previousDiagY, previousDiagX and previousDiagX2.

We have separate values for diagPerVal for Y and X axises, because the values will be different. We have previousDiagX and previousDiagX2 as separate variables, because they are different for each side, while previousDiagY can be used for both of the lines.

The lines are being drawn in the same loop as usual.

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