Monday, January 24, 2011

Creating charts using AS3: Part 1

Today we will create a simple graph that takes numeric values from an array and turns them into columns.

Here's what we will be making:


First of all, we set up the parameters for our chart, such as column width, starting coordinates, etc:

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

The startX and startY values are the coordinates of the bottom left corner of the chart. The chartHeight value - the height of the colum with the highest numeric value. ColumnWidth and columnInterval set the width of a single column and the distance between columns.

Next step, the array with the data to display in chart:

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

Now we set up the myChart shape object, which will be the drawing area.

var myChart:Shape = new Shape();
addChild(myChart);

We will need to use the maxVal function to find the highest value in array:

function maxVal(givenArray):Number
{
return Math.max.apply(this, givenArray);
}

Now we can finally call the drawChart() method, which will generate the chart.

drawChart();

Here it is:

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

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

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

myChart.graphics.lineStyle(1, 0x0000FF);
myChart.graphics.beginFill(0x5555FF); 
myChart.graphics.drawRect(columnInterval * n + columnWidth * n, 0 - thisHeight, columnWidth, thisHeight);
myChart.graphics.endFill();
}
}

As you can see, we run through the array using a loop and the first thing we do with each element is compute the height of that column. We do that by multiplying the element's numeric value by chartHeight variable and divide this by the highest value in the array. This way we generate a column on a scale where 100% is the highest value in array (and has the height of chartHeight).

Full code:

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

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

var myChart:Shape = new Shape();
addChild(myChart);

drawChart();

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

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

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

myChart.graphics.lineStyle(1, 0x0000FF);
myChart.graphics.beginFill(0x5555FF); 
myChart.graphics.drawRect(columnInterval * n + columnWidth * n, 0 - thisHeight, columnWidth, thisHeight);
myChart.graphics.endFill();
}
}


function maxVal(givenArray):Number
{
return Math.max.apply(this, givenArray);
}

Thanks for reading!

Related:

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