Drawing Graphs in ActionScript

Enter the hours worked each day, and then press ENTER to see a line graph.

Get Adobe Flash player

Experiment: Download the movie, and then experiment with the color. Can you make the graph twice as big?

Experiment: Make a graph of the sales for each month.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import flash.display.Shape;
var lineGraph:Shape = new Shape();
lineGraph.x=300;
lineGraph.y=30;
this.addChild(lineGraph);

stage.addEventListener(KeyboardEvent.KEY_DOWN,  doKeyDown);
function doKeyDown(e:KeyboardEvent):void {
     if(e.keyCode==13) drawGraph();
} //doKeyDown for(i=0;i<7;i++) {
function drawGraph():void {
	lineGraph.graphics.clear();
	lineGraph.graphics.beginFill(0xFFFFFF); //white
	lineGraph.graphics.drawRect(0,0,180,180);
	lineGraph.graphics.endFill(); 
	var val,i:int;
	//draw guidlines first (under the graph)
	lineGraph.graphics.lineStyle(0.5,0xCCCCCC); //width of 0.5, gray
	i=180;
	lineGraph.graphics.moveTo(0,i); //lower left corner
	lineGraph.graphics.lineTo(180,180);
	while(i>0){
		lineGraph.graphics.moveTo(0,i);
		lineGraph.graphics.lineTo(180,i);
		i-=8;
	} //guidelines
	lineGraph.graphics.lineStyle(1,0xFF0000); //width of 1, red
	lineGraph.graphics.beginFill(0xFF0000); //red
	for(i=0;i<7;i++) {
		val=this["txtDay"+i].text;
		if(i==0)lineGraph.graphics.moveTo(i*30,180-val*8);  
		else lineGraph.graphics.lineTo(i*30,180-val*8);
	}
	lineGraph.graphics.lineTo(180,180);//lower right corner
	lineGraph.graphics.lineTo(0,180); //lower left corner
	lineGraph.graphics.endFill();
} //drawGraph
CODE

NEXT: Date and Time