Wednesday, February 9, 2011

Creating charts using AS3: Part 17

In this tutorial we will make our bar chart 3d-ish.

Here's how it is going to look like in the end:


Here's the code:

import flash.text.TextField;

var startX:Number = 10;
var startY:Number = 200;
var chartHeight:Number = 170;
var columnWidth:Number = 30;
var columnInterval:Number = 40;

var chartData:Array = [71,123,54,211];

var myChart:Shape = new Shape();
addChild(myChart);
var labelArray:Array = [];

drawChart();

function drawChart():void
{
// remove all the previous stuff
myChart.graphics.clear();

for (var la:int = 0; la<labelArray.length; la++)
{
labelArray[la].parent.removeChild(labelArray[la]);
}
labelArray = [];

// generate chart
myChart.x = startX;
myChart.y = startY;

for (var n:int = 0; n<chartData.length; n++)
{
var thisHeight:Number = chartData[n] * chartHeight / maxVal(chartData);

myChart.graphics.lineStyle(1, 0x0000FF);
myChart.graphics.beginFill(0x5555FF);
myChart.graphics.drawRect(columnInterval * n + columnWidth * n, 0 - thisHeight, columnWidth, thisHeight);
myChart.graphics.endFill();
myChart.graphics.beginFill(0x4444D4);
myChart.graphics.moveTo(columnInterval * n + columnWidth * n, 0 - thisHeight);
myChart.graphics.lineTo(columnInterval * n + columnWidth * n + columnWidth/2, 0 - thisHeight - columnWidth/2);
myChart.graphics.lineTo(columnInterval * n + columnWidth * n + columnWidth * 1.5, 0 - thisHeight - columnWidth/2);
myChart.graphics.lineTo(columnInterval * n + columnWidth * n + columnWidth, 0 - thisHeight);
myChart.graphics.moveTo(columnInterval * n + columnWidth * n + columnWidth, 0);
myChart.graphics.lineTo(columnInterval * n + columnWidth * n + columnWidth * 1.5, 0 - columnWidth/2);
myChart.graphics.lineTo(columnInterval * n + columnWidth * n + columnWidth * 1.5, 0 - thisHeight - columnWidth/2);
myChart.graphics.lineTo(columnInterval * n + columnWidth * n + columnWidth, 0 - thisHeight);
myChart.graphics.endFill();

var thisLabel:TextField = new TextField();
thisLabel.width = columnWidth;
addChild(thisLabel);
thisLabel.textColor = 0xFFFFFF;
thisLabel.text = chartData[n];
thisLabel.x = columnInterval * n + columnWidth * n + 0.5 * columnWidth;
thisLabel.y = startY - thisHeight/2;
labelArray.push(thisLabel);
}
}


function maxVal(givenArray):Number
{
var max = givenArray[0];
for (var m:int = 0; m<givenArray.length; m++)
{
if (givenArray[m] > max)
{
max = givenArray[m];
}
}
return max;
}

The 3d effect is given to the bars by drawing the other 2 sides. Their length is related to the columnWidth variable. Change that variable - and the bars will be come thicker.

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

No comments:

Post a Comment