Dynamic Graphs
To demonstrate some of the power of GDLib, we will use a voting poll in which a bar graph of the results is generated as an example. To see a graph like this in action, check out http://www.tamocomics.com, my web comic (shameless advert), and click on “View Results” on the homepage. The first step of making a voting poll is, obviously, to set up the database. I made two tables in MySQL to handle the voting; one that held the names and HTML values of the different voting options, and another that kept track of the actual votes. There are millions of ways one could set up a voting poll; this is not the only way and definitely not the best. The “HTML values” in the first table are simply shorter versions of the actual names that were used in the HTML forms (ex: “Yes” would be “y”). This was made to take into account vote options with spaces (ex: “I like the site a lot”). To avoid any later trouble, I used the “name” only for display, and all the calculations took place on the “HTML value.” In the second table, all that is really necessary is a column for the HTML value of the user’s vote. IP addresses and id numbers can be added as well depending on the site’s needs. A sample “options” table would be as follows:
+----+-----------+-------+ | id | name | value | +----+-----------+-------+ | 1 | Hat | hat | | 2 | Tee shirt | shirt | | 3 | Pants | pants | | 4 | Mug | mug | +----+-----------+-------+
And a “poll” table (where the actual votes are recorded; the second of the above mentioned tables) might look like this:
+----+-----------+-------+ | id | ip | vote | +----+-----------+-------+ | 1 | 127.0.0.1 | hat | | 2 | 127.0.0.1 | shirt | | 3 | 127.0.0.1 | hat | | 4 | 127.0.0.1 | mug | | 5 | 127.0.0.1 | pants | | 6 | 127.0.0.1 | shirt | | 7 | 127.0.0.1 | mug | | 8 | 127.0.0.1 | hat | | 9 | 127.0.0.1 | pants | | 10 | 127.0.0.1 | shirt | | 11 | 127.0.0.1 | mug | | 12 | 127.0.0.1 | pants | | 13 | 127.0.0.1 | pants | | 14 | 127.0.0.1 | shirt | | 15 | 127.0.0.1 | hat | | 16 | 127.0.0.1 | shirt | | 17 | 127.0.0.1 | hat | | 18 | 127.0.0.1 | mug | +----+-----------+-------+
Note that all the IP addresses in this example were 127.0.0.1, as the results were generated locally off of my server. Had these been real votes, the UP addresses would be different. Now assuming that you have all of this information (recording votes is a whole different story, and wont be covered in this article), its time to finally get to the point of all this: displaying it in a graph. The first step in making any graph is to use a base image. A base image is a ready-made image that is used as a base for your dynamic art. It is a graphic template that goes under the
imagereactangle and imagefilledreactangle commands. For a graph, this image is usually a set of axes, and the bars/lines/dots are drawn over it. Any image will do, but you have to keep several things in mind: The distance of the x-axes from the left hand side, the distance of the y-axes from the top side, the height of the x-axes and the length of the y-axes (all in pixels). Most drawing programs have a ruler tool to help get measurements exact. Be careful, however, being off by two of three pixels can ruin the entire effect of the graph. A note before we begin: as said before, PNG’s seem to surpass JPEG’s in terms of quality, and PNG’s will be used in this example. Now on to the coding. The first line is, of course, the header, followed by a line that may look familiar, but is in fact a new function.
<?php
header ("Content-type: image/png");
$im = imagecreatefrompng ("graphtemp.png");
?>
