Monday, February 7, 2011

Creating charts using AS3: Part 15

Today we will fill the sections of our pyramid with color.

Here's what it is going to look like:


What we basically do, is use the points that we calculated in the previous tutorial to draw a polygon. We can also remove the initial pyramid we've drawn because it will be covered anyway. Also, we will have 2 colors for each array element - col1 and col2 (for 2 sides).

Here's the full code:

import flash.display.Shape;

var myData:Array = [{val:30,col1:0xD7FFD4,col2:0xB1EEAC},{val:50,col1:0xFFC885,col2:0xFCB865},{val:20,col1:0xC6EAFF,col2:0x9BD8FC}];

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

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.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;
}
}

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