making graphing script

[PunkSktBrdr01]

During geometry today, I came up with the idea to make a graphing script. However, I'm having some difficulty. Specifically, the problem is that the grid lines are not showing up. Here's my script:


<?
header("Content-Type: image/jpeg"); // send header info to browser
$image_width = 400; // set width of graph image
$image_height = 400; // set height of graph image
$image = imagecreatetruecolor($image_width, $image_height); // create a new image
$bgcolor = imagecolorallocate($image, 255, 255, 255); // set the background color
imagefill($image, 0, 0, $bgcolor); // fill the background of the image with the bg color
$horizontal = (isset($_GET['h'])) ? $_GET['h'] : 10; // set horizontal spacing for vertical grid lines
$h = $image_width / $horizontal; // find number of vertical grid lines to be drawn
$vertical = (isset($_GET['v'])) ? $_GET['v'] : 10; // set vertical spacing for horizontal grid lines
$v = $image_height / $vertical; // find number of horizontal grid lines to be drawn
$red = 150; // set amount of red for graph lines
$green = 150; // set amount of green for graph lines
$blue = 150; // set amount of blue for graph lines
$error_color = imagecolorallocate($image, 255, 189, 134); // set the error color
for($a = 0, $hpx = 0; $a < $h; $a++, $hpx + $horizontal) {
if($hpx != 0 && $hpx != $image_width) {
if($hpx != $image_width / 2) {
$hrcolor = imagecolorallocate($image, $red, $green, $blue);
}
else {
$hcolor = imagecolorallocate($image, $red - 40, $green - 40, $blue - 40);
}
imageline($image, 0, $hpx, $image_height, $hpx, $hcolor);
}
}
for($b = 0, $vpx = 0; $a < $v; $a++, $vpx + $vertical) {
if($vpx != 0 && $vpx != $image_height) {
if($vpx != $image_height / 2) {
$vcolor = imagecolorallocate($image, $red, $green, $blue);
}
else {
$vcolor = imagecolorallocate($image, $red - 40, $green - 40, $blue - 40);
}
imageline($image, $vpx, 0, $vpx, $image_width, $vcolor);
}
}
$x1 = (isset($_GET['x1'])) ? explode($_GET['x1']) : NULL;
$y1 = (isset($_GET['y1'])) ? explode($_GET['y1']) : NULL;
$x2 = (isset($_GET['x2'])) ? explode($_GET['x2']) : NULL;
$y2 = (isset($_GET['y2'])) ? explode($_GET['y2']) : NULL;
$coords_null = ($x1 == NULL || $y1 == NULL || $x2 == NULL || $y2 == NULL) ? TRUE : FALSE;
$coords_diff = (count($x1) != ((count($x1) + count($y1) + count($x2) + count($y2)) / 4)) ? TRUE : FALSE;
if($coords_null == TRUE || $coords_diff == TRUE) {
imagestring($image, 3, 0, 0, "Error: You did not provide enough coordinate values!", $error_color);
}
else {
for($i = 0; $i < count($x1); $i++) {
$lncolor = imagecolorallocate($image, mt_rand(150, 230), mt_rand(150, 230), mt_rand(150, 230));
imageline($image, $x1[$i], $y1[$i], $x2[$i], $y2[$i], $lncolor);
}
}
imagejpeg($image, "", 100);
imagedestroy($image);
?>


I'm planning on creating a form and a display page for this, but I haven't gotten that far. Any tips would be very helpful. I haven't done much with images before, so this is my big learning experience. Thanks!

[Jona]

Could you post the HTML form, please? Good work so far, by the way (unless you didn't do it :p).

[J]ona

[PunkSktBrdr01]

I don't have a form yet. I'm displaying the graph with <img src="graph.php?x1=...">. I wanted to get the graph working first. No sense making a form if the graph won't work. I'm just really puzzled with the graph, though, 'cause it should be working.

[Jona]

Exactly what would the IMG code look like? (I don't have time to figure it out. :p) Remember, you are the creator of your script--no one else is. So your code is easier for you to read than it is for me to. Just keep that in mind. ;)

[J]ona

[PunkSktBrdr01]

Here's what the img code could look like, depending on the user's input:


<img src="graph.php?h=10&v=10&x1=3&y1=79&x2=45&y2=63">


If h and v aren't specified, they default to 10 anyway. This is what puzzles me, because the lines should show up even if I don't specify h and v. Thanks for your help so far!

[Jona]

I get an error--"wrong parameter count for explode()" on the following lines: 38, 39, 40, 41. I'm assuming that's these lines:


$x1 = (isset($_GET['x1'])) ? explode($_GET['x1']) : NULL;
$y1 = (isset($_GET['y1'])) ? explode($_GET['y1']) : NULL;
$x2 = (isset($_GET['x2'])) ? explode($_GET['x2']) : NULL;
$y2 = (isset($_GET['y2'])) ? explode($_GET['y2']) : NULL;


Your explode() (http://php.net/explode) functions should have two parameters--the first should be the delimiter, the second should be the string to explode.

[J]ona

[PunkSktBrdr01]

Okay, I got that fixed. The live graph script is at:

http://www.radioactiverabbit.com/graph/graph.php

It draws the lines that are given as x1, y1, x2, and y2, but it isn't creating the background, which is supposed to be like graph paper. I cannot figure that part out. Anyway, thanks for all your help so far!

[Jona]

Hmm, well, I can figure out syntax errors, lol. But I've never done anything with images more complex than this script (http://sonoracabinets.com/testing/imgCreator.php). I'll try to help, though--could you post the modification you made to the script since you posted (about the explode() error)? Not the whole script, just the modified part...

Don't thank me unless I help you, by the way. It's more or less a waste of your time if I can't help, true? :)

[J]ona

[PunkSktBrdr01]

Here's the new code:


$x1 = (isset($_GET['x1'])) ? explode(",", $_GET['x1']) : NULL;
$y1 = (isset($_GET['y1'])) ? explode(",", $_GET['y1']) : NULL;
$x2 = (isset($_GET['x2'])) ? explode(",", $_GET['x2']) : NULL;
$y2 = (isset($_GET['y2'])) ? explode(",", $_GET['y2']) : NULL;


You have helped, so thanks.

[Jona]

Well, I've worked on it for about two hours straight now, and haven't gotten anything fixed. :p
Maybe you can get some help by testing out a few of the scripts people posted at PHP.net's imageline() (http://php.net/imageline) function page.

Sorry I couldn't be of more asisstance, like I said, I've only written a few very simple and elementary scripts as far as image creation goes... Perhaps you'd like to take a look at JPGraph (http://www.aditus.nu/jpgraph/).

[J]ona

[PunkSktBrdr01]

Thanks for everything. I appreciate your patience.

[Jona]

Originally posted by PunkSktBrdr01
Thanks for everything. I appreciate your patience.

In this case, everything = nothing. :p I appreciate your patience. I've done, well, little if anything...

[J]ona

[PunkSktBrdr01]

Hey, I got it to work! I found the problem, which was merely an incorrect variable name in one of the for loops! Here's the new code:


<?
header("Content-Type: image/jpeg"); // send header info to browser
$image_width = 400; // set width of graph image
$image_height = 400; // set height of graph image
$image = imagecreatetruecolor($image_width, $image_height); // create a new image
$bgcolor = imagecolorallocate($image, 255, 255, 255); // set the background color
imagefill($image, 0, 0, $bgcolor); // fill the background of the image with the bg color
$horizontal = (isset($_GET['h'])) ? $_GET['h'] : 10; // set horizontal spacing for vertical grid lines
$h = $image_width / $horizontal; // find number of vertical grid lines to be drawn
$vertical = (isset($_GET['v'])) ? $_GET['v'] : 10; // set vertical spacing for horizontal grid lines
$v = $image_height / $vertical; // find number of horizontal grid lines to be drawn
$red = 220; // set amount of red for graph lines
$green = 220; // set amount of green for graph lines
$blue = 220; // set amount of blue for graph lines
$error_color = imagecolorallocate($image, 255, 0, 0); // set the error color
$lines_color = imagecolorallocate($image, $red, $green, $blue); // set the grid line color
$hpx = $horizontal;
$vpx = $vertical;
for($a = 0; $a < $h; $a++) {
imageline($image, 0, $hpx, $image_height, $hpx, $lines_color);
$hpx += $horizontal;
}
for($b = 0; $b < $v; $b++) {
imageline($image, $vpx, 0, $vpx, $image_width, $lines_color);
$vpx += $vertical;
}
$x1 = (isset($_GET['x1'])) ? explode(",", $_GET['x1']) : NULL;
$y1 = (isset($_GET['y1'])) ? explode(",", $_GET['y1']) : NULL;
$x2 = (isset($_GET['x2'])) ? explode(",", $_GET['x2']) : NULL;
$y2 = (isset($_GET['y2'])) ? explode(",", $_GET['y2']) : NULL;
$coords_null = ($x1 == NULL || $y1 == NULL || $x2 == NULL || $y2 == NULL) ? TRUE : FALSE;
$coords_diff = (count($x1) != ((count($x1) + count($y1) + count($x2) + count($y2)) / 4)) ? TRUE : FALSE;
if($coords_null == TRUE || $coords_diff == TRUE) {
imagestring($image, 3, 0, 0, "Error: Incorrect number of coordinate values!", $error_color);
}
else {
for($i = 0; $i < count($x1); $i++) {
$lncolor = imagecolorallocate($image, mt_rand(50, 210), mt_rand(50, 210), mt_rand(50, 210));
imageline($image, $x1[$i] + 200, $y1[$i], $x2[$i] + 200, $y2[$i], $lncolor);
}
}
imagejpeg($image, "", 100);
imagedestroy($image);
?>


Now, I'm trying to get it to correctly graph coordinates that are given the normal way (where the bottom is negative). I've got it working on the x axis (you only have to add 200, so -200 becomes 0 and shows up at the far left). The problem is the y axis, because on computers, the negatives go at the top, but in real life, the negatives go at the bottom. I looked at the PHP math functions, and there isn't a way to invert numbers, so I don't know how this could be done. Hope I'm not being too confusing. Thanks! The live script is at the same place as before. To enter coordinates, add "?x1=num&y1=num&x2=num&y2=num" to the end of the URL. To graph multiple lines at once, separate the coordinates with a comma (x1=num1,num2...).

[Jona]

Multiply the number by a negative or positive one (1) to switch it from negative to positive.

[J]ona

[PunkSktBrdr01]

Wow, thank you so very much for all your help! I finally got it to work the way I had originally intended. Here's the code:


<?
header("Content-Type: image/png"); // send header info to browser
$image_width = 400; // set width of graph image
$image_height = 400; // set height of graph image
$image = imagecreatetruecolor($image_width, $image_height); // create a new image
$bgcolor = imagecolorallocate($image, 255, 255, 255); // set the background color
imagefill($image, 0, 0, $bgcolor); // fill the background of the image with the bg color
$horizontal = (isset($_GET['h'])) ? $_GET['h'] : 10; // set horizontal spacing for vertical grid lines
$h = $image_width / $horizontal; // find number of vertical grid lines to be drawn
$vertical = (isset($_GET['v'])) ? $_GET['v'] : 10; // set vertical spacing for horizontal grid lines
$v = $image_height / $vertical; // find number of horizontal grid lines to be drawn
$red = 220; // set amount of red for graph lines
$green = 220; // set amount of green for graph lines
$blue = 220; // set amount of blue for graph lines
$error_color = imagecolorallocate($image, 255, 0, 0); // set the error color
$lines_color = imagecolorallocate($image, $red, $green, $blue); // set the standard grid line color
$midln_color = imagecolorallocate($image, $red - 100, $green - 100, $blue -100); // set the mid grid line color
$hpx = $horizontal;
$vpx = $vertical;
// this for loop will draw the vertical grid lines
for($a = 0; $a < $h; $a++) {
$vln_color = ($hpx == $image_width / 2) ? $midln_color : $lines_color;
imageline($image, 0, $hpx, $image_height, $hpx, $vln_color);
$hpx += $horizontal;
}
// this for loop will draw the horizontal grid lines
for($b = 0; $b < $v; $b++) {
$hln_color = ($vpx == $image_height / 2) ? $midln_color : $lines_color;
imageline($image, $vpx, 0, $vpx, $image_width, $hln_color);
$vpx += $vertical;
}
// these retrieve the coordinates for line to be graphed
$x1 = (isset($_GET['x1'])) ? explode(",", $_GET['x1']) : NULL;
$y1 = (isset($_GET['y1'])) ? explode(",", $_GET['y1']) : NULL;
$x2 = (isset($_GET['x2'])) ? explode(",", $_GET['x2']) : NULL;
$y2 = (isset($_GET['y2'])) ? explode(",", $_GET['y2']) : NULL;
// these determine whether there are the proper amount of coordinates
$coords_null = ($x1 == NULL || $y1 == NULL || $x2 == NULL || $y2 == NULL) ? TRUE : FALSE;
$coords_diff = (count($x1) != ((count($x1) + count($y1) + count($x2) + count($y2)) / 4)) ? TRUE : FALSE;
// this creates an error message if there aren't the proper amount of coordinates
if($coords_null == TRUE || $coords_diff == TRUE) {
imagestring($image, 3, 0, 0, "Error: Incorrect number of coordinate values!", $error_color);
}
//this draws the lines if there are the proper amount of coordinates
else {
for($i = 0; $i < count($x1); $i++) {
$lncolor = imagecolorallocate($image, mt_rand(50, 210), mt_rand(50, 210), mt_rand(50, 210));
imageline($image, ($x1[$i] + 200), ($y1[$i] * -1 + 200), ($x2[$i] + 200), ($y2[$i] *-1 + 200), $lncolor);
}
}
imagepng($image);
imagedestroy($image);
?>


I got it to darken the mid lines so the graph is divided into the four quadrants! I'll get to work on the form as soon as I can. If you have any suggestions of improvements let me know. Thanks again!

[Jona]

Glad to be of help! :)

[J]ona

[PunkSktBrdr01]

Okay, I finished the whole graphing thing, which I call The Grapher. You now can change the size of the graph and the spacing of the grid lines. Also, it shows the line endpoint coordinates on the graph. The Grapher is located at:

http://www.radioactiverabbit.com/graph/

Thanks again for all your help!

[Jona]

Well done! :)

[J]ona