Friday, February 4, 2011

Creating charts using AS3: Part 12

Today we will start creating a pyramid graph.

In this tutorial, we'll simply draw the base for our 3d-ish pyramid. It will look like this:


Here's the code to it:

import flash.display.Shape;

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

As you can see, our drawChart() method has 5 parameters - height of our pyramid, base of our pyramid, the coordinates for the center of the base, and a closure value (which defines the line that goes from the center of the base to the foreground).

The values can be changed to whatever you like, the pyramid will be drawn automatically according to your values.

That's all for now.

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

No comments:

Post a Comment