1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
|
<html>
<head>
<!-- This file has been generated by unroff 1.0, 12/05/01 10:56:05. -->
<!-- Do not edit! -->
<STYLE TYPE="text/css">
<!--
A:link{text-decoration:none}
A:visited{text-decoration:none}
A:active{text-decoration:none}
-->
</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>
<a href="../doc/Welcome.html">Welcome</a>
<a href="../gallery/index.html">Gallery</a>
<a href="../doc/Contents.html">Handbook</a>
<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</h2>
This page contains notes related to use of ploticus to produce
data displays that are viewable on web pages.<tt> </tt>
There are a number of
<a href="../gallery/gall.real.html">
web sites that are using ploticus
</a>
.<tt> </tt>
<p>
Ploticus can generate the following types of graphics that web
browsers can display: PNG, JPEG, WBMP, pseudo-GIF, and SVG.<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><p>
<pre>
PNG 2978 bytes
SVGZ 3918 bytes
pseudo-GIF 14874 bytes
SVG 17743 bytes
JPEG 27006 bytes
</pre>
</dl>
<p>
As of version 2.02 ploticus can also generate
<a href="clickmap.html">
HTML clickmaps
</a>
to accompany images.<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>
<p>
<a href="svg.html">
SVG
</a>
is a relatively new vector-based format that looks
good. Browsers display SVG via a plug-in.<tt> </tt>
Ploticus (version 2.01 or later, all builds) can produce
<a href="svg.html">
SVG
</a>
graphics.
<br><br><br>
<h2>Creating PNG</h2>
To create a PNG image, use pl or pltab 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)
and image viewing tools such as <b>xv</b>. To see if your
current web browser can display PNG, try
<a href="../thumbpng/index.html">this page</a>.
See also <a href="http://www.libpng.org/pub/png">the PNG home page</a>
<br><br><br>
<h2>Creating pseudo-GIF</h2>
To create pseudo-GIF, use pl or pltab 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>
<i>Ploticus does not read GIF files.<tt> </tt>
Ploticus writes run-length-encoded (RLE) GIF files.
Our understanding is that these RLE GIF files do not
use patented LZW compression.</i>
The RLE GIF images that ploticus produces are viewable via
any graphical web browser or image viewer that supports GIF.<tt> </tt>
<p>
<a href="../doc/gifpatent.html">
More on GIF LZW patent and licensing issues
</a>
<br><br><br>
<h2>Creating SVG</h2>
This is discussed
<a href="svg.html">
here
</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>
<h2>Clickmap support</h2>
As of version 2.02 ploticus can also generate
<a href="clickmap.html">
HTML clickmaps
</a>
to accompany images.<tt> </tt>
<br><br><br>
<h2>CGI control</h2>
As of version 2.00, pl may be
<a href="cgi.html">
directly invoked as a CGI program
</a>
.<tt> </tt>
Another way to use ploticus via CGI is to 1) generate a unique temp file name; 2) invoke ploticus via shell or system()
and build a PNG or GIF file using the unique name; 3) reference that file in an <IMG> tag;
4) clean up temp PNG / GIF files regularly using a find command run by cron.<tt> </tt>
In my applications I use a static ploticus script with several @variables that I pass to it;
it would also be possible to dynamically build a ploticus script (as step 1a above).<tt> </tt>
<p>
A
<a href="../download/ploticus.perl">
perl script
</a>
which implements a web interface to ploticus was
contributed by Tom McClure.<tt> </tt>
See also
<a href="controlling.html">
Controlling Ploticus from Other Programs
</a>
.<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>
<b>Ploticus</b> can also be used to reduce, enlarge, and crop images;
see the gallery example
<a href="../gallery/pngresize.htm">
pngresize
</a>
<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>
<img src="../gallery/button.gif">
</center>
<p>
Example HTML code for making a thumbnail or button that will take a user to
a new page when clicked upon:
<pre>
<a href="newpage.html"><img src="mybutton.gif"></a>
</pre>
<br>
<br>
</td></tr>
<td align=right>
<a href="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>
<p><hr>
Markup created by <em>unroff</em> 1.0, <tt> </tt> <tt> </tt>December 05, 2001.
</body>
</html>
|
