Sunday, January 30, 2011

Creating charts using AS3: Part 7

Today we will add height marker lines to our line graph.

Those are the lines that are displayed every X numeric values on the y axis, where X is a customizable numeric value. The final thing will look like this:


First we set up a new variable - heightMarker. This will define how often should the lines be drawn. Note: the value isn't value in pixels, but a numeric value, just like the elements in chartData.

var heightMarker:Number = 50;

Add this piece of code to our drawChart() function. It will manage drawing the lines, and managing the labels for them.

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

var totalMarkers:Number = Math.floor(maxVal(chartData) / heightMarker) + 1;

for (var m:int = 0; m<totalMarkers; m++)
{
var thisMarkerHeight:Number = m * heightMarker * chartHeight / maxVal(chartData);
myChart.graphics.moveTo(0, -thisMarkerHeight);
myChart.graphics.lineTo((chartData.length - 1) * pointInterval, -thisMarkerHeight);

var thisMarkLabel:TextField = new TextField();
thisMarkLabel.width = 50;
thisMarkLabel.selectable = false;
addChild(thisMarkLabel);
thisMarkLabel.textColor = 0x666666;
thisMarkLabel.text = (m * heightMarker).toString();
thisMarkLabel.x = startX - 30;
thisMarkLabel.y = - thisMarkerHeight + myChart.y - 15;
labelArray.push(thisMarkLabel);
}

In the loop in the code above, there's a new variable defined - thisMarkerHeight. Its role is like the thisHeight variable's in the other loop of the drawChart function, with one exception - this one is calculated in its own way and is only appliable to the height markers.

I have set some offsets for x and y of thisMarkLabel (-30 and -15), you can change them to whatever you like, to make the labels look better for your design.

Here is the full code:

var startX:Number = 30;
var startY:Number = 200;
var chartHeight:Number = 190;
var pointInterval:Number = 50;
var heightMarker: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, 0xCCCCCC);

var totalMarkers:Number = Math.floor(maxVal(chartData) / heightMarker) + 1;

for (var m:int = 0; m<totalMarkers; m++)
{
var thisMarkerHeight:Number = m * heightMarker * chartHeight / maxVal(chartData);
myChart.graphics.moveTo(0, -thisMarkerHeight);
myChart.graphics.lineTo((chartData.length - 1) * pointInterval, -thisMarkerHeight);

var thisMarkLabel:TextField = new TextField();
thisMarkLabel.width = 50;
thisMarkLabel.selectable = false;
addChild(thisMarkLabel);
thisMarkLabel.textColor = 0x666666;
thisMarkLabel.text = (m * heightMarker).toString();
thisMarkLabel.x = startX - 30;
thisMarkLabel.y = - thisMarkerHeight + myChart.y - 15;
labelArray.push(thisMarkLabel);
}

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

2 comments:

Arick said...

I just came across your tutorial. These are great! Especially the tutorials on creating the line chart.

I had a question/request though. How would you handle the negative values in the line chart?

Thanks for your great work. Keep it up!

Logesh Kumar said...

This tutorial is very easy and fully dynamic..Fantastic... Thank you very much

Post a Comment