PHP Hacks: Tips & Tools For Creating Dynamic Websites
Hack 22. Add Vector Graphics with PHP
Use JavaScript to render line graphics without plug-ins. You would think that with its inception as a language for writing scientific papers, HTML would support vector graphics for charting. But alas, it doesn't, and several plug-ins have been developed to enhance the graphics capabilities of HTML browsers. Notable among these are Flash and Scalable Vector Graphics (SVG). Both of these seem like heavyweight solutions for simple graphs, though, so what is a poor DHTML programmer to do? One option is to use Walter Zorn's JavaScript Vectorgraphics Library (http://www.walterzorn.com/). This single JavaScript file can help you put vector graphics anywhere you want on your page, and even allows you to alter those graphics in real time in the browser. The script creates thousands of small <div> tags, one for each pixel of a graph. It's not a subtle approach, but it does the job, and for small graphs it's fast enough to be usable. 3.13.1. The Code
Save the code in Example 3-17 as index.php. Example 3-17. Using PHP and the Zorn JavaScript library for graphs
<?php $width = 400; $height = 400; $point_count = 10; $points = array(); for( $point = 0; $point < $point_count; $point++ ) { $d = ( 360 / $point_count ) * $point; $x = ( $width / 2 ) - ( ( $width / 2 ) * sin( deg2rad( $d ) ) ); $y = ( $height / 2 ) - ( ( $height / 2 ) * cos( deg2rad( $d ) ) ); $points []= array( 'x' => $x, 'y' => $y ); } ?> <html> <head> <script src="/books/1/201/1/html/2/wz_jsgraphics.js"></script> </head> <body> <div > </div> <script> var jg = new jsGraphics( "graph" ); <?php for( $start = 0; $start < count( $points ); $start++ ) { $sx = $points[$start]['x']; $sy = $points[$start]['y']; for( $end = 0; $end < count( $points ); $end++ ) { $ex = $points[$end]['x']; $ey = $points[$end]['y']; ?> jg.drawLine( <?php echo($sx); ?>, <?php echo($sy); ?>, <?php echo($ex); ?>, <?php echo($ey); ?> ); <?php } } ?> jg.paint(); </script> </body> </html> The code is straightforward. At the start of the script, the PHP uses some simple algebra to figure out the position of 10 points on the 400 x 400-pixel canvas. The HTML then creates a page with the appropriately sized div canvas. The library doesn't require a div canvasit can draw directly onto the body of the pagebut I find it more convenient this way. The JavaScript section creates the drawing object. Then some PHP code creates a set of drawLine( ) calls. Finally the paint( ) method is called, which renders the graphics to the canvas. 3.13.2. Running the Hack
Copy the index.php file and the wz_graphics.js script to the server, and open index.php in your web browser. The result is shown in Figure 3-18. On my Macintosh G4 PowerBook, it takes about four seconds to open the page. That's not the time it took to parse the code, but rather the time it took primarily to render the graphics. Obviously this is not acceptable for gaming applications, but for small graphs this is a real alternative. 3.13.3. See Also
|