Friday, January 28, 2011

Creating charts using AS3: Part 5

In this tutorial we will create a line graph.

Here's what it is going to look like:


First let's take a look at the parameter variables we'll be using.

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

As you can see, the variables are similar to the ones used on the bar graph we did in the previous tutorials. However, there are no more columnWidth and columnInterval variables, but there's a new one instead, and that is pointInterval.

Let's see the function that draws our chart:

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

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

As you can see, we do some drawing before even calling the loop - for drawing the X and Y axis for the graph. After we're done with those lines, we can change the color and start drawing the main graph lines (in the for loop).

Here is the full code for the example above:

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

drawChart();

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

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


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

Next time we'll add more features to it.

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