Tuesday, January 25, 2011

Creating charts using AS3: Part 2

In this tutorial we will add labels to our chart that show the numeric value of each column.

This is how it is going to look like:


Firstly, outside of the drawChart() method, we will create a new array that will hold all the label text fields. This is needed to perform a clean up when needed. We clean up all the drawings and labels before we draw the chart - this means we can use the same drawChart() for the same shape objects as many times as we can, and it will generate a new chart every time.

var labelArray:Array = [];

In the beginning of the drawChart() we remove all the labels:

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

Now, the code that creates each label and positions it in the center of the column. This is being done in the same loop that is used to draw the rectangles.

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

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 = 0 - thisHeight / 2 + chartHeight;
labelArray.push(thisLabel);
}

Here is the full code:

import flash.text.TextField;

var startX:Number = 10;
var startY:Number = 200;
var chartHeight:Number = 190;
var columnWidth:Number = 30;
var columnInterval:Number = 15;

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

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

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 = 0 - thisHeight / 2 + chartHeight;
labelArray.push(thisLabel);
}
}


function maxVal(givenArray):Number
{
return Math.max.apply(this, givenArray);
}

Thanks for reading!

Related:

Creating charts using AS3: Part 1
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 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