In the previous recipes we've learned:
Transforming the data so that it shows up at the right location on the screen
Using the correct data structure so it's easy to display it
In the remaining recipes in this chapter, we will look into ActionScript's drawing methods and show you a few ways to customize the display.
This recipe looks at drawing area charts. They resemble a function chart, but the area between the chart line and the x-axis is filled. They are ideal to represent volumes.
Create a Recipe6 document class and set up the graph as in the previous recipe. We will use the two-dimensional data set because we will need an ordered data set:
package
{
import flash.display.Sprite;
public class Recipe6 extends Sprite
{
private var graph:Graph;
private var data:Array = [[0, 20], [50, 70], [100, 0], [150, 150], [200, 300], [250, 200], [300, 400], [350, 20], [400, 60], [450, 250], [500, 90], [550, 400], [600, 500], [650, 450], [700, 320]];
public function Recipe6()
{
graph = new Graph( -50, 550, 750, -50);
addChild(graph);
graph.drawHorizontalAxis(0, 0, 700, 50, ["0", "700"]);
graph.drawVerticalAxis(0, 0, 500, 50, ["0","250","500"]);
}
}
}Add the following code to the
Recipe6constructor:for (var i:Number = 1; i < data.length; i++) { graph.drawLine(data[i-1][0], data[i-1][1], data[i][0], data[i][1]); }Running the program at this point will yield the data set from the previous recipe, but now connected with a line.
In the
Graphclass, we create a copy of thedrawLinemethod and name itdrawArea. In the main program, we now replace thedrawLinecall. The result should still be the same. But now we change the code so that the area is filled:public function drawArea(x1:Number, y1:Number, x2:Number, y2:Number):void { var transformedLocation1:Point = matrix.transformPoint(new Point(x1, y1)); var transformedLocation2:Point = matrix.transformPoint(new Point(x2, y2)); var transformedOrigin:Point = matrix.transformPoint(new Point(0, 0)); var area:Shape = new Shape(); area.graphics.beginFill(0xff9933); area.graphics.moveTo(transformedLocation1.x, transformedLocation1.y); area.graphics.lineTo(transformedLocation2.x, transformedLocation2.y); area.graphics.lineTo(transformedLocation2.x, transformedOrigin.y); area.graphics.lineTo(transformedLocation1.x, transformedOrigin.y); area.graphics.endFill(); addChild(area); }If you run the program now, you should see an orange area chart. Everything below the line is now nicely filled with the orange color.
This recipe is created in two steps: first, display a line chart and next, fill the void beneath the line to obtain an area.
Because drawing a line requires two points, we start counting at 1 instead of 0. In the loop, we draw a line between the previous point and the current one.
There are two other things to note from the code:
We calculate the transformed origin. Actually, we only need the 0 y-coordinate, but it's easier to just use the matrix for this calculation.
Instead of drawing a line between two points, we create a "fill" between four points: the two that were used for the line and the two on the x-axis (with y = 0).
As with previous recipes, there's a lot that can be customized. Most of these will be discussed in some of the next recipes, but there's nothing keeping you from starting to experiment.
Right now, the fill color is fixed. You can make this a variable by using it as an argument to the drawArea method.
The ActionScript 3.0 reference has a lot more detail on creating and drawing filled shapes. It can be found at the following URL:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Graphics.html