Wednesday, January 26, 2011

Creating charts using AS3: Part 3

Today we will add animation to our chart - the columns will raise to the needed height.

Here's how it is going to look like (refresh the page to see the animation again):


How it works: there is a separate array, which has values that increase from 1 to the values of chartData and new chart is generated from that array every 50 milliseconds.

First, we will add a new parameter for our chart - totalSteps. This will determine how many steps will there be in the animation.

var totalSteps:Number = 15;

Next, we set up a timer and all the needed variables with it. We create a tempData array, which is the one that will have its elements constantly increasing until they become the ones in chartData.

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

We call the animateChart() method to start the animation.

animateChart();

The function itself will set tempData to an empty array and then give it the same number of elements like in the dataChart array (each element will have numeric value of 1 - all bars at the lowest position).

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

The drawChart function will have some changes to it - the Array that we need to base our chart on AND the maximal numeric value will be passed on call:

function drawChart(givenData, givenMaxVal):void

Now, here is the animateStepFunc function that will be called every 50 milliseconds:

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

drawChart(tempData, maxVal(chartData));
}


The code checks if the current column's numeric value is lower than the one in chartData. If it is - increase it.

Here is the full code. It is pretty big, but simple if you understand how it works.

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 = [71,123,54,211,26,187];

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(1);
}
animateStep.start();
}

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

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] * chartHeight / givenMaxVal;

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 = givenData[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 2
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