Saturday, January 29, 2011

Creating charts using AS3: Part 6

In today's tutorial we will add labels to our line graph that display numeric value of the current point of the graph!

Just like in this example:


The method for creating labels in this graph is the same as the one in the bar chart in my previous tutorials - each label is created as a text field in the loop and then assigned to its needed position.

First, we need to create an array to hold our labels. This is needed to perform a clean up that will take place in the beginning of each drawing cycle.

var labelArray:Array = [];

The piece of code responsible for the clean up in the beginning of the drawChart() method:

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

And, the code in the loop responsible for drawing each text field and applying its position and text value:

var thisLabel:TextField = new TextField();
thisLabel.width = 50;
thisLabel.selectable = false;
addChild(thisLabel);
thisLabel.textColor = 0x000000;
thisLabel.text = chartData[n];
thisLabel.x = pointInterval * n + startX;
thisLabel.y = startY - thisHeight - 10;
labelArray.push(thisLabel);

Here's the full code:

var startX:Number = 10;
var startY:Number = 200;
var chartHeight:Number = 190;
var pointInterval:Number = 50;

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

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

drawChart();

function drawChart():void
{
myChart.graphics.clear();

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

myChart.x = startX;
myChart.y = startY;

myChart.graphics.lineStyle(2, 0x333333);

myChart.graphics.moveTo(0, 0);
myChart.graphics.lineTo(0, -chartHeight);
myChart.graphics.moveTo(0, 0);
myChart.graphics.lineTo((chartData.length - 1) * pointInterval, 0);

myChart.graphics.lineStyle(1, 0x0099FF);

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

if (n == 0)
{
myChart.graphics.moveTo(pointInterval * n, 0 - thisHeight);
}

myChart.graphics.lineTo(pointInterval * n, 0 - thisHeight);
myChart.graphics.endFill();

var thisLabel:TextField = new TextField();
thisLabel.width = 50;
thisLabel.selectable = false;
addChild(thisLabel);
thisLabel.textColor = 0x000000;
thisLabel.text = chartData[n];
thisLabel.x = pointInterval * n + startX;
thisLabel.y = startY - thisHeight - 10;
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;
}

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