<html> <head> <!-- This file has been generated by unroff 1.0, 03/11/09 12:56:24. --> <!-- Do not edit! --> <STYLE TYPE="text/css"> <!-- A:link{text-decoration:none} A:visited{text-decoration:none} A:active{text-decoration:none} OL,UL,P,BODY,TD,TR,TH,FORM { font-family: arial,helvetica,sans-serif;; font-size:small; color: #333333; } H1 { font-size: x-large; font-family: arial,helvetica,sans-serif; } H2 { font-size: large; font-family: arial,helvetica,sans-serif; } H3 { font-size: medium; font-family: arial,helvetica,sans-serif; } H4 { font-size: small; font-family: arial,helvetica,sans-serif; } --> </STYLE> <title>ploticus: making web-based graphs</title> <body bgcolor=D0D0EE vlink=0000FF> <br> <br> <center> <table cellpadding=2 bgcolor=FFFFFF width=550><tr> <td> <table cellpadding=2 width=550><tr> <td><br><h2>making web-based graphs</h2></td> <td align=right> <small> <a href="../doc/welcome.html"><img src="../doc/ploticus.gif" border=0></a><br> Version 2.41 Mar2009 <td></tr></table> </td></tr> <td> <br> <br> <title>Manual page for making_web-based_graphs(PL)</title> </head> <body> <center> <img src="../gallery/candlesticks.gif"><br> </center> <h2>Web-based graphs (PNG, GIF, JPEG, WBMP images)</h2> This page contains notes related to use of ploticus to produce data displays that are viewable on web pages.<tt> </tt> <br><br><br> <h2>On-the-fly graphs</h2> This is now discussed <a href="dynamic.html"> here.<tt> </tt> </a> <br><br><br> <h2>Web graphics formats</h2> <p> Ploticus can generate the following types of graphics that web browsers can display: PNG, JPEG, WBMP, pseudo-GIF, SVG, and SWF.<tt> </tt> Some of these types are more compact than others (smaller is faster). Here's a comparison, done on gallery example <tt>stock</tt>: <dl> <dt> <dd> <pre> PNG 2978 bytes SVGZ 3918 bytes pseudo-GIF 14874 bytes SVG 17743 bytes JPEG 27006 bytes </pre> </dl> <p> Ploticus can also generate <a href="clickmap.html"> clickmaps and mouseover text bubbles </a> to accompany graphs rendered in PNG, JPEG, GIF, and SVG.<tt> </tt> <p> PNG, JPEG, WBMP, and pseudo-GIFs are generated using the GD image generation library from <a href="http://www.boutell.com"> boutell.com </a> . Ploticus is bundled with portions of GD 1.3 (pseudo-GIF) and GD 1.6 (PNG images). Of, if you prefer, ploticus may be built by linking it with your own copy of GD 1.8.4 or higher, for PNG, PJEG, WBMP, and FreeType2 support (see GD18 in the Makefile).<tt> </tt> <br><br><br> <h2>Pixels</h2> Graphics using these image formats are rendered at 100 pixels per inch.<tt> </tt> If you need results of a particular size in pixels you can use the -crop command line option (which uses inches). For example, <tt>-crop 1,1,4,3</tt> would force cropping to be done so that the result would be a rectangle having lower-left at absolute location (1,1) (inches) and upper-right at (4,3). This would be 3 inches (300 pixels) wide, and 2 inches (200 pixels) tall.<tt> </tt> <br><br><br> <h2>Creating PNG</h2> To create a PNG image, use pl with the <tt>-png</tt> option.<tt> </tt> <p> To incorporate a PNG image into an HTML web page, use the HTML construct: <tt><img src="mygraph.png"></tt> <br> <p> <b>PNG</b> is a newer image format that has superior compression (hence the images are smaller and faster to transmit). The images can be viewed using the newer versions of web browsers (Netscape 4.04 or higher, Explorer 4.0 or higher).<tt> </tt> <br><br><br> <h2>Creating pseudo-GIF</h2> To create pseudo-GIF, use pl with the <tt>-gif</tt> option.<tt> </tt> <p> To incorporate a GIF image into an HTML web page, use the HTML construct: <tt><img src="mygraph.gif"></tt> <br> <p> <b>GIF</b> format has been around for a long while, is fairly universal, and can be viewed on any graphical web browser or image viewing tool.<tt> </tt> The RLE GIF images that ploticus produces are viewable via any graphical web browser or image viewer that supports GIF.<tt> </tt> <br><br><br> <h2>Creating SVG</h2> This is discussed <a href="svg.html"> here.<tt> </tt> </a> <p> <a href="svg.html"> SVG </a> is a relatively new XML vector format that looks good. Browsers display SVG via a plug-in.<tt> </tt> Clickmaps are supported.<tt> </tt> <br><br><br> <h2>Creating SWF / flash</h2> This is discussed <a href="swf.html"> here.<tt> </tt> </a> <br><br><br> <h2>Transparent background</h2> <a href="../gallery/transparent.htm"><img src="../gallery/transparent.gif" border=0></a> <p> Images may be created with 'transparent' background by setting the background color to <tt>transparent</tt>. This allows the ploticus graphs to be "overlayed" against the existing background color of the web page.<tt> </tt> <br> <br> <br><br><br> <h2>Web page example</h2> <p> Here is an example HTML page that is viewable using any web browser: <pre> <html> <center> Here is an image. <img src="lineplot1.gif"> </html> </pre> <p> Suppose the above is in a file called <tt>/home/steve/firsttry.html</tt>. If you don't have a web server running, you can view the file by entering the following URL into your web browser: <b>file:///home/steve/firsttry.html</b> <br> This assumes that your web browser is running on the same computer that the HTML file is located upon.<tt> </tt> <br><br><br> <h2>Clickmap support</h2> Ploticus also can generate <a href="clickmap.html"> clickmaps </a> to accompany images.<tt> </tt> <br><br><br> <h2>Image import</h2> <b>Ploticus</b> includes the capability to import PNG images into graphs, and can use small images as scatterplot points and symbols.<tt> </tt> GIF import is not supported.<tt> </tt> <br><br><br> <h2>Thumbnail and button images</h2> Thumbnail images (tiny renditions of a plot for icon or selection uses) may be rendered using the -scale command line option. For example: <tt>-scale 0.15</tt>.<tt> </tt> Very small text is rendered as lines. <p> <b>Ploticus</b> can also be used to make simple buttons for web pages.<tt> </tt> See the gallery example <a href="../gallery/button.htm>"> button </a> <center> <a href="../gallery/button.htm"><img src="../gallery/button.gif" border=0></a> </center> <br> <br> </td></tr> <td align=right> <a href="../doc/welcome.html"> <img src="../doc/ploticus.gif" border=0></a><br><small>data display engine <br> <a href="../doc/Copyright.html">Copyright Steve Grubb</a> <br> <br> <center> <img src="../gallery/all.gif"> </center> </td></tr> </table> <br> <center> <table><tr><td> Ploticus is hosted at http://ploticus.sourceforge.net</td><td> </td><td> <a href="http://sourceforge.net/projects/ploticus"><img src="http://sflogo.sourceforge.net/sflogo.php?group_id=38453&type=12" width="120" height="30" border="0" alt="Get ploticus data display engine at SourceForge.net. Fast, secure and Free Open Source software downloads" /></a> </td></tr></table> </center> <p><hr> Markup created by <em>unroff</em> 1.0, <tt> </tt> <tt> </tt>March 11, 2009. </body> </html>