Thursday, January 27, 2011

Creating charts using AS3: Part 4

In this tutorial we will make different colours for our graph columns.

Here's how it is going to look like:


Here's the code:

import flash.text.TextField;
import flash.utils.Timer;

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

var chartData:Array = [{val:71,color:0xFF0000},{val:123,color:0x00FF00},{val:54,color:0x0000FF},{val:211,color:0xFFFF00},{val:26,color:0x9900FF},{val:187,color:0xF0F0F0}];

var myChart:Shape = new Shape();
addChild(myChart);
var labelArray:Array = [];
var tempData:Array = [];
var animateStep:Timer = new Timer(50);
var step:Number = maxVal(chartData) / totalSteps;
animateStep.repeatCount = totalSteps + 1;
animateStep.addEventListener(TimerEvent.TIMER, animateStepFunc);

animateChart();

function animateChart():void
{
tempData = [];
for (var td:int = 0; td<chartData.length; td++)
{
tempData.push({val: 1, color:0x000000});
}
animateStep.start();
}

function animateStepFunc(TimerEvent):void
{
for (var an:int = 0; an<tempData.length; an++)
{
if (tempData[an].val < chartData[an].val)
{
tempData[an].val +=  step;
tempData[an].val = Math.floor(tempData[an].val);
}
else
{
tempData[an].val = chartData[an].val;
}
tempData[an].color = chartData[an].color;
}

drawChart(tempData, maxVal(chartData));
}

function drawChart(givenData, givenMaxVal):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<givenData.length; n++)
{
var thisHeight:Number = givenData[n].val * chartHeight / givenMaxVal;

myChart.graphics.beginFill(givenData[n].color);
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 = 0x000000;
thisLabel.text = givenData[n].val;
thisLabel.x = columnInterval * n + columnWidth * n + 0.5 * columnWidth;
thisLabel.y = 0 - thisHeight / 2 + chartHeight;
labelArray.push(thisLabel);
}
}


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

}

As you can see, we made an associative array of objects with two parameters: val and color, so every time we refer to our array (or the temporary array) we refer to val or color.

The maxVal function doesn't use Math.max anymore (because we have an array of objects, not numbers) so I've made the function only loop through the val parameters of the given array.

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