Simple line graph

[hohnjarper]

I'm just trying to create a simple line graph in Flash that reads from an external .txt file but I am terrible at action scripting and have no idea where to start. How would I go about doing this?

[mneil]

look into loadVars to get the info into the swf file. I would put coordinates in the txt file and have the drawing API in flash draw lines to these points. Things to look for in the help files would be

For the drawing api:

moveTo()
lineTo()

For reading the txt file:

loadVars()
onLoad()


To make things easy flash reads in variables from txt files like &point1X=30&point1Y=10&

This would give you 1 x,y coordinate to map to. To make less typing you could use split() in flash to just have one variable

&points=30,10&

This way everytime you wanted to plot another point you could just add two numbers but that will take more work inside flash to split up the string and convert to a number and all that. Anyway, that should be enough to get you started and bring up new questions.

[mneil]

Okay after telling you how you should go about it I got all excited and thought of a number of things a versitile graph drawing program would be so I went ahead and started it. Here's what I've got. Create a new fla file with 1 layer and 2 frames. On frame 1 in the actions panel put:

stop();//stop the playhead from advancing
var point = [];//create a blank array

var lv:LoadVars = new LoadVars();//set up new loadVars
lv.onLoad = function(success:Boolean) {//when the file loads
    if (success) {//if the file loads run these actions
        point = this.points.split("|");//split points var inside txt file
        trace(point[2]);//trace one array value to make sure its right
        gotoAndStop(2);//advance playhead 
    } else {//if file doesn't load or has a problem
    trace("Error loading/parsing LoadVars.");//spit out an error
    }
};
lv.load("points.txt");//load this file 

Then on Frame 2 put:

var Start:Number = 50;//how far up from the bottom and left of the stage you want your graph to be
var End:Number = 75;//how far from the edge you want the graph to stop
var Space:Number = 20;//how far apart to plot each x point

var line:MovieClip = this.createEmptyMovieClip("line", 100);//create 3 mc's to store lines inside
var bBar:MovieClip = this.createEmptyMovieClip("bBar", 150);
var sBar:MovieClip = this.createEmptyMovieClip("bBar", 150);

bBar.lineStyle(2,0x1E4974, 100);//set linestyle for the bottom bar
bBar.moveTo(Start, Stage.height-Start);//move the start pos of the bar
bBar.lineTo(Stage.width-End, Stage.height-Start);//draw a line across the stage

sBar.lineStyle(2,0x1E4974, 100);//does the same as bBar but for the side Bar
sBar.moveTo(Start, Stage.height-Start);
sBar.lineTo(Start,End);

line.lineStyle(0, 0x000000, 100);//set linestyle of the actual graph line
line.moveTo(Start, Stage.height-Start);//move it to points 0,0 of the graph

for(i=0; i<point.length; i++){//loop through the points in the array/txt file
    line.lineTo(Start+(Space*i),(Stage.height-Start) - point[i]);//plot points on the stage. x pos is spaced 
//evenly with the space variable. y pos is plotted from the numbers in the txt file
} 

Now save it to your desktop and open notepad and put this inside of it:

&points=0|30|50|10|20|100|75&

Save it as points.txt to your desktop then go back to flash and run your program. It plots those points on your graph. I've commented the code too so read it to figure it out. The numbers in the txt file are the y coordinates of the graph. x coordinates are figured out using math to plot them evenly across the stage. To change the spacing change the Space var to a different number.

PRETTY EASY! hope that helps.