Subversion-Projekte lars-tiefland.php_share

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
1 lars 1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
2 
<HTML>
3 
<HEAD>
4 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-iso-8859-1">
5 
<LINK REL="Start" HREF="index.html">
6 
<LINK REL="Contents" HREF="toc.html">
7 
<STYLE TYPE="text/css"><!--
8 
BODY { font-family: serif }
9 
H1 { font-family: sans-serif }
10 
H2 { font-family: sans-serif }
11 
H3 { font-family: sans-serif }
12 
H4 { font-family: sans-serif }
13 
H5 { font-family: sans-serif }
14 
H6 { font-family: sans-serif }
15 
SUB { font-size: smaller }
16 
SUP { font-size: smaller }
17 
PRE { font-family: monospace }
18 
A { text-decoration: none }
19 
--></STYLE>
20 
</HEAD>
21 
<BODY>
22 
<LINK HREF="jpgmanual.css" REL="STYLESHEET" TYPE="text/css"><DIV class="page">
23 
<H1><A NAME="1">1 About this manual</A></H1>
24 
<P></P>
25 
<H2><A NAME="1_1">1.1 Version history</A></H2>
26 
<P></P>
27 
<P></P>
28 
<TABLE border="1" cellpadding="2">
29 
<TR><TH>Version</TH><TH>Date</TH><TH>Status</TH><TH>Who</TH><TH>Comment</TH>
30 
</TR>
31 
<TR><TD>R1.8</TD><TD>2005-12-28</TD><TD>Released</TD><TD>Johan Persson</TD><TD>
32 
Additional info for JpGraph 1.20.1</TD></TR>
33 
</TABLE>
34 
<H2><A NAME="1_2">1.2 How was this manual produced?</A></H2>
35 
<P> The bulk of the text was written directly in Emacs on a GNU/Linux
36 
 system in a mixture of PHP and HTML. A number of PHP functions were
37 
 used to automate the handling of formatting example code and figures.</P>
38 
<P> To generate the images automatically in the img directory a custom
39 
 awk-script is used to extract all the used image script from the
40 
 manual. The script then uses the client version of PHP generate the
41 
 images from the scripts and stores them in the 'img' directory.</P>
42 
<P> The final set of HTML files was then processes by HTMLDOC to
43 
 construct table of contents and chapter links.</P>
44 
<H1><A NAME="2">2 Introduction</A></H1>
45 
<P></P>
46 
<H2><A NAME="2_1">2.1 Version</A></H2>
47 
<P> This manual covers versions up to 1.20 of JpGraph. A 2D graph
48 
 plotting library for PHP.</P>
49 
<P> Even though the library is known to work with version of PHP prior
50 
 to 4.3 the library is not tested nor is it recommended to run with any
51 
 older versions of PHP.</P>
52 
<H2><A NAME="2_2">2.2 Software License</A></H2>
53 
<P> JpGraph is released under a dual license QPL 1.0 (Qt-License) for
54 
 non-commercial (including educational) use of the library and the
55 
 JpGraph Professional License for commercial use.</P>
56 
<H2><A NAME="2_3">2.3 JpGraph Features</A></H2>
57 
<P> JpGraph library is an OO graph library which makes it easy to both
58 
 draw a &quot;quick and dirty&quot; graph with a minimum of code and quite complex
59 
 graphs which requires a very fine grain of control. The library tries
60 
 to assign sensible default values for most parameters hence making the
61 
 learning curve quite flat since for most of the time very few commands
62 
 is required to draw graphs with a pleasing esthetic look.</P>
63 
<P> Some highlights of available features are</P>
64 
<UL>
65 
<LI> Flexible scales, supports text-lin, text-log, lin-lin, lin-log,
66 
 log-lin and log-log and integer scales.</LI>
67 
<LI> Supports both PNG, GIF and JPG graphic formats. Note that the
68 
 available formats are dependent on the specific PHP installation where
69 
 the library is used.</LI>
70 
<LI>Supports caching of generated graphs to lessen burden of a HTTP
71 
 server.</LI>
72 
<LI> Supports batch mode to only generate images to a file</LI>
73 
<LI>Supports client side image maps which makes it easy to produce drill
74 
 down images.</LI>
75 
<LI>Intelligent auto-scaling which gravitates towards esthetic values,
76 
 i.e. multiples of 2:s and 5:s</LI>
77 
<LI>Fully supports manual scaling, with fine grain control of position
78 
 of ticks.</LI>
79 
<LI>Supports background images with different formatting options</LI>
80 
<LI>Supports color and brightness adjustments of images directly in PHP.</LI>
81 
<LI>User specified grace for auto-scaling</LI>
82 
<LI> Supports up to two different y-scale, it is possible to have
83 
 different left and right y-scale and add plots to both</LI>
84 
<LI>Supports, line-plots, filled line-plots, accumulated line-plots, bar
85 
 plots, accumulated bar plots, grouped bar plots, error plots, line
86 
 error plots, scatter plots, gantt-charts, radar plots, 2D and 3D pie
87 
 charts.</LI>
88 
<LI>Supports unlimited number of plots in each graph, makes it easy to
89 
 compose complex graph which consists of several plot types</LI>
90 
<LI>User specified position of axis</LI>
91 
<LI>Supports color gradient fill in seven styles</LI>
92 
<LI>Designed as a flexible OO framework which makes it easy to add new
93 
 types of plots</LI>
94 
<LI>Supports automatic legend generation</LI>
95 
<LI>Supports both vertical and horizontal grids</LI>
96 
<LI>Supports anti-aliasing of lines</LI>
97 
<LI>Supports background images as well as unlimited number of icons in
98 
 the graph</LI>
99 
<LI>Supports rotation of linear graphs</LI>
100 
<LI>More then 400 named colors</LI>
101 
<LI>Designed modularly - you don't have to include code which isn't used</LI>
102 
<LI> ...and many many more features</LI>
103 
</UL>
104 
<P> In addition to these high level features the library has been
105 
 designed to be orthogonal and consistent in its' naming convention. For
106 
 example, to specify color each object (i.e. axis, grids, texts, titles
107 
 etc) within the graph implements the method SetColor() with the same
108 
 signature.</P>
109 
<H2><A NAME="2_4">2.4  Getting the latest version</A></H2>
110 
<P> The latest version of jpgraph can always be found on <A href="http://www.aditus.nu/jpgraph/">
111 
http://www.aditus.nu/jpgraph/</A></P>
112 
<P> Information on version numbering schema</P>
113 
<UL>
114 
<LI>1.x -&gt; 1.x.y, Bug fix release 'y' for version 1.x does not introduce
115 
 new features</LI>
116 
<LI>1.x -&gt; 1.(x+1), Added functionality. Mostly keeping backwards
117 
 compatibility unless a very good reason not to.</LI>
118 
<LI>1.x -&gt; 2.0, Support for PHP5</LI>
119 
</UL>
120 
<P></P>
121 
<H2><A NAME="2_5">2.5 Planned future addition</A></H2>
122 
<P> For the latest update on planned future version see the web-site for
123 
 JpGraph at http://www.aditus.nu/jpgraph/</P>
124 
<H2><A NAME="2_6">2.6 Known bugs and omissions</A></H2>
125 
<P></P>
126 
<UL>
127 
<LI>Background images does not work as expected for rotated graphs</LI>
128 
</UL>
129 
<P></P>
130 
<H2><A NAME="2_7">2.7  Acknowledgments</A></H2>
131 
<P> The idea for writing this library grew out of our own need for a
132 
 high quality graph drawing library for PHP. When evaluating potential
133 
 existing libraries we found (at that time circa 2001) these three</P>
134 
<OL>
135 
<LI> &quot;chart 0.3&quot; http://quimby.gnus.org/circus/chart/chart-0.3.tar.gz,
136 
 by Lars Magne Ingebrigtsen</LI>
137 
<LI> &quot;ykcee.php&quot;, http://ykcee.sourceforge.net</LI>
138 
<LI> &quot;phplot.php&quot;, http://www.phplot.com</LI>
139 
</OL>
140 
<P> All these libraries implements some fine graphic features but
141 
 unfortunately none of those completely fulfilled our needs either for
142 
 available functionality (for example none of these supported both two
143 
 Y-scales, auto-scaling, and logarithmic scales), or general
144 
 flexibility. We especially needed the option of two Y-scales, which
145 
 none of the above packages supported. Our own preferences for design
146 
 was closest to &quot;chart 0.3&quot; so we started by fixing some bugs in that
147 
 package and adding some new features. However It was soon realized that
148 
 to add all the features and flexibility we needed to &quot;chart 0.3&quot; it
149 
 would require a complete rewrite since the original design wasn't
150 
 flexible enough, especially adding a second Y-scale would require a
151 
 more flexible OO architecture.</P>
152 
<H2><A NAME="2_8">2.8 Reporting bugs and suggesting improvements</A></H2>
153 
<P> Defects or suggestion for new features can be entered using the <A href="http://www.aditus.nu/bugtraq/">
154 
JpGraph BugTracker</A> available at <A href="http://www.aditus.nu/bugtraq/">
155 
http://www.aditus.nu/bugtraq/</A></P>
156 
<P> Before reporting bugs or feature suggestions may we ask that the
157 
 following facts are considered.</P>
158 
<UL>
159 
<LI>The 1.x version of the library does<B> not</B> work with PHP 5.x</LI>
160 
<LI>The 1.x version of the library is only guaranteed to work with PHP
161 
 versions &gt;= 4.3</LI>
162 
<LI>The 2.x version of the library does<B> not</B> work with PHP 4.x</LI>
163 
</UL>
164 
<P></P>
165 
<H2><A NAME="2_9">2.9 Getting support</A></H2>
166 
<P> Customers who have acquired the pro-version of the library are
167 
 entitled to prioritized e-mail support for a specific time after the
168 
 purchase. Support tickets may be created by first logging in to <A href="http://www.aditus.nu/jpgraph/pro_login.html">
169 
http://www.aditus.nu/jpgraph/pro_login.php</A> and then create a support
170 
 ticket.</P>
171 
<P> For other users a public community forum is available at <A href="http://jpgraph.intellit.nl/">
172 
http://jpgraph.intellit.nl/</A> where many common questions are answered
173 
 and discussed.</P>
174 
<P> A collection of FAQ is available at <A href="http://www.aditus.nu/jpgraph/jpgraphfaq.html">
175 
http://www.aditus.nu/jpgraph/jpgraphfaq.php</A></P>
176 
<P> In addition there is a growing list of &quot;HowTo&quot; documents available
177 
 at <A href="http://www.aditus.nu/jpgraph/jpgraphhowto.html">
178 
http://www.aditus.nu/jpgraph/jpgraphowto.php</A></P>
179 
<P> Finally, we regret that we are unable to provide general support
180 
 regarding PHP/GD/TTF/Apache installation outside the specific scope of
181 
 the JpGraph library. Please see the corresponding documentation and
182 
 relevant FAQ for those products.</P>
183 
<P></P>
184 
<H1><A NAME="3">3 Installation</A></H1>
185 
<P></P>
186 
<H2><A NAME="3_1">3.1 Preparation</A></H2>
187 
<P> In order to make use of the library it is necessary to ensure that
188 
 the script files can correctly access the library include files (as
189 
 described below) and that the PHP installation supports at least one
190 
 graphic format, i.e. it supports the &quot;image&quot; extension in PHP.</P>
191 
<P> This is easiest verified by either checking the output of the<I>
192 
 phpinfo()</I> standard PHP function or by making sure the PHP
193 
 installation make the 'imagecreate()' function available.</P>
194 
<P> This means that the installation
195 
<!--string-->
196 
 must have a working GD-library together with PHP before the library
197 
 JpGraph can be used. Please make sure you have version 4.3.x or above
198 
 of PHP since JpGraph is<STRONG> not</STRONG> actively tested with
199 
 versions prior to PHP 4.3.x Ideally you should use at least PHP 4.3.8</P>
200 
<P> Please note that the 1.x version of the library do<B> not</B>
201 
 support PHP 5.x</P>
202 
<H3><A NAME="3_1_1">3.1.1 Verifying that you have the GD library
203 
 installed</A></H3>
204 
<P> In order to make sure that the GD installed the following example
205 
 would be run. The example creates a very simple image using just pure
206 
 GD calls and outputs an image in PNG format. This could be considered a
207 
 smoke-test to see that the GD library is available from PHP. Please
208 
 note that this is an<B> absolute</B> pre-requisite in order for the
209 
 JpGraph library to work at all.</P>
210 
<P> Store the code snippet below somewhere in the document root and make
211 
 sure it runs correctly.<DIV class="phpscript"><CODE><FONT color="#000000">
212 
 <FONT color="#0000BB">&nbsp;$im&nbsp;</FONT><FONT color="#007700">=&nbsp;@</FONT><FONT color="#0000BB">
213 
ImageCreate&nbsp;</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
214 
150</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">100</FONT><FONT
215 
color="#007700">)
216 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;or&nbsp;die&nbsp;(</FONT><FONT color="#DD0000">
217 
&quot;Cannot&nbsp;create&nbsp;a&nbsp;new&nbsp;GD&nbsp;image.&quot;</FONT><FONT color="#007700">);
218 
<BR></FONT><FONT color="#0000BB">$background_color&nbsp;</FONT><FONT color="#007700">
219 
=&nbsp;</FONT><FONT color="#0000BB">ImageColorAllocate&nbsp;</FONT><FONT color="#007700">
220 
(</FONT><FONT color="#0000BB">$im</FONT><FONT color="#007700">,&nbsp;</FONT><FONT
221 
color="#0000BB">255</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">
222 
255</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">255</FONT><FONT
223 
color="#007700">);
224 
<BR></FONT><FONT color="#0000BB">$text_color&nbsp;</FONT><FONT color="#007700">
225 
=&nbsp;</FONT><FONT color="#0000BB">ImageColorAllocate&nbsp;</FONT><FONT color="#007700">
226 
(</FONT><FONT color="#0000BB">$im</FONT><FONT color="#007700">,&nbsp;</FONT><FONT
227 
color="#0000BB">233</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">
228 
14</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">91</FONT><FONT
229 
color="#007700">);
230 
<BR></FONT><FONT color="#0000BB">ImageString&nbsp;</FONT><FONT color="#007700">
231 
(</FONT><FONT color="#0000BB">$im</FONT><FONT color="#007700">,&nbsp;</FONT><FONT
232 
color="#0000BB">1</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">
233 
5</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">5</FONT><FONT
234 
color="#007700">,&nbsp;&nbsp;</FONT><FONT color="#DD0000">&quot;A&nbsp;Simple&nbsp;Text&nbsp;String&quot;</FONT><FONT
235 
color="#007700">,&nbsp;</FONT><FONT color="#0000BB">$text_color</FONT><FONT color="#007700">
236 
);
237 
<BR></FONT><FONT color="#0000BB">header&nbsp;</FONT><FONT color="#007700">(</FONT><FONT
238 
color="#DD0000">&quot;Content-type:&nbsp;image/png&quot;</FONT><FONT color="#007700">);
239 
<BR></FONT><FONT color="#0000BB">ImagePng&nbsp;</FONT><FONT color="#007700">(</FONT><FONT
240 
color="#0000BB">$im</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB">
241 
</FONT></FONT></CODE></DIV></P>
242 
<P> If the above script does not work or some error or warnings are
243 
 printed on the screen then it is necessary to correct those problems
244 
 before proceeding with the installation.</P>
245 
<H3><A NAME="3_1_2">3.1.2 Verifying that you have GD2 installed</A></H3>
246 
<P> To access the more advanced features of JpGraph needs the GD 2.x
247 
 library. This will allow the use of features such as alpha-blending and
248 
 trucolor images.</P>
249 
<P> The GD 2.x library is included in all standard PHP versions from
250 
 4.2.x and above. To make sure that the GD 2.x library is installed the
251 
 following script must be working.<DIV class="phpscript"><CODE><FONT color="#000000">
252 
 <FONT color="#0000BB">&nbsp;$im&nbsp;</FONT><FONT color="#007700">=&nbsp;</FONT><FONT color="#0000BB">
253 
imagecreatetruecolor&nbsp;</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
254 
300</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">200</FONT><FONT
255 
color="#007700">);&nbsp;
256 
<BR></FONT><FONT color="#0000BB">$black&nbsp;</FONT><FONT color="#007700">=&nbsp;</FONT><FONT
257 
color="#0000BB">imagecolorallocate&nbsp;</FONT><FONT color="#007700">(</FONT><FONT
258 
color="#0000BB">$im</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">
259 
0</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">0</FONT><FONT
260 
color="#007700">,&nbsp;</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">
261 
);&nbsp;
262 
<BR></FONT><FONT color="#0000BB">$white&nbsp;</FONT><FONT color="#007700">=&nbsp;</FONT><FONT
263 
color="#0000BB">imagecolorallocate&nbsp;</FONT><FONT color="#007700">(</FONT><FONT
264 
color="#0000BB">$im</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">
265 
255</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">255</FONT><FONT
266 
color="#007700">,&nbsp;</FONT><FONT color="#0000BB">255</FONT><FONT color="#007700">
267 
);&nbsp;
268 
<BR>
269 
<BR></FONT><FONT color="#0000BB">imagefilledrectangle</FONT><FONT color="#007700">
270 
(</FONT><FONT color="#0000BB">$im</FONT><FONT color="#007700">,</FONT><FONT
271 
color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
272 
0</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">399</FONT><FONT
273 
color="#007700">,</FONT><FONT color="#0000BB">99</FONT><FONT color="#007700">
274 
,</FONT><FONT color="#0000BB">$white</FONT><FONT color="#007700">);&nbsp;
275 
<BR></FONT><FONT color="#0000BB">imagerectangle</FONT><FONT color="#007700">
276 
(</FONT><FONT color="#0000BB">$im</FONT><FONT color="#007700">,</FONT><FONT
277 
color="#0000BB">20</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
278 
20</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">250</FONT><FONT
279 
color="#007700">,</FONT><FONT color="#0000BB">190</FONT><FONT color="#007700">
280 
,</FONT><FONT color="#0000BB">$black</FONT><FONT color="#007700">);&nbsp;
281 
<BR>
282 
<BR></FONT><FONT color="#0000BB">header&nbsp;</FONT><FONT color="#007700">(</FONT><FONT
283 
color="#DD0000">&quot;Content-type:&nbsp;image/png&quot;</FONT><FONT color="#007700">
284 
);&nbsp;
285 
<BR></FONT><FONT color="#0000BB">imagepng&nbsp;</FONT><FONT color="#007700">(</FONT><FONT
286 
color="#0000BB">$im</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB">
287 
</FONT></FONT></CODE></DIV></P>
288 
<P> After running this script you should now see a black rectangle in
289 
 your browser.</P>
290 
<H3><A NAME="3_1_3">3.1.3 Preparing True Type Font Files</A></H3>
291 
<P> JpGraph contains as default a standard set of bitmap fonts which
292 
 only supports the standard ASCII 7-bit character set. In order to use
293 
 accented characters, UTF-8, Chinese, Japanese, etc You need to download
294 
 TTF fonts. Due to various legal issues no TTF fonts are supplied in the
295 
 JpGraph package. To enable TTF fonts there are three alternatives:</P>
296 
<OL>
297 
<LI>If you are on a Windows platform you can just point to the TTF
298 
 directory in JpGraph to the standard fonts directory (e.g
299 
 C:\windows\fonts\)</LI>
300 
<LI>If you are on a Unix platform you can download and install the core
301 
 MS WEB-initiative fonts from <A href="http://corefonts.sourceforge.net/">
302 
http://corefonts.sourceforge.net/</A></LI>
303 
<LI>It is also possible to use the Vera Bitstream TTF fonts available
304 
 from <A href="http://www.gnome.org/fonts/">http://www.gnome.org/fonts/</A>
305 
</LI>
306 
</OL>
307 
<P> It is also necessary to make sure that the PHP installation supports
308 
 TTF fonts (either through FreeType 1 or FreeType 2 libraries). I n
309 
 addition some suitable TTF font files must also be available. To make
310 
 the font files available for the library the directory path to the
311 
 location of the font files must be specified in the configuration file,
312 
 jpg-config.inc</P>
313 
<P> JpGraph uses a standard naming convention for the TTF font files in
314 
 order to be able to find the correct font files. This naming convention
315 
 follows the standard naming of the available font files.</P>
316 
<P> If the installation of the library is made on a computer running MS
317 
 Windows then it is recommended to use the already available font files
318 
 in Windows (usually located in C:\WINDOWS\FONTS).</P>
319 
<P> If the installation is made on a UNIX derivate running X11 then the
320 
 font location can differ between versions and UNIX brands. One commonly
321 
 used path is &quot;/usr/X11R6/lib/X11/fonts/truetype/&quot;.</P>
322 
<P> Finally we note that it is possible to install additional fonts not
323 
 natively supported by the library. Since this requires augmenting the
324 
 library files this is considered advanced use and not further discussed
325 
 in this introduction.</P>
326 
<H3><A NAME="3_1_4">3.1.4 Using non-latin based fonts with JpGraph</A></H3>
327 
<P> In addition to European font it is also possible to use non-latin
328 
 based fonts such as Cyrillic, Japanese and Chinese.</P>
329 
<P> In all cases a suitable TTF font that supports the non-latin based
330 
 language must be available.</P>
331 
<P> For Cyrillic support the define LANGUAGE_CYRILLIC in jpg-config.php
332 
 must be set to true. It is then possible to use a suitable Cyrillic
333 
 font as replacement for the ordinary fonts.</P>
334 
<P> For Chinese character set JpGraph supports both BIG5 and GB2312
335 
 encoding. For BIG5 encoding the PHP installation must have support for
336 
 the &quot;iconv()&quot; function. Furthermore the define CHINESE_TTF_FONT must be
337 
 set to the name of the Chinese BIG5 font that is to be used. By default
338 
 this is set to &quot;bkai00mp.ttf&quot;. To use the Chinese BIG5 font in the
339 
 scripts one must then specify the font family as FF_CHINESE.</P>
340 
<P> To use the alternative font files &quot;simsun.ttc&quot; and &quot;simhei.ttf&quot;
341 
 (which uses the GB2312 encoding) the only step needed is to install
342 
 those fonts in the normal TTF font directory and then specify the font
343 
 family as FF_SIMSUN, the &quot;simhei.ttf&quot; is used when the font style is
344 
 specified as FS_BOLD.</P>
345 
<H2><A NAME="3_2">3.2 Customizing the installation</A></H2>
346 
<P> In order for JpGraph to work it is necessary to adjust the cache and
347 
 TTF directory to suit the specific installation. By default the TTF
348 
 directory is &quot;/usr/X11R6/lib/X11/fonts/truetype/&quot; and for the cache
349 
 &quot;/tmp/jpgraph_cache/&quot;. These are defined as PHP defines at the top of<I>
350 
 jpg-config.inc</I></P>
351 
<P> Please make sure that PHP has write permissions to the cache
352 
 directory if the cache feature should be used. If this is not the case
353 
 a &quot;Can't write file xxx.yyy&quot; error will occur when a graph that uses
354 
 the cache feature are generate. More information regarding the cache
355 
 feature of JpGraph is available in the section<I> Making sense of
356 
 caching system in JpGraph</I></P>
357 
<H2><A NAME="3_3">3.3  Required files</A></H2>
358 
<P> This is the base library files, which you must have</P>
359 
<UL>
360 
<LI> jpgraph.php, base library, always needed</LI>
361 
<LI> jpg-config.inc, Configuration file</LI>
362 
</UL>
363 
<P></P>
364 
<H3><A NAME="3_3_1">3.3.1 Plot extension modules</A></H3>
365 
<P> To add plots to the graph you will need one or more of the following
366 
 files plot extension files depending on what kind of graph you need to
367 
 create.</P>
368 
<UL>
369 
<LI>jpgraph_log.php, Plot extension to support logarithmic X and Y
370 
 scales</LI>
371 
<LI>jpgraph_line.php, Plot extension. Needed to draw various line plots</LI>
372 
<LI>jpgraph_date.php, Plot extension to handle date scales.</LI>
373 
<LI>jpgraph_bar.php, Plot extension. Needed to draw various bar plots</LI>
374 
<LI>jpgraph_error.php, Plot extension. Needed to draw various error
375 
 plots</LI>
376 
<LI>jpgraph_scatter.php, Plot extension. Needed to draw scatter and
377 
 impulse plots.</LI>
378 
<LI>jpgraph_spider.php, Plot extension. Needed to draw spider plots.</LI>
379 
<LI>jpgraph_pie.php, Plot extension. Needed to draw Pie plots</LI>
380 
<LI>jpgraph_pie3d.php, Plot extension. Needed to draw 3D Pie plots</LI>
381 
<LI>jpgraph_gantt.php, Plot extension. Needed to create gantt plots</LI>
382 
<LI>jpgraph_radar.php, Plot extension. Needed for radar plots</LI>
383 
<LI>jpgraph_polar.php, Plot extension. Needed for Polar plots</LI>
384 
<LI>jpgraph_gantt.php, Plot extension. Needed for Gantt charts</LI>
385 
<LI>jpgraph_regstat.php, Statistic extension. Needed to plot spline and
386 
 bezier curves</LI>
387 
<LI> jpgraph_stock.php, Plot extension. Needed to plot stock charts</LI>
388 
<LI> jpgraph_antispam.php, Special extension to generate anti-spam
389 
 images consisting of letters+images which are very hard to digitally
390 
 read with an OCR program</LI>
391 
<LI> jpgraph_gradient.php, Internal module. Contains all color gradient</LI>
392 
<LI> jpgraph_gb2312.php, Handling of gb2312 font encoding (used for some
393 
 Chinese fonts)</LI>
394 
<LI> jpgraph_plotmark.inc, Handling of plotmarks in line and scatter
395 
 plot.</LI>
396 
<LI> jpgraph_iconplot.php, Handling icons (small images) that can be
397 
 added to the plots</LI>
398 
<LI> jpgraph_plotband.php, Handling of plotbands added to the graphs</LI>
399 
<LI> jpgraph_flags.php, Handling of country flags used as plot marks or
400 
 as backgrounds.</LI>
401 
<LI> jpgraph_utils.php, Various utility function</LI>
402 
<LI> imgdata_*.inc, Encoded images for plotmarks</LI>
403 
<LI> flags*.dat, Image data for flags. Pre-compiled data for country
404 
 flags.</LI>
405 
<LI>jpgraph_canvas.php, Plot extension to make it possible to draw
406 
 arbitrary graphic on a canvas.</LI>
407 
<LI>jpgraph_canvtools.php, Add on to the canvas graph to provide an
408 
 easier way to draw arbitrary shapes.</LI>
409 
</UL>
410 
<P> In the pro-version the following additional files are available</P>
411 
<UL>
412 
<LI> jpgraph_windrose.php, Windrose plot extension</LI>
413 
<LI> jpgraph_odo.php, Odometer plot extension</LI>
414 
<LI> jpgraph_barcode.php, Linear barcode extension</LI>
415 
<LI> jpgraph_pdf417.php, PDF417 2-Dimensional Barcode extension</LI>
416 
</UL>
417 
<P></P>
418 
<H2><A NAME="3_4">3.4 Image formats and external image libraries</A></H2>
419 
<P> Per default the standard GD image library supports PNG graphic
420 
 formats. You will need to have that installed together with your PHP
421 
 module for this library to work at all. Please refer to PHP
422 
 documentation on specifics. Note that the newer versions of GD does not
423 
 support the GIF format due to copyright problems. Hence by default only
424 
 PNG is supported.</P>
425 
<P> If you want JPEG support you will also need an additional library
426 
 for PHP, again please see PHP documentation for specifics. For most
427 
 practical purposes PNG is a better format since it normally achieves
428 
 better compression then GIF (typically by a factor of 2 for the types
429 
 of images generated by JpGraph). In comparison with JPEG format PNG is
430 
 also better for the type of images generated by this library. So, the
431 
 bottom line is, you should have a very good reason to choose any other
432 
 format then PNG.</P>
433 
<P> By default the image format is set to &quot;auto&quot;. This means that
434 
 JpGraph automatically chooses the best available graphic using the
435 
 preferred order &quot;PNG&quot;, &quot;GIF&quot;, &quot;JPG&quot;.</P>
436 
<P></P>
437 
<H2><A NAME="3_5">3.5 Detailed steps to install JpGraph</A></H2>
438 
<P></P>
439 
<OL>
440 
<LI>If You are insatlling the 1.x branch then make sure the PHP version
441 
 used is at least 4.3.x (preferable 4.3.10 or higher) and that the PHP
442 
 version have compiled support for GD library. It is absolutely critical
443 
 that GD is fully working. Please see the earlier sections on how to
444 
 make sure. JpGraph supports both GD 1.x and GD 2.x However it is
445 
 strongly recommended to use GD 2.x since that will improve performance
446 
 and support true color images as well as alphablending.
447 
<P> If You are insatlling the 2.x branch then make sure the PHP version
448 
 used is at least 5.0.1 (preferable 5.0.5 or higher) and that the PHP
449 
 version have compiled support for GD 2.x library. Please note that the
450 
 2.x branch will<B> not</B> work with PHP 4.x</P>
451 
</LI>
452 
<LI>Unzip and copy the files to a directory of your choice.</LI>
453 
<LI>Set up the directory paths in<I> jpg-config.inc</I> where the cache
454 
 directory should be and where your TTF directory is. Note that
455 
 Apache/PHP must have write permission in your cache directory.</LI>
456 
<LI> Check that all rest of the DEFINE in the top of JpGraph.php is
457 
 setup to your preference. The default should be fine for most users.
458 
 (See also Note 5. below) Specifically check that the settings of
459 
 USE_GD2_LIBRARY reflects your installation, (should be true if you have
460 
 GD2 installed, false otherwise).</LI>
461 
<LI>Make sure PHP have write privileges to your cache directory if you
462 
 plan on using the cache feature.</LI>
463 
<LI> Some windows installations seems to have a problem with a PHP
464 
 script ending in a newline (This newline seems to be sent to the
465 
 browser and will cause a Header already sent error). If you have this
466 
 problem try remove all trailing newlines in the jpgraph* files</LI>
467 
<LI> Read (really!) <A href="http://www.aditus.nu/jpgraph/jpgraphfaq.html">
468 
the JpGraph FAQ</A>.</LI>
469 
</OL>
470 
<P></P>
471 
<H2><A NAME="3_6">3.6 Troubleshooting your installation</A></H2>
472 
<P> For 99% of the users this library will work directly with a recent
473 
 installation of PHP without any problem.</P>
474 
<P> Experience shows that most of the trouble are caused by either an
475 
 old buggy version of the free-type TTF library or using an old
476 
 antiquated version of the GD library. In order to narrow it down the
477 
 problem the following steps is helpful.</P>
478 
<OL>
479 
<LI> If no background images are displayed (instead a solid black box
480 
 are displayed) chances are that GD 2.x is available but the
481 
 jpg-config.inc has been changed so that true color images are disabled.
482 
 Correct this by enabling the USE_TRUECOLOR define.</LI>
483 
<LI> If background images does not work make sure the settings of
484 
 USE_GD2_LIBRARY corresponds to the actual installation, i.e. If the GD2
485 
 library is not available then this define must be false!</LI>
486 
<LI> If you are running IIS and Win2k and get the error &quot;Can't find
487 
 font&quot; when trying to use TTF fonts then try to change the paths to UNIX
488 
 style, i.e. &quot;/usr/local/fonts/ttf/&quot;. Remember that the path is absolute
489 
 and not relative to the htdocs catalogue.</LI>
490 
<LI> If no images and no error messages gets sent back to the browser
491 
 then there is a big chance that HTTP-Server PHP module (e.g.
492 
 Apache-PHP) has crashed. This is often due to a broken PHP installation
493 
 and more than often a problem with the True Type libraries. The best
494 
 way to track these types of problem down is to investigate the
495 
 HTTP-Server logs or the general system logs for evidence of a PHP
496 
 crash. The other reasons is that in some rare cases the auto detection
497 
 of the GD library could fail. If only the GD1 library is available and
498 
 the JpGraph library mistakenly detects the GD2 this could in rare cases
499 
 cause PHP to crash. Please try re-run the example by setting the DEFINE
500 
 USE_GD2_LIBRARY to &quot;false&quot;.</LI>
501 
<LI> If the system is running IIS on Windows and some images which uses
502 
 TTF fonts just return an empty page then try to set the TTF_DIR path
503 
 manually (in jpg-config.php) to the directory where all the TTF fonts
504 
 are stored (normally c:/WINDOWS/fonts)</LI>
505 
<LI> If the cache is enabled please make sure that the permissions are
506 
 correctly set for the cache directory so that the process running
507 
 Apache/PHP has write access to the cache directory.</LI>
508 
<LI> If the TTF fonts only shows up as yellow then you have a buggy
509 
 installation of the freetype font library and the only thing to do is
510 
 to re-install and setup PHP+GD again.</LI>
511 
</OL>
512 
<P></P>
513 
<H2><A NAME="3_7">3.7 Compiling PHP 4</A></H2>
514 
<P><I> This is not meant to be a complete discussion about configuring
515 
 or compiling PHP. It is meant as an example of a configuration of PHP
516 
 that is known to work well with JpGraph.</I></P>
517 
<P> Below is an example of a standard configuration that can be used to
518 
 configure and compile PHP for use with the JpGraph Library</P>
519 
<P> Please note that depending on the specific installation requirements
520 
 other options might have to be specified, specifically the paths to
521 
 external libraries might need to be adjusted.</P>
522 
<PRE>
523 
./configure --prefix=/usr/share \
524 
--datadir=/usr/share/php \
525 
--with-apxs=/usr/sbin/apxs \
526 
--libdir=/usr/share \
527 
--includedir=/usr/include \
528 
--bindir=/usr/bin \
529 
--with-config-file-path=/etc \
530 
--enable-mbstring --enable-mbregex \
531 
--with-pdflib=/usr \
532 
--with-mysql  \
533 
--with-ttf-dir=/usr/lib \
534 
--with-freetype-dir=/usr/lib \
535 
--with-gd --enable-gd-imgstrttf --enable-gd-native-ttf \
536 
--with-zlib-dir=/usr/lib \
537 
--with-png-dir=/usr/lib --with-jpeg-dir=/usr/lib --with-xpm-dir=/usr/X11R6 \
538 
--with-tiff-dir=/usr/lib \
539 
--enable-ftp \
540 
--enable-memory-limit --enable-safe-mode \
541 
--bindir=/usr/bin \
542 
--enable-bcmath -enable-calendar \
543 
--enable-ctype --with-ftp \
544 
--enable-magic-quotes \
545 
--enable-inline-optimization \
546 
--with-bz2 \
547 
--with-iconv
548 
</PRE>
549 
<H1><A NAME="4">4 Quick Start: Dynamic Image Generation</A></H1>
550 
<P> The purpose of this chapter is to put dynamic image generation in
551 
 perspective and illustrate how HTML tags is used to call image
552 
 generating scripts. Even if You are familiar with PHP it is strongly
553 
 recommended to quickly browse through this chapter to make sure all
554 
 concepts are known.</P>
555 
<P> If You fully understand and can explain the concept of MIME types,
556 
 HTTP streams and why the &quot;Headers already sent error&quot; error is very
557 
 common when generating dynamic images with PHP it is probably safe to
558 
 skip this chapter. Otherwise it might be wise to read through this
559 
 chapter once.</P>
560 
<H2><A NAME="4_1">4.1 Scope of this chapter</A></H2>
561 
<P></P>
562 
<H3><A NAME="4_1_1">4.1.1 What you will learn in this chapter</A></H3>
563 
<P></P>
564 
<OL>
565 
<LI> The principle of generating dynamic images in PHP</LI>
566 
<LI> How to choose a specific image format (e.g. JPG, PNG, GIF)</LI>
567 
<LI> Various ways of using the generated image, streaming it back to the
568 
 browser, sending it to a file or getting hold of the image handle for
569 
 further post processing</LI>
570 
<LI> How to specify fonts (both bit-mapped and TTF) in JpGraph</LI>
571 
<LI> How to extend JpGraph with your own fonts</LI>
572 
<LI> How to work with Cyrillic fonts</LI>
573 
<LI> How to specify colors in JpGraph</LI>
574 
<LI> List all available named colors in JpGraph</LI>
575 
<LI> How to effectively use the built in cache schema in JpGraph</LI>
576 
</OL>
577 
<P></P>
578 
<H3><A NAME="4_1_2">4.1.2 What you will NOT learn in this chapter</A></H3>
579 
<P></P>
580 
<OL>
581 
<LI> Any details on how to generate graphs with the JpGraph library</LI>
582 
</OL>
583 
<P></P>
584 
<H2><A NAME="4_2">4.2 How to generate images with PHP</A></H2>
585 
<P> As a general rule each PHP script which generates an image must be
586 
 specified in a separate file which is then called in an HTML &lt;IMG&gt; tag.
587 
 For example, the following HTML excerpt includes the image generated by
588 
 the PHP script in &quot;fig1.php&quot;.</P>
589 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
590 
&nbsp;</FONT><FONT color="#007700">&lt;</FONT><FONT color="#0000BB">img&nbsp;src</FONT><FONT
591 
color="#007700">=</FONT><FONT color="#DD0000">&quot;fig1.php&quot;&nbsp;</FONT><FONT color="#0000BB">
592 
border</FONT><FONT color="#007700">=</FONT><FONT color="#0000BB">0&nbsp;align</FONT><FONT
593 
color="#007700">=</FONT><FONT color="#0000BB">center&nbsp;width</FONT><FONT color="#007700">
594 
=</FONT><FONT color="#0000BB">300&nbsp;height</FONT><FONT color="#007700">=</FONT><FONT
595 
color="#0000BB">200</FONT><FONT color="#007700">&gt;</FONT><FONT color="#0000BB">
596 
</FONT></FONT></CODE></DIV></P>
597 
<P></P>
598 
<P> Strictly speaking the &quot;align&quot;, &quot;width&quot; and &quot;height&quot; are not
599 
 necessary but helps the browser position the image correctly before the
600 
 image has been fully sent back to the browser.</P>
601 
<P> The library will automatically generate the necessary headers to be
602 
 sent back to the browser so that it correctly recognize the data stream
603 
 received as an image of either PNG/GIF/JPEG format. The browser can
604 
 then correctly decode the image</P>
605 
<P> Observe that you<STRONG> can't</STRONG> return anything else than an
606 
 image from the image script. By definition each HTML page (or more
607 
 correctly each HTTP stream) can only consist of one mime type which is
608 
 determined by the header for that particular stream.</P>
609 
<P> A common mistake is to have a space in the beginning of the image
610 
 script which the HTTP server will send back to the browser. The browser
611 
 now assumes that the data coming back from this script is text since it
612 
 hasn't received an explicit header. When then the image headers get
613 
 sent back to the browser to forewarn the browser of the forthcoming
614 
 image the browser will not like that as it has already assumed the data
615 
 stream was a text stream. The browser will then give the infamous
616 
 &quot;Headers already sent error&quot;.</P>
617 
<P> To include several images together with text on a page you need to
618 
 have a parent page with several &lt;IMG&gt; tags which each refers to an
619 
 image script (or the same image script with GET/POST data).</P>
620 
<H3><A NAME="4_2_1">4.2.1 Using the JpGraph library to send back images</A>
621 
</H3>
622 
<P> To get access to the JpGraph library you will need to include at
623 
 least two files, the base library and one or more of the plot
624 
 extensions. So for example to create a basic line plot the top of your
625 
 PHP file must have the lines:<DIV class="phpscript"><CODE><FONT color="#000000">
626 
 <FONT color="#0000BB">&nbsp;
627 
<BR></FONT><FONT color="#007700">include&nbsp;(</FONT><FONT color="#DD0000">
628 
'jpgraph.php'</FONT><FONT color="#007700">);
629 
<BR>include&nbsp;(</FONT><FONT color="#DD0000">'jpgraph_line.php'</FONT><FONT color="#007700">
630 
);
631 
<BR>...
632 
<BR>&nbsp;</FONT><FONT color="#FF8000">//&nbsp;Code&nbsp;that&nbsp;uses&nbsp;the&nbsp;jpgraph&nbsp;library
633 
<BR></FONT><FONT color="#007700">...</FONT><FONT color="#0000BB"></FONT></FONT>
634 
</CODE></DIV></P>
635 
<P></P>
636 
<P><DIV class="note"><B>Note:</B> You might also use the PHP directive<I>
637 
 require</I>. The difference is subtle in that include will only include
638 
 the code if the include statement is actually executed. While require()
639 
 will always be replaced by the file specified. See PHP documentation
640 
 for further explanation. For most practical purposes they are
641 
 identical.</DIV></P>
642 
<H2><A NAME="4_3">4.3 Using PHP directly</A></H2>
643 
<P> It is also possible to generate images directly using the command
644 
 line version of PHP. This works the same way as the normal &quot;through the
645 
 browser&quot; generation with the exception that no HTTP headers will be
646 
 generated. Only the binary image data.</P>
647 
<P> Please make sure that you run the command line version of PHP (cli).
648 
 Using the CGI SAPI version will not work since then the HTTP headers
649 
 will be generated. Note: If the CGI version is used the generation of
650 
 headers may be suppressed by the '-q' option.</P>
651 
<P> You can easily check the version installed by running</P>
652 
<PRE>php --version</PRE>
653 
<P> you should then get a response with something like</P>
654 
<PRE>
655 
PHP 4.3.8 (cli) (built: Aug 29 2004 22:48:10)
656 
Copyright (c) 1997-2004 The PHP Group
657 
Zend Engine v1.3.0, Copyright (c) 1998-2004 Zend Technologies
658 
</PRE>
659 
<P> The important thing here is the</P>
660 
<PRE>(cli)</PRE>
661 
<P> marker. The JpGraph library check from what SAPI API it is invoked
662 
 from and adjusts the header generation accordingly.</P>
663 
<P> If all the above requirements are met then images can be generated
664 
 directly on the command line and stored in a suitable file. For example
665 
 by</P>
666 
<PRE>
667 
$&gt; php myimage.php &gt; image.png
668 
</PRE>
669 
<P> Please note that the file extension on the image file must match the
670 
 format in which the image is generated.</P>
671 
<H2><A NAME="4_4">4.4 The basic principle of JpGraph and the creation of
672 
 images</A></H2>
673 
<P> The common pattern for creating graphs is</P>
674 
<OL>
675 
<LI> Create a script that constructs the image, type, colors size and so
676 
 on.</LI>
677 
<LI> A wrapper script which contains one or more &lt;IMG&gt; tags to position
678 
 the graphs on the proper HTML page.</LI>
679 
</OL>
680 
<P> Of course it is of perfectly possible to call the image script
681 
 directly in the browser to just display the generated image in the
682 
 browser.</P>
683 
<P> You should remember that it is also possible to pass arguments to
684 
 the image script via the normal HTTP GET/POST arguments. For example<DIV
685 
class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;</FONT><FONT
686 
color="#007700">&lt;</FONT><FONT color="#0000BB">img&nbsp;src</FONT><FONT color="#007700">
687 
=</FONT><FONT color="#DD0000">&quot;showgraph.php?a=1&amp;b=2&quot;</FONT><FONT color="#007700">
688 
&gt;</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
689 
<P> This could for example be used to control the appearance of the
690 
 image or perhaps send data to the image which will be displayed. Note
691 
 that this is probably not the best way to send large amount of data to
692 
 plot. Instead the only practical way, for large data sizes, is to get
693 
 all the data in the image script, perhaps from a DB. Another
694 
 alternative for large amount of data to be sent to the image script is
695 
 by creating a POST request to the image script.<DIV class="note"><B>
696 
Note:</B><B> Forcing the browser to update your image</B> Some browser
697 
 may not send back a request to the web browser unless the user presses
698 
 &quot;Refresh&quot; (F5 - in most browsers). This can lead to problems that the
699 
 user is seeing old data. A simple trick is to add a dummy time argument
700 
 which is not used in the script. For example
701 
<PRE>
702 
echo '&lt;img src=&quot;myimagescript.php?dummy='.now().'&quot;&gt;';
703 
</PRE>
704 
 It is also important to be aware of any internal caching the browser
705 
 might do. The general problem with dynamically generated images is that
706 
 the image generating script (file) remains the same. This makes the
707 
 browser believe that the data hasn't changed and if the browser already
708 
 has issues a previous GET request and has the data cached it will not
709 
 send a new GET if the timestamp on the file is the same since it then
710 
 believes it my use the old cached version.</DIV></P>
711 
<P> When it comes to the structure of your imaging script they will
712 
 generally have the structure<DIV class="phpscript"><CODE><FONT color="#000000">
713 
 <FONT color="#0000BB">&nbsp;</FONT><FONT color="#FF8000">
714 
//&nbsp;...&nbsp;Include&nbsp;necessary&nbsp;headers
715 
<BR>
716 
<BR></FONT><FONT color="#0000BB">$graph&nbsp;</FONT><FONT color="#007700">
717 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">Graph</FONT><FONT color="#007700">(</FONT><FONT
718 
color="#0000BB">$width</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
719 
$height</FONT><FONT color="#007700">,&nbsp;...);
720 
<BR>
721 
<BR></FONT><FONT color="#FF8000">
722 
//&nbsp;...&nbsp;code&nbsp;to&nbsp;construct&nbsp;the&nbsp;graph&nbsp;details
723 
<BR>
724 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
725 
color="#0000BB">Stroke</FONT><FONT color="#007700">();
726 
<BR></FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
727 
<P> JpGraph is completely Object oriented so all calls will be action on
728 
 specific instances of classes. One of the fundamental classes is the
729 
 Graph() class which represents the entire graph.</P>
730 
<P> After the creation of the Graph() object all the code lines to
731 
 construct the details of the graph are added.</P>
732 
<P> The final method called in an image script will most likely be the<I>
733 
 Graph::Stroke()</I> method. This will send the constructed image back
734 
 to the browser. A variation of this is used if the graph are supposed
735 
 to have image maps. In that case the final method will be<I>
736 
 Graph::StrokeCSIM()</I></P>
737 
<P> In addition to this standard usage pattern you can also choose to</P>
738 
<UL>
739 
<LI> ... send the graph directly to a file</LI>
740 
<LI> ... access the GD image handler for further image processing (also
741 
 needed to include the image in an PDF file)</LI>
742 
<LI> ... make use of the builtin cache system to send back a previously
743 
 generated image</LI>
744 
</UL>
745 
<P> The cache system, which lessens the burden of the PHP server, works
746 
 by avoiding o run all the code that follows the initial Graph() call by
747 
 checking if the image has already been created and in that case
748 
 directly send back the previously created (and stored in a file) image
749 
 to the browser. When using the cache system a filename must be
750 
 specified in the initial Graph() call which is used to store the image
751 
 in the cache system and possibly also a timeout value to indicate how
752 
 long the image in the cache directory should be valid.</P>
753 
<P> In many of the examples in this manual the following pattern will be
754 
 used<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
755 
&nbsp;$graph&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">
756 
Graph</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">300</FONT><FONT
757 
color="#007700">,</FONT><FONT color="#0000BB">200</FONT><FONT color="#007700">
758 
,</FONT><FONT color="#DD0000">&quot;auto&quot;</FONT><FONT color="#007700">);</FONT><FONT
759 
color="#0000BB"></FONT></FONT></CODE></DIV></P>
760 
<P> The two first parameters specify the width and height of the graph
761 
 and the third parameter the name of the image file in the cache
762 
 directory. The special name<I> 'auto'</I> indicates that the image file
763 
 will be given the same name as the image script but with the extension
764 
 changed to indicate the graphic format used, i.e '.jpg', '.png' and so
765 
 on.</P>
766 
<P> Please note that the cache system by default is disabled and must be
767 
 enabled by setting the proper define in the file &quot;jpg-config.inc&quot;</P>
768 
<H2><A NAME="4_5">4.5  Choosing the image format for JpGraph</A></H2>
769 
<P> By default JpGraph automatically chooses the image format to use in
770 
 the order PNG, JPEG and GIF. The exact format depends on what is
771 
 available on your system. There are two ways you can influence the way
772 
 the graphic format is chosen.</P>
773 
<OL>
774 
<LI> Change the default graphic format by changing the DEFINE<DIV class="phpscript">
775 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;DEFINE</FONT><FONT color="#007700">
776 
(</FONT><FONT color="#DD0000">&quot;DEFAULT_GFORMAT&quot;</FONT><FONT color="#007700">
777 
,</FONT><FONT color="#DD0000">&quot;auto&quot;</FONT><FONT color="#007700">);</FONT><FONT
778 
color="#0000BB"></FONT></FONT></CODE></DIV>
779 
<P></P>
780 
</LI>
781 
<LI> Set the graphic format in your script by calling the method <A href="../ref/Image.html#_IMAGE_SETIMGFORMAT">
782 
 SetImgFormat()</A> For example, to force your script to use JPEG in one
783 
 specific image use<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT
784 
color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
785 
img</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
786 
SetImgFormat</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
787 
&quot;jpeg&quot;</FONT><FONT color="#007700">)</FONT><FONT color="#0000BB"></FONT></FONT>
788 
</CODE></DIV>
789 
<P></P>
790 
</LI>
791 
</OL>
792 
<P></P>
793 
<H2><A NAME="4_6">4.6 Alternatives to streaming back the image</A></H2>
794 
<P> If you like to save the image directly to a file instead of
795 
 streaming it back to the browser then you just have to specify an
796 
 absolute filename in the final call to Graph::Stroke(), i.e.</P>
797 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
798 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
799 
Stroke</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
800 
&quot;/usr/home/peter/images/result2002.png&quot;</FONT><FONT color="#007700">);</FONT><FONT
801 
color="#0000BB"></FONT></FONT></CODE></DIV></P>
802 
<P></P>
803 
<P> Please note that the user running as Apache/PHP must have write
804 
 access to the specified directory.</P>
805 
<P> There are also two predefined filenames which have special meaning.</P>
806 
<UL>
807 
<LI>&quot;auto&quot;, This will create a file in the same directory as the script
808 
 with the same name as the script but with the correct image extension.</LI>
809 
<LI>_IMG_HANDLER, (This is defined in jpgraph.php). Specifying this
810 
 filename will not create a an image to file or stram it back to the
811 
 browser. Instead it will instruct the Stroke() method to just return
812 
 the handle for the GD image. This is useful if you later want to
813 
 manipulate the image in ways that are not yet supported by Jpgraph. For
814 
 example include the image in generated PDF files.
815 
<BR><I> Example:</I><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT
816 
color="#0000BB">&nbsp;$handle&nbsp;</FONT><FONT color="#007700">=&nbsp;</FONT><FONT color="#0000BB">
817 
$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">Stroke</FONT><FONT
818 
color="#007700">(</FONT><FONT color="#0000BB">_IMG_HANDLER</FONT><FONT color="#007700">
819 
);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
820 
<P></P>
821 
</LI>
822 
</UL>
823 
<P></P>
824 
<H2><A NAME="4_7">4.7  Working with fonts in JpGraph</A></H2>
825 
<P> JpGraph supports both a set of built in bit-mapped fonts as well as
826 
 True Type Fonts. For scale values on axis it is strongly recommended
827 
 that you just use the built in bitmap fonts for the simple reason that
828 
 they are, for most people, easier to read (they are also quicker to
829 
 render). Try to use TTF only for headlines and perhaps the title for a
830 
 graph and it's axis. By default the TTF will be drawn with
831 
 anti-aliasing turned on.</P>
832 
<P> In many of the example you can see examples of both TrueType and
833 
 Bitmap fonts.</P>
834 
<P> There are a number of subtle differences in the way builtin fonts
835 
 and TrueType fonts are rendered to the screen. However, JpGraph,
836 
 abstracts away 99.9% of the differences so it will be, for the user,
837 
 completely transparent to switch between the different fonts.</P>
838 
<H3><A NAME="4_7_1">4.7.1 Installing TrueType fonts</A></H3>
839 
<P> Since Internally TrueType fonts are rendered by locating a font
840 
 specification file you must install the accompanying TrueType fonts in
841 
 directory of your choice. You must then tell JpGraph where these fonts
842 
 may be found by specifying the font-path in the FONT_PATH define (in
843 
 jpg-config.inc). Please note that this must be the absolute file path
844 
 and not relative to the htdocs directory. By default the path is set to<DIV
845 
class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
846 
&nbsp;DEFINE</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
847 
&quot;TTF_DIR&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
848 
&quot;/usr/local/fonts/ttf/&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB">
849 
</FONT></FONT></CODE></DIV></P>
850 
<P> Since JpGraph must be able to tell the difference between the italic
851 
 and bold versions of the same font family a standard naming convention
852 
 is used to name the files. The available fonts are also defined by
853 
 DEFINES and hence you can't just copy your own TTF files to the
854 
 directory and expect it to work. At the moment there is no &quot;easy&quot; way
855 
 to add new fonts but to make some (small) mods to the code. However
856 
 this is expected to change in future version of JpGraph.</P>
857 
<H3><A NAME="4_7_2">4.7.2 Verifying that the TTF fonts work</A></H3>
858 
<P> In order to get TTF fonts working with JpGraph you should first
859 
 check that the following pure GD scripts work correctly. Please adjust
860 
 the font path according to your installation.<DIV class="phpscript"><CODE>
861 
<FONT color="#000000"> <FONT color="#0000BB">&nbsp;DEFINE</FONT><FONT color="#007700">
862 
(</FONT><FONT color="#DD0000">&quot;TTF_DIR&quot;</FONT><FONT color="#007700">,</FONT><FONT
863 
color="#DD0000">&quot;/usr/X11R6/lib/X11/fonts/truetype/&quot;</FONT><FONT color="#007700">
864 
);&nbsp;
865 
<BR>
866 
<BR></FONT><FONT color="#0000BB">$im&nbsp;</FONT><FONT color="#007700">=&nbsp;</FONT><FONT
867 
color="#0000BB">imagecreatetruecolor&nbsp;</FONT><FONT color="#007700">(</FONT><FONT
868 
color="#0000BB">400</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">
869 
100</FONT><FONT color="#007700">);&nbsp;
870 
<BR></FONT><FONT color="#0000BB">$black&nbsp;</FONT><FONT color="#007700">=&nbsp;</FONT><FONT
871 
color="#0000BB">imagecolorallocate&nbsp;</FONT><FONT color="#007700">(</FONT><FONT
872 
color="#0000BB">$im</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">
873 
0</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">0</FONT><FONT
874 
color="#007700">,&nbsp;</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">
875 
);&nbsp;
876 
<BR></FONT><FONT color="#0000BB">$white&nbsp;</FONT><FONT color="#007700">=&nbsp;</FONT><FONT
877 
color="#0000BB">imagecolorallocate&nbsp;</FONT><FONT color="#007700">(</FONT><FONT
878 
color="#0000BB">$im</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">
879 
255</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">255</FONT><FONT
880 
color="#007700">,&nbsp;</FONT><FONT color="#0000BB">255</FONT><FONT color="#007700">
881 
);&nbsp;
882 
<BR>
883 
<BR></FONT><FONT color="#0000BB">imagerectangle</FONT><FONT color="#007700">
884 
(</FONT><FONT color="#0000BB">$im</FONT><FONT color="#007700">,</FONT><FONT
885 
color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
886 
0</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">399</FONT><FONT
887 
color="#007700">,</FONT><FONT color="#0000BB">99</FONT><FONT color="#007700">
888 
,</FONT><FONT color="#0000BB">$black</FONT><FONT color="#007700">);&nbsp;
889 
<BR></FONT><FONT color="#0000BB">imagefilledrectangle</FONT><FONT color="#007700">
890 
(</FONT><FONT color="#0000BB">$im</FONT><FONT color="#007700">,</FONT><FONT
891 
color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
892 
0</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">399</FONT><FONT
893 
color="#007700">,</FONT><FONT color="#0000BB">99</FONT><FONT color="#007700">
894 
,</FONT><FONT color="#0000BB">$white</FONT><FONT color="#007700">);&nbsp;
895 
<BR>
896 
<BR></FONT><FONT color="#0000BB">imagettftext&nbsp;</FONT><FONT color="#007700">
897 
(</FONT><FONT color="#0000BB">$im</FONT><FONT color="#007700">,&nbsp;</FONT><FONT
898 
color="#0000BB">30</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">
899 
0</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">10</FONT><FONT
900 
color="#007700">,&nbsp;</FONT><FONT color="#0000BB">40</FONT><FONT color="#007700">
901 
,&nbsp;</FONT><FONT color="#0000BB">$black</FONT><FONT color="#007700">,&nbsp;</FONT><FONT
902 
color="#0000BB">TTF_DIR</FONT><FONT color="#007700">.</FONT><FONT color="#DD0000">
903 
&quot;arial.ttf&quot;</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#DD0000">
904 
&quot;Hello&nbsp;World!&quot;</FONT><FONT color="#007700">);&nbsp;
905 
<BR>
906 
<BR></FONT><FONT color="#0000BB">header&nbsp;</FONT><FONT color="#007700">(</FONT><FONT
907 
color="#DD0000">&quot;Content-type:&nbsp;image/png&quot;</FONT><FONT color="#007700">
908 
);&nbsp;
909 
<BR></FONT><FONT color="#0000BB">imagepng&nbsp;</FONT><FONT color="#007700">(</FONT><FONT
910 
color="#0000BB">$im</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB">
911 
</FONT></FONT></CODE></DIV></P>
912 
<P> The above script assumes you have the GD2 library and will create an
913 
 image with the classical &quot;Hello World!&quot; text printed in black.</P>
914 
<H3><A NAME="4_7_3">4.7.3 Specifying fonts</A></H3>
915 
<P> All graph objects that uses text allows you to specify the font to
916 
 be used by calling the SetFont() method and specifying three parameters</P>
917 
<OL>
918 
<LI> Font family, Specified with a FF_ define</LI>
919 
<LI> Font style, Specified with a FS_ define</LI>
920 
<LI> Font size, Numeric value (only used for TTF fonts)</LI>
921 
</OL>
922 
<P> For the builtin fonts the third, size, parameter is ignored since
923 
 the size is fixed for the three builtin fonts. The available font
924 
 families and the corresponding name (in JpGraph 1.7) are listed in the
925 
 table below.</P>
926 
<P></P>
927 
<TABLE border="1">
928 
<TR><TD>Font family</TD><TD>Type</TD><TD>Note</TD></TR>
929 
<TR><TD>FF_FONT0</TD><TD>Builtin font</TD><TD>A very small font, only
930 
 one style</TD></TR>
931 
<TR><TD>FF_FONT1</TD><TD>Builtin font</TD><TD>A medium sized font</TD></TR>
932 
<TR><TD>FF_FONT2</TD><TD>Builtin font</TD><TD>The largest bit mapped
933 
 font</TD></TR>
934 
<TR><TD>FF_ARIAL</TD><TD>TTF font</TD><TD>Arial font</TD></TR>
935 
<TR><TD>FF_VERDANA</TD><TD>TTF font</TD><TD>Verdana font</TD></TR>
936 
<TR><TD>FF_COURIER</TD><TD>TTF font</TD><TD>Fix pitched courier</TD></TR>
937 
<TR><TD>FF_BOOK</TD><TD>TTF font</TD><TD>Bookman</TD></TR>
938 
<TR><TD>FF_COMIC</TD><TD>TTF font</TD><TD>Comic sans</TD></TR>
939 
<TR><TD>FF_TIMES</TD><TD>TTF font</TD><TD>Times New Roman</TD></TR>
940 
<TR><TD>FF_GEORGIA</TD><TD>TTF font</TD><TD>Georgia</TD></TR>
941 
<TR><TD>FF_TREBUCHE</TD><TD>TTF font</TD><TD>Trebuche</TD></TR>
942 
<TR><TD>FF_VERA</TD><TD>TTF font</TD><TD>Gnome Vera font, Available from
943 
 http://www.gnome.org/fonts/</TD></TR>
944 
<TR><TD>FF_VERAMONO</TD><TD>TTF font</TD><TD>Gnome Vera Mono font,
945 
 Available from http://www.gnome.org/fonts/</TD></TR>
946 
<TD>FF_VERASERIF</TD><TD>TTF font</TD><TD>Gnome Vera Serif font,
947 
 Available from http://www.gnome.org/fonts/</TD>
948 
<TR><TD>FF_CHINESE</TD><TD>TTF font</TD><TD>Installed chinese font</TD></TR>
949 
<TR><TD>FF_SIMSUN</TD><TD>TTF font</TD><TD>Installed chinese font</TD></TR>
950 
<TR><TD>FF_BIG5</TD><TD>TTF font</TD><TD>Installed Chinese BIG5 font
951 
 (needs iconv())</TD></TR>
952 
</TABLE>
953 
<P> Please note that not all font families support all styles. The
954 
 figure below illustrates each of the available font families and what
955 
 styles you may use.<DIV class="example">
956 
<BR> <A href="exframes/frame_listfontsex1.html" target="blank"><IMG border="0"
957 
HEIGHT="450"         src="img/img/img/img/img/img/img/img/listfontsex1.png" WIDTH="550"></A>
958 
<BR><B>Figure 1:</B> Illustration of some of the available fonts in
959 
 JpGraph <A href="exframes/frame_listfontsex1.html" target="blank">[src]</A>
960 
&nbsp;
961 
<P></P>
962 
</DIV></P>
963 
<P></P>
964 
<P> We finally show some example of valid font specifications<DIV class="phpscript">
965 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
966 
-&gt;</FONT><FONT color="#0000BB">title</FONT><FONT color="#007700">-&gt;</FONT><FONT
967 
color="#0000BB">SetFont</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
968 
FF_FONT2</FONT><FONT color="#007700">);
969 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
970 
color="#0000BB">title</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
971 
SetFont</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
972 
FF_FONT2</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
973 
FS_BOLD</FONT><FONT color="#007700">);
974 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
975 
color="#0000BB">title</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
976 
SetFont</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
977 
FF_ARIAL</FONT><FONT color="#007700">);
978 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
979 
color="#0000BB">title</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
980 
SetFont</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
981 
FF_ARIAL</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
982 
FS_BOLD</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">24</FONT><FONT
983 
color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
984 
</P>
985 
<P></P>
986 
<H3><A NAME="4_7_4">4.7.4 Adding additional fonts to JpGraph</A></H3>
987 
<P><STRONG> Note:</STRONG> This information is only given here for very
988 
 advanced users. No free support will be given in the case you run into
989 
 difficulties trying to add new fonts. At the moment adding new fonts
990 
 require code modifications as outlined below.</P>
991 
<P> In order to add you favorite fonts there are three steps you need to
992 
 follow :</P>
993 
<OL>
994 
<LI> Define a new &quot;FF_&quot; constant naming your font family with a suitable
995 
 high index number</LI>
996 
<LI>Get the TTF file(s) and add it to your font directory. You need
997 
 separate files for each of the styles you want to support. You then
998 
 need to add the file names of the font as definitions in the class TTF.
999 
 Use the previous defined &quot;FF_&quot; name as index in the font specification
1000 
 array.</LI>
1001 
</OL>
1002 
<P></P>
1003 
<H3><A NAME="4_7_5">4.7.5 Understanding text alignment in JpGraph</A></H3>
1004 
<P> For everyday use of JpGraph understanding of the alignment of text
1005 
 strings in not necessary. However, if you like to add arbitrary strings
1006 
 to the graph (with Graph::AddText()) or when working directly on a
1007 
 canvas it will help understand this.</P>
1008 
<P> Text is added to a graph with the creation of a <A href="../ref/Text.html#_C_TEXT">
1009 
Text()</A> object. And the alignment is specified with <A href="../ref/Text.html#_TEXT_ALIGN">
1010 
Text::Align()</A> Text alignment might actually be a misguiding name.
1011 
 What you specify is rather the anchor point for the text, i.e. when you
1012 
 specify that a text should be positioned at position<I> (x,y)</I> how
1013 
 is that coordinate to be interpretated.</P>
1014 
<P> The image below shows a text string aligned in the 9 possible
1015 
 combinations. In the image the red crosses indicate what coordinate
1016 
 that text string was positioned at. The alignment used for each of the
1017 
 cases is shown below.<DIV class="example">
1018 
<BR> <A href="exframes/frame_textalignex1.html" target="blank"><IMG border="0"
1019 
HEIGHT="494"         src="img/img/img/img/img/img/img/img/textalignex1.png" WIDTH="480"></A>
1020 
<BR><B>Figure 2:</B> Specifying alignment (anchor-point) for text
1021 
 strings <A href="exframes/frame_textalignex1.html" target="blank">[src]</A>
1022 
&nbsp;
1023 
<P></P>
1024 
</DIV></P>
1025 
<P></P>
1026 
<P></P>
1027 
<H2><A NAME="4_8">4.8 Specifying colors in JpGraph</A></H2>
1028 
<P> Colors can be specified in three different ways</P>
1029 
<OL>
1030 
<LI> By using one of the, roughly, 400 pre-defined color names, e.g<DIV class="phpscript">
1031 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;SetColor</FONT><FONT color="#007700">
1032 
(</FONT><FONT color="#DD0000">&quot;khaki&quot;</FONT><FONT color="#007700">);</FONT><FONT
1033 
color="#0000BB"></FONT></FONT></CODE></DIV>
1034 
<P> A named color can also be modified by adding a adjustment factor. An
1035 
 adjustment factor, 0 &lt; f &lt; 1, a smaller value will give a darker
1036 
 version and a value of 0 or 1 will return the original color. A value &gt;
1037 
 1 will make the color brighter. A few examples<DIV class="phpscript"><CODE>
1038 
<FONT color="#000000"> <FONT color="#0000BB">&nbsp;SetColor</FONT><FONT color="#007700">
1039 
(</FONT><FONT color="#DD0000">&quot;khaki:0.5&quot;</FONT><FONT color="#007700">
1040 
);&nbsp;</FONT><FONT color="#FF8000">//&nbsp;A&nbsp;darker&nbsp;version&nbsp;of&nbsp;&quot;khaki&quot;
1041 
<BR></FONT><FONT color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT
1042 
color="#DD0000">&quot;yellow:1.2&quot;</FONT><FONT color="#007700">);&nbsp;</FONT><FONT color="#FF8000">
1043 
//&nbsp;A&nbsp;slightly&nbsp;lighter&nbsp;version&nbsp;of&nbsp;&quot;yellow&quot;</FONT><FONT color="#0000BB"></FONT>
1044 
</FONT></CODE></DIV></P>
1045 
<P></P>
1046 
</LI>
1047 
<LI> By specifying a RGB triple, e.g.<DIV class="phpscript"><CODE><FONT color="#000000">
1048 
 <FONT color="#0000BB">&nbsp;SetColor</FONT><FONT color="#007700">(array(</FONT><FONT
1049 
color="#0000BB">65</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
1050 
100</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">176</FONT><FONT
1051 
color="#007700">));</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
1052 
<P></P>
1053 
</LI>
1054 
<LI> By specifying the color as a hex string value<DIV class="phpscript">
1055 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;SetColor</FONT><FONT color="#007700">
1056 
(</FONT><FONT color="#DD0000">&quot;#A16BFF&quot;</FONT><FONT color="#007700">);</FONT><FONT
1057 
color="#0000BB"></FONT></FONT></CODE></DIV>
1058 
<P></P>
1059 
</LI>
1060 
</OL>
1061 
<P></P>
1062 
<H3><A NAME="4_8_1">4.8.1 Adjusting the transparency</A></H3>
1063 
<P> From version 1.10 JpGraph also supports the use of Alpha Blending
1064 
 together with GD2.x This lets you specify how much of the underlying
1065 
 color should be visible. You specify the amount of transparency for a
1066 
 color by adding an extra parameter to the color specification separated
1067 
 by an '@' (at) character.</P>
1068 
<P> For example to specify a red color which is 40% transparent you
1069 
 write<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
1070 
&nbsp;SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
1071 
&quot;red@0.4&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
1072 
</FONT></CODE></DIV></P>
1073 
<P> or to specify 90% transparancy you write<DIV class="phpscript"><CODE>
1074 
<FONT color="#000000"> <FONT color="#0000BB">&nbsp;SetColor</FONT><FONT color="#007700">
1075 
(</FONT><FONT color="#DD0000">&quot;red@0.9&quot;</FONT><FONT color="#007700">);</FONT><FONT
1076 
color="#0000BB"></FONT></FONT></CODE></DIV></P>
1077 
<P> Below is an example of how a bar graph with a background image can
1078 
 make use of transparency<DIV class="example">
1079 
<BR> <A href="exframes/frame_alphabarex1.html" target="blank"><IMG border="0"
1080 
HEIGHT="250"         src="img/img/img/img/img/img/img/img/alphabarex1.png" WIDTH="450"></A>
1081 
<BR><B>Figure 3:</B> Using alpha blending in a bar graph <A href="exframes/frame_alphabarex1.html"
1082 
target="blank">[src]</A>&nbsp;
1083 
<P></P>
1084 
</DIV></P>
1085 
<P></P>
1086 
<H3><A NAME="4_8_2">4.8.2 Available named colors</A></H3>
1087 
<P> The chart below shows all available named colors. <IMG HEIGHT="1240"         src="img/img/img/img/img/img/img/img/color_chart01.png"
1088 
WIDTH="700">
1089 
<BR> <IMG HEIGHT="1240"         src="img/img/img/img/img/img/img/img/color_chart02.png" WIDTH="700">
1090 
<BR> <IMG HEIGHT="1240"         src="img/img/img/img/img/img/img/img/color_chart03.png" WIDTH="700">
1091 
<BR> <IMG HEIGHT="1240"         src="img/img/img/img/img/img/img/img/color_chart04.png" WIDTH="700"></P>
1092 
<H3><A NAME="4_8_3">4.8.3 Theme colors for pie's</A></H3>
1093 
<P> For more on how to use the different themes to set the colors of Pie
1094 
 plots please refer to &quot;Working with 2D &amp; 3D pie plots&quot;</P>
1095 
<P> <IMG border="1" HEIGHT="355"         src="img/img/img/img/img/img/img/img/theme01.png" WIDTH="700">
1096 
<BR><STRONG> Theme 1:</STRONG> Earth</P>
1097 
<P> <IMG border="1" HEIGHT="290"         src="img/img/img/img/img/img/img/img/theme02.png" WIDTH="700">
1098 
<BR><STRONG> Theme 2:</STRONG> Pastel</P>
1099 
<P> <IMG border="1" HEIGHT="225"         src="img/img/img/img/img/img/img/img/theme03.png" WIDTH="700">
1100 
<BR><STRONG> Theme 3:</STRONG> Water</P>
1101 
<P> <IMG border="1" HEIGHT="225"         src="img/img/img/img/img/img/img/img/theme04.png" WIDTH="700">
1102 
<BR><STRONG> Theme 4:</STRONG> Sand</P>
1103 
<P></P>
1104 
<H1><A NAME="5">5 Understanding the JpGraph caching system</A></H1>
1105 
<P> To reduce load on the web server JpGraph implements an advanced
1106 
 caching system which avoids the burden of always having to run the full
1107 
 image script.</P>
1108 
<P> Depending on the complexity of the image script (for example if it
1109 
 is doing several DB lookups) this could significantly improve
1110 
 performance.</P>
1111 
<P> The rationale behind this is of course performance, and the
1112 
 observation that very few graphs are really real-time, i.e. needs to be
1113 
 updated absolutely every time the graphing script is called.</P>
1114 
<P></P>
1115 
<H2><A NAME="5_1">5.1 Enabling the cache system</A></H2>
1116 
<P> The enabling disabling of the cache system is controlled by two
1117 
 defines (in jpg-config.php)</P>
1118 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
1119 
&nbsp;DEFINE</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
1120 
&quot;USE_CACHE&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
1121 
true</FONT><FONT color="#007700">);
1122 
<BR></FONT><FONT color="#0000BB">DEFINE</FONT><FONT color="#007700">(</FONT><FONT
1123 
color="#DD0000">&quot;READ_CACHE&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
1124 
true</FONT><FONT color="#007700">)</FONT><FONT color="#0000BB"></FONT></FONT>
1125 
</CODE></DIV></P>
1126 
<P></P>
1127 
<P> The first of these, USE_CACHE, is the master-switch which must be
1128 
 set to true to enable the caching system. The second switch READ_CACHE
1129 
 very seldom needs to be changed.</P>
1130 
<P> This second switch basically tells whether or not JpGraph should
1131 
 ever look in the cache. Setting this to false and the master-switch to
1132 
 true would then always generate an new updated image file in the cache
1133 
 and this new image would be send back to the browser. The main use for
1134 
 this (admittedly) strange setting is if you like to have the side
1135 
 effect of the script that a fresh image is always stored in the cache
1136 
 directory.</P>
1137 
<P> Once you have enabled the cache you must also make sure that a valid
1138 
 cache directory is setup. The cache directory is specified with the
1139 
 define</P>
1140 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
1141 
&nbsp;DEFINE</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
1142 
&quot;CACHE_DIR&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
1143 
&quot;/tmp/jpgraph_cache/&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB">
1144 
</FONT></FONT></CODE></DIV></P>
1145 
<P></P>
1146 
<P> You can of course change the default directory to whatever directory
1147 
 you fancy. But, you must remember one important thing.<STRONG> The
1148 
 cache directory must be writable for the user running Apache/PHP</STRONG>
1149 
.</P>
1150 
<H2><A NAME="5_2">5.2 Using the cache in your script</A></H2>
1151 
<P> To use caching in your script you must supply a suitable file name
1152 
 which will be used to store the image in the cache. You can also supply
1153 
 a timeout value indicating how many minutes the cached image should be
1154 
 considered valid.</P>
1155 
<P> These parameters are supplied in the initial Graph() method call
1156 
 which should be among the first in your script. Instead of manually
1157 
 specifying a file name to be used you could often use the special name
1158 
 &quot;auto&quot;. If the filename is specified as &quot;auto&quot; the cashed image will
1159 
 then be named the same as the image script but with the correct
1160 
 extension depending on what image format have been chosen.</P>
1161 
<P> If you don't specify a file name no caching will be used no matter
1162 
 the settings of USE_CACHE (without a file name it is impossible!)</P>
1163 
<P> The following call to Graph() shows a typical use of the cache.</P>
1164 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
1165 
&nbsp;$graph&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">
1166 
Graph</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">300</FONT><FONT
1167 
color="#007700">,</FONT><FONT color="#0000BB">200</FONT><FONT color="#007700">
1168 
,</FONT><FONT color="#DD0000">&quot;auto&quot;</FONT><FONT color="#007700">,</FONT><FONT
1169 
color="#0000BB">60</FONT><FONT color="#007700">)</FONT><FONT color="#0000BB">
1170 
</FONT></FONT></CODE></DIV></P>
1171 
<P></P>
1172 
<P> The above code will use the automatic filename and a make the cache
1173 
 valid for 60 minutes.</P>
1174 
<P> So, how does this all work now?</P>
1175 
<P> The first time you call your script (no cached image) everything
1176 
 will be as usual, the script will run and you will in the end send back
1177 
 the image to the browser. However if you have the caching enabled
1178 
 JpGraph will automatically have stored a copy of the generated image in
1179 
 the cache directory.</P>
1180 
<P> The next time you call the script the first thing that happens in
1181 
 the initial Graph() is that it will go and check in the cache directory
1182 
 if the named image exists there. If this is the case it will also
1183 
 checks that the image isn't too old (as compared to the specified
1184 
 timeout value). If the image is valid then the image will be streamed
1185 
 straight back from the image file to the browser and the script will
1186 
 end it's execution.</P>
1187 
<P> Hence, if the image is found in the cache<STRONG> no code lines
1188 
 after the initial Graph() call will be executed</STRONG></P>
1189 
<P> The design decision behind this is that your image script code never
1190 
 has to include anything special to make full use of the cache. It will
1191 
 just automatically work.</P>
1192 
<H2><A NAME="5_3">5.3 Using the cache with Client Side Image Maps</A></H2>
1193 
<P> You can also use the cache system for CSIM as well. The cache system
1194 
 interface is slightly different in this case since the cache needs to
1195 
 store<STRONG> both</STRONG> the cached image and the cached image-map.
1196 
 It also needs to change due to the way CSIM HTML paradigm work. The two
1197 
 major differences from the &quot;standard&quot; cache is</P>
1198 
<OL>
1199 
<LI> The cached version will<STRONG> not</STRONG> be stored in the
1200 
 previous defined cache directory. See more below.</LI>
1201 
<LI> You must call an extra method, CheckCSIMCache(), to check the
1202 
 cache, see more below.</LI>
1203 
</OL>
1204 
<P></P>
1205 
<P> The performance benefits even for simple CSIM images is around 50%
1206 
 if the cache can be used and can of course be several 1000% if
1207 
 construction of the image requires DB calls and other complex
1208 
 operations which can be avoided.</P>
1209 
<P> Before reading further you should have an understanding on how the
1210 
 CSIM works by reading the section &quot;sing Client side image maps&quot;.</P>
1211 
<P> Please remember that when using CSIM you must end your script with a
1212 
 call to <A href="">Graph::StrokeCSIM()</A> method instead of the <A href="">
1213 
Graph::Stroke()</A> used for non-csim.</P>
1214 
<P> To use the cache with CSIM you have to call the <A href="">
1215 
Graph::CheckCSIMCache()</A>. As with the caching for non-CSIM you have
1216 
 to supply a name to be used for the cached version as well as an
1217 
 optional timeout value. The default timeout value if nothing else is
1218 
 specified is 60 minutes.</P>
1219 
<P> The name argument requires some more explanations. You must specify
1220 
 a relative name here. For example &quot;myimage&quot; or perhaps
1221 
 &quot;firstpage/image3&quot;. Depending on your installation of JpGraph this will
1222 
 now end up in the directory specified in the CSIMCACHE_DIR define. This
1223 
 must also be a directory accessible by the normal web server. By
1224 
 default a directory called &quot;csimcache&quot; will be created in the same
1225 
 directory as the image script itself.</P>
1226 
<P> This has the drawback that the directory from where the script is
1227 
 executed must be writable by the process running PHP. Best practice for
1228 
 this is to keep the number of writable directory for PHP down to a
1229 
 minimum and re-use the same directory as is used for the standard
1230 
 cache. This however, require that your system administrator setup that
1231 
 cache directory so that it also accessible by the HTTP server from the
1232 
 htdocs root.</P>
1233 
<P> The CheckCSIMCache() method checks the cache for an existing cached
1234 
 version and if found it returns it and halts execution of the script.
1235 
 So, this call should be the first call after the creation of the
1236 
 Graph() and before any heavy work is done to create the image so that
1237 
 you can minimize the execution of the script in the case a match is
1238 
 found.</P>
1239 
<P> So, the general structure of a script that uses CSIM and the cache
1240 
 is<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
1241 
&nbsp;$graph&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">
1242 
Graph</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">400</FONT><FONT
1243 
color="#007700">,</FONT><FONT color="#0000BB">300</FONT><FONT color="#007700">
1244 
);
1245 
<BR>
1246 
<BR></FONT><FONT color="#FF8000">//&nbsp;Check&nbsp;cache,&nbsp;10&nbsp;min&nbsp;timeout
1247 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
1248 
color="#0000BB">CheckCSIMCache</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
1249 
&quot;image1&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">10</FONT><FONT
1250 
color="#007700">);
1251 
<BR>
1252 
<BR></FONT><FONT color="#FF8000">
1253 
//&nbsp;!!&nbsp;If&nbsp;cached&nbsp;version&nbsp;exists,&nbsp;execution&nbsp;halts&nbsp;here&nbsp;!!
1254 
<BR>
1255 
<BR>//
1256 
<BR>//&nbsp;...&nbsp;Construct&nbsp;the&nbsp;image&nbsp;with&nbsp;heavy&nbsp;DB&nbsp;calls&nbsp;etc,&nbsp;etc
1257 
<BR>//
1258 
<BR>
1259 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
1260 
color="#0000BB">StrokeCSIM</FONT><FONT color="#007700">();</FONT><FONT color="#0000BB">
1261 
</FONT></FONT></CODE></DIV></P>
1262 
<P> Please note that you<STRONG> do not</STRONG> need to pass any
1263 
 argument to the final call to StrokeCSIM() as you do when not using the
1264 
 cache.<DIV class="note"><B>Note:</B> The CSIM caching works by storing
1265 
 two files in the cache directory. One file being the image and the
1266 
 other file being the corresponding image map as a pure HTML file.</DIV></P>
1267 
<H2><A NAME="5_4">5.4 Some final comments</A></H2>
1268 
<P></P>
1269 
<UL>
1270 
<LI>If you want the timeout value to be &quot;forever&quot; then you can specify a
1271 
 
1272 
 the image you will have to remove the image files from the cache. This
1273 
 removal could for example be handled by a nightly cron-job</LI>
1274 
<LI> If you use images where you have enabled the anti-aliasing you
1275 
 should strongly consider using caching since anti-aliasing is quite
1276 
 time consuming compared to standard line drawings.</LI>
1277 
</UL>
1278 
<P></P>
1279 
<H2><A NAME="5_5">5.5 Common feature for all graphs</A></H2>
1280 
<P> This is a summary of the available feature for all Graph based
1281 
 charts, i.e. line plots, error plots, scatter plots, etc.</P>
1282 
<H3><A NAME="5_5_1">5.5.1 Clipping</A></H3>
1283 
<P> By default all plots are clipped outside the plot area. This means
1284 
 that if you manually specify a scale and then try to plot which has
1285 
 values smaller/larger than the scale those values will not show.</P>
1286 
<P> The clipping algorithm is &quot;perfect&quot; in the sense that for example
1287 
 line plots where the plot area cuts the line between two data points
1288 
 the line will be drawn up to the edge of the plot area. The algorithm
1289 
 used is O(1) in number of data points.</P>
1290 
<P> The disabling/enabling of clipping manually is controlled by <A href="../ref/Graph.html#_GRAPH_SETCLIPPING">
1291 
Graph::SetClipping()</A></P>
1292 
<H3><A NAME="5_5_2">5.5.2  Commonly used properties</A></H3>
1293 
<P></P>
1294 
<OL>
1295 
<LI> Each graph can have three titles accessed through the properties
1296 
 'Graph::title', ''Graph::subtitle' and ''Graph::subsubtitle'</LI>
1297 
<LI> Each graph have a legend accessed through the 'Graph::legend'
1298 
 property</LI>
1299 
<LI> Each graph can have a left, center and right footer accessed
1300 
 through 'Graph::footer::left','Graph::footer::center' and
1301 
 'Graph::footer::right'</LI>
1302 
<LI> You access the axis through 'Graph::xaxis', 'Graph::yaxis' and
1303 
 'Graph::y2axis'</LI>
1304 
<LI> You access the grids through 'Graph::xgrid', 'Graph::ygrid' and
1305 
 'Graph::y2grid'</LI>
1306 
</OL>
1307 
<P></P>
1308 
<H3><A NAME="5_5_3">5.5.3  Commonly used methods</A></H3>
1309 
<P></P>
1310 
<OL>
1311 
<LI> You add plot objects (bar plots, pie plots, texts, bands, lines
1312 
 etc) with the 'Graph::Add() method.</LI>
1313 
<LI> Each graph can have a specified margin set by 'Graph::SetMargin()'</LI>
1314 
<LI> Each graph can have a fill color in the plot area
1315 
 'Graph::SetColor()'</LI>
1316 
<LI> The plot areas may have a box around it 'Graph::SetBox()'</LI>
1317 
<LI> Each graph can have a specified margin color
1318 
 'Graph::SetMarginColor()'</LI>
1319 
<LI> Each graph can have a frame or not 'Graph::SetFrame()'</LI>
1320 
<LI> Each graph can have a specified drop shadow 'Graph::SetShadow()'</LI>
1321 
<LI> The grid lines can be either behind or in front of the plots
1322 
 'Graph::SetGridDepth()'</LI>
1323 
<LI> The plot can be rotated an arbitrary angle with 'Graph::SetAngle()'</LI>
1324 
<LI> You can add a background image with 'Graph::SetBackgroundImage'</LI>
1325 
<LI> You can change the overall appearance of the axis with
1326 
 'Graph::SetAxisStyle'</LI>
1327 
</OL>
1328 
<P></P>
1329 
<H1><A NAME="6">6 Using image maps with JpGraph</A></H1>
1330 
<P> Image maps, or client side image (CSIM) as they are known is fully
1331 
 supported in JpGraph. It gives you the opportunity to create hot-spots
1332 
 in the graphs which allows you to build a set of &quot;drill-down&quot; graphs.</P>
1333 
<P> In the following section is based on the assumption that the reader
1334 
 is familiar with the basic concepts of client side image map in HTML.</P>
1335 
<P> To shortly recapitulate. Client side image maps consists of two
1336 
 parts. The first part is the actual image and the second part is a
1337 
 mapping that gives the coordinates for areas in the image which should
1338 
 be marked as hot spots (i.e. click-able by the user). The library can
1339 
 automatically generate these coordinate maps from a given graph.</P>
1340 
<P> Through out the manual areas of the graph that may be used as a
1341 
 hotspot is given in conjuction with the general description of that
1342 
 area.</P>
1343 
<H2><A NAME="6_1">6.1 The basic structure of an image map script</A></H2>
1344 
<P> The standard structure for an HTML page using client side image maps
1345 
 would be something along the lines of</P>
1346 
<P></P>
1347 
<PRE>
1348 
// Image map specification with name &quot;mapname&quot;
1349 
&lt;MAP NAME=...&gt;
1350 
... specification ...
1351 
&lt;/MAP&gt;
1352 
 
1353 
// Image tag
1354 
&lt;img src=&quot;...&quot; ISMAP USEMAP=&quot;mapname&quot;&gt;
1355 
</PRE>
1356 
<P> This poses an interesting question.</P>
1357 
<P> Since we normally call the graphing script directly in the &lt;img&gt; tag
1358 
 how do we get hold of the image map (which is available only in the
1359 
 image script) in this &quot;HTML wrapper&quot; script?</P>
1360 
<P> In JpGraph there is actually two ways of solving this.</P>
1361 
<OL>
1362 
<LI> Use the preferred &quot;builtin&quot; way using the modified Stroke() method
1363 
 Graph::StrokeCSIM() instead of the standard Graph::Stroke() method.</LI>
1364 
<LI> Directly use the Graph::GetHTMLImageMap() which gives you fine
1365 
 control at the expense of more complex coding.</LI>
1366 
</OL>
1367 
<P> The first (and preferred) way modifies the stroke method so that
1368 
 instead of returning an image (like the standard Stroke() method)
1369 
 StrokeCSIM() actually returns an HTML page containing both the image
1370 
 map specification and the correct &lt;IMG&gt; tag.</P>
1371 
<P> This of course means that it is necessary to treat an image map
1372 
 returning image script differently from a non-CSIM image script, for
1373 
 example you can't use it directly as the target for the &quot;src&quot; attribute
1374 
 of the &lt;IMG&gt; tag since it sends back an actual HTML page containing
1375 
 both an image tag together with an image map.</P>
1376 
<H2><A NAME="6_2">6.2 Specifying targets for image map plots</A></H2>
1377 
<P> To turn a standard image script into a CSIM script the first thing
1378 
 needed to do is to supply the appropriate URL targets for the hotspots
1379 
 in the image.</P>
1380 
<P> What the hotspots represent depends on the type of plot you are
1381 
 doing. The following plot types and graph areas support image maps.</P>
1382 
<UL>
1383 
<LI> Line plots. Markers are hotspots.</LI>
1384 
<LI> Scatter plot. Markers are hotspots.</LI>
1385 
<LI> Pie Plots and 3D Pie plots. Each slice is a hotspot</LI>
1386 
<LI> All types of Bar graphs. Each bar is a hotspot</LI>
1387 
<LI> Legends</LI>
1388 
<LI> Text strings, for example titles and title of axis</LI>
1389 
</UL>
1390 
<P> To specify a link for each hotspot you have to use the <A href="../ref/Plot.html#_PLOT_SETCSIMTARGETS">
1391 
 SetCSIMTargets()</A> method for each plot (or specific area) in the
1392 
 graph which should be a hotspot.</P>
1393 
<P> There are two arguments to this method</P>
1394 
<OL>
1395 
<LI> $aTargets, an array of valid URL targets. One URL per hot spot, for
1396 
 example if you have a 10 values bar plot you need 10 URLs. If the
1397 
 SetCSIMTarget() is applied to, for example, a text then of course only
1398 
 one URL target should be specified.</LI>
1399 
<LI> $aAlts, an array of valid alt-texts. Many browsers (but not all)
1400 
 will show this text string if the mouse hovers over a hotspot.</LI>
1401 
</OL>
1402 
<P></P>
1403 
<H2><A NAME="6_3">6.3 Using StrokeCSIM()</A></H2>
1404 
<P> The simplest way of creating a creating a CSIM image is with the
1405 
 StrokeCSIM() method. As mentioned before this method actually returns a
1406 
 (small) HTML page containing both the image-tag as well as the image
1407 
 map specification. Hence it is<B> not</B> possible to use a script that
1408 
 ends with this method in a standard image-tags src property.</P>
1409 
<P> There are two ways to create CSIM (or get hold of) the image maps</P>
1410 
<OL>
1411 
<LI> Use the CSIM image script as the target in a standard anchor
1412 
 reference, for example <CODE>
1413 
<PRE>
1414 
&lt;a href=&quot;mycsimscript.html&quot;&gt;
1415 
</PRE>
1416 
</CODE> This has the drawback that the image page will only contain the
1417 
 image and nothing else.</LI>
1418 
<LI> The other way will allow the image script to be included in an
1419 
 arbitrary HTML page by just including the image script at the wanted
1420 
 place in the HTML page using any of the standard &quot;include&quot; php
1421 
 statement. For example <CODE>
1422 
<PRE>
1423 
&lt;h2&gt; This is an CSIM image &lt;/h2&gt;
1424 
 
1425 
&lt;?php
1426 
include &quot;mycsimscript.php&quot;
1427 
?&gt;
1428 
</PRE>
1429 
</CODE></LI>
1430 
</OL>
1431 
<P><DIV class="note"><B>Note:</B> If there are several CSIM images on
1432 
 the same page it is necessary to use &quot;include_once&quot; in the scripts for
1433 
 the inclusion of &quot;jpgraph.php&quot; and the other jpgraph library files
1434 
 since the files will be included multiple times on the same page and
1435 
 one or more &quot;Already defined error&quot; will be displayed.</DIV></P>
1436 
<P> The process to replace Stroke() with StrokeCSIM() is strait forward.
1437 
 Replace all existing calls to Stroke() with the equivalent calls to
1438 
 StrokeCSIM().</P>
1439 
<P> The only difference is that it is necessary ti supply a minimum of
1440 
 one file name in the StrokeCSIM() method. The first argument must be
1441 
 the name of the actual image script file including the extension. So
1442 
 for example if the image script is called &quot;mycsimscript.php&quot; it is
1443 
 necessary to write
1444 
<BR> &nbsp;<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
1445 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
1446 
StrokeCSIM</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
1447 
'mycsimscript.php'</FONT><FONT color="#007700">)</FONT><FONT color="#0000BB">
1448 
</FONT></FONT></CODE></DIV></P>
1449 
<P>
1450 
<BR> However, it is possible to apply a small &quot;trick&quot; here. PHP maintain
1451 
 a special variable called &quot;__FILE__&quot; which is always set to the current
1452 
 file name. This means you could use the following construction:</P>
1453 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
1454 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
1455 
StrokeCSIM</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
1456 
basename</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
1457 
__FILE__</FONT><FONT color="#007700">))</FONT><FONT color="#0000BB"></FONT>
1458 
</FONT></CODE></DIV></P>
1459 
<P>This is a better way since the script can now be renamed without
1460 
 having to change any code in the file which otherwise would be needed.<DIV
1461 
class="note"><B>Note:</B> Why does the script name need to be used as
1462 
 the first parameter? The reason is that in the creation of the HTML
1463 
 page which is sent back we need to refer to the script in the image
1464 
 tag. So why is it not possible to use the PHP_SELF reference? The
1465 
 problem with PHP_SELF is that in the case where we include the
1466 
 image-script in an HTML page and use the PHP_SELF we will get the name
1467 
 of the HTML page and not the actual script in which the PHP_SELF is
1468 
 used. We also can not use the __FILE__ trick in the library since in
1469 
 the context __FILE__ is set to &quot;jpgraph.php&quot;. Hence, this must be
1470 
 specified by the client as shown above.</DIV></P>
1471 
<P> The other arguments to StrokeCSIM() are optional. Please note that
1472 
 if several CSIM images are used in the same HTML page it is also
1473 
 necessary to specify the image map name as the second parameter since
1474 
 all image maps must be unique to properly match each image map against
1475 
 each image. Please consult the class reference <A href="../ref/Graph.html#_GRAPH_STROKECSIM">
1476 
 StrokeCSIM()</A> for more details.</P>
1477 
<H2><A NAME="6_4">6.4 Examples of Image maps</A></H2>
1478 
<P> In the Example/ directory there are a number of examples of how to
1479 
 setup the various types of image maps. The following examples are
1480 
 currently available</P>
1481 
<UL>
1482 
<LI>bar_csimex1.php</LI>
1483 
<LI>bar_csimex2.php</LI>
1484 
<LI>bar_csimex3.php</LI>
1485 
<LI>barline_csimex1.php</LI>
1486 
<LI>barlinefreq_csimex1.php</LI>
1487 
<LI>boxstockcsimex1.php</LI>
1488 
<LI>ganttcsimex01.php</LI>
1489 
<LI>ganttcsimex02.php</LI>
1490 
<LI>imgmarkercsimex1.php</LI>
1491 
<LI>pie3d_csimex1.php</LI>
1492 
<LI>piec_csimex1.php</LI>
1493 
<LI>pie_csimex1.php</LI>
1494 
<LI>scatter_csimex1.php</LI>
1495 
<LI>titlecsimex01.php</LI>
1496 
</UL>
1497 
<P> In order to easily access all of these examples it is possible to
1498 
 call the<I> testsuit.php</I> example with an additional argument &quot;t=2&quot;.
1499 
 By following the link <A href="../../../src/Examples/testsuit.php?t=2" target="blank">
1500 
testsuit.php?t=2</A> a separate window will open with all the possible
1501 
 CSIM examples.</P>
1502 
<H2><A NAME="6_5">6.5 How does StrokeCSIM() work?</A></H2>
1503 
<P> Knowledge of the exact technical details of the way StrokeCSIM()
1504 
 works is probably not needed by many people but for completeness we
1505 
 outline those details in this short section.</P>
1506 
<P> The fundamental issue we have to solve is that we must be able to
1507 
 call the image script in two modes. When the user includes the image
1508 
 script the StrokeCSIM() method should return the HTML page but when the
1509 
 image script is later called directly in the image tag it must not
1510 
 return an HTML page but rather the actual image.</P>
1511 
<P> The way this is solved is by using one HTTP argument which is passed
1512 
 on automatically when we use the image script name in the image-tag.</P>
1513 
<P> If you look at the generated HTML you will see that the argument to
1514 
 the src-property of the image tag is not simply the script name but the
1515 
 script name with a additional argument.</P>
1516 
<P> In the JpGraph internal code this pre-defined argument is checked
1517 
 for and if it exists the image is send back and not the HTML page.</P>
1518 
<P> The name of this argument is defined by a DEFINE() statement in
1519 
 JpGraph. The define is _CSIM_DISPLAY.</P>
1520 
<H2><A NAME="6_6">6.6 Getting hold of the image map</A></H2>
1521 
<P> In the case where you want to store the image on disk and later use
1522 
 it in an img-tag you need to get hold of the image map. For this you
1523 
 will have to use the function <A href="../ref/Graph.html#_GRAPH_GETHTMLIMAGEMAP">
1524 
 Graph::GetHTMLImageMap()</A></P>
1525 
<P> An example of the use of this is shown below. With these lines the
1526 
 image will be written to a file. The script then returns a HTML page
1527 
 which contains the Client side image map and an img-tag which will
1528 
 retrieve the previously stored file.<DIV class="phpscript"><CODE><FONT color="#000000">
1529 
 <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
1530 
color="#0000BB">Stroke</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
1531 
&quot;/usr/local/httpd/htdocs/img/image001.png&quot;</FONT><FONT color="#007700">
1532 
);
1533 
<BR>echo&nbsp;</FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">
1534 
-&gt;</FONT><FONT color="#0000BB">GetHTMLImageMap</FONT><FONT color="#007700">
1535 
(</FONT><FONT color="#DD0000">&quot;myimagemap001&quot;</FONT><FONT color="#007700">
1536 
);
1537 
<BR>echo&nbsp;</FONT><FONT color="#DD0000">
1538 
&quot;&lt;img&nbsp;src=\&quot;img/image001.png\&quot;&nbsp;ISMAP&nbsp;USEMAP=\&quot;#myimagemap001\&quot;&nbsp;border=0&gt;&quot;
1539 
</FONT><FONT color="#007700">;</FONT><FONT color="#0000BB"></FONT></FONT>
1540 
</CODE></DIV></P>
1541 
<P></P>
1542 
<P></P>
1543 
<H2><A NAME="6_7">6.7 Image maps and the cache system</A></H2>
1544 
<P> For version 1.9 the cache system has been extended to include even
1545 
 the CSIM maps. For each CSIM graph two files are stored in the cache,
1546 
 the image file itself as well as the wrapper HTML with the actual image
1547 
 map. For further information see the chapter on &quot;Understanding the
1548 
 Cache system&quot;</P>
1549 
<H1><A NAME="7">7 Working with orthogonal X,Y-plots</A></H1>
1550 
<P> The purpose of this chapter is to introduce the basic concepts of
1551 
 creating scripts with JpGraph that will generate various types of basic
1552 
 plots. Throughout the text it is possible to view the exact source for
1553 
 all the graphs by clicking on the &quot;[src]&quot; link in the caption of the
1554 
 image shown. This will open the image together with the source in a
1555 
 separate window. This way it is easy to compare the actual image with
1556 
 the script that generated the image.</P>
1557 
<H2><A NAME="7_1">7.1 Line plots</A></H2>
1558 
<P> The first example draws a line graph consisting of 10 Y-values. In
1559 
 this first example we show the full code. In the following examples we
1560 
 will only show interesting piece of the code.<DIV class="phpscript">
1561 
(File: example0.php)
1562 
<BR><CODE><FONT color="#000000"> <FONT color="#0000BB">&lt;?php
1563 
<BR></FONT><FONT color="#007700">include&nbsp;(</FONT><FONT color="#DD0000">
1564 
&quot;../jpgraph.php&quot;</FONT><FONT color="#007700">);
1565 
<BR>include&nbsp;(</FONT><FONT color="#DD0000">&quot;../jpgraph_line.php&quot;</FONT><FONT
1566 
color="#007700">);
1567 
<BR>
1568 
<BR></FONT><FONT color="#FF8000">//&nbsp;Some&nbsp;data
1569 
<BR></FONT><FONT color="#0000BB">$ydata&nbsp;</FONT><FONT color="#007700">
1570 
=&nbsp;array(</FONT><FONT color="#0000BB">11</FONT><FONT color="#007700">,</FONT><FONT
1571 
color="#0000BB">3</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
1572 
8</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">12</FONT><FONT
1573 
color="#007700">,</FONT><FONT color="#0000BB">5</FONT><FONT color="#007700">
1574 
,</FONT><FONT color="#0000BB">1</FONT><FONT color="#007700">,</FONT><FONT
1575 
color="#0000BB">9</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
1576 
13</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">5</FONT><FONT
1577 
color="#007700">,</FONT><FONT color="#0000BB">7</FONT><FONT color="#007700">
1578 
);
1579 
<BR>
1580 
<BR></FONT><FONT color="#FF8000">
1581 
//&nbsp;Create&nbsp;the&nbsp;graph.&nbsp;These&nbsp;two&nbsp;calls&nbsp;are&nbsp;always&nbsp;required
1582 
<BR></FONT><FONT color="#0000BB">$graph&nbsp;</FONT><FONT color="#007700">
1583 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">Graph</FONT><FONT color="#007700">(</FONT><FONT
1584 
color="#0000BB">350</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
1585 
250</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">&quot;auto&quot;</FONT><FONT
1586 
color="#007700">);&nbsp;&nbsp;&nbsp;&nbsp;
1587 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
1588 
color="#0000BB">SetScale</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
1589 
&quot;textlin&quot;</FONT><FONT color="#007700">);
1590 
<BR>
1591 
<BR></FONT><FONT color="#FF8000">//&nbsp;Create&nbsp;the&nbsp;linear&nbsp;plot
1592 
<BR></FONT><FONT color="#0000BB">$lineplot</FONT><FONT color="#007700">
1593 
=new&nbsp;</FONT><FONT color="#0000BB">LinePlot</FONT><FONT color="#007700">(</FONT><FONT
1594 
color="#0000BB">$ydata</FONT><FONT color="#007700">);
1595 
<BR></FONT><FONT color="#0000BB">$lineplot</FONT><FONT color="#007700">
1596 
-&gt;</FONT><FONT color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT
1597 
color="#DD0000">&quot;blue&quot;</FONT><FONT color="#007700">);
1598 
<BR>
1599 
<BR></FONT><FONT color="#FF8000">//&nbsp;Add&nbsp;the&nbsp;plot&nbsp;to&nbsp;the&nbsp;graph
1600 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
1601 
color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
1602 
$lineplot</FONT><FONT color="#007700">);
1603 
<BR>
1604 
<BR></FONT><FONT color="#FF8000">//&nbsp;Display&nbsp;the&nbsp;graph
1605 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
1606 
color="#0000BB">Stroke</FONT><FONT color="#007700">();
1607 
<BR></FONT><FONT color="#0000BB">?&gt;
1608 
<BR></FONT></FONT></CODE></DIV><DIV class="example">
1609 
<BR> <A href="exframes/frame_example0.html" target="blank"><IMG border="0"
1610 
HEIGHT="250"         src="img/img/img/img/img/img/img/img/example0.png" WIDTH="350"></A>
1611 
<BR><B>Figure 4:</B> A simple line graph <A href="exframes/frame_example0.html"
1612 
target="blank">[src]</A>&nbsp;
1613 
<P></P>
1614 
</DIV></P>
1615 
<P></P>
1616 
<P> You might note a few things</P>
1617 
<UL>
1618 
<LI>Both the X and Y axis have been automatically scaled. We will later
1619 
 on show how you might control the auto scaling how it determines the
1620 
 number of ticks which is displayed.</LI>
1621 
<LI>By default the Y-grid is displayed in a &quot;soft&quot; color</LI>
1622 
<LI>By default the image is bordered and the margins are slightly gray.</LI>
1623 
<LI>By default the 0 label on the Y-axis is not displayed</LI>
1624 
</UL>
1625 
<P> This is a perfect fine graph but looks a little bit &quot;sparse&quot;. To
1626 
 make it more interesting we might want to add a few things like</P>
1627 
<UL>
1628 
<LI>A title for the graph</LI>
1629 
<LI> Title for the axis</LI>
1630 
<LI>Increase the margins to account for the title of the axis</LI>
1631 
</UL>
1632 
<P> From looking at the previous example you can see that you access all
1633 
 properties of JpGraph through the objects you create. Graph(),
1634 
 LinePlot() and so on. In general all objects you can see in the graph
1635 
 is accessed through a named instance.</P>
1636 
<P> For example the title of the graph is accessed through the
1637 
 'Graph::title' property. So to specify a title string you make a call
1638 
 to the 'Set()' method on the title property as in:</P>
1639 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
1640 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">title</FONT><FONT
1641 
color="#007700">-&gt;</FONT><FONT color="#0000BB">Set</FONT><FONT color="#007700">
1642 
(</FONT><FONT color="#DD0000">'Example&nbsp;2'</FONT><FONT color="#007700">);</FONT><FONT
1643 
color="#0000BB"></FONT></FONT></CODE></DIV></P>
1644 
<P> So by adding just a few more lines to the previous code we get a
1645 
 graph as shown below.<DIV class="example">
1646 
<BR> <A href="exframes/frame_example2.html" target="blank"><IMG border="0"
1647 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example2.png" WIDTH="300"></A>
1648 
<BR><B>Figure 5:</B> Same basic graph as in previous figure but with a
1649 
 titles for graph and axis. <A href="exframes/frame_example2.html" target="blank">
1650 
[src]</A>&nbsp;
1651 
<P></P>
1652 
</DIV></P>
1653 
<P>To achieve this we just needed to add a few more lines. (We only show
1654 
 the part of example 1 we changed, to look at the full source just click
1655 
 the [src] link in the caption. )<DIV class="phpscript"><CODE><FONT color="#000000">
1656 
 <FONT color="#0000BB">&nbsp;</FONT><FONT color="#FF8000">
1657 
//&nbsp;Setup&nbsp;margin&nbsp;and&nbsp;titles
1658 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
1659 
color="#0000BB">img</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
1660 
SetMargin</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">40</FONT><FONT
1661 
color="#007700">,</FONT><FONT color="#0000BB">20</FONT><FONT color="#007700">
1662 
,</FONT><FONT color="#0000BB">20</FONT><FONT color="#007700">,</FONT><FONT
1663 
color="#0000BB">40</FONT><FONT color="#007700">);
1664 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
1665 
color="#0000BB">title</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
1666 
Set</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
1667 
&quot;Example&nbsp;2&quot;</FONT><FONT color="#007700">);
1668 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
1669 
color="#0000BB">xaxis</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
1670 
title</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">Set</FONT><FONT
1671 
color="#007700">(</FONT><FONT color="#DD0000">&quot;X-title&quot;</FONT><FONT color="#007700">
1672 
);
1673 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
1674 
color="#0000BB">yaxis</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
1675 
title</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">Set</FONT><FONT
1676 
color="#007700">(</FONT><FONT color="#DD0000">&quot;Y-title&quot;</FONT><FONT color="#007700">
1677 
);
1678 
<BR></FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
1679 
<P></P>
1680 
<P> Again there are a couple of things you should note here</P>
1681 
<UL>
1682 
<LI>A default font and size is used for the text</LI>
1683 
<LI>The default position for the title of the graph is to be centered at
1684 
 the top</LI>
1685 
<LI>The default position for the title of the x-axis is the far right
1686 
 and for the y-axis centered and rotated in a 900 angle.</LI>
1687 
</UL>
1688 
<P></P>
1689 
<P> A nice change would now be to have all the titles in a bold font and
1690 
 the line plot a little bit thicker and in blue color. Let's do that by
1691 
 adding the lines<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT
1692 
color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
1693 
title</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">SetFont</FONT><FONT
1694 
color="#007700">(</FONT><FONT color="#0000BB">FF_FONT1</FONT><FONT color="#007700">
1695 
,</FONT><FONT color="#0000BB">FS_BOLD</FONT><FONT color="#007700">);
1696 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
1697 
color="#0000BB">yaxis</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
1698 
title</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">SetFont</FONT><FONT
1699 
color="#007700">(</FONT><FONT color="#0000BB">FF_FONT1</FONT><FONT color="#007700">
1700 
,</FONT><FONT color="#0000BB">FS_BOLD</FONT><FONT color="#007700">);
1701 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
1702 
color="#0000BB">xaxis</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
1703 
title</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">SetFont</FONT><FONT
1704 
color="#007700">(</FONT><FONT color="#0000BB">FF_FONT1</FONT><FONT color="#007700">
1705 
,</FONT><FONT color="#0000BB">FS_BOLD</FONT><FONT color="#007700">);
1706 
<BR></FONT><FONT color="#0000BB">$lineplot</FONT><FONT color="#007700">
1707 
-&gt;</FONT><FONT color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT
1708 
color="#DD0000">&quot;blue&quot;</FONT><FONT color="#007700">);
1709 
<BR></FONT><FONT color="#0000BB">$lineplot</FONT><FONT color="#007700">
1710 
-&gt;</FONT><FONT color="#0000BB">SetWeight</FONT><FONT color="#007700">(</FONT><FONT
1711 
color="#0000BB">2</FONT><FONT color="#007700">);&nbsp;&nbsp;</FONT><FONT color="#FF8000">
1712 
//&nbsp;Two&nbsp;pixel&nbsp;wide</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
1713 
</P>
1714 
<P> Again please note the consistent interface. To change font you just
1715 
 have to invoke the SetFont() method on the appropriate object. This
1716 
 principle is true for most methods you will learn. The methods may be
1717 
 applied to a variety of objects in JpGraph. So for example it might not
1718 
 come as a big surprise that to have the Y-axis in red you have to say:<DIV
1719 
class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
1720 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">yaxis</FONT><FONT
1721 
color="#007700">-&gt;</FONT><FONT color="#0000BB">SetColor</FONT><FONT color="#007700">
1722 
(</FONT><FONT color="#DD0000">&quot;red&quot;</FONT><FONT color="#007700">)</FONT><FONT
1723 
color="#0000BB"></FONT></FONT></CODE></DIV></P>
1724 
<P> or perhaps we also want to make the Y-axis a bit wider by<DIV class="phpscript">
1725 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
1726 
-&gt;</FONT><FONT color="#0000BB">yaxis</FONT><FONT color="#007700">-&gt;</FONT><FONT
1727 
color="#0000BB">SetWidth</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
1728 
2</FONT><FONT color="#007700">)</FONT><FONT color="#0000BB"></FONT></FONT>
1729 
</CODE></DIV></P>
1730 
<P> As a final touch let's add a frame and a drop shadow around the
1731 
 image since this is by default turned off. This is done with<DIV class="phpscript">
1732 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
1733 
-&gt;</FONT><FONT color="#0000BB">SetShadow</FONT><FONT color="#007700">()</FONT><FONT
1734 
color="#0000BB"></FONT></FONT></CODE></DIV></P>
1735 
<P> The result of all these modifications are shown below.<DIV class="example">
1736 
<BR> <A href="exframes/frame_example3.html" target="blank"><IMG border="0"
1737 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example3.png" WIDTH="300"></A>
1738 
<BR><B>Figure 6:</B> Making the image a little bit more interesting by
1739 
 adding som colors and changing the fonts <A href="exframes/frame_example3.html"
1740 
target="blank">[src]</A>&nbsp;
1741 
<P></P>
1742 
</DIV></P>
1743 
<P></P>
1744 
<H3><A NAME="7_1_1">7.1.1 Adding plot marks to line-plots XXX</A></H3>
1745 
<P> It might sometimes be desirable to highlight the data-points with
1746 
 marks in the intersection between the given x and Y-coordinates. This
1747 
 is accomplished by specifying the wanted plot mark type for the &quot;mark&quot;
1748 
 property of the line graph. A full list of all available marks is given
1749 
 in the class reference <A href="../ref/PlotMark.html#_PLOTMARK_SETTYPE">
1750 
PlotMarks</A></P>
1751 
<P> For now let's just add a triangle shape marker to our previous graph
1752 
 by adding the line<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT
1753 
color="#0000BB">&nbsp;$lineplot</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
1754 
mark</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">SetType</FONT><FONT
1755 
color="#007700">(</FONT><FONT color="#0000BB">MARK_UTRIANGLE</FONT><FONT color="#007700">
1756 
);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
1757 
<P> This will give the graph as shown below<DIV class="example">
1758 
<BR> <A href="exframes/frame_example3.1.html" target="blank"><IMG border="0"
1759 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example3.1.png" WIDTH="300"></A>
1760 
<BR><B>Figure 7:</B> Adding markers to the previous example <A href="exframes/frame_example3.1.html"
1761 
target="blank">[src]</A>&nbsp;
1762 
<P></P>
1763 
</DIV></P>
1764 
<P></P>
1765 
<P> If you like you can of course both change the size, fill-color and
1766 
 frame color of the chosen plot mark.</P>
1767 
<P> The colors of the marks will, if you don't specify them explicitly,
1768 
 follow the line color. Please note that if you want different colors
1769 
 for the marks and the line the call to SetColor() for the marks must be
1770 
 done after the call to the line since the marks color will always be
1771 
 reset to the lines color when you set the line.</P>
1772 
<H3><A NAME="7_1_2">7.1.2 Displaying the values for each data point</A></H3>
1773 
<P> As a final easy modification we can enable the display of the data
1774 
 value above each data point. The value is represented by the 'value'
1775 
 property in the plot. (You can read more about the possibilities of the
1776 
 <A href="../ref/DisplayValue.html#_C_DISPLAYVALUE"> display value</A>
1777 
 in the class reference.)</P>
1778 
<P> To enable the display of the value you just need to call the Show()
1779 
 method of the value as in<DIV class="phpscript"><CODE><FONT color="#000000">
1780 
 <FONT color="#0000BB">&nbsp;$lineplot</FONT><FONT color="#007700">-&gt;</FONT><FONT
1781 
color="#0000BB">value</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
1782 
Show</FONT><FONT color="#007700">()</FONT><FONT color="#0000BB"></FONT></FONT>
1783 
</CODE></DIV></P>
1784 
<P> Adding that line to the previous line plot would give the result
1785 
 shown below.<DIV class="example">
1786 
<BR> <A href="exframes/frame_example3.3.html" target="blank"><IMG border="0"
1787 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example3.3.png" WIDTH="300"></A>
1788 
<BR><B>Figure 8:</B> Displaying the value for each data point <A href="exframes/frame_example3.3.html"
1789 
target="blank">[src]</A>&nbsp;
1790 
<P></P>
1791 
</DIV></P>
1792 
<P> We can of course change both color, font and format of the displayed
1793 
 value. So for example if we wanted the display values to be dark red,
1794 
 use a bold font and have a '$' in front we need to add the lines<DIV class="phpscript">
1795 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$lineplot</FONT><FONT
1796 
color="#007700">-&gt;</FONT><FONT color="#0000BB">value</FONT><FONT color="#007700">
1797 
-&gt;</FONT><FONT color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT
1798 
color="#DD0000">&quot;darkred&quot;</FONT><FONT color="#007700">);
1799 
<BR></FONT><FONT color="#0000BB">$lineplot</FONT><FONT color="#007700">
1800 
-&gt;</FONT><FONT color="#0000BB">value</FONT><FONT color="#007700">-&gt;</FONT><FONT
1801 
color="#0000BB">SetFont</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
1802 
FF_FONT1</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
1803 
FS_BOLD</FONT><FONT color="#007700">);
1804 
<BR></FONT><FONT color="#0000BB">$lineplot</FONT><FONT color="#007700">
1805 
-&gt;</FONT><FONT color="#0000BB">value</FONT><FONT color="#007700">-&gt;</FONT><FONT
1806 
color="#0000BB">SetFormat</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
1807 
&quot;$&nbsp;%0.1f&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
1808 
</FONT></CODE></DIV></P>
1809 
<P> This would then result in the following image<DIV class="example">
1810 
<BR> <A href="exframes/frame_example3.4.html" target="blank"><IMG border="0"
1811 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example3.4.png" WIDTH="300"></A>
1812 
<BR><B>Figure 9:</B> Making the display values a little bit more
1813 
 interesting <A href="exframes/frame_example3.4.html" target="blank">
1814 
[src]</A>&nbsp;
1815 
<P></P>
1816 
</DIV></P>
1817 
<P><DIV class="note"><B>Note:</B> You can achieve more advanced
1818 
 formatting by using not just the printf() style format string by a
1819 
 format callback function. This could allow you to change the displayed
1820 
 value with more advanced formatting such as displaying money values
1821 
 with &quot;,&quot; to separate thousands.</DIV></P>
1822 
<H3><A NAME="7_1_3">7.1.3 Adding several plots to the same graph</A></H3>
1823 
<P> What if we want to add a second plot to the graph we just produced?
1824 
 Well, this is quite straightforward and just requires two simple step:</P>
1825 
<OL>
1826 
<LI>Create the second plot</LI>
1827 
<LI>Add it to the graph</LI>
1828 
</OL>
1829 
<P> To create the second plot we need some data (we could of course use
1830 
 the same data as for the first plot but then we wouldn't be able to see
1831 
 the new plot!)</P>
1832 
<P> The following lines show how to create the new plot and add it to
1833 
 the graph (we only show the new lines - not the full script)<DIV class="phpscript">
1834 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$ydata2&nbsp;</FONT><FONT color="#007700">
1835 
=&nbsp;array(</FONT><FONT color="#0000BB">1</FONT><FONT color="#007700">,</FONT><FONT
1836 
color="#0000BB">19</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
1837 
15</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">7</FONT><FONT
1838 
color="#007700">,</FONT><FONT color="#0000BB">22</FONT><FONT color="#007700">
1839 
,</FONT><FONT color="#0000BB">14</FONT><FONT color="#007700">,</FONT><FONT
1840 
color="#0000BB">5</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
1841 
9</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">21</FONT><FONT
1842 
color="#007700">,</FONT><FONT color="#0000BB">13</FONT><FONT color="#007700">
1843 
);
1844 
<BR></FONT><FONT color="#0000BB">$lineplot2</FONT><FONT color="#007700">
1845 
=new&nbsp;</FONT><FONT color="#0000BB">LinePlot</FONT><FONT color="#007700">(</FONT><FONT
1846 
color="#0000BB">$ydata2</FONT><FONT color="#007700">);
1847 
<BR></FONT><FONT color="#0000BB">$lineplot2</FONT><FONT color="#007700">
1848 
-&gt;</FONT><FONT color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT
1849 
color="#DD0000">&quot;orange&quot;</FONT><FONT color="#007700">);
1850 
<BR></FONT><FONT color="#0000BB">$lineplot2</FONT><FONT color="#007700">
1851 
-&gt;</FONT><FONT color="#0000BB">SetWeight</FONT><FONT color="#007700">(</FONT><FONT
1852 
color="#0000BB">2</FONT><FONT color="#007700">);
1853 
<BR>
1854 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
1855 
color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
1856 
$lineplot2</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
1857 
</FONT></CODE></DIV></P>
1858 
<P> Making these changes to the previous graph script would generate a
1859 
 new graph as illustrated below.<DIV class="example">
1860 
<BR> <A href="exframes/frame_example4.html" target="blank"><IMG border="0"
1861 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example4.png" WIDTH="300"></A>
1862 
<BR><B>Figure 10:</B> Adding a second plot to the previous graph <A href="exframes/frame_example4.html"
1863 
target="blank">[src]</A>&nbsp;
1864 
<P></P>
1865 
</DIV></P>
1866 
<P> There is a few things worth noting here</P>
1867 
<UL>
1868 
<LI>The Y-scale has changed to accommodate the larger range of Y-values
1869 
 for the second graph.</LI>
1870 
<LI>If you add several plots to the same graph they should contain the
1871 
 same number of data points. This is not a requirement (the graph will
1872 
 be automatically scaled to accommodate the plot with the largest number
1873 
 of points) but it will not look very good since one of the plot end in
1874 
 the middle of the graph.</LI>
1875 
</UL>
1876 
<P></P>
1877 
<H3><A NAME="7_1_4">7.1.4 Adding a second Y-scale</A></H3>
1878 
<P> As you saw in the preceding example you could add multiple plots to
1879 
 the same graph and Y-axis. However what if the two plots you want to
1880 
 display in the graph has very different ranges. One might for example
1881 
 have Y-values like above but the other might have Y-values in the
1882 
 100:s. Even though it is perfectly possible to add them as above the
1883 
 graph with the smallest values will have a very low dynamic range since
1884 
 the scale must accomplish the bigger dynamic range of the second plot.</P>
1885 
<P> The solution to this is to use a second Y-axis with a different
1886 
 scale and add the second plot to this Y-axis instead. Let's take a look
1887 
 at how that is accomplished.</P>
1888 
<P> First we need to create a new data array with large values and
1889 
 secondly we need to specify a scale for the Y2 axis. This is done by
1890 
 the lines<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
1891 
&nbsp;$y2data&nbsp;</FONT><FONT color="#007700">=&nbsp;array(</FONT><FONT color="#0000BB">
1892 
354</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">200</FONT><FONT
1893 
color="#007700">,</FONT><FONT color="#0000BB">265</FONT><FONT color="#007700">
1894 
,</FONT><FONT color="#0000BB">99</FONT><FONT color="#007700">,</FONT><FONT
1895 
color="#0000BB">111</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
1896 
91</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">198</FONT><FONT
1897 
color="#007700">,</FONT><FONT color="#0000BB">225</FONT><FONT color="#007700">
1898 
,</FONT><FONT color="#0000BB">293</FONT><FONT color="#007700">,</FONT><FONT
1899 
color="#0000BB">251</FONT><FONT color="#007700">);
1900 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
1901 
color="#0000BB">SetY2Scale</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
1902 
&quot;lin&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT>
1903 
</CODE></DIV></P>
1904 
<P> and finally we create a new line plot and add that to the second
1905 
 Y-axis. Note that we here use a new method, AddY2(), since we want this
1906 
 plot to be added to the second Y-axis. Note that JpGraph will only
1907 
 support two different Y-axis. This is not considered a limitation since
1908 
 using more than two scales in the same graph would make it very
1909 
 difficult to interpret the meaning of the graph.</P>
1910 
<P> To make the graph a little bit more esthetic pleasing we use
1911 
 different colors for the different plots and let the two different
1912 
 Y-axis get the same colors as the plots.</P>
1913 
<P> The resulting graph is shown below. source)<DIV class="example">
1914 
<BR> <A href="exframes/frame_example5.html" target="blank"><IMG border="0"
1915 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example5.png" WIDTH="300"></A>
1916 
<BR><B>Figure 11:</B> Adding a second Y-scale plot to the same graph <A href="exframes/frame_example5.html"
1917 
target="blank">[src]</A>&nbsp;
1918 
<P></P>
1919 
</DIV></P>
1920 
<P></P>
1921 
<H3><A NAME="7_1_5">7.1.5 Adding a legend to the graph</A></H3>
1922 
<P> With more than one plot on the same graph it is necessary to somehow
1923 
 indicate which plot is which. This is normally done by adding a legend
1924 
 to the graph.</P>
1925 
<P> You will see that each plot type has a 'SetLegend()' method which is
1926 
 used to name that plot in the legend. SO to name the two plots in the
1927 
 example we have been working with so far we need to add the lines<DIV class="phpscript">
1928 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$lineplot</FONT><FONT
1929 
color="#007700">-&gt;</FONT><FONT color="#0000BB">SetLegend</FONT><FONT color="#007700">
1930 
(</FONT><FONT color="#DD0000">&quot;Plot&nbsp;1&quot;</FONT><FONT color="#007700">);
1931 
<BR></FONT><FONT color="#0000BB">$lineplot2</FONT><FONT color="#007700">
1932 
-&gt;</FONT><FONT color="#0000BB">SetLegend</FONT><FONT color="#007700">(</FONT><FONT
1933 
color="#DD0000">&quot;Plot&nbsp;2&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB">
1934 
</FONT></FONT></CODE></DIV></P>
1935 
<P> to the previous code. The resulting graph is shown below<DIV class="example">
1936 
<BR> <A href="exframes/frame_example5.1.html" target="blank"><IMG border="0"
1937 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example5.1.png" WIDTH="300"></A>
1938 
<BR><B>Figure 12:</B> Adding a legend to the graph <A href="exframes/frame_example5.1.html"
1939 
target="blank">[src]</A>&nbsp;
1940 
<P></P>
1941 
</DIV></P>
1942 
<P> As you can see the legend gets automatically sized depending on how
1943 
 many plots there are that have legend texts to display. By default it
1944 
 is placed with it's top right corner close to the upper right edge of
1945 
 the image. Depending on the image you might want to adjust this or you
1946 
 might want to add a larger margin which is big enough to accompany the
1947 
 legend. Let's do both.</P>
1948 
<P> First we increase the right margin and then we place the legend so
1949 
 that it is roughly centered. We will also enlarge the overall image so
1950 
 the plot area doesn't get too squeezed.</P>
1951 
<P> To modify the legend you access the 'legend' property of the graph.
1952 
 For a full reference on all the possibilities (changing colors, layout,
1953 
 etc) see <A href="../ref/Legend.html#_C_LEGEND/">class legend</A> in
1954 
 the class reference</P>
1955 
<P> For this we use the legends 'SetPos()' method as in<DIV class="phpscript">
1956 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
1957 
-&gt;</FONT><FONT color="#0000BB">legend</FONT><FONT color="#007700">-&gt;</FONT><FONT
1958 
color="#0000BB">Pos</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
1959 
0.05</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">0.5</FONT><FONT
1960 
color="#007700">,</FONT><FONT color="#DD0000">&quot;right&quot;</FONT><FONT color="#007700">
1961 
,</FONT><FONT color="#DD0000">&quot;center&quot;</FONT><FONT color="#007700">);</FONT><FONT
1962 
color="#0000BB"></FONT></FONT></CODE></DIV></P>
1963 
<P></P>
1964 
<P> Doing this small modification will give the result shown below<DIV class="example">
1965 
<BR> <A href="exframes/frame_example6.html" target="blank"><IMG border="0"
1966 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example6.png" WIDTH="400"></A>
1967 
<BR><B>Figure 13:</B> Adjusting the layout to give more rooms for the
1968 
 legend <A href="exframes/frame_example6.html" target="blank">[src]</A>&nbsp;
1969 
<P></P>
1970 
</DIV></P>
1971 
<P> The above method 'SetPos()' deserves some explanation since it might
1972 
 not be obvious. You specify the position as a fraction of the overall
1973 
 width and height of the entire image. This makes it possible for you to
1974 
 resize the image within disturbing the relative position of the legend.
1975 
 We will later see that the same method is just to place arbitrary text
1976 
 in the image.</P>
1977 
<P> To give added flexibility one must also specify to what edge of the
1978 
 legend the position given should be relative to. In the example above
1979 
 we have specified &quot;right&quot; edge on the legend for the for the horizontal
1980 
 positioning and &quot;center&quot; for the vertical position.</P>
1981 
<P> This means that the right edge of the legend should be position 5 %
1982 
 of the image width from the right. If you had specified &quot;left&quot; the the
1983 
 legends left edge would be positioned 5 % of the image width from the
1984 
 image left side.</P>
1985 
<P> By default the legends in the legend box gets stacked on top of each
1986 
 other. The other possibility is to have them sideways. To adjust this
1987 
 you use the <A href="../ref/Legend.html#_LEGEND_SETLAYOUT">SetLayout()</A>
1988 
 method. Using a horizontal layout with the previous example give the
1989 
 following result.<DIV class="example">
1990 
<BR> <A href="exframes/frame_example6.1.html" target="blank"><IMG border="0"
1991 
HEIGHT="240"         src="img/img/img/img/img/img/img/img/example6.1.png" WIDTH="300"></A>
1992 
<BR><B>Figure 14:</B> Using a horizontal layout for the legends <A href="exframes/frame_example6.1.html"
1993 
target="blank">[src]</A>&nbsp;
1994 
<P></P>
1995 
</DIV></P>
1996 
<P></P>
1997 
<H4>7.1.5.1 Adjusting the layout of the legend</H4>
1998 
<P> For more advanced fomatting of the legend it is possible to adjust</P>
1999 
<UL>
2000 
<LI> The number of columns in the legend</LI>
2001 
<LI> Specify vertical / horizontal margins for legend columns</LI>
2002 
</UL>
2003 
<P> In order to adjust the number of columns used in the legend the
2004 
 method<I> Legend::SetColumns</I> is used. So for example to have the
2005 
 legend lined up using three columns the follwing lines have to be added
2006 
 to teh script<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
2007 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
2008 
legend</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
2009 
SetColumns</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">3</FONT><FONT
2010 
color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
2011 
</P>
2012 
<P></P>
2013 
<H3><A NAME="7_1_6">7.1.6 Handling null-values in line plots</A></H3>
2014 
<P> JpGraph offers two ways of handling null values (or discontinuities)
2015 
 in the data. You can either have a &quot;whole&quot; in the data or the line may
2016 
 be extended between the previous and next data point in the graph.</P>
2017 
<P> If the data value is null (&quot;&quot;) or the special value &quot;x&quot; then the
2018 
 data point will not be plotted and will leave a gap in the line.</P>
2019 
<P> If the data value is &quot;-&quot; then the line will be drawn between the
2020 
 previous and next point in the data ignoring the &quot;-&quot; point.</P>
2021 
<P> The following example shows both these possibilities.</P>
2022 
<P><DIV class="example">
2023 
<BR> <A href="exframes/frame_nullvalueex01.html" target="blank"><IMG border="0"
2024 
HEIGHT="250"         src="img/img/img/img/img/img/img/img/nullvalueex01.png" WIDTH="400"></A>
2025 
<BR><B>Figure 15:</B> Handling null values in line graphs <A href="exframes/frame_nullvalueex01.html"
2026 
target="blank">[src]</A>&nbsp;
2027 
<P></P>
2028 
</DIV></P>
2029 
<P></P>
2030 
<H3><A NAME="7_1_7">7.1.7 Using the step-style to render line plots</A></H3>
2031 
<P> Step style refers to an alternate way of rendering line plots by not
2032 
 drawing a direct line between two adjacent points but rather draw two
2033 
 segments. The first segment being a horizontal line to the next X-value
2034 
 and then a vertical line from that point to the correct Y-value. This
2035 
 is perhaps easier demonstrated by an example as seen below.</P>
2036 
<P> You specify that you want the plot to be rendered with this style by
2037 
 calling the method <A href="../ref/LinePlot.html#_LINEPLOT_SETSTEPSTYLE">
2038 
SetStepStyle()</A> on the lineplot.<DIV class="example">
2039 
<BR> <A href="exframes/frame_example6.2.html" target="blank"><IMG border="0"
2040 
HEIGHT="240"         src="img/img/img/img/img/img/img/img/example6.2.png" WIDTH="300"></A>
2041 
<BR><B>Figure 16:</B> Rendering a line plot with the step style <A href="exframes/frame_example6.2.html"
2042 
target="blank">[src]</A>&nbsp;
2043 
<P></P>
2044 
</DIV></P>
2045 
<P></P>
2046 
<H3><A NAME="7_1_8">7.1.8 Using logarithmic scale</A></H3>
2047 
<P> Using a logarithmic scale requires you to include the logarithmic
2048 
 add on module in &quot;jpgraph_log.php&quot;. So you must have the line<DIV class="phpscript">
2049 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;</FONT><FONT color="#007700">
2050 
include(</FONT><FONT color="#DD0000">&quot;jpgraph_log.php&quot;</FONT><FONT color="#007700">
2051 
);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
2052 
<P>on the top of your code. To Illustrate how to use a logarithmic scale
2053 
 let's make the right Y scale in the previous example a logarithmic
2054 
 scale. This is done by the line<DIV class="phpscript"><CODE><FONT color="#000000">
2055 
 <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
2056 
color="#0000BB">SetY2Scale</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
2057 
&quot;log&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT>
2058 
</CODE></DIV></P>
2059 
<P>This will then give the following result<DIV class="example">
2060 
<BR> <A href="exframes/frame_example7.html" target="blank"><IMG border="0"
2061 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example7.png" WIDTH="350"></A>
2062 
<BR><B>Figure 17:</B> Using a logarithmic scale for both the Y2 axis <A href="exframes/frame_example7.html"
2063 
target="blank">[src]</A>&nbsp;
2064 
<P></P>
2065 
</DIV></P>
2066 
<P></P>
2067 
<P> You can of course also use a logarithmic X-scale as well. The
2068 
 following example shows this.<DIV class="example">
2069 
<BR> <A href="exframes/frame_loglogex1.html" target="blank"><IMG border="0"
2070 
HEIGHT="300"         src="img/img/img/img/img/img/img/img/loglogex1.png" WIDTH="500"></A>
2071 
<BR><B>Figure 18:</B> Example of using log scale on both X and Y axis
2072 
 together with a linear Y2 scale <A href="exframes/frame_loglogex1.html" target="blank">
2073 
[src]</A>&nbsp;
2074 
<P></P>
2075 
</DIV></P>
2076 
<P> Even though we have so far only shown line graphs logarithmic scale
2077 
 can also be used for bar, error, scatter plots as well. Even radar
2078 
 plots supports the use of logarithmic plots. The following example
2079 
 shows how to use a logarithmic scale for a bar graph.</P>
2080 
<P><DIV class="example">
2081 
<BR> <A href="exframes/frame_logbarex1.html" target="blank"><IMG border="0"
2082 
HEIGHT="220"         src="img/img/img/img/img/img/img/img/logbarex1.png" WIDTH="400"></A>
2083 
<BR><B>Figure 19:</B> Example of using logarithmic scale togther with
2084 
 bar plots <A href="exframes/frame_logbarex1.html" target="blank">[src]</A>
2085 
&nbsp;
2086 
<P></P>
2087 
</DIV></P>
2088 
<P></P>
2089 
<H3><A NAME="7_1_9">7.1.9 More on scales</A></H3>
2090 
<P> As you saw in the previous example it is possible to use different
2091 
 types of scales. In JpGraph you can use the following scales</P>
2092 
<UL>
2093 
<LI>Linear scale, the standard &quot;scale&quot;</LI>
2094 
<LI>Logarithmic scale</LI>
2095 
<LI>Integer scale, very similar to linear scale but restricts the scale
2096 
 values (and labels) to integer values.</LI>
2097 
<LI>Text scale, Similar to integer scale and used when only the
2098 
 numbering of items is relevant. A text scale is almost exclusively used
2099 
 for the X-axis. A typical example for this is the X-axis for a bar
2100 
 plot. The labels for the text scale is usually replaced by user
2101 
 supplied texts. Text scales can only be used for the X-axis (it doesn't
2102 
 make sense for the Y-scale).</LI>
2103 
</UL>
2104 
<P> Any combination of these may be used. Linear and logarithmic scales
2105 
 are pretty straightforward. The text scale might deserve some
2106 
 explanation. The easiest way to think of the text scale is as a linear
2107 
 scale consisting of only natural numbers, i.e. 0,1,2,3,4,... . This
2108 
 scale is used when you just have a number of Y-values you want to plot
2109 
 in a consecutive order and don't care about the X-values. For the above
2110 
 example it will also work fine to use a linear X-scale (try it!).
2111 
 However, the scale is now treated as consisting or real numbers so the
2112 
 auto scaling, depending on the size of the image an the number of data
2113 
 points, might decide to display other labels then the natural numbers.,
2114 
 i.e. a label might be 2.5 say. This is not going to happen if you use a
2115 
 text scale.</P>
2116 
<P> The normal practice for text scale is to specify text strings as
2117 
 labels instead as the default natural numbers. You can specify text
2118 
 strings for the labels by calling the <A href="../ref/Axis.html#_AXIS_SETTICKLABELS">
2119 
 SetTickLabels()</A> method on the Axis.</P>
2120 
<P> To specify the scale you use the <A href="../ref/Graph.html#_GRAPH_SETSCALE">
2121 
 SetScale()</A> method. A few examples might help clarify this.</P>
2122 
<UL>
2123 
<LI> &quot;textlin&quot;, text-scale for X-axis, Linear scale for Y-axis</LI>
2124 
<LI> &quot;linlin&quot;, linear-scale for X-axis, Linear scale for Y-axis</LI>
2125 
<LI> &quot;linlog&quot;, linear-scale for X-axis, Logarithmic scale for Y-axis</LI>
2126 
<LI> &quot;loglog&quot;, Logarithmic scale for X-axis, Logarithmic scale for
2127 
 Y-axis</LI>
2128 
<LI> &quot;textint&quot;, text-scale for X-axis, Integer scale for Y-axis</LI>
2129 
<LI> &quot;textlog&quot;, Text scale for X-axis, Logarithmic scale for Y-axis</LI>
2130 
</UL>
2131 
<P> As you can see all your graphs will require at least one call to
2132 
 SetScale() in the beginning of your script. Normally it will come right
2133 
 after the creation of the Graph().</P>
2134 
<P> To specify the scale for the Y2 axis you use the <A href="../ref/Graph.html#_GRAPH_SETY2SCALE">
2135 
 SetY2Scale()</A> Since you only specify one axis you only specify
2136 
 &quot;half&quot; of the string in the previous examples. So to set a logarithmic
2137 
 Y2 scale you will call<DIV class="phpscript"><CODE><FONT color="#000000">
2138 
 <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
2139 
color="#0000BB">SetY2Scale</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
2140 
&quot;log&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT>
2141 
</CODE></DIV></P>
2142 
<P></P>
2143 
<H3><A NAME="7_1_10">7.1.10 Adjusting the grid lines in the plot</A></H3>
2144 
<P> By default only the Y-axis have grid lines and then only on major
2145 
 ticks, i.e. ticks which have a label. It is of course possible to
2146 
 change this. Both the X , Y and Y2 can have grid lines. It is also
2147 
 possible to let the gridlines also be drawn on the minor tick marks,
2148 
 i.e. ticks without a label. Lets see how we can apply this to the graph
2149 
 above.</P>
2150 
<P> The grid is modified by accessing the xgrid (or ygrid) component of
2151 
 the graph. So to display minor grid lines for the Y graph we make the
2152 
 call<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
2153 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">ygrid</FONT><FONT
2154 
color="#007700">-&gt;</FONT><FONT color="#0000BB">Show</FONT><FONT color="#007700">
2155 
(</FONT><FONT color="#0000BB">true</FONT><FONT color="#007700">,</FONT><FONT
2156 
color="#0000BB">true</FONT><FONT color="#007700">)</FONT><FONT color="#0000BB">
2157 
</FONT></FONT></CODE></DIV></P>
2158 
<P> The first parameter determines if the grid should be displayed at
2159 
 all and the second parameter determines whether or not the minor grid
2160 
 lines should be displayed.</P>
2161 
<P> If you also wanted the grid lines to be displayed for the Y2 axis
2162 
 you would call<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
2163 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
2164 
y2grid</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">Show</FONT><FONT
2165 
color="#007700">(</FONT><FONT color="#0000BB">true</FONT><FONT color="#007700">
2166 
,</FONT><FONT color="#0000BB">true</FONT><FONT color="#007700">)</FONT><FONT
2167 
color="#0000BB"></FONT></FONT></CODE></DIV></P>
2168 
<P><STRONG> Note.</STRONG> In general it is not a good idea to display
2169 
 both the Y and Y2 grid lines since the resulting image becomes
2170 
 difficult to read for a viewer.</P>
2171 
<P> We can also enable the X-grid lines with the call<DIV class="phpscript">
2172 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
2173 
-&gt;</FONT><FONT color="#0000BB">xgrid</FONT><FONT color="#007700">-&gt;</FONT><FONT
2174 
color="#0000BB">Show</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
2175 
true</FONT><FONT color="#007700">)</FONT><FONT color="#0000BB"></FONT></FONT>
2176 
</CODE></DIV></P>
2177 
<P></P>
2178 
<P> In the above line we will of course only just enable the major grid
2179 
 lines.</P>
2180 
<P> To bring all this together we will display a graph with grid lines
2181 
 for both Y and X axis enabled.<DIV class="example">
2182 
<BR> <A href="exframes/frame_example8.html" target="blank"><IMG border="0"
2183 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example8.png" WIDTH="350"></A>
2184 
<BR><B>Figure 20:</B> Enabling major and minor gridlines for Y-axis and
2185 
 major grid lines for the X-axis <A href="exframes/frame_example8.html" target="blank">
2186 
[src]</A>&nbsp;
2187 
<P></P>
2188 
</DIV></P>
2189 
<P><DIV class="note"><B>Note:</B> If you think the first value of the
2190 
 Y-axis is to close to the first label of the X-axis you have the option
2191 
 of either increasing the margin (with a call to <A href="../ref/Axis.html#_AXIS_SETLABELMARGIN">
2192 
 SetLabelMargin()</A> ) or to hide the first label (with a call to <A href="../ref/Axis.html#_AXIS_HIDEFIRSTTICKLABEL">
2193 
 HideFirstTickLabel()</A> )</DIV></P>
2194 
<H3><A NAME="7_1_11">7.1.11 Using filled grid lines</A></H3>
2195 
<P> Another option for the grid lines is the possibility to have the
2196 
 area between the grid lines filled with alternating two colors. The
2197 
 example below illustrates this.<DIV class="example">
2198 
<BR> <A href="exframes/frame_filledgridex1.html" target="blank"><IMG border="0"
2199 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/filledgridex1.png" WIDTH="300"></A>
2200 
<BR><B>Figure 21:</B> Using two alternating colors between the gridlines
2201 
 <A href="exframes/frame_filledgridex1.html" target="blank">[src]</A>&nbsp;
2202 
<P></P>
2203 
</DIV></P>
2204 
<P> In the example above we have also made use of alpha-blending
2205 
 (requires GD 2.x or higher). By default the filled grid lines are
2206 
 disabled. To enable this style you have to call the <A href="../ref/Grid.html#_GRID_SETFILL">
2207 
Grid::SetFill()</A> method.</P>
2208 
<H3><A NAME="7_1_12">7.1.12 Specifying text labels for the X-axis</A></H3>
2209 
<P> You might want to have specific labels you want to use for the
2210 
 X-axis when this has been specified as a &quot;text&quot; scale. In the previous
2211 
 example each Y-point might represent a specific measurement for each of
2212 
 the first 10 month. We might then want to display the name of the
2213 
 months as X-scale.</P>
2214 
<P> To specify the labels on the scale you make use of the <A href="../ref/Axis.html#_AXIS_SETTICKLABELS">
2215 
 SetTickLabels()</A> method.</P>
2216 
<P> To get a localized version of the name of the month you can use a
2217 
 nice feature in JpGraph, the global '$gDateLocal' object which is an
2218 
 instance of the <A href="../ref/DateLocale.html#_C_DATELOCALE">
2219 
 DateLocale</A></P>
2220 
<P> This class has a number of methods to get localized versions of
2221 
 relevant names for dates, (months and weekdays).</P>
2222 
<P> So to specify the X-axis with the short form of the month names we
2223 
 use the construction<DIV class="phpscript"><CODE><FONT color="#000000">
2224 
 <FONT color="#0000BB">&nbsp;$a&nbsp;</FONT><FONT color="#007700">=&nbsp;</FONT><FONT color="#0000BB">
2225 
$gDateLocale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
2226 
GetShortMonth</FONT><FONT color="#007700">();
2227 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
2228 
color="#0000BB">xaxis</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
2229 
SetTickLabels</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
2230 
$a</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT>
2231 
</CODE></DIV></P>
2232 
<P> This will, now result in the image displayed below<DIV class="example">
2233 
<BR> <A href="exframes/frame_example9.html" target="blank"><IMG border="0"
2234 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example9.png" WIDTH="350"></A>
2235 
<BR><B>Figure 22:</B> Specifying text labels for the X-axis <A href="exframes/frame_example9.html"
2236 
target="blank">[src]</A>&nbsp;
2237 
<P></P>
2238 
</DIV></P>
2239 
<P><DIV class="note"><B>Note:</B> It is also perfectly legal to override
2240 
 the default labels for the Y (and Y2) axis in the same way, however
2241 
 there is seldom need for that. Please note that the supplied labels
2242 
 will be applied to each major tick label. If there are insufficient
2243 
 number of supplied labels the non-existent positions will have empty
2244 
 labels.</DIV></P>
2245 
<H3><A NAME="7_1_13">7.1.13 Adjusting the ticks on a text scale</A></H3>
2246 
<P> As can be seen in the previous example the X-axis is slightly
2247 
 cluttered with the labels very close to each other. We might rectify
2248 
 this by either enlarging the image or just displaying fewer tick label
2249 
 on the x-axis.</P>
2250 
<P> Specifying that we only want, for example, to print every second
2251 
 label on the axis is done by a call to the method <A href="../ref/Axis.html#_AXIS_SETTEXTLABELINTERVAL">
2252 
 SetTextLabelInterval()</A> Which would result in the graph<DIV class="example">
2253 
<BR> <A href="exframes/frame_example9.1.html" target="blank"><IMG border="0"
2254 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example9.1.png" WIDTH="350"></A>
2255 
<BR><B>Figure 23:</B> Just printing every second label on the X-axis <A href="exframes/frame_example9.1.html"
2256 
target="blank">[src]</A>&nbsp;
2257 
<P></P>
2258 
</DIV></P>
2259 
<P></P>
2260 
<P> If the text labels are long (for example full dates) then another
2261 
 way might be to adjust the angle of the text. We could for example
2262 
 choose to rotate the labels on the X-axis by 90 degrees. With the help
2263 
 of the <A href="../ref/Axis.html#_AXIS_SETLABELANGLE"> SetLabelAngle()</A>
2264 
</P>
2265 
<P> Which would then result in the image below<DIV class="example">
2266 
<BR> <A href="exframes/frame_example9.2.html" target="blank"><IMG border="0"
2267 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example9.2.png" WIDTH="350"></A>
2268 
<BR><B>Figure 24:</B> Rotating the X-labels 90 degrees <A href="exframes/frame_example9.2.html"
2269 
target="blank">[src]</A>&nbsp;
2270 
<P></P>
2271 
</DIV></P>
2272 
<P><DIV class="note"><B>Note:</B> The internal fonts which we have been
2273 
 using so only supports 0 or 90 degrees rotation. To use arbitrary
2274 
 angles you must specify TTF fonts. More on fonts later.</DIV></P>
2275 
<H3><A NAME="7_1_14">7.1.14 Using filled line graphs</A></H3>
2276 
<P> Using a filled line plot is not much different from using a normal
2277 
 line plot, in fact the only difference is that you must call the method
2278 
 <A href="../ref/LinePlot.html#_LINEPLOT_SETFILLCOLOR"> SetFillColor()</A>
2279 
 on a normal line plot. This will then fill the area under the line
2280 
 graph with the chosen color.</P>
2281 
<P> In the example below we have also, as an example, specified plot
2282 
 marks (see previous sections).<DIV class="example">
2283 
<BR> <A href="exframes/frame_filledlineex01.html" target="blank"><IMG border="0"
2284 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/filledlineex01.png" WIDTH="300"></A>
2285 
<BR><B>Figure 25:</B> Filled line graph with plot marks <A href="exframes/frame_filledlineex01.html"
2286 
target="blank">[src]</A>&nbsp;
2287 
<P></P>
2288 
</DIV></P>
2289 
<P><STRONG> Note 1.</STRONG> If you add multiple filled line plots to
2290 
 one graph make sure you add the one with the highest Y-values first
2291 
 since it will otherwise overwrite the other plots and they will not be
2292 
 visible. Plots are stroked in the order they are added to the graph, so
2293 
 the graph you want front-most must be added last.</P>
2294 
<P><STRONG> Note 2.</STRONG> When using legends with filled line plot
2295 
 the legend will show the fill color and not the bounding line color.</P>
2296 
<P><STRONG> Note 3.</STRONG> Filled line plots is only supposed to be
2297 
 used with positive values. Filling line plots which have negative data
2298 
 values will probably not have the appearance you expect.</P>
2299 
<P> As you can see from the graph above the grid lines are below the
2300 
 filled line graph. If you want the grid lines in front of the graph you
2301 
 can adjust the depth with call to <A href="../ref/Graph.html#_GRAPH_SETGRIDDEPTH">
2302 
 Graph::SetGridDepth()</A> As the following example shows<DIV class="example">
2303 
<BR> <A href="exframes/frame_filledlineex01.1.html" target="blank"><IMG border="0"
2304 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/filledlineex01.1.png" WIDTH="300"></A>
2305 
<BR><B>Figure 26:</B> Adjusting the depth of the gridlines <A href="exframes/frame_filledlineex01.1.html"
2306 
target="blank">[src]</A>&nbsp;
2307 
<P></P>
2308 
</DIV></P>
2309 
<P></P>
2310 
<H3><A NAME="7_1_15">7.1.15 Using accumulated line graphs</A></H3>
2311 
<P> Accumulated line graphs are line graphs that are &quot;stacked&quot; on top of
2312 
 each other. That is, the values in the supplied data for the Y-axis is
2313 
 not the absolute value but rather the relative value from graph below.
2314 
 For example if you have two line graphs with three points each, say
2315 
 [3,7,5] and [6,9,7]. The first graph will be plotted on the absolute
2316 
 Y-values [3,7,5] the second plot will be plotted at [3+6, 7+9, 5+7],
2317 
 hence the values of the previous graphs will be used as offsets.</P>
2318 
<P> You may add any number of ordinary line graphs together. If you want
2319 
 to use three line plots in an accumulated line plot graph you write the
2320 
 following code</P>
2321 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
2322 
&nbsp;</FONT><FONT color="#FF8000">//&nbsp;First&nbsp;create&nbsp;the&nbsp;individual&nbsp;plots
2323 
<BR></FONT><FONT color="#0000BB">$p1&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT
2324 
color="#0000BB">LinePlot</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
2325 
$datay_1</FONT><FONT color="#007700">);
2326 
<BR></FONT><FONT color="#0000BB">$p2&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT
2327 
color="#0000BB">LinePlot</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
2328 
$datay_2</FONT><FONT color="#007700">);
2329 
<BR></FONT><FONT color="#0000BB">$p3&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT
2330 
color="#0000BB">LinePlot</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
2331 
$datay_3</FONT><FONT color="#007700">);
2332 
<BR>
2333 
<BR></FONT><FONT color="#FF8000">
2334 
//&nbsp;Then&nbsp;add&nbsp;them&nbsp;together&nbsp;to&nbsp;form&nbsp;a&nbsp;accumulated&nbsp;plot
2335 
<BR></FONT><FONT color="#0000BB">$ap&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT
2336 
color="#0000BB">AccLinePlot</FONT><FONT color="#007700">(array(</FONT><FONT
2337 
color="#0000BB">$p1</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
2338 
$p2</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">$p3</FONT><FONT
2339 
color="#007700">));
2340 
<BR>
2341 
<BR></FONT><FONT color="#FF8000">
2342 
//&nbsp;Add&nbsp;the&nbsp;accumulated&nbsp;line&nbsp;plot&nbsp;to&nbsp;the&nbsp;graph
2343 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
2344 
color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
2345 
$ap</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT>
2346 
</CODE></DIV></P>
2347 
<P> You might of course also fill each line plot by adding the lines<DIV class="phpscript">
2348 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$p1</FONT><FONT color="#007700">
2349 
-&gt;</FONT><FONT color="#0000BB">SetFillColor</FONT><FONT color="#007700">
2350 
(</FONT><FONT color="#DD0000">&quot;red&quot;</FONT><FONT color="#007700">);
2351 
<BR></FONT><FONT color="#0000BB">$p2</FONT><FONT color="#007700">-&gt;</FONT><FONT
2352 
color="#0000BB">SetFillColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
2353 
&quot;blue&quot;</FONT><FONT color="#007700">);
2354 
<BR></FONT><FONT color="#0000BB">$p3</FONT><FONT color="#007700">-&gt;</FONT><FONT
2355 
color="#0000BB">SetFillColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
2356 
&quot;green&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
2357 
</FONT></CODE></DIV></P>
2358 
<P> Using some appropriate data this might then give a graph perhaps
2359 
 like the one showed in the figure below<DIV class="example">
2360 
<BR> <A href="exframes/frame_example17.html" target="blank"><IMG border="0"
2361 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example17.png" WIDTH="300"></A>
2362 
<BR><B>Figure 27:</B> Accumulated filled line graph <A href="exframes/frame_example17.html"
2363 
target="blank">[src]</A>&nbsp;
2364 
<P></P>
2365 
</DIV></P>
2366 
<P></P>
2367 
<H3><A NAME="7_1_16">7.1.16 Constructing smooth line plots with Cubic
2368 
 Splines</A></H3>
2369 
<P> If you only have access to a few data points but still want a smooth
2370 
 curve between those data points JpGraph can help you achieving that by
2371 
 letting you construct cubic splines. If you never have heard of cubic
2372 
 splines before, don't worry. You only have to supply the data points
2373 
 you know tell JpGraph how many interpolated points in total you want in
2374 
 the graph. JpGraph will now take care of constructing a smooth curve
2375 
 between all you data points. The new, smooth, curve will be made up of
2376 
 exactly as many interpolated points as you have specified.</P>
2377 
<P> To construct a spline you need both the X and Y coordinates for the
2378 
 known data points.</P>
2379 
<P> You start by constructing a new <A href="">Spline</A> instance. To
2380 
 get access to the Spline class you must first remember to include the
2381 
 file &quot;jpgraph_regstat.php&quot;. You instantiate this class by calling it
2382 
 with your two known data arrays (X and Y) as follows.<DIV class="phpscript">
2383 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$spline&nbsp;</FONT><FONT color="#007700">
2384 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">Spline</FONT><FONT color="#007700">(</FONT><FONT
2385 
color="#0000BB">$xdata</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
2386 
$ydata</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
2387 
</FONT></CODE></DIV></P>
2388 
<P>This call initializes the spline with the data points you have. These
2389 
 data points are also known as<I> Control points</I> for the spline.
2390 
 This helper class doesn't draw any line itself. Instead it is merely
2391 
 used to get a new (larger) data array which have all the interpolated
2392 
 values. You then use these new value in your plot. This way give you
2393 
 great flexibility in how you want to use this interpolated data.</P>
2394 
<P> Continuing the above line we now use the <A href="">Spline::Get()</A>
2395 
 method to get an interpolated array containing a specified number of
2396 
 points. So for example the line<DIV class="phpscript"><CODE><FONT color="#000000">
2397 
 <FONT color="#0000BB">&nbsp;</FONT><FONT color="#007700">list(</FONT><FONT color="#0000BB">
2398 
$sdatax</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
2399 
$sdatay</FONT><FONT color="#007700">)&nbsp;=&nbsp;</FONT><FONT color="#0000BB">
2400 
$spline</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">Get</FONT><FONT
2401 
color="#007700">(</FONT><FONT color="#0000BB">50</FONT><FONT color="#007700">
2402 
);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
2403 
<P>Will construct the two new data arrays '$sdatax' and '$sdatay' which
2404 
 contains 50 data points. These two arrays are constructed from the
2405 
 control point we specified when we created the '$spline' object.</P>
2406 
<P> You would then use these two new data array in exactly the same way
2407 
 as you would form ordinary data vectors.</P>
2408 
<P> The following example illustrates this<DIV class="example">
2409 
<BR> <A href="exframes/frame_splineex1.html" target="blank"><IMG border="0"
2410 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/splineex1.png" WIDTH="300"></A>
2411 
<BR><B>Figure 28:</B> Using spline to get a smooth curve between the
2412 
 control points. <A href="exframes/frame_splineex1.html" target="blank">
2413 
[src]</A>&nbsp;
2414 
<P></P>
2415 
</DIV></P>
2416 
<P> In order to make the example more interesting we actually use two
2417 
 plots. First a line plot to get the smooth curve and then a standard
2418 
 scatter plot which is used to illustrate where the control points are.</P>
2419 
<H3><A NAME="7_1_17">7.1.17 Adding plot marks to a line plot</A></H3>
2420 
<P> To emphasize the specific data points it is possible to add plot
2421 
 marks at each data point. Plot marks can be either</P>
2422 
<UL>
2423 
<LI> Simple shapes, (e.g. square, circle, cross, etc)</LI>
2424 
<LI> Arbitrary images loaded from a file</LI>
2425 
<LI> One of the built-in images</LI>
2426 
</UL>
2427 
<P> You access the plot mark through the &quot;mark&quot; instance variable in the
2428 
 plot, as in<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
2429 
&nbsp;$lineplot</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
2430 
mark</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">SetColor</FONT><FONT
2431 
color="#007700">(</FONT><FONT color="#DD0000">&quot;red&quot;</FONT><FONT color="#007700">
2432 
);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
2433 
<P> To choose between the different plot marks you call the <A href="../ref/PlotMark.html#_PLOTMARK_SETTYPE">
2434 
PlotMark::SetType()</A> method with the correct define to choose the
2435 
 plot type you want to use.</P>
2436 
<P> The simple shape type of plot marks are</P>
2437 
<UL>
2438 
<LI> MARK_SQUARE</LI>
2439 
<LI> MARK_UTRIANGLE</LI>
2440 
<LI> MARK_DTRIANGLE</LI>
2441 
<LI> MARK_DIAMOND</LI>
2442 
<LI> MARK_CIRCLE</LI>
2443 
<LI> MARK_FILLEDCIRCLE</LI>
2444 
<LI> MARK_CROSS</LI>
2445 
<LI> MARK_STAR</LI>
2446 
<LI> MARK_X</LI>
2447 
<LI> MARK_LEFTTRIANGLE</LI>
2448 
<LI> MARK_RIGHTTRIANGLE</LI>
2449 
<LI> MARK_FLASH</LI>
2450 
</UL>
2451 
<P> To specify an arbitrary image you use the special define</P>
2452 
<UL>
2453 
<LI> MARK_IMG</LI>
2454 
</UL>
2455 
<P> In this case you must also specify a image file name and an optional
2456 
 scaling constant. For example as in<DIV class="phpscript"><CODE><FONT color="#000000">
2457 
 <FONT color="#0000BB">&nbsp;$lineplot</FONT><FONT color="#007700">-&gt;</FONT><FONT
2458 
color="#0000BB">mark</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
2459 
SetTYPE</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
2460 
MARK_IMG</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
2461 
&quot;myimage.jpg&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
2462 
1.5</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT>
2463 
</CODE></DIV></P>
2464 
<P></P>
2465 
<P> If you want to use one of the built-in images the following images
2466 
 are available. Please note that not all images are available in all
2467 
 possible colors. The available colors for each image is listed below.</P>
2468 
<P> The following shape (the first class) plot marks are available</P>
2469 
<OL>
2470 
<LI>MARK_SQUARE, A filled square</LI>
2471 
<LI>MARK_UTRIANGLE, A triangle pointed upwards</LI>
2472 
<LI>MARK_DTRIANGLE, A triangle pointed downwards</LI>
2473 
<LI>MARK_DIAMOND, A diamond</LI>
2474 
<LI>MARK_CIRCLE, A circle</LI>
2475 
<LI>MARK_FILLEDCIRCLE, A filled circle</LI>
2476 
<LI>MARK_CROSS, A cross</LI>
2477 
<LI>MARK_STAR, A star</LI>
2478 
<LI>MARK_X, An 'X'</LI>
2479 
<LI>MARK_FLASH, A &quot;flash&quot; shape</LI>
2480 
<LI>MARK_IMAGE, Use the image specified with the filename and scale as
2481 
 the second and third argument as the mark.</LI>
2482 
</OL>
2483 
<P></P>
2484 
<P> For the second class (built-in images) the following table list the
2485 
 different images as well as what color they are available in. For the
2486 
 built-in images you specify the color with the second argument.</P>
2487 
<P> Note that some of the images are available in different sizes. The
2488 
 reason is that even though you can scale them by the third argument
2489 
 there is a visual degradation to scale an image larger than it's
2490 
 original size since some pixels needs to be interpolated. Reducing the
2491 
 size with a scale &lt; 1.0 gives much better visual apperance.</P>
2492 
<P> The scaling works with both GD 1 and GD 2 but with GD 2 the quality
2493 
 of the scaling is much better.</P>
2494 
<P> Built-in images and available colors:</P>
2495 
<TABLE border="1">
2496 
<TR><TH>Type</TH><TH>Description</TH><TH>Colors</TH></TR>
2497 
<TR><TD>MARK_IMG_PUSHPIN, MARK_IMG_SPUSHPIN</TD><TD> Push-pin image</TD><TD>
2498 
'red','blue','green','pink','orange'</TD></TR>
2499 
<TR><TD>MARK_IMG_LPUSHPIN</TD><TD> A larger Push-pin image</TD><TD>
2500 
'red','blue','green','pink','orange'</TD></TR>
2501 
<TR><TD>MARK_IMG_BALL, MARK_IMAGE_SBALL</TD><TD>A round 3D rendered ball</TD><TD>
2502 
'bluegreen','cyan','darkgray','greengray',
2503 
 'gray','graypurple','green','greenblue','lightblue',
2504 
 'lightred','navy','orange','purple','red','yellow'</TD></TR>
2505 
<TR><TD>MARK_IMAGE_MBALL</TD><TD>A medium sized round 3D rendered ball</TD><TD>
2506 
 'blue','bluegreen','brown','cyan',
2507 
 'darkgray','greengray','gray','green',
2508 
 'greenblue','lightblue','lightred', 'purple','red','white','yellow'</TD>
2509 
</TR>
2510 
<TR><TD>MARK_IMAGE_LBALL</TD><TD>A large sized round 3D rendered ball</TD><TD>
2511 
 'blue','lightblue','brown','darkgreen',
2512 
 'green','purple','red','gray','yellow','silver','gray'</TD></TR>
2513 
<TR><TD>MARK_IMAGE_SQUARE</TD><TD>A 3D rendered square</TD><TD>
2514 
'bluegreen','blue','green', 'lightblue','orange','purple','red','yellow'</TD>
2515 
</TR>
2516 
<TR><TD>MARK_IMG_STAR</TD><TD>A 3D rendered star image</TD><TD>
2517 
'bluegreen','lightblue','purple','blue','green','pink','red','yellow'</TD>
2518 
</TR>
2519 
<TR><TD>MARK_IMG_DIAMOND</TD><TD>A 3D rendered diamond</TD><TD>
2520 
'lightblue','darkblue','gray', 'blue','pink','purple','red','yellow'</TD>
2521 
</TR>
2522 
<TR><TD>MARK_IMG_BEVEL</TD><TD>A 3D rendered bevel style round ring</TD><TD>
2523 
'green','purple','orange','red','yellow'</TD></TR>
2524 
</TABLE>
2525 
 Below we give two examples of images using these features.<DIV class="example">
2526 
<BR> <A href="exframes/frame_imgmarkerex1.html" target="blank"><IMG border="0"
2527 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/imgmarkerex1.png" WIDTH="300"></A>
2528 
<BR><B>Figure 29:</B> Using an arbitrary image as plot mark <A href="exframes/frame_imgmarkerex1.html"
2529 
target="blank">[src]</A>&nbsp;
2530 
<P></P>
2531 
</DIV>
2532 
<P></P>
2533 
<P><DIV class="example">
2534 
<BR> <A href="exframes/frame_builtinplotmarksex1.html" target="blank"><IMG
2535 
border="0" HEIGHT="200"         src="img/img/img/img/img/img/img/img/builtinplotmarksex1.png" WIDTH="350"></A>
2536 
<BR><B>Figure 30:</B> Using the built-in images <A href="exframes/frame_builtinplotmarksex1.html"
2537 
target="blank">[src]</A>&nbsp;
2538 
<P></P>
2539 
</DIV></P>
2540 
<P></P>
2541 
<H2><A NAME="7_2">7.2 Bar graphs</A></H2>
2542 
<P> Jpgraph also supports 2D vertical bar plots. Before you can use any
2543 
 bar plots you must make sure that you included the file
2544 
 &quot;jpgraph_bar.php&quot; in your script.</P>
2545 
<P> Using bar plots is quite straightforward and works in much the same
2546 
 way as line plots which you are already familiar with from the previous
2547 
 examples. Assuming you have a data array consisting of the values
2548 
 [12,8,19,3,10,5] and you want to display them as a bar plot. This is
2549 
 the simplest way to do this:<DIV class="phpscript"><CODE><FONT color="#000000">
2550 
 <FONT color="#0000BB">&nbsp;$datay</FONT><FONT color="#007700">=array(</FONT><FONT
2551 
color="#0000BB">12</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
2552 
8</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">19</FONT><FONT
2553 
color="#007700">,</FONT><FONT color="#0000BB">3</FONT><FONT color="#007700">
2554 
,</FONT><FONT color="#0000BB">10</FONT><FONT color="#007700">,</FONT><FONT
2555 
color="#0000BB">5</FONT><FONT color="#007700">);
2556 
<BR></FONT><FONT color="#0000BB">$bplot&nbsp;</FONT><FONT color="#007700">
2557 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">BarPlot</FONT><FONT color="#007700">(</FONT><FONT
2558 
color="#0000BB">$datay</FONT><FONT color="#007700">);
2559 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
2560 
color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
2561 
$bplot</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
2562 
</FONT></CODE></DIV></P>
2563 
<P> If you compare this to the previous line examples you can see that
2564 
 the only change necessary was that instead of creating a new line plot
2565 
 (via the new LinePlot(...) call) we used the statement new <A href="../ref/BarPlot.html#_C_BARPLOT">
2566 
 BarPplot().</A></P>
2567 
<P> The other change we should do is to make sure the X-axis have an
2568 
 text-scale (it is perfectly fine to use a linear X-scale but in most
2569 
 cases this is not the effect you want when you use a bar graph, see
2570 
 more below). With this two simple change we will now get a bar graph as
2571 
 displayed in the following image<DIV class="example">
2572 
<BR> <A href="exframes/frame_example18.html" target="blank"><IMG border="0"
2573 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example18.png" WIDTH="300"></A>
2574 
<BR><B>Figure 31:</B> A very simple bar graph <A href="exframes/frame_example18.html"
2575 
target="blank">[src]</A>&nbsp;
2576 
<P></P>
2577 
</DIV></P>
2578 
<P> You can of course modify the appearance of the bar graph. So for
2579 
 example to change the fill color you would use the <A href="../ref/BarPlot.html#_BARPLOT_SETFILLCOLOR">
2580 
 BarPlot::SetFillColor()</A> method. Making this small change to the
2581 
 previous example would give the expected effect as can be seen in the
2582 
 next example.<DIV class="example">
2583 
<BR> <A href="exframes/frame_example19.html" target="blank"><IMG border="0"
2584 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example19.png" WIDTH="300"></A>
2585 
<BR><B>Figure 32:</B> A very simple bar graph with changed fill color <A href="exframes/frame_example19.html"
2586 
target="blank">[src]</A>&nbsp;
2587 
<P></P>
2588 
</DIV></P>
2589 
<P><DIV class="note"><B>Note:</B> You should note from the previous two
2590 
 graphs that slight change in appearance for the X-scale. The bar graphs
2591 
 gets automatically centered between the tick marks when using as text
2592 
 x-scale. If you were to use a linear scale they would instead start at
2593 
 the left edge of the X-axis and the X-axis would be labeled with a
2594 
 linear scale. As is illustrated in the (small) example below.</DIV><DIV class="example">
2595 
<BR> <A href="exframes/frame_example19.1.html" target="blank"><IMG border="0"
2596 
HEIGHT="100"         src="img/img/img/img/img/img/img/img/example19.1.png" WIDTH="260"></A>
2597 
<BR><B>Figure 33:</B> A small example with a bar graph using a linear
2598 
 X-scale <A href="exframes/frame_example19.1.html" target="blank">[src]</A>
2599 
&nbsp;
2600 
<P></P>
2601 
</DIV></P>
2602 
<P></P>
2603 
<H3><A NAME="7_2_1">7.2.1 Adjusting the width of the bars</A></H3>
2604 
<P> JpGraph allows you to easy customize the appearance of the bar
2605 
 graph, for example to change the width of each bar. The width of each
2606 
 bar can be specified either as a fraction of the width between each
2607 
 major tick or as an absolute width (in pixels).</P>
2608 
<P> To set the width in fraction you use the method <A href="../ref/BarPlot.html#_BARPLOT_SETWIDTH">
2609 
 SetWidth()</A> and to set the width in pixels you use the <A href="../ref/BarPlot.html#_BARPLOT_SETABSWIDTH">
2610 
 SetAbsWidth()</A></P>
2611 
<P> As an example let's take the previous example and set the width to
2612 
 100% of the distance between the ticks. The example will now become</P>
2613 
<P><DIV class="example">
2614 
<BR> <A href="exframes/frame_example20.html" target="blank"><IMG border="0"
2615 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example20.png" WIDTH="300"></A>
2616 
<BR><B>Figure 34:</B> Setting the width of the bars to 100% of the tick
2617 
 width <A href="exframes/frame_example20.html" target="blank">[src]</A>&nbsp;
2618 
<P></P>
2619 
</DIV></P>
2620 
<P></P>
2621 
<H3><A NAME="7_2_2">7.2.2 Displaying the value of each bar</A></H3>
2622 
<P> You can easily choose to display the value (and it's format) on top
2623 
 of each bar by accessing the bar's 'value' property. So for example by
2624 
 just adding the line<DIV class="phpscript"><CODE><FONT color="#000000">
2625 
 <FONT color="#0000BB">&nbsp;$barplot</FONT><FONT color="#007700">-&gt;</FONT><FONT
2626 
color="#0000BB">value</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
2627 
Show</FONT><FONT color="#007700">();</FONT><FONT color="#0000BB"></FONT></FONT>
2628 
</CODE></DIV></P>
2629 
<P> Will enable the values in it's simplest form and will give the
2630 
 result<DIV class="example">
2631 
<BR> <A href="exframes/frame_example20.1.html" target="blank"><IMG border="0"
2632 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example20.1.png" WIDTH="300"></A>
2633 
<BR><B>Figure 35:</B> Showing the values for each bar <A href="exframes/frame_example20.1.html"
2634 
target="blank">[src]</A>&nbsp;
2635 
<P></P>
2636 
</DIV></P>
2637 
<P> You cane see a small nuisance in this graph. The auto scaling
2638 
 algorithm chooses quite tight limits for the scale so that the bars
2639 
 just fit. Adding the value on top of the bar makes it collide with the
2640 
 top of the graph. To remedy this we tell the auto scaling algorithm to
2641 
 allow for more &quot;grace&quot; space at the top of the scale by using the
2642 
 method <A href="../ref/LinearScale.html#_LINEARSCALE_SETGRACE">
2643 
 SetGrace()</A> which is used to tell the scale to add a percentage (of
2644 
 the total scale span) more space to either one end or both ends of the
2645 
 scale. In this case we add 20% more space at the top to make more room
2646 
 for the values with the line<DIV class="phpscript"><CODE><FONT color="#000000">
2647 
 <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
2648 
color="#0000BB">yaxis</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
2649 
scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
2650 
SetGrace</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">20</FONT><FONT
2651 
color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
2652 
</P>
2653 
<P></P>
2654 
<P> This will then give the graph as shown below<DIV class="example">
2655 
<BR> <A href="exframes/frame_example20.2.html" target="blank"><IMG border="0"
2656 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example20.2.png" WIDTH="300"></A>
2657 
<BR><B>Figure 36:</B> Adding some grace space to the top of the Y-scale <A
2658 
href="exframes/frame_example20.2.html" target="blank">[src]</A>&nbsp;
2659 
<P></P>
2660 
</DIV></P>
2661 
<P></P>
2662 
<P> You can also adjust the general position of the value in respect to
2663 
 the bar by using the <A href="../ref/BarPlot.html#_BARPLOT_SETVALUEPOS">
2664 
 BarPlot::SetValuePos()</A> method. You can set the position to either
2665 
 'top' (the default) , 'center' or 'bottom'. The graph below shows the
2666 
 value being positioned in the center. In this example we have also
2667 
 adjusted the format to just display the value as an integer without any
2668 
 decimals.<DIV class="example">
2669 
<BR> <A href="exframes/frame_example20.5.html" target="blank"><IMG border="0"
2670 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example20.5.png" WIDTH="300"></A>
2671 
<BR><B>Figure 37:</B> Putting the values in the middle of the bar. <A href="exframes/frame_example20.5.html"
2672 
target="blank">[src]</A>&nbsp;
2673 
<P></P>
2674 
</DIV></P>
2675 
<P> It is also possible to specify a more fine grained control on how
2676 
 you want the values presented. You can for example, rotate them, change
2677 
 font, change color. It is also possible to adjust the actual value
2678 
 displayed by either using a printf()-type format string or with the
2679 
 more advanced technique of a format callback routine.</P>
2680 
<P> To show what you can do we just give another example for you to
2681 
 examine without much further explanations. Just remember that to have
2682 
 text at an angle other than 0 or 90 degrees we have to use TTF fonts.
2683 
 Even though we haven't explained the SetFont() method it should be
2684 
 fairly obvious.<DIV class="example">
2685 
<BR> <A href="exframes/frame_example20.3.html" target="blank"><IMG border="0"
2686 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example20.3.png" WIDTH="300"></A>
2687 
<BR><B>Figure 38:</B> Making the displayed values more interesting <A href="exframes/frame_example20.3.html"
2688 
target="blank">[src]</A>&nbsp;
2689 
<P></P>
2690 
</DIV></P>
2691 
<P></P>
2692 
<H3><A NAME="7_2_3">7.2.3 Adding a drop shadow to the bar</A></H3>
2693 
<P> One simple way of making the bar graph more attracting is to add a
2694 
 drop shadow to each bar. This is done by calling the <A href="../ref/BarPlot.html#_BARPLOT_SETSHADOW">
2695 
 SetShadow()</A> method. An example will clarify this.<DIV class="example">
2696 
<BR> <A href="exframes/frame_example20.4.html" target="blank"><IMG border="0"
2697 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example20.4.png" WIDTH="300"></A>
2698 
<BR><B>Figure 39:</B> Adding a drop shadow to each bar <A href="exframes/frame_example20.4.html"
2699 
target="blank">[src]</A>&nbsp;
2700 
<P></P>
2701 
</DIV></P>
2702 
<P></P>
2703 
<H3><A NAME="7_2_4">7.2.4 Adjusting the alignment of bars on a text
2704 
 scale</A></H3>
2705 
<P> As you have seen from the previous examples bar graphs are normally
2706 
 centered between the trick marks on a text scale. However, you can
2707 
 modify this behavior by calling the method <A href="../ref/BarPlot.html#_BARPLOT_SETALIGN">
2708 
 BarPlot::SetAlign()</A></P>
2709 
<H3><A NAME="7_2_5">7.2.5 Using grouped bar plots</A></H3>
2710 
<P> These types of bar graph is used to easy group two or more bars
2711 
 together around each tick (X-value). The bars will be placed
2712 
 immediately beside each other and as a group centered on each tick
2713 
 mark. A grouped bar is created by aggregating two or more ordinary bar
2714 
 graphs and creating a <A href="../ref/GroupBarPlot.html#_C_GROUPBARPLOT">
2715 
 GroupBarPlot()</A> From two ordinary bar graphs along the lines of<DIV class="phpscript">
2716 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;</FONT><FONT color="#FF8000">
2717 
//&nbsp;Create&nbsp;the&nbsp;bar&nbsp;plots
2718 
<BR></FONT><FONT color="#0000BB">$b1plot&nbsp;</FONT><FONT color="#007700">
2719 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">BarPlot</FONT><FONT color="#007700">(</FONT><FONT
2720 
color="#0000BB">$data1y</FONT><FONT color="#007700">);
2721 
<BR></FONT><FONT color="#0000BB">$b1plot</FONT><FONT color="#007700">-&gt;</FONT><FONT
2722 
color="#0000BB">SetFillColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
2723 
&quot;orange&quot;</FONT><FONT color="#007700">);
2724 
<BR>
2725 
<BR></FONT><FONT color="#0000BB">$b2plot&nbsp;</FONT><FONT color="#007700">
2726 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">BarPlot</FONT><FONT color="#007700">(</FONT><FONT
2727 
color="#0000BB">$data2y</FONT><FONT color="#007700">);
2728 
<BR></FONT><FONT color="#0000BB">$b2plot</FONT><FONT color="#007700">-&gt;</FONT><FONT
2729 
color="#0000BB">SetFillColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
2730 
&quot;blue&quot;</FONT><FONT color="#007700">);
2731 
<BR>
2732 
<BR></FONT><FONT color="#FF8000">//&nbsp;Create&nbsp;the&nbsp;grouped&nbsp;bar&nbsp;plot
2733 
<BR></FONT><FONT color="#0000BB">$gbplot&nbsp;</FONT><FONT color="#007700">
2734 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">GroupBarPlot</FONT><FONT color="#007700">
2735 
(array(</FONT><FONT color="#0000BB">$b1plot</FONT><FONT color="#007700">
2736 
,</FONT><FONT color="#0000BB">$b2plot</FONT><FONT color="#007700">));
2737 
<BR>
2738 
<BR></FONT><FONT color="#FF8000">//&nbsp;...and&nbsp;add&nbsp;it&nbsp;to&nbsp;the&nbsp;graPH
2739 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
2740 
color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
2741 
$gbplot</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
2742 
</FONT></CODE></DIV></P>
2743 
<P> The following example illustrates this type of graph<DIV class="example">
2744 
<BR> <A href="exframes/frame_example21.html" target="blank"><IMG border="0"
2745 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example21.png" WIDTH="310"></A>
2746 
<BR><B>Figure 40:</B> A grouped bar plot <A href="exframes/frame_example21.html"
2747 
target="blank">[src]</A>&nbsp;
2748 
<P></P>
2749 
</DIV></P>
2750 
<P> There is no limit on the number of plots you may group together.</P>
2751 
<P> If you use the SetWidth() method on the GroupBarPlot() this will
2752 
 affect the total width used by all the added plots. Each individual bar
2753 
 width will be the same for all added bars. The default width for
2754 
 grouped bar is 70%.</P>
2755 
<P> Setting the grouped with to 0.9 would result in the image below.<DIV class="example">
2756 
<BR> <A href="exframes/frame_example22.html" target="blank"><IMG border="0"
2757 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example22.png" WIDTH="310"></A>
2758 
<BR><B>Figure 41:</B> Adjusting the width for a gropued bar plot. <A href="exframes/frame_example22.html"
2759 
target="blank">[src]</A>&nbsp;
2760 
<P></P>
2761 
</DIV></P>
2762 
<P></P>
2763 
<H3><A NAME="7_2_6">7.2.6 Using accumulated bar plots</A></H3>
2764 
<P> The final variety of group bars you can have are accumulated bars.
2765 
 They work in much the same way as accumulated line plots described
2766 
 above. Each plot is stacked on top of each other.</P>
2767 
<P> You create accumulated bar plots in the same way as grouped bar
2768 
 plots by first creating a number of ordinary bar plots that are then
2769 
 aggregated with a call to <A href="../ref/AccBarPlot.html#_ACCBARPLOT_ACCBARPLOT">
2770 
 AccBarPlot();</A></P>
2771 
<P> An example makes this clear. Let's use the same data as in the two
2772 
 examples above but instead of grouping the bars we accumulate (or
2773 
 stack) them. The code would be very similar (actually only one line has
2774 
 to change)<DIV class="example">
2775 
<BR> <A href="exframes/frame_example23.html" target="blank"><IMG border="0"
2776 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example23.png" WIDTH="310"></A>
2777 
<BR><B>Figure 42:</B> Accumulated bar plots <A href="exframes/frame_example23.html"
2778 
target="blank">[src]</A>&nbsp;
2779 
<P></P>
2780 
</DIV></P>
2781 
<P></P>
2782 
<H3><A NAME="7_2_7">7.2.7 Using grouped accumulated bar graphs</A></H3>
2783 
<P> It is perfectly possible to combine the previous bar types to have
2784 
 grouped accumulated bar plots. This is done by just adding the
2785 
 different accumulated plots to a group bar plot, for example the
2786 
 following code would do that.<DIV class="phpscript"><CODE><FONT color="#000000">
2787 
 <FONT color="#0000BB">&nbsp;</FONT><FONT color="#FF8000">
2788 
//&nbsp;Create&nbsp;all&nbsp;the&nbsp;4&nbsp;bar&nbsp;plots
2789 
<BR></FONT><FONT color="#0000BB">$b1plot&nbsp;</FONT><FONT color="#007700">
2790 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">BarPlot</FONT><FONT color="#007700">(</FONT><FONT
2791 
color="#0000BB">$data1y</FONT><FONT color="#007700">);
2792 
<BR></FONT><FONT color="#0000BB">$b1plot</FONT><FONT color="#007700">-&gt;</FONT><FONT
2793 
color="#0000BB">SetFillColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
2794 
&quot;orange&quot;</FONT><FONT color="#007700">);
2795 
<BR></FONT><FONT color="#0000BB">$b2plot&nbsp;</FONT><FONT color="#007700">
2796 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">BarPlot</FONT><FONT color="#007700">(</FONT><FONT
2797 
color="#0000BB">$data2y</FONT><FONT color="#007700">);
2798 
<BR></FONT><FONT color="#0000BB">$b2plot</FONT><FONT color="#007700">-&gt;</FONT><FONT
2799 
color="#0000BB">SetFillColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
2800 
&quot;blue&quot;</FONT><FONT color="#007700">);
2801 
<BR></FONT><FONT color="#0000BB">$b3plot&nbsp;</FONT><FONT color="#007700">
2802 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">BarPlot</FONT><FONT color="#007700">(</FONT><FONT
2803 
color="#0000BB">$data3y</FONT><FONT color="#007700">);
2804 
<BR></FONT><FONT color="#0000BB">$b3plot</FONT><FONT color="#007700">-&gt;</FONT><FONT
2805 
color="#0000BB">SetFillColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
2806 
&quot;green&quot;</FONT><FONT color="#007700">);
2807 
<BR></FONT><FONT color="#0000BB">$b4plot&nbsp;</FONT><FONT color="#007700">
2808 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">BarPlot</FONT><FONT color="#007700">(</FONT><FONT
2809 
color="#0000BB">$data4y</FONT><FONT color="#007700">);
2810 
<BR></FONT><FONT color="#0000BB">$b4plot</FONT><FONT color="#007700">-&gt;</FONT><FONT
2811 
color="#0000BB">SetFillColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
2812 
&quot;brown&quot;</FONT><FONT color="#007700">);
2813 
<BR>
2814 
<BR></FONT><FONT color="#FF8000">//&nbsp;Create&nbsp;the&nbsp;accumulated&nbsp;bar&nbsp;plots
2815 
<BR></FONT><FONT color="#0000BB">$ab1plot&nbsp;</FONT><FONT color="#007700">
2816 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">AccBarPlot</FONT><FONT color="#007700">
2817 
(array(</FONT><FONT color="#0000BB">$b1plot</FONT><FONT color="#007700">
2818 
,</FONT><FONT color="#0000BB">$b2plot</FONT><FONT color="#007700">));
2819 
<BR></FONT><FONT color="#0000BB">$ab2plot&nbsp;</FONT><FONT color="#007700">
2820 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">AccBarPlot</FONT><FONT color="#007700">
2821 
(array(</FONT><FONT color="#0000BB">$b3plot</FONT><FONT color="#007700">
2822 
,</FONT><FONT color="#0000BB">$b4plot</FONT><FONT color="#007700">));
2823 
<BR>
2824 
<BR></FONT><FONT color="#FF8000">//&nbsp;Create&nbsp;the&nbsp;grouped&nbsp;bar&nbsp;plot
2825 
<BR></FONT><FONT color="#0000BB">$gbplot&nbsp;</FONT><FONT color="#007700">
2826 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">GroupBarPlot</FONT><FONT color="#007700">
2827 
(array(</FONT><FONT color="#0000BB">$ab1plot</FONT><FONT color="#007700">
2828 
,</FONT><FONT color="#0000BB">$ab2plot</FONT><FONT color="#007700">));
2829 
<BR>
2830 
<BR></FONT><FONT color="#FF8000">//&nbsp;...and&nbsp;add&nbsp;it&nbsp;to&nbsp;the&nbsp;graph
2831 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
2832 
color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
2833 
$gbplot</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
2834 
</FONT></CODE></DIV></P>
2835 
<P> Putting this together in an example would then produce the graph as
2836 
 shown below<DIV class="example">
2837 
<BR> <A href="exframes/frame_example24.html" target="blank"><IMG border="0"
2838 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example24.png" WIDTH="310"></A>
2839 
<BR><B>Figure 43:</B> Combining grouped and accumulated bar plots <A href="exframes/frame_example24.html"
2840 
target="blank">[src]</A>&nbsp;
2841 
<P></P>
2842 
</DIV></P>
2843 
<P></P>
2844 
<H3><A NAME="7_2_8">7.2.8 Horizontal bar graphs</A></H3>
2845 
<P> It can often come in handy to have horizontal bar graphs especially
2846 
 if you have a large number of values to display. Even though JpGraph
2847 
 doesn't directly support horizontal bar graphs this is easy achieved by
2848 
 constructing a normal vertical bar graph which is then rotated 90
2849 
 degrees.</P>
2850 
<P> The example below shows a simple example of this<DIV class="example">
2851 
<BR> <A href="exframes/frame_horizbarex3.html" target="blank"><IMG border="0"
2852 
HEIGHT="500"         src="img/img/img/img/img/img/img/img/horizbarex3.png" WIDTH="400"></A>
2853 
<BR><B>Figure 44:</B> A typical horizontal bar graph with the Y-axis at
2854 
 the bottom <A href="exframes/frame_horizbarex3.html" target="blank">
2855 
[src]</A>&nbsp;
2856 
<P></P>
2857 
</DIV></P>
2858 
<P></P>
2859 
<P> In order to achieve this effect you should study the above example
2860 
 carefully and you might notice two things</P>
2861 
<UL>
2862 
<LI> We don't simply rotate the graph we also specify that we want the
2863 
 rotation center to be the middle of the entire image. The reason for
2864 
 this is that by default (See the section on rotating plots) the pivot
2865 
 point for rotation is the center of<STRONG> the plot area</STRONG>.
2866 
 Since the center of the plot area is not necessary the center of the
2867 
 entire image the rotation might be a little bit difficult to predict
2868 
 since it will depend on the margins specified. &lt;</LI>
2869 
<LI> The size of the plot area is determined from the original width and
2870 
 height of the image taking the specified margin into account. When the
2871 
 the plot area is rotated 90 degrees clockwise what was the left margin
2872 
 now in effect become the upper margin and so on. This is a small nuance
2873 
 since we conceptually want to specify the margins directly in the
2874 
 rotated plot.
2875 
<BR> In order to more easily handle the margin with rotated images it is
2876 
 recommended that the method &quot;Set90AndMargin()&quot; is used. This allows the
2877 
 image to be rotated as well as specifying the margins in an obvious
2878 
 way.</LI>
2879 
</UL>
2880 
<P> We finally show three more examples of horizontal bar plots. In the
2881 
 first plot we have hidden the Y-axis and in the second we have
2882 
 positioned the Y - axis at top as opposed to the bottom as the first
2883 
 example shows.</P>
2884 
<P><DIV class="example">
2885 
<BR> <A href="exframes/frame_horizbarex1.html" target="blank"><IMG border="0"
2886 
HEIGHT="500"         src="img/img/img/img/img/img/img/img/horizbarex1.png" WIDTH="400"></A>
2887 
<BR><B>Figure 45:</B> Horizontal bar graph with hidden Y axis <A href="exframes/frame_horizbarex1.html"
2888 
target="blank">[src]</A>&nbsp;
2889 
<P></P>
2890 
</DIV></P>
2891 
<P><DIV class="example">
2892 
<BR> <A href="exframes/frame_horizbarex2.html" target="blank"><IMG border="0"
2893 
HEIGHT="500"         src="img/img/img/img/img/img/img/img/horizbarex2.png" WIDTH="400"></A>
2894 
<BR><B>Figure 46:</B> Horizontal bar graph with Y axis at the top <A href="exframes/frame_horizbarex2.html"
2895 
target="blank">[src]</A>&nbsp;
2896 
<P></P>
2897 
</DIV></P>
2898 
<P></P>
2899 
<P> In the final example which is almost similar to the two first we
2900 
 illustrate the use of labels with more than one line.<DIV class="example">
2901 
<BR> <A href="exframes/frame_horizbarex4.html" target="blank"><IMG border="0"
2902 
HEIGHT="500"         src="img/img/img/img/img/img/img/img/horizbarex4.png" WIDTH="400"></A>
2903 
<BR><B>Figure 47:</B> Horizontal bar graph with manual integer scale as
2904 
 well as multiple line labels <A href="exframes/frame_horizbarex4.html" target="blank">
2905 
[src]</A>&nbsp;
2906 
<P></P>
2907 
</DIV></P>
2908 
<P></P>
2909 
<H3><A NAME="7_2_9">7.2.9 Using gradient fill for bar graphs</A></H3>
2910 
<P> It is possible to use color gradient fill for the individual bars in
2911 
 the bar graph.</P>
2912 
<P> Color gradient fill fills a rectangle with a smooth transition
2913 
 between two colors. In what direction the transition goes (from left to
2914 
 right, down and up, from the middle and out etc) is determined by the
2915 
 style of the gradient fill. JpGraph currently supports 8 different
2916 
 styles. All supported styles are displayed in the figure below.<DIV class="example">
2917 
<BR> <A href="exframes/frame_bargradsmallex1.html" target="blank"><IMG border="0"
2918 
HEIGHT="150"         src="img/img/img/img/img/img/img/img/bargradsmallex1.png" WIDTH="200"></A>
2919 
<BR><B>Figure 48:</B> <A href="exframes/frame_bargradsmallex1.html" target="blank">
2920 
[src]</A>&nbsp;
2921 
<P></P>
2922 
</DIV></P>
2923 
<P><DIV class="example">
2924 
<BR> <A href="exframes/frame_bargradsmallex2.html" target="blank"><IMG border="0"
2925 
HEIGHT="150"         src="img/img/img/img/img/img/img/img/bargradsmallex2.png" WIDTH="200"></A>
2926 
<BR><B>Figure 49:</B> <A href="exframes/frame_bargradsmallex2.html" target="blank">
2927 
[src]</A>&nbsp;
2928 
<P></P>
2929 
</DIV></P>
2930 
<P><DIV class="example">
2931 
<BR> <A href="exframes/frame_bargradsmallex3.html" target="blank"><IMG border="0"
2932 
HEIGHT="150"         src="img/img/img/img/img/img/img/img/bargradsmallex3.png" WIDTH="200"></A>
2933 
<BR><B>Figure 50:</B> <A href="exframes/frame_bargradsmallex3.html" target="blank">
2934 
[src]</A>&nbsp;
2935 
<P></P>
2936 
</DIV></P>
2937 
<P><DIV class="example">
2938 
<BR> <A href="exframes/frame_bargradsmallex4.html" target="blank"><IMG border="0"
2939 
HEIGHT="150"         src="img/img/img/img/img/img/img/img/bargradsmallex4.png" WIDTH="200"></A>
2940 
<BR><B>Figure 51:</B> <A href="exframes/frame_bargradsmallex4.html" target="blank">
2941 
[src]</A>&nbsp;
2942 
<P></P>
2943 
</DIV></P>
2944 
<P><DIV class="example">
2945 
<BR> <A href="exframes/frame_bargradsmallex5.html" target="blank"><IMG border="0"
2946 
HEIGHT="150"         src="img/img/img/img/img/img/img/img/bargradsmallex5.png" WIDTH="200"></A>
2947 
<BR><B>Figure 52:</B> <A href="exframes/frame_bargradsmallex5.html" target="blank">
2948 
[src]</A>&nbsp;
2949 
<P></P>
2950 
</DIV></P>
2951 
<P><DIV class="example">
2952 
<BR> <A href="exframes/frame_bargradsmallex6.html" target="blank"><IMG border="0"
2953 
HEIGHT="150"         src="img/img/img/img/img/img/img/img/bargradsmallex6.png" WIDTH="200"></A>
2954 
<BR><B>Figure 53:</B> <A href="exframes/frame_bargradsmallex6.html" target="blank">
2955 
[src]</A>&nbsp;
2956 
<P></P>
2957 
</DIV></P>
2958 
<P><DIV class="example">
2959 
<BR> <A href="exframes/frame_bargradsmallex7.html" target="blank"><IMG border="0"
2960 
HEIGHT="150"         src="img/img/img/img/img/img/img/img/bargradsmallex7.png" WIDTH="200"></A>
2961 
<BR><B>Figure 54:</B> <A href="exframes/frame_bargradsmallex7.html" target="blank">
2962 
[src]</A>&nbsp;
2963 
<P></P>
2964 
</DIV></P>
2965 
<P><DIV class="example">
2966 
<BR> <A href="exframes/frame_bargradsmallex8.html" target="blank"><IMG border="0"
2967 
HEIGHT="150"         src="img/img/img/img/img/img/img/img/bargradsmallex8.png" WIDTH="200"></A>
2968 
<BR><B>Figure 55:</B> <A href="exframes/frame_bargradsmallex8.html" target="blank">
2969 
[src]</A>&nbsp;
2970 
<P></P>
2971 
</DIV></P>
2972 
<P></P>
2973 
<P> To specify a gradient fill for the bar plots you make use of the
2974 
 method <A href="../ref/BarPlot.html#_BARPLOT_SETFILLGRADIENT">
2975 
 BarPlot::SetFillGradient()</A> . See the class reference for details of
2976 
 this function.</P>
2977 
<P> When using gradient fills there are a couple of caveats you should
2978 
 be aware of:</P>
2979 
<UL>
2980 
<LI>gradient filling is computational expensive. Large plots with
2981 
 gradient fill will take in the order of 6 times longer to fill then for
2982 
 a normal one-color fill. This might to some extent be helped by making
2983 
 use of the cache feature of JpGraph so that the graph is only generated
2984 
 a few times.</LI>
2985 
<LI>gradient filling will make use of much more colors (by definition)
2986 
 this will make the color palette for the image bigger and hence make
2987 
 the overall image larger. It might also have some severe effect on
2988 
 using anti-aliased line in the same image as color gradient filling
2989 
 since anti-aliased lines also have the possibility to make use of many
2990 
 colors. Hence the color palette might not be big enough for all the
2991 
 colors you need. So if you use gradient fills you should also be using
2992 
 a true-color image since you otherwise run out of colors.
2993 
<BR> This problem is often seen as that for no apparent reason some
2994 
 color you have specified in the image does appear as another color.
2995 
 (This is not a bug in JpGraph!) This is something to especially watch
2996 
 out for when enabling anti-aliasing since that also uses a lot of
2997 
 colors. Since the numbers of colors used with anti-aliasing depends on
2998 
 the angle on the lines it is impossible to foresee the number of colors
2999 
 used for this.</LI>
3000 
</UL>
3001 
<P></P>
3002 
<H3><A NAME="7_2_10">7.2.10  Creating semi-filled bar graphs</A></H3>
3003 
<P> Semi filled bar graphs are in principle the same as normal filled
3004 
 bar graphs but with the additional feature that you can choose to only
3005 
 fill a specified range (or ranges) of X-coordinates. The figure below
3006 
 illustrates this</P>
3007 
<P><DIV class="example">
3008 
<BR> <A href="exframes/frame_partiallyfilledlineex1.html" target="blank">
3009 
<IMG border="0" HEIGHT="300"         src="img/img/img/img/img/img/img/img/partiallyfilledlineex1.png" WIDTH="400">
3010 
</A>
3011 
<BR><B>Figure 56:</B> Semi-filled line graph <A href="exframes/frame_partiallyfilledlineex1.html"
3012 
target="blank">[src]</A>&nbsp;
3013 
<P></P>
3014 
</DIV></P>
3015 
<P></P>
3016 
<P> In this example we defined two areas along the X-axis to be filled.
3017 
 You can add filled areas by using the method <A href="../ref/LinePlot.html#_LINEPLOT_ADDAREA">
3018 
 AddArea()</A> and specifying range and color for the filled area.</P>
3019 
<H2><A NAME="7_3">7.3 Error plots</A></H2>
3020 
<P> Error plots are used to visually indicate uncertainty in data
3021 
 points. This is done by for each X value by giving both a minimum and a
3022 
 maximum Y-value.</P>
3023 
<P> Before you can use error plots you must remember to include the file
3024 
 &quot;jpgraph_error.php&quot; in your script.</P>
3025 
<P> The following example illustrates a simple error bar. We will have 5
3026 
 points, so we need 10 Y-values. We also would like the error bars to be
3027 
 red and 2 pixels wide. All this is accomplished by creating an <A href="../ref/ErrorPlot.html#_C_ERRORPLOT">
3028 
 ErrorPlot()</A> in much the same way as, for example, a normal line
3029 
 plot. Doing this would now give the example shown below.</P>
3030 
<P><DIV class="example">
3031 
<BR> <A href="exframes/frame_example13.html" target="blank"><IMG border="0"
3032 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example13.png" WIDTH="300"></A>
3033 
<BR><B>Figure 57:</B> A simple error bar <A href="exframes/frame_example13.html"
3034 
target="blank">[src]</A>&nbsp;
3035 
<P></P>
3036 
</DIV></P>
3037 
<P> You might notice that there is one displeasing esthetic quality of
3038 
 this graph. The X-scale is just wide enough to just accompany the
3039 
 number of error bars and hence the first bar is drawn on the Y-axis and
3040 
 the and last bar just at the edge of the plot area. To adjust this you
3041 
 might call the <A href="../ref/Plot.html#_PLOT_SETCENTER"> SetCenter()</A>
3042 
 method which will adjust the X-scale so it does not use the full width
3043 
 of the X-axis.</P>
3044 
<P> The following example illustrates the use of this feature by
3045 
 applying this technique to the previous example<DIV class="example">
3046 
<BR> <A href="exframes/frame_example14.html" target="blank"><IMG border="0"
3047 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example14.png" WIDTH="300"></A>
3048 
<BR><B>Figure 58:</B> Adjusting the X-scale not to use the full width of
3049 
 the X-axis. <A href="exframes/frame_example14.html" target="blank">
3050 
[src]</A>&nbsp;
3051 
<P></P>
3052 
</DIV></P>
3053 
<P></P>
3054 
<H3><A NAME="7_3_1">7.3.1 Using line error plots</A></H3>
3055 
<P> A line error plot is an error plot with the addition that a line is
3056 
 drawn between the average value of each error pair. You use this type
3057 
 of plot the exact same way you would use an error plot. The only change
3058 
 is that you must instantiated an <A href="../ref/ErrorPlot.html#_C_ERRORPLOT">
3059 
 ErrorLinePlot()</A> instead and make sure you have included the
3060 
 &quot;jpgraph_line.php&quot; since the line error plot makes use of the line plot
3061 
 class to stroke the line.</P>
3062 
<P> To control the various properties of the line drawn the &quot;line&quot;
3063 
 property of the error line plot may be accessed. So, for example, if
3064 
 you want the line to be 2 pixels wide and blue you would have to add
3065 
 the following two lines<DIV class="phpscript"><CODE><FONT color="#000000">
3066 
 <FONT color="#0000BB">&nbsp;$elplot</FONT><FONT color="#007700">-&gt;</FONT><FONT
3067 
color="#0000BB">line</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
3068 
SetWeight</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">2</FONT><FONT
3069 
color="#007700">);
3070 
<BR></FONT><FONT color="#0000BB">$elplot</FONT><FONT color="#007700">-&gt;</FONT><FONT
3071 
color="#0000BB">line</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
3072 
SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
3073 
&quot;blue&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
3074 
</FONT></CODE></DIV></P>
3075 
<P>to generate the graph as shown below<DIV class="example">
3076 
<BR> <A href="exframes/frame_example15.html" target="blank"><IMG border="0"
3077 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example15.png" WIDTH="300"></A>
3078 
<BR><B>Figure 59:</B> Linear error plot <A href="exframes/frame_example15.html"
3079 
target="blank">[src]</A>&nbsp;
3080 
<P></P>
3081 
</DIV></P>
3082 
<P> You may of course add legends to none, one or both of the line types
3083 
 in the above graph. So for example if we wanted the legend &quot;Min/Max&quot;
3084 
 for the red error bars and a legend &quot;Average&quot; for the blue line you
3085 
 would have to add the lines<DIV class="phpscript"><CODE><FONT color="#000000">
3086 
 <FONT color="#0000BB">&nbsp;$errplot</FONT><FONT color="#007700">-&gt;</FONT><FONT
3087 
color="#0000BB">SetLegend</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
3088 
&quot;Min/Max&quot;</FONT><FONT color="#007700">);
3089 
<BR></FONT><FONT color="#0000BB">$errplot</FONT><FONT color="#007700">-&gt;</FONT><FONT
3090 
color="#0000BB">line</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
3091 
SetLegend</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
3092 
&quot;Average&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
3093 
</FONT></CODE></DIV></P>
3094 
<P> The resulting graph will now look like (note that we are using the
3095 
 default placement of the legend box)<DIV class="example">
3096 
<BR> <A href="exframes/frame_example16.html" target="blank"><IMG border="0"
3097 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example16.png" WIDTH="300"></A>
3098 
<BR><B>Figure 60:</B> Addding a legend box to the line error plot. <A href="exframes/frame_example16.html"
3099 
target="blank">[src]</A>&nbsp;
3100 
<P></P>
3101 
</DIV></P>
3102 
<P></P>
3103 
<H2><A NAME="7_4">7.4 Scatter plots</A></H2>
3104 
<P> Scatter plots are very simple; they plot a number of points
3105 
 specified by their X- and Y-coordinate. Each point is stroked on the
3106 
 image with a mark as with line plots. The stroked marks can also be
3107 
 connected with an optional line.<DIV class="note"><B>Note:</B> Even
3108 
 though it is only scatter plot that was designed to be used with X,Y
3109 
 plots it is perfectly possible to use use both X,Y coordinates for bar
3110 
 and line plots as well.</DIV></P>
3111 
<P> Even though you would normally supply X-coordinates it is still
3112 
 perfectly possible to use a text-scale for X-coordinates to just
3113 
 enumerate the points. This is especially useful when using the
3114 
 &quot;Impulse&quot; type of scatter plot as is shown below.</P>
3115 
<P> Scatter pots are created by including the jpgraph extension
3116 
 &quot;jpgraph_scatter.php&quot; and then creating an instance of plot type of
3117 
 ScatterPlot(). To specify the mark you want to use you access the mark
3118 
 with the instance variable &quot;mark&quot; in the scatter plot. The default is
3119 
 to use an unfilled small circle.</P>
3120 
<P> To create a scatter plot you will create an instance</P>
3121 
<P> A simple example using just default values will illustrate this</P>
3122 
<P><DIV class="example">
3123 
<BR> <A href="exframes/frame_scatterex1.html" target="blank"><IMG border="0"
3124 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/scatterex1.png" WIDTH="300"></A>
3125 
<BR><B>Figure 61:</B> The simplest possible scatter plot <A href="exframes/frame_scatterex1.html"
3126 
target="blank">[src]</A>&nbsp;
3127 
<P></P>
3128 
</DIV></P>
3129 
<P>We can easily adjust the size and colors for the markers to get
3130 
 another effect as shown below<DIV class="example">
3131 
<BR> <A href="exframes/frame_scatterex2.html" target="blank"><IMG border="0"
3132 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/scatterex2.png" WIDTH="300"></A>
3133 
<BR><B>Figure 62:</B> The simplest possible scatter plot with adjusted
3134 
 marks <A href="exframes/frame_scatterex2.html" target="blank">[src]</A>
3135 
&nbsp;
3136 
<P></P>
3137 
</DIV></P>
3138 
<P> Another possible variant of scatter plot is impulse-scatter plots.
3139 
 This is a variant of normal scatter plot where each mark have a line
3140 
 from the mark to the Y=0 base line. To change a scatter plot into an
3141 
 impulse scatter plot you have to call the method <A href="../ref/ScatterPlot.html#_SCATTERPLOT_SETIMPULS">
3142 
 SetImpuls()</A> on the scatter plot.</P>
3143 
<P> This type of plots are often used to illustrate signals in
3144 
 conjunction with digital signal processing. The following two examples
3145 
 illustrates simple use of impulse plots.<DIV class="example">
3146 
<BR> <A href="exframes/frame_impulsex1.html" target="blank"><IMG border="0"
3147 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/impulsex1.png" WIDTH="300"></A>
3148 
<BR><B>Figure 63:</B> A simple impuls plot <A href="exframes/frame_impulsex1.html"
3149 
target="blank">[src]</A>&nbsp;
3150 
<P></P>
3151 
</DIV></P>
3152 
<P> The next example shows how to modify the color and width of the
3153 
 impulse plot<DIV class="example">
3154 
<BR> <A href="exframes/frame_impulsex2.html" target="blank"><IMG border="0"
3155 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/impulsex2.png" WIDTH="300"></A>
3156 
<BR><B>Figure 64:</B> A modified impuls plot <A href="exframes/frame_impulsex2.html"
3157 
target="blank">[src]</A>&nbsp;
3158 
<P></P>
3159 
</DIV></P>
3160 
<P><DIV class="note"><B>Note:</B> You may draw impulse graphs without
3161 
 any mark by specifying the mark type as (-1) . That way only the
3162 
 impulse lines will be drawn.</DIV></P>
3163 
<P> As a final touch we show two more advanced impulse graphs . In these
3164 
 graphs we have used more advanced formatting for the Y-axis labels as
3165 
 well as adjusted the position of the axis position.<DIV class="example">
3166 
<BR> <A href="exframes/frame_impulsex3.html" target="blank"><IMG border="0"
3167 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/impulsex3.png" WIDTH="400"></A>
3168 
<BR><B>Figure 65:</B> In this imuplsplot we have adjusted the position
3169 
 of the X-axis to the bottom and also added more decimals to the labels
3170 
 on the Y-axis <A href="exframes/frame_impulsex3.html" target="blank">
3171 
[src]</A>&nbsp;
3172 
<P></P>
3173 
</DIV></P>
3174 
<P><DIV class="example">
3175 
<BR> <A href="exframes/frame_impulsex4.html" target="blank"><IMG border="0"
3176 
HEIGHT="250"         src="img/img/img/img/img/img/img/img/impulsex4.png" WIDTH="500"></A>
3177 
<BR><B>Figure 66:</B> In this impuls plot we have also added a lineplot
3178 
 with a dotted line style. <A href="exframes/frame_impulsex4.html" target="blank">
3179 
[src]</A>&nbsp;
3180 
<P></P>
3181 
</DIV></P>
3182 
<P></P>
3183 
<H2><A NAME="7_5">7.5 Field plots</A></H2>
3184 
<P> A variant of scatter plot is the so called<I> Field Plots</I> this
3185 
 is basically a scatter plot where each scatter point is an arrow with a
3186 
 direction between 0 to 359 degrees. This effectively allows the
3187 
 visualization of 3 parameters at each point (x,y,angle). As an
3188 
 additional bonus there is also possible to define a callback for each
3189 
 scatter plot to also define the color for each point.</P>
3190 
<P> To create a field plot you create an instance of <A href="../ref/FieldPlot.html#_C_FIELDPLOT">
3191 
FieldPlot</A> in the same way as you created a normal scatter plot. The
3192 
 arguments to this method are Y-coordinate, X-coordinate and angle. To
3193 
 specify a callback you use <A href="../ref/FieldPlot.html#_FIELDPLOT_SETCALLBACK">
3194 
FieldPlot::SetCallback()</A></P>
3195 
<P> The following example (and code) illustrates the usage of the field
3196 
 plot type.</P>
3197 
<P><DIV class="example">
3198 
<BR> <A href="exframes/frame_fieldscatterex1.html" target="blank"><IMG border="0"
3199 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/fieldscatterex1.png" WIDTH="300"></A>
3200 
<BR><B>Figure 67:</B> Example of the Field plot type <A href="exframes/frame_fieldscatterex1.html"
3201 
target="blank">[src]</A>&nbsp;
3202 
<P></P>
3203 
</DIV></P>
3204 
<P> In addition to the parameters mentioned above you can also adjust
3205 
 both the general size of the arrow and also the specific size of the
3206 
 arrowhead. The arrow size is specified in pixels and the arrow head is
3207 
 specified as an integers between 0 and 10. These sizes are specified
3208 
 with a call to <A href="../ref/FieldArrow.html#_FIELDARROW_SETSIZE">
3209 
FieldPlot::arrow::SetSize()</A></P>
3210 
<H2><A NAME="7_6">7.6 Box and Stock charts</A></H2>
3211 
<P> JpGraph offers two variation on what is usually known as stock
3212 
 charts, candle-charts or box plot.</P>
3213 
<H3><A NAME="7_6_1">7.6.1  Stock Charts</A></H3>
3214 
<P> Stock charts is used to display data values where one is interested
3215 
 in 4 different values for each data point. This could for example be
3216 
 used to display a stocks open,close, min and max value during a
3217 
 specific day. Hence the name Stock chart (or Stock plot).</P>
3218 
<P> The figure below illustrates a sample Stock chart plot<DIV class="example">
3219 
<BR> <A href="exframes/frame_stockex1.html" target="blank"><IMG border="0"
3220 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/stockex1.png" WIDTH="300"></A>
3221 
<BR><B>Figure 68:</B> A simple stock plot <A href="exframes/frame_stockex1.html"
3222 
target="blank">[src]</A>&nbsp;
3223 
<P></P>
3224 
</DIV></P>
3225 
<P> For this type of plot the Y-data array must be consist of a number
3226 
 of quadruples of data where each quadruple consists of
3227 
 (open,close,min,max). The open and close values determine the min max
3228 
 for the middle bar and the min,max determine the end points of the
3229 
 &quot;error-lines&quot; at the top and bottom of of each bar.</P>
3230 
<P> Note that the data follows the following rules</P>
3231 
<UL>
3232 
<LI> min &lt; max</LI>
3233 
<LI> min &lt; min(open.close)</LI>
3234 
<LI> max &gt; max(open,close)</LI>
3235 
</UL>
3236 
<P> To separate the two cases where &quot;open &gt; close&quot; or &quot;open &lt; close &quot;
3237 
 different colors are used. These colors are specified with the <A href="../ref/StockPlot.html#_STOCKPLOT_SETCOLOR">
3238 
SetColor()</A> method. By default a positive bar (close &gt; open) have a
3239 
 fill color of white and for the negative case where (close &lt; open) the
3240 
 bars have a red color.</P>
3241 
<P> You can specify the width of the bar by setting the width (in
3242 
 pixels) with a call to the method <A href="../ref/StockPlot.html#_STOCKPLOT_SETWIDTH">
3243 
SetWidth()</A></P>
3244 
<P> The final variation of stock plots you can have is to determine
3245 
 whether or not the end point for the min,max lines should have the
3246 
 horizontal line marking the end of the line or not. This can be
3247 
 adjusted with a call to method <A href="../ref/StockPlot.html#_STOCKPLOT_HIDEENDLINES">
3248 
HideEndLine()</A>.</P>
3249 
<H3><A NAME="7_6_2">7.6.2 BoxPLots : Stock charts with a median line</A></H3>
3250 
<P> A minor variation of stock charts is the &quot;BoxPlot()&quot; this is almost
3251 
 the same as StockPlot() but with the very small difference that in
3252 
 addition to the open,close,min, max values you also specify a median
3253 
 value . The median lies between the open and close value and is
3254 
 illustrated as a horizontal line within the bar.<DIV class="example">
3255 
<BR> <A href="exframes/frame_boxstockex1.html" target="blank"><IMG border="0"
3256 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/boxstockex1.png" WIDTH="300"></A>
3257 
<BR><B>Figure 69:</B> A simple box type stock plot <A href="exframes/frame_boxstockex1.html"
3258 
target="blank">[src]</A>&nbsp;
3259 
<P></P>
3260 
</DIV></P>
3261 
<P> You may modify the median line color for positive and negative data
3262 
 points / bars by using the <A href="../ref/BoxPlot.html#_BOXPLOT_SETMEDIANCOLOR">
3263 
SetMedianColor()</A> method.</P>
3264 
<H3><A NAME="7_6_3">7.6.3 Image maps for Box and Stock charts</A></H3>
3265 
<P> In the same way as for other plots you may associate an image map
3266 
 with these plots. The &quot;hot&quot; area for each plot is the mid &quot;bar&quot;
3267 
 section. In the same way as other plot types you use the <A href="../ref/Plot.html#_PLOT_SETCSIMTARGETS">
3268 
 SetCSIMTargets()</A> to set the URLs you want to use.</P>
3269 
<P> These plot types, though normally used without explicit X-values,
3270 
 can of course handle a supplied X-coordinate array without any problem.</P>
3271 
<H2><A NAME="7_7">7.7 Combining different graph types</A></H2>
3272 
<P> It is perfectly legal to add several different plot types to the
3273 
 same graph. It is therefore possible to mix line plots with (for
3274 
 example) filled bar graphs. What you should keep in mind doing this is
3275 
 the order in which these plots are stroked to the image since a later
3276 
 stroke will overwrite a previous one. All plots are stroked in the
3277 
 order you add them, i.e. the first plot added will be stroked first.
3278 
 You can therefore control which plot is placed in the background and
3279 
 which one is placed in the foreground by the order you add them to the
3280 
 plot.</P>
3281 
<P> To start simple we just mix a filled line plot with a non-filled
3282 
 line plot as the following example shows.</P>
3283 
<P><DIV class="example">
3284 
<BR> <A href="exframes/frame_example16.1.html" target="blank"><IMG border="0"
3285 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example16.1.png" WIDTH="400"></A>
3286 
<BR><B>Figure 70:</B> Mixing filled and non-filled line plots in the
3287 
 same graph <A href="exframes/frame_example16.1.html" target="blank">
3288 
[src]</A>&nbsp;
3289 
<P></P>
3290 
</DIV></P>
3291 
<P></P>
3292 
<P> Let's now go to something a little bit more complicated. How to mix
3293 
 bar and line graphs. Let's just take one of our previous bar graphs and
3294 
 add a line plot to it and see what happens.</P>
3295 
<P><DIV class="example">
3296 
<BR> <A href="exframes/frame_example16.2.html" target="blank"><IMG border="0"
3297 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example16.2.png" WIDTH="400"></A>
3298 
<BR><B>Figure 71:</B> Adding a line to a bar graph <A href="exframes/frame_example16.2.html"
3299 
target="blank">[src]</A>&nbsp;
3300 
<P></P>
3301 
</DIV></P>
3302 
<P>Not too bad. But we can't see the line so we change the order in
3303 
 which we add the lines to the graph and sees what happens.<DIV class="example">
3304 
<BR> <A href="exframes/frame_example16.3.html" target="blank"><IMG border="0"
3305 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example16.3.png" WIDTH="400"></A>
3306 
<BR><B>Figure 72:</B> Adding a line to a bar graph, in different orderv2
3307 
 <A href="exframes/frame_example16.3.html" target="blank">[src]</A>&nbsp;
3308 
<P></P>
3309 
</DIV></P>
3310 
<P></P>
3311 
<P> If you want the line points to be aligned in the center of the bars
3312 
 you can accomplish this is two ways.</P>
3313 
<P> If you use a text scale then you need to call the <A href="../ref/LinePlot.html#_LINEPLOT_SETBARCENTER">
3314 
 LinePlot::SetBarCenter()</A><DIV class="example">
3315 
<BR> <A href="exframes/frame_linebarcentex1.html" target="blank"><IMG border="0"
3316 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/linebarcentex1.png" WIDTH="400"></A>
3317 
<BR><B>Figure 73:</B> Centering the line point in the middle of the bars
3318 
 using LinePlot::SetBarCenter() <A href="exframes/frame_linebarcentex1.html"
3319 
target="blank">[src]</A>&nbsp;
3320 
<P></P>
3321 
</DIV></P>
3322 
<P></P>
3323 
<P> You can also use an integer scale. This places<STRONG> both</STRONG>
3324 
 the bar and the line points centered at the tick marks. As the
3325 
 following example will show</P>
3326 
<P><DIV class="example">
3327 
<BR> <A href="exframes/frame_example16.4.html" target="blank"><IMG border="0"
3328 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example16.4.png" WIDTH="400"></A>
3329 
<BR><B>Figure 74:</B> Using a linear scale <A href="exframes/frame_example16.4.html"
3330 
target="blank">[src]</A>&nbsp;
3331 
<P></P>
3332 
</DIV></P>
3333 
<P><DIV class="note"><B>Note:</B> In this example we also have
3334 
 illustrated the fact that it is possible to add text labels to a linear
3335 
 (or integer) scales as well.</DIV></P>
3336 
<P> As a final example we show how you can combine a scatter plot and a
3337 
 line plot which could be used to illustrate a regression line fitting.<DIV
3338 
class="example">
3339 
<BR> <A href="exframes/frame_example16.6.html" target="blank"><IMG border="0"
3340 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example16.6.png" WIDTH="300"></A>
3341 
<BR><B>Figure 75:</B> Combining a scatter plot and a line plot <A href="exframes/frame_example16.6.html"
3342 
target="blank">[src]</A>&nbsp;
3343 
<P></P>
3344 
</DIV></P>
3345 
<P></P>
3346 
<H2><A NAME="7_8">7.8 Specifying the scale manually</A></H2>
3347 
<P> Normally the automatic scaling should be doing an adequate job in
3348 
 most circumstances but there might be cases where you like to manually
3349 
 set the scale. For example if you have several graphs where you like to
3350 
 be able to easily compare them and therefore want them all to have the
3351 
 same scale.</P>
3352 
<P> To specify a manual scale you have to add arguments to the standard <A
3353 
href="../ref/Graph.html#_GRAPH_SETSCALE"> Graph::SetScale()</A> method.
3354 
 So to specify that you want an Y-scale between 0 and 100 you need to
3355 
 write<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
3356 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
3357 
SetScale</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
3358 
&quot;textlin&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">0</FONT><FONT
3359 
color="#007700">,</FONT><FONT color="#0000BB">100</FONT><FONT color="#007700">
3360 
);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
3361 
<P>When you specify a scale manually there is one additional thing you
3362 
 need to decide. How the tick marks should be positioned. You have three
3363 
 choices</P>
3364 
<OL>
3365 
<LI> Let JpGraph decide suitable tick marks honoring the exact scale you
3366 
 specified.<B> This is the default behavior</B> if you don't do anything
3367 
 else.</LI>
3368 
<LI> Allow JpGraph to slightly adjust your specified min and max values.
3369 
 With the default method, depending on the min and max values, the end
3370 
 and start of the scale might not fall on an exact tick mark. For
3371 
 esthetic reasons you might still want the last/first tick mark to fall
3372 
 on the edges of the scale. By calling <A href="../ref/LinearScale.html#_LINEARSCALE_SETAUTOTICKS">
3373 
 LinearScale::SetAutoTicks()</A> you tell JpGraph to make the smallest
3374 
 necessary adjustment of the end/start points so that they fall on an
3375 
 exact tick mark.</LI>
3376 
<LI> Manually specify the tick marks with a call to <A href="../ref/LinearTicks.html#_LINEARTICKS_SET">
3377 
 LinearTicks::Set()</A> For example<DIV class="phpscript"><CODE><FONT color="#000000">
3378 
 <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
3379 
color="#0000BB">SetScale</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
3380 
&quot;textlin&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">0</FONT><FONT
3381 
color="#007700">,</FONT><FONT color="#0000BB">100</FONT><FONT color="#007700">
3382 
);
3383 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
3384 
color="#0000BB">yscale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
3385 
ticks</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">Set</FONT><FONT
3386 
color="#007700">(</FONT><FONT color="#0000BB">10</FONT><FONT color="#007700">
3387 
,</FONT><FONT color="#0000BB">5</FONT><FONT color="#007700">);</FONT><FONT
3388 
color="#0000BB"></FONT></FONT></CODE></DIV>
3389 
<P>Will set the major tick marks every at 0,10,20,.. And every minor
3390 
 tick mark in between (0,5,10,15,20,25,...).</P>
3391 
</LI>
3392 
</OL>
3393 
<P> The three images below illustrates the difference between the
3394 
 possibilities of ticks for a manual scale.<DIV class="example">
3395 
<BR> <A href="exframes/frame_manscaleex1.html" target="blank"><IMG border="0"
3396 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/manscaleex1.png" WIDTH="220"></A>
3397 
<BR><B>Figure 76:</B> Manual scale, manual ticks major=7 minor=2 <A href="exframes/frame_manscaleex1.html"
3398 
target="blank">[src]</A>&nbsp;
3399 
<P></P>
3400 
</DIV></P>
3401 
<P></P>
3402 
<P><DIV class="example">
3403 
<BR> <A href="exframes/frame_manscaleex4.html" target="blank"><IMG border="0"
3404 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/manscaleex4.png" WIDTH="220"></A>
3405 
<BR><B>Figure 77:</B> Manual scale, automatic ticks with exact limits <A href="exframes/frame_manscaleex4.html"
3406 
target="blank">[src]</A>&nbsp;
3407 
<P></P>
3408 
</DIV></P>
3409 
<P></P>
3410 
<P><DIV class="example">
3411 
<BR> <A href="exframes/frame_manscaleex2.html" target="blank"><IMG border="0"
3412 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/manscaleex2.png" WIDTH="220"></A>
3413 
<BR><B>Figure 78:</B> Manual scale, automatic ticks where we allow
3414 
 adjustments of the limits <A href="exframes/frame_manscaleex2.html" target="blank">
3415 
[src]</A>&nbsp;
3416 
<P></P>
3417 
</DIV></P>
3418 
<P></P>
3419 
<H2><A NAME="7_9">7.9 Adjusting the automatic tick marks</A></H2>
3420 
<P> You can adjust the automatic tick marks by telling JpGraph how dense
3421 
 you want them to be. You use the <A href="../ref/Graph.html#_GRAPH_SETTICKDENSITY">
3422 
 Graph::SetTickDensity()</A> method. You can set the density setting in
3423 
 four steps</P>
3424 
<UL>
3425 
<LI> TICKD_VERYSPARSE, Very few ticks</LI>
3426 
<LI> TICKD_SPARSE, Few ticks</LI>
3427 
<LI> TICKD_NORMAL, Standard number of ticks</LI>
3428 
<LI> TICKD_DENSE, Large number of ticks</LI>
3429 
</UL>
3430 
<P> Taking the previous example with the manual scale but automatic
3431 
 ticks and using a denser ticks setting gives the following result<DIV class="example">
3432 
<BR> <A href="exframes/frame_manscaleex3.html" target="blank"><IMG border="0"
3433 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/manscaleex3.png" WIDTH="250"></A>
3434 
<BR><B>Figure 79:</B> Manual scale with automatic ticks but with a
3435 
 denser tick settings. <A href="exframes/frame_manscaleex3.html" target="blank">
3436 
[src]</A>&nbsp;
3437 
<P></P>
3438 
</DIV></P>
3439 
<P></P>
3440 
<H2><A NAME="7_10">7.10 Handling date/time scales</A></H2>
3441 
<P> With date/time scale we refer to the plotting of data where the
3442 
 independent variable (X-axis) de-nominates a time value. This could for
3443 
 example be the temperature measured in intervals during a day.</P>
3444 
<P> From version 1.18 and onwards there are two principal ways of
3445 
 handling date/time scales. The manual way and fully automatic using the
3446 
 special &quot;dat&quot; scale. For most cases the automatic &quot;dat&quot; scale is the
3447 
 preferred choice but in rare circumstances it might be more appropriate
3448 
 to use the manual way since it gives slightly more control (but not
3449 
 that much) of the overall handling of scales.</P>
3450 
<P> To be able to use a date/time scale at all we will assume that the
3451 
 data points are represented by both an X coordinate (time-value) and a
3452 
 Y-value (anything else wouldn't make sense).</P>
3453 
<P> We first start by describing the use of the &quot;dat&quot; scale.</P>
3454 
<H3><A NAME="7_10_1">7.10.1 Using the automatic date/time scale</A></H3>
3455 
<P> The easiest way to get a date time scale for the X-axis is to use
3456 
 the pre-defined &quot;dat&quot; scale. To be able to use that it is first
3457 
 necessary to include the module<I> &quot;jpgraph_date.php&quot;</I> and the
3458 
 specify the scale, for example as &quot;datlin&quot; in the call to<I> SetScale()</I>
3459 
 as the following code snippet shows.<DIV class="phpscript"><CODE><FONT color="#000000">
3460 
 <FONT color="#0000BB">&nbsp;</FONT><FONT color="#007700">require_once(</FONT><FONT
3461 
color="#DD0000">&quot;../jpgraph.php&quot;</FONT><FONT color="#007700">);
3462 
<BR>require_once(</FONT><FONT color="#DD0000">&quot;../jpgraph_line.php&quot;</FONT><FONT
3463 
color="#007700">);
3464 
<BR>require_once(</FONT><FONT color="#DD0000">&quot;../jpgraph_date.php&quot;</FONT><FONT
3465 
color="#007700">);
3466 
<BR>...
3467 
<BR></FONT><FONT color="#0000BB">$graph&nbsp;</FONT><FONT color="#007700">
3468 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">Graph</FONT><FONT color="#007700">(</FONT><FONT
3469 
color="#0000BB">540</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
3470 
300</FONT><FONT color="#007700">);
3471 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
3472 
color="#0000BB">SetScale</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
3473 
'datlin'</FONT><FONT color="#007700">);
3474 
<BR>...</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
3475 
<P> The above code snippet would create a date/linear scale for the
3476 
 graph. We will first show a basic use of the date scale and then go on
3477 
 to illustrate how it is possible to tailor the exact formatting of the
3478 
 date axis.</P>
3479 
<P> When using the fully automatic formatting the library will use the
3480 
 shortest possible string that uniquely identifieas a date/time. For
3481 
 example if the entire intervall falls within the same day only the time
3482 
 values will be displayed, if the intervall falls over several days then
3483 
 also the date will be added to the label.</P>
3484 
<P> As usual it is also possible to manually force a certain label
3485 
 formatting to be used this is illustrated below.</P>
3486 
<H4>7.10.1.1 Specifying the input data</H4>
3487 
<P> The first basic example below creates a data set that emulates a
3488 
 sample rate every S second and falls over a total period of two days.
3489 
 It is important to note that the input data on the X-axis must be a in
3490 
 the form of timestamp data, i.e. the number of seconds from the system
3491 
 epoch. In PHP the current timestamp value is returned by the function<I>
3492 
 time()</I>.</P>
3493 
<P> This means that it is always mandatory to specify two input vectors
3494 
 for a plot. For example to specify a line plot<DIV class="phpscript"><CODE>
3495 
<FONT color="#000000"> <FONT color="#0000BB">&nbsp;$line&nbsp;</FONT><FONT color="#007700">
3496 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">LinePlot</FONT><FONT color="#007700">
3497 
(</FONT><FONT color="#0000BB">$data</FONT><FONT color="#007700">,</FONT><FONT
3498 
color="#0000BB">$xdata</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB">
3499 
</FONT></FONT></CODE></DIV></P>
3500 
<P> The example below show this in practice<DIV class="example">
3501 
<BR> <A href="exframes/frame_dateaxisex2.html" target="blank"><IMG border="0"
3502 
HEIGHT="300"         src="img/img/img/img/img/img/img/img/dateaxisex2.png" WIDTH="540"></A>
3503 
<BR><B>Figure 80:</B> Using the special date X-axis with all default
3504 
 values <A href="exframes/frame_dateaxisex2.html" target="blank">[src]</A>
3505 
&nbsp;
3506 
<P></P>
3507 
</DIV></P>
3508 
<P> Please review the script (by following the [src] link) that creates
3509 
 this graph before continuing since we will base all further examples on
3510 
 the above example.</P>
3511 
<H4>7.10.1.2 Adjusting the start and end alignment</H4>
3512 
<P> As can be seen from the above example the scale starts slightly
3513 
 before the first data point. Why? This is of course by purpose in order
3514 
 to make the first time label to start on an &quot;even&quot; value, in this case
3515 
 on an hour. Depending on the entire interval of the graph the start
3516 
 value will always be chosen to be the largest &quot;even&quot; time value, this
3517 
 could for example be on an even minute, even 30min, even hour, even
3518 
 day, even week and so on.</P>
3519 
<P> The alignment of the start (and end) vdate alignment can also be
3520 
 adjusted manually by using the two methods</P>
3521 
<UL>
3522 
<LI><I> SetTimeAlign($aStartAlign,$aEndAlign)</I></LI>
3523 
<LI><I> SetDateAlign($aStartAlign,$aEndAlign)</I></LI>
3524 
</UL>
3525 
<P> These method allow the alignment to be made by specifying one of the
3526 
 following constants.</P>
3527 
<P> For the SetTimeAlign() the following symbolic constants can be used</P>
3528 
<OL>
3529 
<LI> Alignment on seconds
3530 
<UL>
3531 
<LI> MINADJ_1, Align on a single second (This is the lowest resolution)</LI>
3532 
<LI> MINADJ_5, Align on the nearest 5 seconds</LI>
3533 
<LI> MINADJ_10, Align on the nearest 10 seconds</LI>
3534 
<LI> MINADJ_15, Align on the nearest 15 seconds</LI>
3535 
<LI> MINADJ_30, Align on the nearest 30 seconds</LI>
3536 
</UL>
3537 
</LI>
3538 
<LI> Alignment on minutes
3539 
<UL>
3540 
<LI> MINADJ_1, Align to the nearest minute</LI>
3541 
<LI> MINADJ_5, Align on the nearest 5 minutes</LI>
3542 
<LI> MINADJ_10, Align on the nearest 10 minutes</LI>
3543 
<LI> MINADJ_15, Align on the nearest 15 minutes</LI>
3544 
<LI> MINADJ_30, Align on the nearest 30 minutes</LI>
3545 
</UL>
3546 
</LI>
3547 
<LI> Alignment on hours
3548 
<UL>
3549 
<LI> HOURADJ_1, Align to the nearest hour</LI>
3550 
<LI> HOURADJ_2, Align to the nearest two hour</LI>
3551 
<LI> HOURADJ_3, Align to the nearest three hour</LI>
3552 
<LI> HOURADJ_4, Align to the nearest four hour</LI>
3553 
<LI> HOURADJ_6, Align to the nearest six hour</LI>
3554 
<LI> HOURADJ_12, Align to the nearest tolw hour</LI>
3555 
</UL>
3556 
</LI>
3557 
</OL>
3558 
<P> For the<I> SetDateAlign()</I> the following symbolic constants can
3559 
 be used</P>
3560 
<OL>
3561 
<LI> Alignment on a day basis
3562 
<UL>
3563 
<LI> DAYADJ_1, Align on the start of a day</LI>
3564 
<LI> DAYADJ_7, Align on the start of a week</LI>
3565 
<LI> DAYADJ_WEEK, Synonym to DAYADJ_7</LI>
3566 
</UL>
3567 
</LI>
3568 
<LI> Alignment on a monthly basis
3569 
<UL>
3570 
<LI> MONTHADJ_1, Align on a month start</LI>
3571 
<LI> MONTHADJ_6, Align on the start of halfyear</LI>
3572 
</UL>
3573 
</LI>
3574 
<LI> Alignment on a yearly basis
3575 
<UL>
3576 
<LI> YEARADJ_1, Align on a year</LI>
3577 
<LI> YEARADJ_2, Align on a bi-yearly basis</LI>
3578 
<LI> YEARADJ_5, Align on a 5 year basis</LI>
3579 
</UL>
3580 
</LI>
3581 
</OL>
3582 
<P> Some examples will calrify the use of these methods.</P>
3583 
<P><B> Example 1.</B> We want the time adjustment to start on an even
3584 
 quarter of an hour, i.e. an even 15 minute period.<DIV class="phpscript">
3585 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
3586 
-&gt;</FONT><FONT color="#0000BB">xaxis</FONT><FONT color="#007700">-&gt;</FONT><FONT
3587 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
3588 
SetTimeAlign</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
3589 
MINADJ_15</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
3590 
</FONT></CODE></DIV></P>
3591 
<P></P>
3592 
<P><B> Example 2.</B> We want the time to start on an even 2 hour<DIV class="phpscript">
3593 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
3594 
-&gt;</FONT><FONT color="#0000BB">xaxis</FONT><FONT color="#007700">-&gt;</FONT><FONT
3595 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
3596 
SetTimeAlign</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
3597 
HOURADJ_2</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
3598 
</FONT></CODE></DIV></P>
3599 
<P></P>
3600 
<P><B> Example 3.</B> We want the start to be on an even day<DIV class="phpscript">
3601 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
3602 
-&gt;</FONT><FONT color="#0000BB">xaxis</FONT><FONT color="#007700">-&gt;</FONT><FONT
3603 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
3604 
SetDateAlign</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
3605 
DAYADJ_1</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
3606 
</FONT></CODE></DIV></P>
3607 
<P></P>
3608 
<H4>7.10.1.3 Adjusting the label format</H4>
3609 
<P> The default label format always tries to use the shortest possible
3610 
 unique string. To manually set a manual scale the method<I>
3611 
 SetDateFormat()</I> is used for example as in<DIV class="phpscript"><CODE>
3612 
<FONT color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
3613 
-&gt;</FONT><FONT color="#0000BB">xaxis</FONT><FONT color="#007700">-&gt;</FONT><FONT
3614 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
3615 
SetDateFormat</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
3616 
'H:i'</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT>
3617 
</CODE></DIV></P>
3618 
<P>The above example will force the labels to be displayed as hour (24h)
3619 
 and minutes.<DIV class="example">
3620 
<BR> <A href="exframes/frame_dateaxisex4.html" target="blank"><IMG border="0"
3621 
HEIGHT="300"         src="img/img/img/img/img/img/img/img/dateaxisex4.png" WIDTH="540"></A>
3622 
<BR><B>Figure 81:</B> Using specific label format and align time axis to
3623 
 start and end on an even 10min <A href="exframes/frame_dateaxisex4.html"
3624 
target="blank">[src]</A>&nbsp;
3625 
<P></P>
3626 
</DIV></P>
3627 
<P></P>
3628 
<H4>7.10.1.4 Adjusting the date scale density</H4>
3629 
<P> As with the linear scale it is possible to indicate what density of
3630 
 scale ticks is needed. This is specified as usual with a call to<I>
3631 
 Graph::SetTickDensity()</I><DIV class="phpscript"><CODE><FONT color="#000000">
3632 
 <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
3633 
color="#0000BB">SetTickDensity</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
3634 
TICKD_DENSE</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
3635 
</FONT></CODE></DIV></P>
3636 
<P></P>
3637 
<H3><A NAME="7_10_2">7.10.2 Specifying a date/time scale with a manual
3638 
 call-back</A></H3>
3639 
<P> In the following we will assume that all data points are specified
3640 
 by a tuple where the date/time is specified as a timestamp in second in
3641 
 the same format as is returned by the PHP function time().</P>
3642 
<P> The trick here is to use a label formatting callback routine which
3643 
 gets called to format each label on the scale.</P>
3644 
<P> What we do is that we specify that the X-scale should be an ordinary
3645 
 &quot;int&quot; scale (remember that the data values are timestamps which are
3646 
 integers). We then install our custom label callback (with a call to <A href="../ref/Axis.html#_AXIS_SETLABELFORMATCALLBACK">
3647 
 SetLabelFormatCallback()</A>) which given a timestamp formats it to a
3648 
 suitable human readable form. In our example we will use the PHP
3649 
 function Date() for this purpose.</P>
3650 
<P> The callback we use will be<DIV class="phpscript"><CODE><FONT color="#000000">
3651 
 <FONT color="#0000BB">&nbsp;</FONT><FONT color="#FF8000">
3652 
//&nbsp;The&nbsp;callback&nbsp;that&nbsp;converts&nbsp;timestamp&nbsp;to&nbsp;minutes&nbsp;and&nbsp;seconds
3653 
<BR></FONT><FONT color="#007700">function&nbsp;</FONT><FONT color="#0000BB">
3654 
TimeCallback</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
3655 
$aVal</FONT><FONT color="#007700">)&nbsp;{
3656 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;</FONT><FONT color="#0000BB">Date</FONT><FONT color="#007700">
3657 
(</FONT><FONT color="#DD0000">'H:i:s'</FONT><FONT color="#007700">,</FONT><FONT
3658 
color="#0000BB">$aVal</FONT><FONT color="#007700">);
3659 
<BR>}</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
3660 
<P> Using some random data we can now generate the following graph<DIV class="example">
3661 
<BR> <A href="exframes/frame_dateaxisex1.html" target="blank"><IMG border="0"
3662 
HEIGHT="250"         src="img/img/img/img/img/img/img/img/dateaxisex1.png" WIDTH="324"></A>
3663 
<BR><B>Figure 82:</B> Example on how to format an axis to hold a
3664 
 date/time scale using and integer scale and a callback routine <A href="exframes/frame_dateaxisex1.html"
3665 
target="blank">[src]</A>&nbsp;
3666 
<P></P>
3667 
</DIV></P>
3668 
<P> In the above example we have specified the X-scale manually to make
3669 
 sure that the min/max values on the X-axis exactly matches the min/max
3670 
 x-data values.</P>
3671 
<P> SetLabelFormatCallback() will be called for each of the displayed
3672 
 labels and the argument passed on to the supplied function is the
3673 
 default label that the library is assigning that specific label.</P>
3674 
<P> This means that if the data to be displayed is based on, for
3675 
 example, timestamps which are given in seconds the displayed value
3676 
 might not be aligned to how time/date values normally should be
3677 
 displayed.</P>
3678 
<P> Using integer scales this will not work very well since the library
3679 
 determines label positions to be at even positions (e.g. every 2,5,10,
3680 
 20,50,100 etc) to suit the auto-scaling since the library will assume
3681 
 that the data is integers and not timestamp values.</P>
3682 
<P> The best way to solve this is to use an integer X-scale together
3683 
 with a a callback function with a manually specified scale. In order to
3684 
 setup the scale a bit of manually work is needed. Depending on the data
3685 
 to be displayed one should ensure that the scale starts and ends at
3686 
 suitable times and that the tick interval chosen fits with an even
3687 
 multiple of minutes, hours, days or what is best suited for the time
3688 
 range that is to be displayed.</P>
3689 
<P> The following code example illustrates this. It creates some &quot;fake&quot;
3690 
 data that is assumed to be sampled time based data and sets up some
3691 
 suitable scales and tick interval. This script may be used as a basis
3692 
 for more advanced handling of the time data.<DIV class="phpscript">
3693 
(File: timestampex01.php)
3694 
<BR><CODE><FONT color="#000000"> <FONT color="#0000BB">&lt;?php
3695 
<BR></FONT><FONT color="#FF8000">
3696 
//&nbsp;Example&nbsp;on&nbsp;how&nbsp;to&nbsp;treat&nbsp;and&nbsp;format&nbsp;timestamp&nbsp;as&nbsp;human&nbsp;readable&nbsp;labels
3697 
<BR></FONT><FONT color="#007700">require_once(</FONT><FONT color="#DD0000">
3698 
&quot;../jpgraph.php&quot;</FONT><FONT color="#007700">);
3699 
<BR>require_once(</FONT><FONT color="#DD0000">&quot;../jpgraph_line.php&quot;</FONT><FONT
3700 
color="#007700">);
3701 
<BR>
3702 
<BR></FONT><FONT color="#FF8000">//&nbsp;Number&nbsp;of&nbsp;&quot;fake&quot;&nbsp;data&nbsp;points
3703 
<BR></FONT><FONT color="#0000BB">DEFINE</FONT><FONT color="#007700">(</FONT><FONT
3704 
color="#DD0000">'NDATAPOINTS'</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
3705 
500</FONT><FONT color="#007700">);
3706 
<BR>
3707 
<BR></FONT><FONT color="#FF8000">
3708 
//&nbsp;Assume&nbsp;data&nbsp;points&nbsp;are&nbsp;sample&nbsp;every&nbsp;10th&nbsp;second
3709 
<BR></FONT><FONT color="#0000BB">DEFINE</FONT><FONT color="#007700">(</FONT><FONT
3710 
color="#DD0000">'SAMPLERATE'</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
3711 
10</FONT><FONT color="#007700">);&nbsp;
3712 
<BR>
3713 
<BR></FONT><FONT color="#FF8000">
3714 
//&nbsp;Callback&nbsp;formatting&nbsp;function&nbsp;for&nbsp;the&nbsp;X-scale&nbsp;to&nbsp;convert&nbsp;timestamps
3715 
<BR>//&nbsp;to&nbsp;hour&nbsp;and&nbsp;minutes.
3716 
<BR></FONT><FONT color="#007700">function&nbsp;</FONT><FONT color="#0000BB">
3717 
TimeCallback</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
3718 
$aVal</FONT><FONT color="#007700">)&nbsp;{
3719 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;</FONT><FONT color="#0000BB">Date</FONT><FONT color="#007700">
3720 
(</FONT><FONT color="#DD0000">'H:i'</FONT><FONT color="#007700">,&nbsp;</FONT><FONT
3721 
color="#0000BB">$aVal</FONT><FONT color="#007700">);
3722 
<BR>}
3723 
<BR>
3724 
<BR></FONT><FONT color="#FF8000">//&nbsp;Get&nbsp;start&nbsp;time
3725 
<BR></FONT><FONT color="#0000BB">$start&nbsp;</FONT><FONT color="#007700">=&nbsp;</FONT><FONT
3726 
color="#0000BB">time</FONT><FONT color="#007700">();
3727 
<BR></FONT><FONT color="#FF8000">
3728 
//&nbsp;Set&nbsp;the&nbsp;start&nbsp;time&nbsp;to&nbsp;be&nbsp;on&nbsp;the&nbsp;closest&nbsp;minute&nbsp;just&nbsp;before&nbsp;the&nbsp;&quot;start&quot;&nbsp;timestamp
3729 
<BR></FONT><FONT color="#0000BB">$adjstart&nbsp;</FONT><FONT color="#007700">
3730 
=&nbsp;</FONT><FONT color="#0000BB">floor</FONT><FONT color="#007700">(</FONT><FONT
3731 
color="#0000BB">$start&nbsp;</FONT><FONT color="#007700">/&nbsp;</FONT><FONT color="#0000BB">
3732 
60</FONT><FONT color="#007700">);
3733 
<BR>
3734 
<BR></FONT><FONT color="#FF8000">
3735 
//&nbsp;Create&nbsp;a&nbsp;data&nbsp;set&nbsp;in&nbsp;range&nbsp;(20,100)&nbsp;and&nbsp;X-positions
3736 
<BR>
3737 
//&nbsp;We&nbsp;also&nbsp;apply&nbsp;a&nbsp;simple&nbsp;low&nbsp;pass&nbsp;filter&nbsp;on&nbsp;the&nbsp;data&nbsp;to&nbsp;make&nbsp;it&nbsp;less
3738 
<BR>//&nbsp;random&nbsp;and&nbsp;a&nbsp;little&nbsp;smoother
3739 
<BR></FONT><FONT color="#0000BB">$data&nbsp;</FONT><FONT color="#007700">
3740 
=&nbsp;array();
3741 
<BR></FONT><FONT color="#0000BB">$xdata&nbsp;</FONT><FONT color="#007700">
3742 
=&nbsp;array();
3743 
<BR></FONT><FONT color="#0000BB">$data</FONT><FONT color="#007700">[</FONT><FONT
3744 
color="#0000BB">0</FONT><FONT color="#007700">]&nbsp;=&nbsp;</FONT><FONT color="#0000BB">
3745 
rand</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">20</FONT><FONT
3746 
color="#007700">,</FONT><FONT color="#0000BB">100</FONT><FONT color="#007700">
3747 
);
3748 
<BR></FONT><FONT color="#0000BB">$xdata</FONT><FONT color="#007700">[</FONT><FONT
3749 
color="#0000BB">0</FONT><FONT color="#007700">]&nbsp;=&nbsp;</FONT><FONT color="#0000BB">
3750 
$adjstart</FONT><FONT color="#007700">;
3751 
<BR>for(&nbsp;</FONT><FONT color="#0000BB">$i</FONT><FONT color="#007700">=</FONT><FONT
3752 
color="#0000BB">1</FONT><FONT color="#007700">;&nbsp;</FONT><FONT color="#0000BB">
3753 
$i&nbsp;</FONT><FONT color="#007700">&lt;&nbsp;</FONT><FONT color="#0000BB">
3754 
NDATAPOINTS</FONT><FONT color="#007700">;&nbsp;++</FONT><FONT color="#0000BB">
3755 
$i&nbsp;</FONT><FONT color="#007700">)&nbsp;{
3756 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$data</FONT><FONT color="#007700">[</FONT><FONT
3757 
color="#0000BB">$i</FONT><FONT color="#007700">]&nbsp;=&nbsp;</FONT><FONT color="#0000BB">
3758 
rand</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">20</FONT><FONT
3759 
color="#007700">,</FONT><FONT color="#0000BB">100</FONT><FONT color="#007700">
3760 
)*</FONT><FONT color="#0000BB">0.2&nbsp;</FONT><FONT color="#007700">+&nbsp;</FONT><FONT
3761 
color="#0000BB">$data</FONT><FONT color="#007700">[</FONT><FONT color="#0000BB">
3762 
$i</FONT><FONT color="#007700">-</FONT><FONT color="#0000BB">1</FONT><FONT
3763 
color="#007700">]*</FONT><FONT color="#0000BB">0.8</FONT><FONT color="#007700">
3764 
;
3765 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$xdata</FONT><FONT color="#007700">
3766 
[</FONT><FONT color="#0000BB">$i</FONT><FONT color="#007700">]&nbsp;=&nbsp;</FONT><FONT
3767 
color="#0000BB">$adjstart&nbsp;</FONT><FONT color="#007700">+&nbsp;</FONT><FONT color="#0000BB">
3768 
$i&nbsp;</FONT><FONT color="#007700">*&nbsp;</FONT><FONT color="#0000BB">
3769 
SAMPLERATE</FONT><FONT color="#007700">;
3770 
<BR>}
3771 
<BR>
3772 
<BR></FONT><FONT color="#FF8000">
3773 
//&nbsp;Assume&nbsp;that&nbsp;the&nbsp;data&nbsp;points&nbsp;represents&nbsp;data&nbsp;that&nbsp;is&nbsp;sampled&nbsp;every&nbsp;10s
3774 
<BR>//&nbsp;when&nbsp;determing&nbsp;the&nbsp;end&nbsp;value&nbsp;on&nbsp;the&nbsp;scale.&nbsp;We&nbsp;also&nbsp;add&nbsp;some&nbsp;extra
3775 
<BR>//&nbsp;length&nbsp;to&nbsp;end&nbsp;on&nbsp;an&nbsp;even&nbsp;label&nbsp;tick.
3776 
<BR></FONT><FONT color="#0000BB">$adjend&nbsp;</FONT><FONT color="#007700">=&nbsp;</FONT><FONT
3777 
color="#0000BB">$adjstart&nbsp;&nbsp;</FONT><FONT color="#007700">+&nbsp;(</FONT><FONT color="#0000BB">
3778 
NDATAPOINTS</FONT><FONT color="#007700">+</FONT><FONT color="#0000BB">10</FONT><FONT
3779 
color="#007700">)*</FONT><FONT color="#0000BB">10</FONT><FONT color="#007700">
3780 
;
3781 
<BR>
3782 
<BR></FONT><FONT color="#0000BB">$graph&nbsp;</FONT><FONT color="#007700">
3783 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">Graph</FONT><FONT color="#007700">(</FONT><FONT
3784 
color="#0000BB">500</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
3785 
250</FONT><FONT color="#007700">);
3786 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
3787 
color="#0000BB">SetMargin</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
3788 
40</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">20</FONT><FONT
3789 
color="#007700">,</FONT><FONT color="#0000BB">30</FONT><FONT color="#007700">
3790 
,</FONT><FONT color="#0000BB">50</FONT><FONT color="#007700">);
3791 
<BR>
3792 
<BR></FONT><FONT color="#FF8000">
3793 
//&nbsp;Now&nbsp;specify&nbsp;the&nbsp;X-scale&nbsp;explicit&nbsp;but&nbsp;let&nbsp;the&nbsp;Y-scale&nbsp;be&nbsp;auto-scaled
3794 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
3795 
color="#0000BB">SetScale</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
3796 
&quot;intlin&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">0</FONT><FONT
3797 
color="#007700">,</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">
3798 
,</FONT><FONT color="#0000BB">$adjstart</FONT><FONT color="#007700">,</FONT><FONT
3799 
color="#0000BB">$adjend</FONT><FONT color="#007700">);
3800 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
3801 
color="#0000BB">title</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
3802 
Set</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
3803 
&quot;Example&nbsp;on&nbsp;TimeStamp&nbsp;Callback&quot;</FONT><FONT color="#007700">);
3804 
<BR>
3805 
<BR></FONT><FONT color="#FF8000">
3806 
//&nbsp;Setup&nbsp;the&nbsp;callback&nbsp;and&nbsp;adjust&nbsp;the&nbsp;angle&nbsp;of&nbsp;the&nbsp;labels
3807 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
3808 
color="#0000BB">xaxis</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
3809 
SetLabelFormatCallback</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
3810 
'TimeCallback'</FONT><FONT color="#007700">);
3811 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
3812 
color="#0000BB">xaxis</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
3813 
SetLabelAngle</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
3814 
90</FONT><FONT color="#007700">);
3815 
<BR>
3816 
<BR></FONT><FONT color="#FF8000">
3817 
//&nbsp;Set&nbsp;the&nbsp;labels&nbsp;every&nbsp;5min&nbsp;(i.e.&nbsp;300seconds)&nbsp;and&nbsp;minor&nbsp;ticks&nbsp;every&nbsp;minute
3818 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
3819 
color="#0000BB">xaxis</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
3820 
scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">ticks</FONT><FONT
3821 
color="#007700">-&gt;</FONT><FONT color="#0000BB">Set</FONT><FONT color="#007700">
3822 
(</FONT><FONT color="#0000BB">300</FONT><FONT color="#007700">,</FONT><FONT
3823 
color="#0000BB">60</FONT><FONT color="#007700">);
3824 
<BR>
3825 
<BR></FONT><FONT color="#0000BB">$line&nbsp;</FONT><FONT color="#007700">
3826 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">LinePlot</FONT><FONT color="#007700">
3827 
(</FONT><FONT color="#0000BB">$data</FONT><FONT color="#007700">,</FONT><FONT
3828 
color="#0000BB">$xdata</FONT><FONT color="#007700">);
3829 
<BR></FONT><FONT color="#0000BB">$line</FONT><FONT color="#007700">-&gt;</FONT><FONT
3830 
color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
3831 
'lightblue'</FONT><FONT color="#007700">);
3832 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
3833 
color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
3834 
$line</FONT><FONT color="#007700">);
3835 
<BR>
3836 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
3837 
color="#0000BB">Stroke</FONT><FONT color="#007700">();
3838 
<BR></FONT><FONT color="#0000BB">?&gt;
3839 
<BR></FONT></FONT></CODE></DIV></P>
3840 
<H2><A NAME="7_11">7.11 Adjusting labels on a text scale</A></H2>
3841 
<P> In the following section we will work through an number of examples
3842 
 on how to manipulate labels on a text scale. Primarily we will
3843 
 investigate how to best handle the case where you have a large number
3844 
 of values.</P>
3845 
<P> As a remainder; Text scale is meant to be used on the X-axis when
3846 
 the X-axis doesn't have a numeric value, i.e you are only interested in
3847 
 linear ordering of the data. If you don't specify the labels manually
3848 
 they will be set automatically starting from 1 as the example below
3849 
 shows.</P>
3850 
<P><DIV class="example">
3851 
<BR> <A href="exframes/frame_bartutex1.html" target="blank"><IMG border="0"
3852 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/bartutex1.png" WIDTH="300"></A>
3853 
<BR><B>Figure 83:</B> A simple bar plot using an automatic text scale <A href="exframes/frame_bartutex1.html"
3854 
target="blank">[src]</A>&nbsp;
3855 
<P></P>
3856 
</DIV></P>
3857 
<P></P>
3858 
<P> To specify the labels on the X-axis as suitable text strings you
3859 
 call the method <A href="../ref/Axis.html#_AXIS_SETTICKLABELS">
3860 
 Axis::SetTickLabels()</A> with an array containing the text-labels. If
3861 
 there are more data points than labels the non-specified labels will be
3862 
 given their ordinal number. If we augment the previous example with the
3863 
 name of the month we get the following new example</P>
3864 
<P><DIV class="example">
3865 
<BR> <A href="exframes/frame_bartutex2.html" target="blank"><IMG border="0"
3866 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/bartutex2.png" WIDTH="300"></A>
3867 
<BR><B>Figure 84:</B> Manually specifying the text scale labels <A href="exframes/frame_bartutex2.html"
3868 
target="blank">[src]</A>&nbsp;
3869 
<P></P>
3870 
</DIV></P>
3871 
<P></P>
3872 
<P></P>
3873 
<HR> <SMALL><STRONG> Tip:</STRONG> To get hold of localized version of
3874 
 the month names (or weekdays) you can use the <A href="../ref/DateLocale.html#_C_DATELOCALE">
3875 
 DateLocal</A> class available in the global variable $gDateLocale If no
3876 
 locale has been specified the default locale for the installation will
3877 
 be used.</SMALL>
3878 
<HR>
3879 
<P> What happen now if we have a larger number of bars? Let's try with
3880 
 25 bars and see what result we get.</P>
3881 
<P><DIV class="example">
3882 
<BR> <A href="exframes/frame_bartutex3.html" target="blank"><IMG border="0"
3883 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/bartutex3.png" WIDTH="300"></A>
3884 
<BR><B>Figure 85:</B> A larger data set <A href="exframes/frame_bartutex3.html"
3885 
target="blank">[src]</A>&nbsp;
3886 
<P></P>
3887 
</DIV></P>
3888 
<P></P>
3889 
<P> Not all to impressive. The labels are to close and they overlap.
3890 
 Hence it is not a good idea to display every label. To adjust what
3891 
 labels are to be displayed you use the <A href="../ref/Axis.html#_AXIS_SETTEXTLABELINTERVAL">
3892 
 SetTextLabelInterval()</A> method. The argument to this method is the
3893 
 interval between text labels. So to display only every 3 month you
3894 
 would add the line</P>
3895 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
3896 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">xaxis</FONT><FONT
3897 
color="#007700">-&gt;</FONT><FONT color="#0000BB">SetTextLabelIntervall</FONT><FONT
3898 
color="#007700">(</FONT><FONT color="#0000BB">3</FONT><FONT color="#007700">
3899 
)</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
3900 
<P></P>
3901 
<P> Which would give the result shown below<DIV class="example">
3902 
<BR> <A href="exframes/frame_bartutex4.html" target="blank"><IMG border="0"
3903 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/bartutex4.png" WIDTH="300"></A>
3904 
<BR><B>Figure 86:</B> Displaying only every third label <A href="exframes/frame_bartutex4.html"
3905 
target="blank">[src]</A>&nbsp;
3906 
<P></P>
3907 
</DIV></P>
3908 
<P></P>
3909 
<P> Much better, quite readable.</P>
3910 
<P> If we have an even larger data set it might not longer be meaningful
3911 
 to display all the tick marks since they would simple become to close.
3912 
 In JpGraph there is a possibility to specify that you only would like
3913 
 every<I> n</I>:th tick mark to be visible ( <A href="../ref/Axis.html#_AXIS_SETTEXTTICKINTERVAL">
3914 
 SetTextTickIntervall()</A> ). For bar graphs using text scale however,
3915 
 that might not be such a good idea since the tick marks are between the
3916 
 bars and the labels centered under the bars. If we only were to
3917 
 display, say, every 3 tick mark it wouldn't look to good. Not that we
3918 
 can't do it, as the example below shows, but it just doesn't look very
3919 
 good.<DIV class="example">
3920 
<BR> <A href="exframes/frame_bartutex5.html" target="blank"><IMG border="0"
3921 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/bartutex5.png" WIDTH="300"></A>
3922 
<BR><B>Figure 87:</B> Displaying just every third tick mark. <A href="exframes/frame_bartutex5.html"
3923 
target="blank">[src]</A>&nbsp;
3924 
<P></P>
3925 
</DIV></P>
3926 
<P></P>
3927 
<P> A better way to handle large data set is simply to hide the tick
3928 
 marks all together. Tick marks may be hidden by calling the method <A href="../ref/Axis.html#_AXIS_HIDETICKS">
3929 
 Axis::HideTicks(); <A> If we hide all the ticks on the X-axis we will
3930 
 get the result shown below<DIV class="example">
3931 
<BR> <A href="exframes/frame_bartutex6.html" target="blank"><IMG border="0"
3932 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/bartutex6.png" WIDTH="300"></A>
3933 
<BR><B>Figure 88:</B> Hiding all tick mark. <A href="exframes/frame_bartutex6.html"
3934 
target="blank">[src]</A>&nbsp;
3935 
<P></P>
3936 
</DIV></A></A></P>
3937 
<P></P>
3938 
<H2><A NAME="7_12">7.12 Adding arbitrary text strings to the graph</A></H2>
3939 
<P> To add clarification or other information text strings to the graph
3940 
 you can add arbitrary lines of text anywhere you like onto the graph.
3941 
 The text might have multiple lines and you can choose the paragraph
3942 
 alignment.</P>
3943 
<P> To add text you have to create one or more instances of the <A href="../ref/Text.html#_C_TEXT">
3944 
 Text()</A> object and then add the text object to the graph with the <A href="../ref/Graph.html#_GRAPH_ADDTEXT">
3945 
 AddText()</A> method.</P>
3946 
<P> The position of these text boxes are given as fraction of the width
3947 
 and height of the graph. When you are positioning these text boxes you
3948 
 might also choose what part of the text box should be considered the
3949 
 anchor point for the position you specify.</P>
3950 
<P> By default the anchor point is the upper left corner of the bounding
3951 
 box for the text.</P>
3952 
<P> To show some ways of positioning the text we use a very simple bar
3953 
 graph not to distract from the text. We first just add a single text
3954 
 line with most of the settings their default value by adding the
3955 
 following lines to the graph<DIV class="phpscript"><CODE><FONT color="#000000">
3956 
 <FONT color="#0000BB">&nbsp;$txt</FONT><FONT color="#007700">=new&nbsp;</FONT><FONT
3957 
color="#0000BB">Text</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
3958 
&quot;This&nbsp;is&nbsp;a&nbsp;text&quot;</FONT><FONT color="#007700">);
3959 
<BR></FONT><FONT color="#0000BB">$txt</FONT><FONT color="#007700">-&gt;</FONT><FONT
3960 
color="#0000BB">Pos</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
3961 
0</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">0</FONT><FONT
3962 
color="#007700">);
3963 
<BR></FONT><FONT color="#0000BB">$txt</FONT><FONT color="#007700">-&gt;</FONT><FONT
3964 
color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
3965 
&quot;red&quot;</FONT><FONT color="#007700">);
3966 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
3967 
color="#0000BB">AddText</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
3968 
$txt</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT>
3969 
</CODE></DIV></P>
3970 
<P> The result is shown below.<DIV class="example">
3971 
<BR> <A href="exframes/frame_example25.html" target="blank"><IMG border="0"
3972 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example25.png" WIDTH="300"></A>
3973 
<BR><B>Figure 89:</B> Adding a single text string in the upper left
3974 
 corner <A href="exframes/frame_example25.html" target="blank">[src]</A>
3975 
&nbsp;
3976 
<P></P>
3977 
</DIV></P>
3978 
<P>Not too exiting. Let's make it more interesting by having a
3979 
 background color, using larger fonts and framing the text box and
3980 
 adding a drop shadow to the text box by using the methods <A href="../ref/Text.html#_TEXT_SETBOX">
3981 
 SetBox()</A> and <A href="../ref/Text.html#_TEXT_SETSHADOW"> SetBox()</A><DIV
3982 
class="example">
3983 
<BR> <A href="exframes/frame_example25.1.html" target="blank"><IMG border="0"
3984 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example25.1.png" WIDTH="300"></A>
3985 
<BR><B>Figure 90:</B> Making the text more interesting <A href="exframes/frame_example25.1.html"
3986 
target="blank">[src]</A>&nbsp;
3987 
<P></P>
3988 
</DIV></P>
3989 
<P> That's better. Now we get some attention. If you want to add a text
3990 
 with several lines you just need to separate the lines with a newline
3991 
 ('\n' character). The default paragraph alignment is left edge but you
3992 
 can also use right and center alignment.</P>
3993 
<P> As an illustration let's add a couple of more lines to the previous
3994 
 text, center the text box in the middle of the graph and also use
3995 
 centered paragraph alignment for the text. To adjust the paragraph
3996 
 alignment of the text you have to use the <A href="../ref/Text.html#_TEXT_PARAGRAPHALIGN">
3997 
 Text::ParagraphAlign()</A><DIV class="example">
3998 
<BR> <A href="exframes/frame_example25.2.html" target="blank"><IMG border="0"
3999 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example25.2.png" WIDTH="300"></A>
4000 
<BR><B>Figure 91:</B> Text with multiple lines and centered paragraph
4001 
 alignment <A href="exframes/frame_example25.2.html" target="blank">
4002 
[src]</A>&nbsp;
4003 
<P></P>
4004 
</DIV></P>
4005 
<P> Of course there is no limit to the number of text string you can add
4006 
 to the graph.</P>
4007 
<P> From version 1.12 it is also possible to add text strings to a graph
4008 
 using the scale coordinates instead. This is accomplished by using the <A
4009 
href="../ref/Text.html#_TEXT_SETSCALEPOS"> Text::SetScalePos()</A> Which
4010 
 is completely analog to SetPos() with the only difference that the
4011 
 positions given are interpretated as scale values instead of fractions
4012 
 of the width and height.</P>
4013 
<H2><A NAME="7_13">7.13 Adding titles and footers to the Graph</A></H2>
4014 
<P> Each graph can have up to three different titles accessed by the
4015 
 three properties</P>
4016 
<OL>
4017 
<LI> title</LI>
4018 
<LI> subtitle</LI>
4019 
<LI> subsubtitle</LI>
4020 
</OL>
4021 
<P> All of these three properties is a standard text object which means
4022 
 that you can have individual font, colors, margins and sizes of these
4023 
 tree titles.</P>
4024 
<P> The only thing you need to think of is that you probably want to add
4025 
 some extra margin to make room for the titles (using <A href="../ref/Graph.html#_GRAPH_SETMARGIN">
4026 
 Graph::SetMargin()</A> )</P>
4027 
<P> The individual positioning of these titles are done automatically
4028 
 and will adjust to the font size being used.</P>
4029 
<P> If you for, esthetic reasons, would like increase the distance from
4030 
 the top where the title is positioned (or the intra distance between
4031 
 title and sub title) you can use the <A href="../ref/Text.html#_TEXT_SETMARGIN">
4032 
 Text::SetMargin()</A> method. For example the line</P>
4033 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
4034 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">title</FONT><FONT
4035 
color="#007700">-&gt;</FONT><FONT color="#0000BB">SetMargin</FONT><FONT color="#007700">
4036 
(</FONT><FONT color="#0000BB">20</FONT><FONT color="#007700">);</FONT><FONT
4037 
color="#0000BB"></FONT></FONT></CODE></DIV></P>
4038 
<P>will set the distance between the top of the title string and the top
4039 
 of the graph to 20 pixels. If you instead call the SetMargin() method
4040 
 for the subtitle it will adjust the distance between the top of the
4041 
 subtitle and the bottom of the title.</P>
4042 
<P> The titles will be positioned at the top and be centered in the
4043 
 graph. Each of these titles may have multiple lines each separated by a
4044 
 &quot;\n&quot; (newline) character. By default the paragraph alignment for each
4045 
 title is centered but may of course be changed (using the
4046 
 ParagraphAlign()) method.</P>
4047 
<P> Each graph can also have a footer. This footer is actually three
4048 
 footers. Left, center and right. The 'left' footer is aligned to the
4049 
 left, the 'center' at the bottom center and the right to the right.</P>
4050 
<P> Each of these three positions is a standard Text object which means
4051 
 you can change color, font and size as you please individually on each
4052 
 of these footer positions.</P>
4053 
<P> You access the footer through the Graph::footer property as the
4054 
 following example shows</P>
4055 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
4056 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
4057 
footer</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">left</FONT><FONT
4058 
color="#007700">-&gt;</FONT><FONT color="#0000BB">Set</FONT><FONT color="#007700">
4059 
(</FONT><FONT color="#DD0000">&quot;(C)&nbsp;2002&nbsp;KXY&quot;</FONT><FONT color="#007700">
4060 
);
4061 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
4062 
color="#0000BB">footer</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
4063 
center</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">Set</FONT><FONT
4064 
color="#007700">(</FONT><FONT color="#DD0000">&quot;CONFIDENTIAL&quot;</FONT><FONT color="#007700">
4065 
);
4066 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
4067 
color="#0000BB">footer</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
4068 
center</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
4069 
SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">&quot;red&quot;</FONT><FONT
4070 
color="#007700">);
4071 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
4072 
color="#0000BB">footer</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
4073 
center</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
4074 
SetFont</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
4075 
FF_FONT2</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
4076 
FS_BOLD</FONT><FONT color="#007700">);
4077 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
4078 
color="#0000BB">footer</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
4079 
right</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">Set</FONT><FONT
4080 
color="#007700">(</FONT><FONT color="#DD0000">&quot;19&nbsp;Aug&nbsp;2002&quot;</FONT><FONT color="#007700">
4081 
);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
4082 
<P><DIV class="note"><B>Note:</B> If you enable the brand timing
4083 
 argument you should leave the left footer empty.</DIV></P>
4084 
<H2><A NAME="7_14">7.14 Adding a tab title</A></H2>
4085 
<P> A variant of the titles is the<I> tab title</I>. This is just
4086 
 another option you have of putting a name on the graph. The appearance
4087 
 of this type is a tab on top of the plot area with text inside.</P>
4088 
<P> You can access the tab using the 'tabtitle' property of the graph.</P>
4089 
<P> The following figure shows an example of how this can look.<DIV class="example">
4090 
<BR> <A href="exframes/frame_tabtitleex1.html" target="blank"><IMG border="0"
4091 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/tabtitleex1.png" WIDTH="300"></A>
4092 
<BR><B>Figure 92:</B> Using the tabbed title style <A href="exframes/frame_tabtitleex1.html"
4093 
target="blank">[src]</A>&nbsp;
4094 
<P></P>
4095 
</DIV></P>
4096 
<P> As usual you have full freedom to specify font and colors for this
4097 
 type of title. Please see the class reference regarding <A href="../ref/GraphTabTitle.html#_C_GRAPHTABTITLE">
4098 
GraphTabTitle()</A> for more information.</P>
4099 
<H2><A NAME="7_15">7.15 Using background images</A></H2>
4100 
<P> Instead of having a single color background you can easily have an
4101 
 arbitrary image as the background. The image may be in either PNG, JPG
4102 
 or GIF format depending on what your installation supports.</P>
4103 
<P></P>
4104 
<HR> <SMALL>
4105 
<P><STRONG> A note on GD:</STRONG> If you are using GD 2.xx you must
4106 
 make sure that the define USE_TRUECOLOR is set to true. This is also
4107 
 the default. Failure to do so in combination with GD 2.xx will make the
4108 
 background image just look like a solid black square.</P>
4109 
</SMALL>
4110 
<HR>
4111 
<P> To use a specific image as the background you just have to use the
4112 
 method <A href="../ref/Graph.html#_GRAPH_SETBACKGROUNDIMAGE">
4113 
 Graph::SetBackgroundImage()</A> The arguments specify file-name, how
4114 
 the image should be positioned in the graph and finally the format of
4115 
 the image (if it is in JPG, PNG or GIF) format. If the format is
4116 
 specified as &quot;auto&quot; (the default) then the appropriate image format
4117 
 will be determined from the extension of the image file.</P>
4118 
<P> The file name is of course obvious but the second argument might not
4119 
 be. This arguments determine how the image should be copied onto the
4120 
 graph image. You can specify three different variants here</P>
4121 
<OL>
4122 
<LI> BGIMG_ COPY This will just copy the image unchanged onto the graph
4123 
 from the top left corner.</LI>
4124 
<LI> BGIMG_CENTER This will just copy the image unchanged onto the graph
4125 
 but it will center the image in the graph.</LI>
4126 
<LI> BGIMG_FILLFRAME This will scale the image to exactly fit the whole
4127 
 graph image.</LI>
4128 
<LI> BGIMG_FILLPLOT This will scale the image to exactly fit just the
4129 
 plot area of the graph.</LI>
4130 
</OL>
4131 
<P></P>
4132 
<P></P>
4133 
<HR><STRONG> The following section only applies to palette based images.
4134 
 True color images can NOT be manipulated this way. Applying the
4135 
 following sections to true-color images will have no affect.</STRONG>
4136 
<HR>
4137 
<P> You might often find yourself wanting to use a background image as a
4138 
 &quot;waterstamp&quot;. This usually means taking the original image, import it
4139 
 to some image editing program and then &quot;bleaching&quot; the color
4140 
 saturation, reducing the contrast and so on. Finally you save the
4141 
 modified image which you then use as a background image.</P>
4142 
<P> This whole process can be automatically accomplished in JpGraph by
4143 
 using the method <A href="../ref/Graph.html#_GRAPH_ADJBACKGROUNDIMAGE">
4144 
 Graph::AdjBackgroundImage()</A> which allow you to adjust color
4145 
 saturation, brightness and contrast of the background image.</P>
4146 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
4147 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
4148 
AdjBackgroundImage</FONT><FONT color="#007700">(...)</FONT><FONT color="#0000BB">
4149 
</FONT></FONT></CODE></DIV></P>
4150 
<P></P>
4151 
<P> to achieve the &quot;watercolor&quot; effect to avoid the image being too
4152 
 intrusive in the graph.<DIV class="example">
4153 
<BR> <A href="exframes/frame_backgroundex03.html" target="blank"><IMG border="0"
4154 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/backgroundex03.png" WIDTH="400"></A>
4155 
<BR><B>Figure 93:</B> Example on using a watermark type background image
4156 
 <A href="exframes/frame_backgroundex03.html" target="blank">[src]</A>&nbsp;
4157 
<P></P>
4158 
</DIV></P>
4159 
<P><DIV class="note"><B>Note:</B> The background image depicts a 1998
4160 
 Triumph Tiger. This bike is a 900cc off-road bike.</DIV></P>
4161 
<H2><A NAME="7_16">7.16 Using a background gradient</A></H2>
4162 
<P> In addition to the background image you can also add a background
4163 
 color gradient. This gradient can be covering the entire graph, just
4164 
 the plot area or just the margins. This flexibility allows you to
4165 
 combine a background image with a background color gradient. You can
4166 
 for example use a background image in the plot area and a color
4167 
 gradient out in the margins.</P>
4168 
<P> You specify a color gradient background by calling the <A href="../ref/Graph.html#_GRAPH_SETBACKGROUNDGRADIENT">
4169 
 Graph::SetBackgroundGradient()</A> method. All details are available in
4170 
 the class reference (follow the link above). We finally give a quick
4171 
 example on what kind of effect you can achieve using this feature.<DIV class="example">
4172 
<BR> <A href="exframes/frame_gradbkgex1.html" target="blank"><IMG border="0"
4173 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/gradbkgex1.png" WIDTH="300"></A>
4174 
<BR><B>Figure 94:</B> Using a background color gradient with the
4175 
 SetBackgroundGradient() method <A href="exframes/frame_gradbkgex1.html" target="blank">
4176 
[src]</A>&nbsp;
4177 
<P></P>
4178 
</DIV></P>
4179 
<P></P>
4180 
<P> Finally we like to mention that in the &quot;/utils/misc/&quot; directory you
4181 
 will find a small utility script called &quot;mkgrad.php&quot;. Running this
4182 
 script presents you with a UI that makes it a breeze to create a
4183 
 gradient image on it's own.</P>
4184 
<P> The UI for the utility is so obvious that we won't discuss it
4185 
 further, we just show it below. <IMG alt="The UI for the mkgrad.php utility"
4186 
        src="img/img/img/img/img/img/img/img/"><I> The UI for the mkgrad.php utility</I></P>
4187 
<P> In the example below this utility is used to get a more interesting
4188 
 plot area.</P>
4189 
<P><DIV class="example">
4190 
<BR> <A href="exframes/frame_inyaxisex2.html" target="blank"><IMG border="0"
4191 
HEIGHT="300"         src="img/img/img/img/img/img/img/img/inyaxisex2.png" WIDTH="400"></A>
4192 
<BR><B>Figure 95:</B> Example of the use of a gradient background <A href="exframes/frame_inyaxisex2.html"
4193 
target="blank">[src]</A>&nbsp;
4194 
<P></P>
4195 
</DIV></P>
4196 
<P></P>
4197 
<H2><A NAME="7_17">7.17 Using callbacks for Plot marks</A></H2>
4198 
<P> An interesting enhancement when using Plotmarks is the possibility
4199 
 to add a callback function to control the size and color of the
4200 
 plotmarks.</P>
4201 
<P> This callback function will get called with the current Y-value (for
4202 
 the plotmark) as it's argument. As return value the callback function
4203 
 must return an array containing three (possible null) values. The
4204 
 values returned must be</P>
4205 
<OL>
4206 
<LI> Plot mark Weight</LI>
4207 
<LI> Plot mark Color</LI>
4208 
<LI> Plot mark Fill color</LI>
4209 
</OL>
4210 
<P> The exact meaning of the parameters will of course depend on the
4211 
 type of plot marks being used.</P>
4212 
<P> The callback must be a global function and is installed with a call
4213 
 to <A href="../ref/PlotMark.html#_PLOTMARK_SETCALLBACK">
4214 
 PlotMark::SetCallback()</A></P>
4215 
<P> So for example to install a callback that changes the fill color for
4216 
 all marks with a (Y) value higher than 90 you could add the lines</P>
4217 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
4218 
&nbsp;</FONT><FONT color="#007700">function&nbsp;</FONT><FONT color="#0000BB">
4219 
MarkCallback</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
4220 
$aVal</FONT><FONT color="#007700">)&nbsp;{
4221 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;if(&nbsp;</FONT><FONT color="#0000BB">$aVal&nbsp;</FONT><FONT color="#007700">
4222 
&gt;&nbsp;</FONT><FONT color="#0000BB">90</FONT><FONT color="#007700">)&nbsp;
4223 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$fcolor</FONT><FONT color="#007700">
4224 
=</FONT><FONT color="#DD0000">&quot;red&quot;
4225 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#007700">else
4226 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$fcolor</FONT><FONT color="#007700">
4227 
=</FONT><FONT color="#DD0000">&quot;&quot;</FONT><FONT color="#007700">;
4228 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;array(</FONT><FONT color="#DD0000">&quot;&quot;</FONT><FONT color="#007700">
4229 
,</FONT><FONT color="#DD0000">&quot;&quot;</FONT><FONT color="#007700">,</FONT><FONT
4230 
color="#0000BB">$fcolor</FONT><FONT color="#007700">);
4231 
<BR>}
4232 
<BR>...
4233 
<BR></FONT><FONT color="#0000BB">$plot</FONT><FONT color="#007700">-&gt;</FONT><FONT
4234 
color="#0000BB">mark</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
4235 
SetCallback</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
4236 
&quot;MarkCallback&quot;</FONT><FONT color="#007700">);
4237 
<BR>...</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
4238 
<P></P>
4239 
<P> As you can see in the above example we have left some of the return
4240 
 values blank. Doing this will just ignore any change of these value and
4241 
 use the global settings for the plotmarks.</P>
4242 
<P> If you also let the (Y) value affect the size of the plot marks you
4243 
 can get what is sometimes known as a &quot;balloon plot&quot;. The example below
4244 
 is basically a scatter plot that uses filled circles to mark the
4245 
 points. A format callback is then used to change the color and size
4246 
 depending on the Y-value for each plot.</P>
4247 
<P><DIV class="example">
4248 
<BR> <A href="exframes/frame_balloonex1.html" target="blank"><IMG border="0"
4249 
HEIGHT="300"         src="img/img/img/img/img/img/img/img/balloonex1.png" WIDTH="400"></A>
4250 
<BR><B>Figure 96:</B> Creating a balloon plot by using plot mark
4251 
 callback function <A href="exframes/frame_balloonex1.html" target="blank">
4252 
[src]</A>&nbsp;
4253 
<P></P>
4254 
</DIV></P>
4255 
<P></P>
4256 
<H2><A NAME="7_18">7.18 Rotating graphs 90 degrees</A></H2>
4257 
<P> In section <A href="7adv.html#10_2">10.2</A> you can read about
4258 
 arbitrary rotation of the graphs. For most practical purposes rotation
4259 
 of 90 degrees is most useful. This could for example be used to plot
4260 
 horizontal bar graphs.</P>
4261 
<P> The slight complication with general rotation is that the margins
4262 
 also rotates, this means that if you rotate a graph 90 degrees the left
4263 
 margin in the image was originally the bottom margin. In additional by
4264 
 default the center of the rotation is the center of the plot area and
4265 
 not the entire image (if all the margins are symmetrical then they will
4266 
 of course coincide). This means that depending on your margin the
4267 
 center of the rotation will move. You can read more about this and how
4268 
 to manually set the center for rotation in the section about rotation, <A
4269 
href="7adv.html#10_2">10.2</A></P>
4270 
<P> This is just a slight inconvenience which you have to take into
4271 
 account when you need to set an explicit margin with a call to <A href="../ref/Graph.html#_GRAPH_SETMARGIN">
4272 
Graph::SetMargin()</A></P>
4273 
<P> However, in order to make a rotation of 90 degrees much easier you
4274 
 can easily rotate a graph 90 degrees and set the correct margin with a
4275 
 call to <A href="../ref/Graph.html#_GRAPH_SET90ANDMARGIN">
4276 
Graph::Set90AndMargin()</A> The parameter to this method lets you
4277 
 specify the margins as you will see them in the image without having to
4278 
 think of what becomes what after the rotation.</P>
4279 
<P> So, the only thing you need to do is call this method and then the
4280 
 graph will have been rotated 90 degrees.</P>
4281 
<H2><A NAME="7_19">7.19 Formatting the axis</A></H2>
4282 
<P> To get the exact type of axis you want in your graph there are a
4283 
 number of adjustments available for you. You may change, color, size,
4284 
 position and general appearance.</P>
4285 
<P></P>
4286 
<H3><A NAME="7_19_1">7.19.1  Standard two axis graphs</A></H3>
4287 
<P> Assuming we start with the traditional two axis graph, one X and one
4288 
 Y axis. You may then change the position of each axis by calling <A href="../ref/Axis.html#_AXIS_SETPOS">
4289 
 Axis::SetPos($aPosition)</A> You have to remember that you need to
4290 
 specify the position on the other axis. SO you need to specify the
4291 
 world-coordinate for the position. By default the axis are each
4292 
 positioned at the 0-point on the other axis, i.e. the axis will cross
4293 
 at the 0,0 point in the graph.</P>
4294 
<P> In addition to the standard positioning you may also use the two
4295 
 special position markers &quot;min&quot; and &quot;max&quot;. This will position the axis
4296 
 at the minimum (or maximum) position of the other axis.</P>
4297 
<P> For example, to make sure that the X-axis is always at the bottom of
4298 
 the graph (at lowest possible Y-value) you would have to add the line</P>
4299 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
4300 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">xaxis</FONT><FONT
4301 
color="#007700">-&gt;</FONT><FONT color="#0000BB">SetPos</FONT><FONT color="#007700">
4302 
(</FONT><FONT color="#DD0000">&quot;min&quot;</FONT><FONT color="#007700">);</FONT><FONT
4303 
color="#0000BB"></FONT></FONT></CODE></DIV></P>
4304 
<P></P>
4305 
<P> To change the color and width of the axis you have to make use of
4306 
 the <A href="../ref/Axis.html#_AXIS_SETCOLOR"> Axis::SetColor()</A> and
4307 
 <A href="../ref/Axis.html#_AXIS_SETWEIGHT"> Axis::SetWeight()</A>
4308 
 methods.</P>
4309 
<HR> <SMALL><STRONG> Invisible axis</STRONG> Even though JpGraph (1.7)
4310 
 doesn't directly support &quot;hidden&quot; axis where the labels are still drawn
4311 
 it is very easy to achieve this effect by setting the colors of the
4312 
 axis to be the same as the background. See the example barintex2.php in
4313 
 the Example directory. To completely hide an axis you can make use of
4314 
 the <A href="../ref/Axis.html#_AXIS_HIDE"> Hide()</A></SMALL>
4315 
<HR>
4316 
<P> You might also want to add titles to the axis. This is done through
4317 
 the <A href="../ref/Axis.html#_AXIS_SETTITLE"> Axis::SetTitle()</A>
4318 
 method. This is actually just a shortcut for accessing the title
4319 
 property direct. Axis::title::Set() which also allow you to set the
4320 
 alignment in one call.</P>
4321 
<P> By default the position of the title is to the far right for the
4322 
 X-axis and in the middle (and 90 degrees rotated) for the Y-axis.</P>
4323 
<P> You can adjust the position of the title with the help of the second
4324 
 argument to the <A href="../ref/Axis.html#_AXIS_SETTITLE">
4325 
 Axis::SetTitle()</A> method.</P>
4326 
<P> The possible positions are &quot;high&quot;,&quot;middle&quot; and &quot;low&quot; which refers to
4327 
 the scale values on the axis.</P>
4328 
<P> One common modification you might want to do to the title is to
4329 
 increase the margin between the axis and the actual title. This is
4330 
 often necessary to do for the Y-axis if the values displayed are large.
4331 
 You may adjust the distance (in pixels) between the axis and the title
4332 
 by using the method <A href="../ref/Axis.html#_AXIS_SETTITLEMARGIN">
4333 
 Axis::SetTitleMargin()</A></P>
4334 
<P> So for example to increase the margin on the Y-axis you might add
4335 
 the line</P>
4336 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
4337 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">yaxis</FONT><FONT
4338 
color="#007700">-&gt;</FONT><FONT color="#0000BB">SetTitleMargin</FONT><FONT
4339 
color="#007700">(</FONT><FONT color="#0000BB">40</FONT><FONT color="#007700">
4340 
);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
4341 
<P></P>
4342 
<P> to your code.</P>
4343 
<P> Finally we mention something about the positioning of tick marks and
4344 
 labels on the axis. You have the possibility to choose what side of the
4345 
 axis the tick marks and the labels should be at. For the X-axis this
4346 
 can be specified as either on the the top (inside the plot area) or at
4347 
 bottom (outside of the plotarea). In the same way you can specify for
4348 
 the Y-axis if the labels ( or ticks) should be on the left or right
4349 
 side.</P>
4350 
<P> To adjust the label positioning you have to use the method <A href="../ref/Axis.html#_AXIS_SETTITLESIDE">
4351 
 Axis::SetTitleSide()</A> and to adjust the position of the tick mark
4352 
 you have to use the method <A href="../ref/Axis.html#_AXIS_SETTICKSIDE">
4353 
 SetTickSide()</A><DIV class="note"><B>Note:</B> There is also an alias
4354 
 for this method, SetTickDirection() which is deprecated from version
4355 
 1.7 but kept for backwards compatibility.</DIV> Valid arguments for
4356 
 these methods are</P>
4357 
<UL>
4358 
<LI> SIDE_UP</LI>
4359 
<LI> SIDE_DOWN</LI>
4360 
<LI> SIDE_LEFT</LI>
4361 
<LI> SIDE_RIGHT</LI>
4362 
</UL>
4363 
<P> For example, the following lines added to a script would change side
4364 
 of the labels and tickmarks for the X-axis.</P>
4365 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
4366 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">xaxis</FONT><FONT
4367 
color="#007700">-&gt;</FONT><FONT color="#0000BB">SetLabelPos</FONT><FONT color="#007700">
4368 
(</FONT><FONT color="#0000BB">SIDE_UP</FONT><FONT color="#007700">);
4369 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
4370 
color="#0000BB">xaxis</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
4371 
SetTickSide</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
4372 
SIDE_DOWN</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
4373 
</FONT></CODE></DIV></P>
4374 
<P></P>
4375 
<P> This technique is for example used if you position the X-axis at the
4376 
 top of the graph as the following example shows.<DIV class="example">
4377 
<BR> <A href="exframes/frame_topxaxisex1.html" target="blank"><IMG border="0"
4378 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/topxaxisex1.png" WIDTH="400"></A>
4379 
<BR><B>Figure 97:</B> Example of both how to adjust the position of the
4380 
 X-axis as well as adjusting the side for the tick and axis title <A href="exframes/frame_topxaxisex1.html"
4381 
target="blank">[src]</A>&nbsp;
4382 
<P></P>
4383 
</DIV></P>
4384 
<P></P>
4385 
<H3><A NAME="7_19_2">7.19.2 Scientific style axis</A></H3>
4386 
<P> In scientific style plots it is often common to duplicate each axis
4387 
 so that all sides of the graph have a labeled axis. This is of course
4388 
 also fully supported by JpGraph.</P>
4389 
<P> Before we continue we show a small example to illustrate this
4390 
 feature</P>
4391 
<P><DIV class="example">
4392 
<BR> <A href="exframes/frame_funcex1.html" target="blank"><IMG border="0"
4393 
HEIGHT="350"         src="img/img/img/img/img/img/img/img/funcex1.png" WIDTH="450"></A>
4394 
<BR><B>Figure 98:</B> Example of scientific axis <A href="exframes/frame_funcex1.html"
4395 
target="blank">[src]</A>&nbsp;
4396 
<P></P>
4397 
</DIV></P>
4398 
<P></P>
4399 
<P> The example above shows the basic configuration. There are now
4400 
 several modifications you may do to these axis like</P>
4401 
<UL>
4402 
<LI> Choose if the labels should be inside or outside the plot area</LI>
4403 
<LI> Choose if the tickmarks should be inside or outside the plot area</LI>
4404 
</UL>
4405 
<P> The style of axis is determined by the method <A href="../ref/Graph.html#_GRAPH_SETAXISSTYLE">
4406 
 Graph::SetAxisStyle()</A> The available type of axis are</P>
4407 
<UL>
4408 
<LI> AXSTYLE_SIMPLE, The standard two axis graph</LI>
4409 
<LI> AXSTYLE_BOXIN, Four axis scientific style with labels and tickmarks
4410 
 on the inside</LI>
4411 
<LI> AXSTYLE_BOXOUT, Four axis scientific style with labels and
4412 
 tickmarks on the outside</LI>
4413 
</UL>
4414 
<P></P>
4415 
<H3><A NAME="7_19_3">7.19.3  Adjusting the position of the scale labels</A>
4416 
</H3>
4417 
<P> How to adjust the actual labels are discussed elsewhere in this
4418 
 manual (see ???,???). However we like to mention here that you can
4419 
 adjust the label margin (distance between the axis and the labels) with
4420 
 the method <A href="../ref/Axis.html#_AXIS_SETLABELMARGIN">
4421 
 Axis::SetLabelMargin()</A></P>
4422 
<P> to adjust the actual label format (like font, color, angle) you need
4423 
 to access the <A href="../ref/Axis.html#_AXIS_SETFONT"> Axis::SetFont()</A>
4424 
 and the <A href="../ref/Axis.html#_AXIS_SETCOLOR"> Axis::SetColor()</A>
4425 
 methods. If you investigate the <A href="../ref/Axis.html#_C_AXIS">
4426 
 Axis</A> class you will discover more methods to adjust the many
4427 
 aspects of the axis layout.</P>
4428 
<P> As a final note we also mention the methods <A href="../ref/Axis.html#_AXIS_SETLABELALIGN">
4429 
 Axis::SetLabelAlign()</A> and <A href="../ref/Axis.html#_AXIS_SETLABELANGLE">
4430 
 Axis::SetLabelAngle()</A> This first method is really only mentioned
4431 
 here for completeness since it is mostly used for internal purposes.
4432 
 However on some occasion you might want to adjust the alignment of the
4433 
 labels. By default they are centered in respect to the tick mark. By
4434 
 using the method you might override this positioning should you choose
4435 
 to do so.</P>
4436 
<P> The second of these methods adjusts the angle of the label in
4437 
 regards to the axis. This is very useful for X-axis that have long
4438 
 labels.</P>
4439 
<H3><A NAME="7_19_4">7.19.4 Formatting the scale labels</A></H3>
4440 
<P> In order to have full control over the way that the labels are
4441 
 displayed it is possible to define a callback function that will be
4442 
 applied to all labels. The callback function will be called with the
4443 
 label as the only argument and should return the value that will be
4444 
 displayed in the graph. This could for example be used to turn seconds
4445 
 (used to position data points) into hour and minutes on the scale. For
4446 
 further reference see the two methods: <A href="../ref/Axis.html#_AXIS_SETLABELFORMATCALLBACK">
4447 
 Graph::SetLabelFormatCallback();</A> and <A href="../ref/Axis.html#_AXIS_SETLABELFORMAT">
4448 
 Graph::SetLabelFormat();</A></P>
4449 
<H3><A NAME="7_19_5">7.19.5 Inverting the Y-axis</A></H3>
4450 
<P> One good way of illustrate the usefulness of label callbacks in a
4451 
 slightly different context is to show how we can achieve the effect of
4452 
 an inverted Y-scale.</P>
4453 
<P> An inverted Y-scale has the lowest number at the top and the scale
4454 
 values increases downwards.</P>
4455 
<P> Even though JpGraph doesn't directly support this feature it is
4456 
 quite easy to achieve with just a few extra lines of code in your image
4457 
 script.</P>
4458 
<P> Before we continue we give an example of what we are referring to.</P>
4459 
<P><DIV class="example">
4460 
<BR> <A href="exframes/frame_inyaxisex2.html" target="blank"><IMG border="0"
4461 
HEIGHT="300"         src="img/img/img/img/img/img/img/img/inyaxisex2.png" WIDTH="400"></A>
4462 
<BR><B>Figure 99:</B> Inverted Y-axis <A href="exframes/frame_inyaxisex2.html"
4463 
target="blank">[src]</A>&nbsp;
4464 
<P></P>
4465 
</DIV></P>
4466 
<P></P>
4467 
<P> Two achieve this effect there are two simple steps to take:</P>
4468 
<OL>
4469 
<LI> Negate all you Y-value in the data</LI>
4470 
<LI> Create a callback that negates the scale labels so they appear to
4471 
 be positive.</LI>
4472 
</OL>
4473 
<P> And that's it! We refer you to the code in the example above for the
4474 
 details.</P>
4475 
<H2><A NAME="7_20">7.20 Adjusting the auto-scaling limits - grace value</A>
4476 
</H2>
4477 
<P> By default the auto-scaling algorithm tries to make best possible
4478 
 use of screen estate by making the scale as large as possible, i.e. the
4479 
 extreme values (min/max) will be on the top and bottom of the scale if
4480 
 they happen to fall on a scale-tick. So for example doing a simple line
4481 
 plot could look like the plot shown in the below.<DIV class="example">
4482 
<BR> <A href="exframes/frame_example3.2.html" target="blank"><IMG border="0"
4483 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example3.2.png" WIDTH="300"></A>
4484 
<BR><B>Figure 100:</B> A typical graph with autoscaling and grace=0 <A href="exframes/frame_example3.2.html"
4485 
target="blank">[src]</A>&nbsp;
4486 
<P></P>
4487 
</DIV></P>
4488 
<P> However you might sometime want to add some extra to the minimum and
4489 
 maximum values so that there is some &quot;air&quot; in the graph between the end
4490 
 of the scale values and the extreme points in the graphs. This can be
4491 
 done by adding a &quot;grace&quot; percentage to the scale. So for example adding
4492 
 10% to the y-scale in the image above is done by calling the <A href="../ref/LinearScale.html#_LINEARSCALE_SETGRACE">
4493 
 SetGrace()</A> method on the yscale as in</P>
4494 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
4495 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">yaxis</FONT><FONT
4496 
color="#007700">-&gt;</FONT><FONT color="#0000BB">scale</FONT><FONT color="#007700">
4497 
-&gt;</FONT><FONT color="#0000BB">SetGrace</FONT><FONT color="#007700">(</FONT><FONT
4498 
color="#0000BB">10</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
4499 
10</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT>
4500 
</CODE></DIV></P>
4501 
<P> These lines add a minimum of 10% to the top and bottom values of the
4502 
 scale. Note that we say &quot;minimum&quot; since depending on the specific tick
4503 
 values choose this might be a little bit more to make the end of the
4504 
 scale fall on an even tick mark.</P>
4505 
<P> Adding this line to the previous graph will result in the following
4506 
 example</P>
4507 
<P><DIV class="example">
4508 
<BR> <A href="exframes/frame_example3.2.1.html" target="blank"><IMG border="0"
4509 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example3.2.1.png" WIDTH="300"></A>
4510 
<BR><B>Figure 101:</B> Adding 10% grace value to top and bottom of the
4511 
 Y-scale <A href="exframes/frame_example3.2.1.html" target="blank">[src]</A>
4512 
&nbsp;
4513 
<P></P>
4514 
</DIV></P>
4515 
<P> Since we haven't adjusted the position of the X-axis it will remain
4516 
 at Y=0 which might not necessary be what we would like so we therefor
4517 
 also add the line</P>
4518 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
4519 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">xaxis</FONT><FONT
4520 
color="#007700">-&gt;</FONT><FONT color="#0000BB">SetPos</FONT><FONT color="#007700">
4521 
(</FONT><FONT color="#DD0000">&quot;min&quot;</FONT><FONT color="#007700">);</FONT><FONT
4522 
color="#0000BB"></FONT></FONT></CODE></DIV></P>
4523 
<P></P>
4524 
<P> So that the X-axis always will remain at the lowest possible
4525 
 Y-value. Doing this will then result in the example below</P>
4526 
<P><DIV class="example">
4527 
<BR> <A href="exframes/frame_example3.2.2.html" target="blank"><IMG border="0"
4528 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example3.2.2.png" WIDTH="300"></A>
4529 
<BR><B>Figure 102:</B> Using grace but also adjusting the position of
4530 
 the X-axis <A href="exframes/frame_example3.2.2.html" target="blank">
4531 
[src]</A>&nbsp;
4532 
<P></P>
4533 
</DIV></P>
4534 
<P></P>
4535 
<H2><A NAME="7_21">7.21 Adding bands of pattern and color to graphs</A></H2>
4536 
<P> As an additional way of emphasizing certain areas of the graph it is
4537 
 possible to add bands (either vertical or horizontal) to any one of the
4538 
 standard X-Y coordinate system based graphs. A band is a rectangular
4539 
 area that stretches one entire axis. This means that if you define a
4540 
 band between X-coordinates 3 and 5 the band area will occupy an area
4541 
 between the X-coordinates and the entire Y-range.</P>
4542 
<P> In order to access this functionality you must first make sure that
4543 
 you include the additional library file<I> jpgraph_plotband.php</I></P>
4544 
<P> At the time of this writing (current as of JpGraph 1.8) the table
4545 
 below illustrates the 8 basic types of patterns available. We will
4546 
 shortly show you how you can customize these patterns, To keep these
4547 
 examples clear we have only used one pattern in each figure.</P>
4548 
<P></P>
4549 
<TABLE style="margin-left:-4em;">
4550 
<TR><TD><DIV class="example">
4551 
<BR> <A href="exframes/frame_smallstaticbandsex1.html" target="blank"><IMG
4552 
border="0" HEIGHT="150"         src="img/img/img/img/img/img/img/img/smallstaticbandsex1.png" WIDTH="200"></A>
4553 
<BR><B>Figure 103:</B> <A href="exframes/frame_smallstaticbandsex1.html" target="blank">
4554 
[src]</A>&nbsp;
4555 
<P></P>
4556 
</DIV>
4557 
<P></P>
4558 
</TD><TD><DIV class="example">
4559 
<BR> <A href="exframes/frame_smallstaticbandsex2.html" target="blank"><IMG
4560 
border="0" HEIGHT="150"         src="img/img/img/img/img/img/img/img/smallstaticbandsex2.png" WIDTH="200"></A>
4561 
<BR><B>Figure 104:</B> <A href="exframes/frame_smallstaticbandsex2.html" target="blank">
4562 
[src]</A>&nbsp;
4563 
<P></P>
4564 
</DIV>
4565 
<P></P>
4566 
</TD></TR>
4567 
<TR><TD><DIV class="example">
4568 
<BR> <A href="exframes/frame_smallstaticbandsex7.html" target="blank"><IMG
4569 
border="0" HEIGHT="150"         src="img/img/img/img/img/img/img/img/smallstaticbandsex7.png" WIDTH="200"></A>
4570 
<BR><B>Figure 105:</B> <A href="exframes/frame_smallstaticbandsex7.html" target="blank">
4571 
[src]</A>&nbsp;
4572 
<P></P>
4573 
</DIV>
4574 
<P></P>
4575 
</TD><TD><DIV class="example">
4576 
<BR> <A href="exframes/frame_smallstaticbandsex6.html" target="blank"><IMG
4577 
border="0" HEIGHT="150"         src="img/img/img/img/img/img/img/img/smallstaticbandsex6.png" WIDTH="200"></A>
4578 
<BR><B>Figure 106:</B> <A href="exframes/frame_smallstaticbandsex6.html" target="blank">
4579 
[src]</A>&nbsp;
4580 
<P></P>
4581 
</DIV>
4582 
<P></P>
4583 
</TD></TR>
4584 
<TR><TD><DIV class="example">
4585 
<BR> <A href="exframes/frame_smallstaticbandsex9.html" target="blank"><IMG
4586 
border="0" HEIGHT="150"         src="img/img/img/img/img/img/img/img/smallstaticbandsex9.png" WIDTH="200"></A>
4587 
<BR><B>Figure 107:</B> <A href="exframes/frame_smallstaticbandsex9.html" target="blank">
4588 
[src]</A>&nbsp;
4589 
<P></P>
4590 
</DIV>
4591 
<P></P>
4592 
</TD><TD><DIV class="example">
4593 
<BR> <A href="exframes/frame_smallstaticbandsex10.html" target="blank"><IMG
4594 
border="0" HEIGHT="150"         src="img/img/img/img/img/img/img/img/smallstaticbandsex10.png" WIDTH="200"></A>
4595 
<BR><B>Figure 108:</B> <A href="exframes/frame_smallstaticbandsex10.html"
4596 
target="blank">[src]</A>&nbsp;
4597 
<P></P>
4598 
</DIV>
4599 
<P></P>
4600 
</TD></TR>
4601 
<TR><TD><DIV class="example">
4602 
<BR> <A href="exframes/frame_smallstaticbandsex3.html" target="blank"><IMG
4603 
border="0" HEIGHT="150"         src="img/img/img/img/img/img/img/img/smallstaticbandsex3.png" WIDTH="200"></A>
4604 
<BR><B>Figure 109:</B> <A href="exframes/frame_smallstaticbandsex3.html" target="blank">
4605 
[src]</A>&nbsp;
4606 
<P></P>
4607 
</DIV>
4608 
<P></P>
4609 
</TD><TD><DIV class="example">
4610 
<BR> <A href="exframes/frame_smallstaticbandsex8.html" target="blank"><IMG
4611 
border="0" HEIGHT="150"         src="img/img/img/img/img/img/img/img/smallstaticbandsex8.png" WIDTH="200"></A>
4612 
<BR><B>Figure 110:</B> <A href="exframes/frame_smallstaticbandsex8.html" target="blank">
4613 
[src]</A>&nbsp;
4614 
<P></P>
4615 
</DIV>
4616 
<P></P>
4617 
</TD></TR>
4618 
</TABLE>
4619 
<P> To add a one of these patterns to your graph you need to call the
4620 
 method <A href="../ref/PlotBand.html#_PLOTBAND_PLOTBAND">
4621 
 PlotBand::PlotBand()</A> The arguments is fairly easy to understand.
4622 
 The pattern you would like to use is specified by using the correct
4623 
 constant. You can see the name of the correct constants in the figures
4624 
 above. You also need to specify if the band should stretch along the
4625 
 vertical or horizontal axis as well as the min and max coordinates for
4626 
 the band. As coordinates you may also use the special values &quot;min&quot; and
4627 
 &quot;max&quot; which automatically sets the value to the minimum/maximum value
4628 
 of the scale. The specified numeric value will be automatically
4629 
 truncated to fit within the plot area.</P>
4630 
<P> We don't discuss the other arguments further here, instead we refer
4631 
 you to the class reference.</P>
4632 
<H3><A NAME="7_21_1">7.21.1  Customizing the patterns</A></H3>
4633 
<P> All patterns can be customized by</P>
4634 
<UL>
4635 
<LI> ... altering the colors of the band
4636 
<BR> &nbsp;</LI>
4637 
<LI> ... altering the density of the patterns using the method <A href="../ref/PlotBand.html#_PLOTBAND_SETDENSITY">
4638 
 PlotBand::SetDensity()</A> The density is specified as an integer in
4639 
 range 1 to 100 where a higher number means a higher density (smaller
4640 
 distance between the lines). For example setting the density of the 3D
4641 
 plane above to 60 gives the result<DIV class="example">
4642 
<BR> <A href="exframes/frame_smallstaticbandsex4.html" target="blank"><IMG
4643 
border="0" HEIGHT="150"         src="img/img/img/img/img/img/img/img/smallstaticbandsex4.png" WIDTH="200"></A>
4644 
<BR><B>Figure 111:</B> Increasing the desnity in a pattern <A href="exframes/frame_smallstaticbandsex4.html"
4645 
target="blank">[src]</A>&nbsp;
4646 
<P></P>
4647 
</DIV>
4648 
<P>
4649 
<BR> &nbsp;</P>
4650 
</LI>
4651 
<LI> ... enabling or disabling a frame around the pattern by using the
4652 
 method <A href="../ref/PlotBand.html#_PLOTBAND_SHOWFRAME">
4653 
 PlotBand::ShowFrame()</A> The band will be given the same color as the
4654 
 band.
4655 
<BR> &nbsp;</LI>
4656 
<LI> ... finally you can change whether the band should be drawn on top
4657 
 of the plots or beneath, (by default the bands are under the plots),
4658 
 using the <A href="../ref/PlotBand.html#_PLOTBAND_SETORDER">
4659 
 PlotBand::SetOrder()</A> as the following example show<DIV class="example">
4660 
<BR> <A href="exframes/frame_smallstaticbandsex5.html" target="blank"><IMG
4661 
border="0" HEIGHT="150"         src="img/img/img/img/img/img/img/img/smallstaticbandsex5.png" WIDTH="200"></A>
4662 
<BR><B>Figure 112:</B> Stroking the pattern on top of the plots <A href="exframes/frame_smallstaticbandsex5.html"
4663 
target="blank">[src]</A>&nbsp;
4664 
<P></P>
4665 
</DIV>
4666 
<P></P>
4667 
</LI>
4668 
</UL>
4669 
<P><DIV class="note"><B>Note:</B> 3D planes actually carry another
4670 
 possible modification. You can specify the vanish point to change the
4671 
 perspective used. You can't access the method to change the horizon
4672 
 directly but you can access it through</DIV><DIV class="phpscript"><CODE>
4673 
<FONT color="#000000"> <FONT color="#0000BB">&nbsp;$band</FONT><FONT color="#007700">
4674 
-&gt;</FONT><FONT color="#0000BB">prect</FONT><FONT color="#007700">-&gt;</FONT><FONT
4675 
color="#0000BB">SetHorizon</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
4676 
$aHorizon</FONT><FONT color="#007700">)</FONT><FONT color="#0000BB"></FONT>
4677 
</FONT></CODE></DIV></P>
4678 
<P></P>
4679 
<P><SMALL> assuming that the band is a 3D plane.</SMALL></P>
4680 
<P> To finish this section we give one final, more creative, example on
4681 
 how to use the bands.<DIV class="example">
4682 
<BR> <A href="exframes/frame_staticbandbarex7.html" target="blank"><IMG border="0"
4683 
HEIGHT="300"         src="img/img/img/img/img/img/img/img/staticbandbarex7.png" WIDTH="400"></A>
4684 
<BR><B>Figure 113:</B> Combining 3D plane, solid band and a sttaic line <A
4685 
href="exframes/frame_staticbandbarex7.html" target="blank">[src]</A>&nbsp;
4686 
<P></P>
4687 
</DIV></P>
4688 
<P></P>
4689 
<H2><A NAME="7_22">7.22  Adding static lines to the plot</A></H2>
4690 
<P> In addition to the bands you can also add static lines to the graph.
4691 
 An example of that is actually shown in figure 11 above. You create a
4692 
 line as an instance of <A href="../ref/PlotLine.html#_C_PLOTLINE">
4693 
 class PlotLine</A> . So for example the lines<DIV class="phpscript"><CODE>
4694 
<FONT color="#000000"> <FONT color="#0000BB">&nbsp;$sline&nbsp;</FONT><FONT color="#007700">
4695 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">PlotLine</FONT><FONT color="#007700">
4696 
(</FONT><FONT color="#0000BB">HORIZONTAL</FONT><FONT color="#007700">,</FONT><FONT
4697 
color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
4698 
&quot;black&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">2</FONT><FONT
4699 
color="#007700">);
4700 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
4701 
color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
4702 
$sline</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
4703 
</FONT></CODE></DIV></P>
4704 
<P> will add a 2-pixel wide horizontal static line at Y-position zero.</P>
4705 
<H1><A NAME="8">8 Working with non X,Y-plots</A></H1>
4706 
<P> Non X,Y plots includes</P>
4707 
<UL>
4708 
<LI> Pie plots (2D and 3D)</LI>
4709 
<LI> Radar plots</LI>
4710 
<LI> Polar plots</LI>
4711 
<LI> Gantt charts</LI>
4712 
</UL>
4713 
<P> The fundamental difference is that these classes makes use of an
4714 
 extended version of the basic Graph class. Therefor you can not mix X,Y
4715 
 plots with non-X,Y plots. For example it is not possible to mix a line
4716 
 graph with a Polar graph.</P>
4717 
<UL>
4718 
<LI> To create 2d or 3d pie plots you must use the PieGraph class</LI>
4719 
<LI> To create radar plots you must use the RadarGraph() class</LI>
4720 
<LI> To create radar plots you must use the PolarGraph() class</LI>
4721 
<LI> To create gantt plots you must use the GanttGraph() class</LI>
4722 
</UL>
4723 
<P></P>
4724 
<H2><A NAME="8_1">8.1 Radar plots</A></H2>
4725 
<P> Spider plots are most often used to display how a number of results
4726 
 compare to some set targets. They make good use of the human ability to
4727 
 spot symmetry (or rather un-symmetry) . the figure below show an
4728 
 example of a spider (sometimes called a web-plot). Spiderplots are not
4729 
 suitable if you want very accurate readings from the graph since, by
4730 
 it's nature, it can be difficult to read out very detailed values.<DIV class="example">
4731 
<BR> <A href="exframes/frame_radarex7.html" target="blank"><IMG border="0"
4732 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/radarex7.png" WIDTH="300"></A>
4733 
<BR><B>Figure 114:</B> A typical radar graph with two plots <A href="exframes/frame_radarex7.html"
4734 
target="blank">[src]</A>&nbsp;
4735 
<P></P>
4736 
</DIV></P>
4737 
<P></P>
4738 
<UL>
4739 
<LI>There is one axis for each data point</LI>
4740 
<LI>Each axis may have an arbitrary title which is automatically
4741 
 positioned</LI>
4742 
<LI>A spider plot may be filled or open</LI>
4743 
<LI>You can control color, weight of lines as you are already used to</LI>
4744 
<LI>A spider plot can, as usual, have a title and a legend</LI>
4745 
<LI>The first axis is always oriented vertical and is the only axis with
4746 
 labels</LI>
4747 
<LI>Grids may be used (dashed in the figure above)</LI>
4748 
<LI>You may have ticks (although suppressed in the figure above</LI>
4749 
<LI>You can control the size and position within the frame of the graph</LI>
4750 
<LI>You may have several plots within the same graph</LI>
4751 
</UL>
4752 
<P> In the following section we show how to draw both simple and complex
4753 
 radar graph. As we will show all the settings will follow the same
4754 
 pattern as for the more standard linear graphs.</P>
4755 
<H3><A NAME="8_1_1">8.1.1 Simple radar plots</A></H3>
4756 
<P> Let's start by creating a very simple radar plot based on 5 data
4757 
 points using mostly default values.</P>
4758 
<P> As the first thing you must remember to include the extension module
4759 
 that contains the radar plot. &quot;jpgraph_radar.php&quot;.</P>
4760 
<P> A very simple radar plot is created by the code<DIV class="phpscript">
4761 
(File: radarex1.php)
4762 
<BR><CODE><FONT color="#000000"> <FONT color="#0000BB">&lt;?php
4763 
<BR></FONT><FONT color="#007700">include&nbsp;(</FONT><FONT color="#DD0000">
4764 
&quot;../jpgraph.php&quot;</FONT><FONT color="#007700">);
4765 
<BR>include&nbsp;(</FONT><FONT color="#DD0000">&quot;../jpgraph_radar.php&quot;</FONT><FONT
4766 
color="#007700">);
4767 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;
4768 
<BR></FONT><FONT color="#FF8000">//&nbsp;Some&nbsp;data&nbsp;to&nbsp;plot
4769 
<BR></FONT><FONT color="#0000BB">$data&nbsp;</FONT><FONT color="#007700">
4770 
=&nbsp;array(</FONT><FONT color="#0000BB">55</FONT><FONT color="#007700">,</FONT><FONT
4771 
color="#0000BB">80</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
4772 
46</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">71</FONT><FONT
4773 
color="#007700">,</FONT><FONT color="#0000BB">95</FONT><FONT color="#007700">
4774 
);
4775 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;
4776 
<BR></FONT><FONT color="#FF8000">//&nbsp;Create&nbsp;the&nbsp;graph&nbsp;and&nbsp;the&nbsp;plot
4777 
<BR></FONT><FONT color="#0000BB">$graph&nbsp;</FONT><FONT color="#007700">
4778 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">RadarGraph</FONT><FONT color="#007700">
4779 
(</FONT><FONT color="#0000BB">250</FONT><FONT color="#007700">,</FONT><FONT
4780 
color="#0000BB">200</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
4781 
&quot;auto&quot;</FONT><FONT color="#007700">);
4782 
<BR></FONT><FONT color="#0000BB">$plot&nbsp;</FONT><FONT color="#007700">
4783 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">RadarPlot</FONT><FONT color="#007700">
4784 
(</FONT><FONT color="#0000BB">$data</FONT><FONT color="#007700">);
4785 
<BR>
4786 
<BR></FONT><FONT color="#FF8000">//&nbsp;Add&nbsp;the&nbsp;plot&nbsp;and&nbsp;display&nbsp;the&nbsp;graph
4787 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
4788 
color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
4789 
$plot</FONT><FONT color="#007700">);
4790 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
4791 
color="#0000BB">Stroke</FONT><FONT color="#007700">();
4792 
<BR></FONT><FONT color="#0000BB">?&gt;</FONT></FONT></CODE></DIV></P>
4793 
<P> and would give the result<DIV class="example">
4794 
<BR> <A href="exframes/frame_radarex1.html" target="blank"><IMG border="0"
4795 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/radarex1.png" WIDTH="250"></A>
4796 
<BR><B>Figure 115:</B> A first very simple radar plot using default
4797 
 settings <A href="exframes/frame_radarex1.html" target="blank">[src]</A>
4798 
&nbsp;
4799 
<P></P>
4800 
</DIV></P>
4801 
<P> To change the size and position of the radar graph is similar to the
4802 
 pie plot and you do it by using the methods <A href="../ref/SpiderGraph.html#_SPIDERGRAPH_SETSIZE">
4803 
 SetSize()</A> and <A href="../ref/SpiderGraph.html#_SPIDERGRAPH_SETCENTER">
4804 
 SetCenter()</A></P>
4805 
<P> If you want a filled radar plot you need to specify the fill color
4806 
 with the method <A href="../ref/SpiderPlot.html#_SPIDERPLOT_SETFILLCOLOR">
4807 
 SetFillColor()</A> The following example shows these methods in action<DIV
4808 
class="example">
4809 
<BR> <A href="exframes/frame_radarex2.html" target="blank"><IMG border="0"
4810 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/radarex2.png" WIDTH="300"></A>
4811 
<BR><B>Figure 116:</B> Changing size, position and adding fill color to
4812 
 the radar plot. <A href="exframes/frame_radarex2.html" target="blank">
4813 
[src]</A>&nbsp;
4814 
<P></P>
4815 
</DIV></P>
4816 
<P></P>
4817 
<H3><A NAME="8_1_2">8.1.2 Specifying titles for the axis and legends for
4818 
 the plots</A></H3>
4819 
<P> We normally would like something more meaningful as description of
4820 
 each axis than it's number. Specifying the titles are accomplished
4821 
 through the use of the method SetTitles() of the graph. Let's say that
4822 
 each axis corresponds to a month. We could then use the code<DIV class="phpscript">
4823 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$titles&nbsp;</FONT><FONT color="#007700">
4824 
=&nbsp;</FONT><FONT color="#0000BB">$gDateLocale</FONT><FONT color="#007700">
4825 
-&gt;</FONT><FONT color="#0000BB">GetShortMonth</FONT><FONT color="#007700">
4826 
();
4827 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
4828 
color="#0000BB">SetTitles</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
4829 
$titles</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
4830 
</FONT></CODE></DIV></P>
4831 
<P> As you can see the way radar plot is constructed will assign the
4832 
 titles (and plot points) in a counter-clockwise direction. If you want
4833 
 them in clock-wise order you will have to inverse your input data array
4834 
 as well as the title array.</P>
4835 
<P> To specify a legend you (as with the other plot) make use of the <A href="../ref/SpiderPlot.html#_SPIDERPLOT_SETLEGEND">
4836 
 SetLegend();</A> method on each radar plot.</P>
4837 
<H3><A NAME="8_1_3">8.1.3 Adding grid line to the radar plot</A></H3>
4838 
<P> Each major tick mark can also be connected together to create a
4839 
 grid. The grid is accessed through the 'grid' property of the graph. To
4840 
 enable the grid and set the line style to &quot;dotted&quot; you would have to
4841 
 add the lines<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
4842 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">grid</FONT><FONT
4843 
color="#007700">-&gt;</FONT><FONT color="#0000BB">Show</FONT><FONT color="#007700">
4844 
();
4845 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
4846 
color="#0000BB">grid</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
4847 
SetLineStyle</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
4848 
&quot;dotted&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
4849 
</FONT></CODE></DIV></P>
4850 
<P>and would result in the following graph<DIV class="example">
4851 
<BR> <A href="exframes/frame_radarex4.html" target="blank"><IMG border="0"
4852 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/radarex4.png" WIDTH="250"></A>
4853 
<BR><B>Figure 117:</B> Adding dotted gridlines to the graph <A href="exframes/frame_radarex4.html"
4854 
target="blank">[src]</A>&nbsp;
4855 
<P></P>
4856 
</DIV></P>
4857 
<P>By design the plot is above the grid line but beneath the axis in
4858 
 image depth, hence some part of the grid lines are hidden.</P>
4859 
<P> To have the grid lines more &quot;visible&quot; just change their color, say
4860 
 to, dark red by invoking the SetColor() method on the grid lines which
4861 
 would give the following result</P>
4862 
<P> Another simple change we could do would be to just change the
4863 
 background color of the radar graph. This is (not surprisingly) done by
4864 
 a call to the method SetColor() invoked on the graph object.<DIV class="example">
4865 
<BR> <A href="exframes/frame_radarex6.html" target="blank"><IMG border="0"
4866 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/radarex6.png" WIDTH="250"></A>
4867 
<BR><B>Figure 118:</B> Changing the background color <A href="exframes/frame_radarex6.html"
4868 
target="blank">[src]</A>&nbsp;
4869 
<P></P>
4870 
</DIV></P>
4871 
<P></P>
4872 
<H3><A NAME="8_1_4">8.1.4 Adding several plots to the same radar graph</A>
4873 
</H3>
4874 
<P> You can easily create several radar plot which are added to the same
4875 
 radar graph. The thing to remember is that if you use filled radar
4876 
 plots and they overlap each other that the order which they are added
4877 
 will be the order they are drawn.</P>
4878 
<P> A simple example of this is shown below<DIV class="example">
4879 
<BR> <A href="exframes/frame_radarex6.1.html" target="blank"><IMG border="0"
4880 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/radarex6.1.png" WIDTH="250"></A>
4881 
<BR><B>Figure 119:</B> Several radar plots in one radar graph <A href="exframes/frame_radarex6.1.html"
4882 
target="blank">[src]</A>&nbsp;
4883 
<P></P>
4884 
</DIV></P>
4885 
<P></P>
4886 
<H3><A NAME="8_1_5">8.1.5 Adding plotmarks i radar graphs</A></H3>
4887 
<P> In exactly the same way as for line graphs it is possible to add
4888 
 plot marks in radar plots. The mark property is accessed through the<I>
4889 
 RadarPlot::mark</I> The example below adds a red ball as a marker.<DIV class="example">
4890 
<BR> <A href="exframes/frame_radarmarkex1.html" target="blank"><IMG border="0"
4891 
HEIGHT="280"         src="img/img/img/img/img/img/img/img/radarmarkex1.png" WIDTH="300"></A>
4892 
<BR><B>Figure 120:</B> Adding plotmarks to a radar plot <A href="exframes/frame_radarmarkex1.html"
4893 
target="blank">[src]</A>&nbsp;
4894 
<P></P>
4895 
</DIV></P>
4896 
<P></P>
4897 
<H2><A NAME="8_2">8.2 Pie plots</A></H2>
4898 
<P> So far we have just show plots based on an X-Y coordinate system.
4899 
 This is not the only types of graphs you can create with JpGraph.
4900 
 Another common type is Pie plots. JpGraph supports both 2D and 3D pie
4901 
 plots. For 2D pie plots there are also 2 versions, but more on that
4902 
 later.</P>
4903 
<P> The main difference as compared to the X-Y plots is that to all pie
4904 
 plots are added to the <A href="../ref/PieGraph.html#_C_PIEGRAPH">
4905 
 PieGraph()</A> instead of the Graph() object we used for the X-Y graphs
4906 
 we have drawn so far. For this you must first include the
4907 
 &quot;jpgraph_pie.php&quot; in your script (or &quot;jpgraph_pie3d.php&quot; if you want to
4908 
 use 3-dimensional pies).</P>
4909 
<P> Below you cane see the code needed to create the simplest possible
4910 
 pie graph just using the default settings.</P>
4911 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
4912 
&nbsp;</FONT><FONT color="#007700">include&nbsp;(</FONT><FONT color="#DD0000">
4913 
&quot;../jpgraph.php&quot;</FONT><FONT color="#007700">);
4914 
<BR>include&nbsp;(</FONT><FONT color="#DD0000">&quot;../jpgraph_pie.php&quot;</FONT><FONT
4915 
color="#007700">);
4916 
<BR>
4917 
<BR></FONT><FONT color="#0000BB">$data&nbsp;</FONT><FONT color="#007700">
4918 
=&nbsp;array(</FONT><FONT color="#0000BB">40</FONT><FONT color="#007700">,</FONT><FONT
4919 
color="#0000BB">60</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
4920 
21</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">33</FONT><FONT
4921 
color="#007700">);
4922 
<BR>
4923 
<BR></FONT><FONT color="#0000BB">$graph&nbsp;</FONT><FONT color="#007700">
4924 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">PieGraph</FONT><FONT color="#007700">
4925 
(</FONT><FONT color="#0000BB">300</FONT><FONT color="#007700">,</FONT><FONT
4926 
color="#0000BB">200</FONT><FONT color="#007700">);
4927 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
4928 
color="#0000BB">SetShadow</FONT><FONT color="#007700">();
4929 
<BR>
4930 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
4931 
color="#0000BB">title</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
4932 
Set</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
4933 
&quot;A&nbsp;simple&nbsp;Pie&nbsp;plot&quot;</FONT><FONT color="#007700">);
4934 
<BR>
4935 
<BR></FONT><FONT color="#0000BB">$p1&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT
4936 
color="#0000BB">PiePlot</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
4937 
$data</FONT><FONT color="#007700">);
4938 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
4939 
color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
4940 
$p1</FONT><FONT color="#007700">);
4941 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
4942 
color="#0000BB">Stroke</FONT><FONT color="#007700">();
4943 
<BR></FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
4944 
<P> The above code would give the following pie graph<DIV class="example">
4945 
<BR> <A href="exframes/frame_example26.html" target="blank"><IMG border="0"
4946 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example26.png" WIDTH="300"></A>
4947 
<BR><B>Figure 121:</B> The simplest possible pie graph <A href="exframes/frame_example26.html"
4948 
target="blank">[src]</A>&nbsp;
4949 
<P></P>
4950 
</DIV></P>
4951 
<P> There is a few things worth noting here</P>
4952 
<UL>
4953 
<LI> By default all pie slices have the percentage shown just outside
4954 
 the slice.</LI>
4955 
<LI> The colors are automatically assigned to the slices.</LI>
4956 
<LI> The pie have the edges marked by default</LI>
4957 
<LI> The first slice start at 0 degrees (3 o'clock)</LI>
4958 
</UL>
4959 
<P> You can change almost all aspects of appearance of the pie graphs.
4960 
 For example you could change :</P>
4961 
<UL>
4962 
<LI> Change the angle for the first slice, (<A href="../ref/PiePlot.html#_PIEPLOT_SETSTARTANGLE">
4963 
PiePlot::SetStartAngle()</A>)</LI>
4964 
<LI>Remove the border lines around the pie (<A href="../ref/PiePlot.html#_PIEPLOT_SHOWBORDER">
4965 
PiePlot::ShowBorder()</A>)</LI>
4966 
<LI>Change the color of the border (<A href="../ref/PiePlot.html#_PIEPLOT_SETCOLOR">
4967 
PiePlot::SetColor()</A>,</LI>
4968 
<LI>Change the colors of the slices (<A href="../ref/PiePlot.html#_PIEPLOT_SETSLICECOLORS">
4969 
PiePlot::SetSliceCOlors()</A>)</LI>
4970 
<LI> Change the size and position of the pie (<A href="../ref/PiePlot.html#_PIEPLOT_SETSIZE">
4971 
PiePlot::SetSize()</A>, <A href="../ref/PiePlot.html#_PIEPLOT_SETCENTER">
4972 
PiePlot::SetCenter()</A>)</LI>
4973 
<LI> Adjust the labels for the slice (color, font, format, position ) by
4974 
 accessing the <A href="../ref/DisplayValue.html#_C_DISPLAYVALUE">value
4975 
 property</A> of pie plots, for example (<A href="../ref/DisplayValue.html#_DISPLAYVALUE_SETFONT">
4976 
PiePlot::value::SetFont()</A>, You can read more about label formatting
4977 
 and how to change what is displayed as a value further down in this
4978 
 chapter.</LI>
4979 
</UL>
4980 
<P></P>
4981 
<P> The next simplest addition we can do is to add a legend to the pie
4982 
 graph. We do this by using the <A href="../ref/PiePlot.html#_PIEPLOT_SETLEGENDS">
4983 
 SetLegends();</A> method. By adding the legends to the previous example
4984 
 we get the following image<DIV class="example">
4985 
<BR> <A href="exframes/frame_example26.1.html" target="blank"><IMG border="0"
4986 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example26.1.png" WIDTH="300"></A>
4987 
<BR><B>Figure 122:</B> Adding a legend to the pie graph <A href="exframes/frame_example26.1.html"
4988 
target="blank">[src]</A>&nbsp;
4989 
<P></P>
4990 
</DIV></P>
4991 
<P></P>
4992 
<P> (In the figure above we also moved the center of the pie slightly to
4993 
 the left to make more room for the legend box.)</P>
4994 
<P> The text for the legends can also contain printf() style format
4995 
 strings to format a number. This number passed on into this string is
4996 
 either the absolute value of the slice or the percentage value. How to
4997 
 switch between the is describe further down in this chapter.</P>
4998 
<P> The next change you might want to change is the size and position of
4999 
 the Pie plot. You can change the size with a call to <A href="../ref/PiePlot.html#_PIEPLOT_SETSIZE">
5000 
 SetSize();</A> and the position of the center of the pie plot with a
5001 
 call to <A href="../ref/PiePlot.html#_PIEPLOT_SETCENTER"> SetCenter();</A>
5002 
 The size can be specified as either an absolute size in pixels or as a
5003 
 fraction of width/height (whatever is the smallest). The position of
5004 
 the pie plot is specified as a fraction of the width and height.</P>
5005 
<P> To put the size and positioning API to use we will show how to put
5006 
 several pie plots on the same pie graph. In the following example we
5007 
 have also adjusted the legends of the slice values to use a smaller
5008 
 font.</P>
5009 
<P> What we do in this example is quite simple, create 4 pie plots, make
5010 
 them smaller and put them in the four corner of the graph. This will
5011 
 give the result as shown in the following example.<DIV class="example">
5012 
<BR> <A href="exframes/frame_pieex3.html" target="blank"><IMG border="0" HEIGHT="300"
5013 
        src="img/img/img/img/img/img/img/img/pieex3.png" WIDTH="350"></A>
5014 
<BR><B>Figure 123:</B> Multiple pie plots in the same pie graph <A href="exframes/frame_pieex3.html"
5015 
target="blank">[src]</A>&nbsp;
5016 
<P></P>
5017 
</DIV></P>
5018 
<P></P>
5019 
<H3><A NAME="8_2_1">8.2.1 Adding guide lines to Pie Plots</A></H3>
5020 
<P> For very busy Pie plots it can become too little space for the
5021 
 labels to be printed just beside the pie slice. For this purpose it is
5022 
 possible to use guide lines for the labels. The library will then draw
5023 
 a line from the center edge of the slices to the label which will be
5024 
 positioned further out from the Pie Plot.</P>
5025 
<P> There is one method that is primarily used to handle this,<I>
5026 
 PiePlot::SetGuideLines()</I> the simplest usage of this would be<DIV class="phpscript">
5027 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$pieplot</FONT><FONT color="#007700">
5028 
-&gt;</FONT><FONT color="#0000BB">SetGuideLines</FONT><FONT color="#007700">
5029 
();</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
5030 
<P> An example of this could then be<DIV class="example">
5031 
<BR> <A href="exframes/frame_pielabelsex1.html" target="blank"><IMG border="0"
5032 
HEIGHT="350"         src="img/img/img/img/img/img/img/img/pielabelsex1.png" WIDTH="300"></A>
5033 
<BR><B>Figure 124:</B> Using guide lines for PiePlots <A href="exframes/frame_pielabelsex1.html"
5034 
target="blank">[src]</A>&nbsp;
5035 
<P></P>
5036 
</DIV></P>
5037 
<P> The above example will give guide lines very similar as what is
5038 
 produced by other programs, e.g. Excel. In addition to the above
5039 
 variant it is also possible to instruct the library to line up the
5040 
 labels vertically in a way that we think is easier to read. This is
5041 
 achieved by specifying the second parameter to the SetGuideLines() to<I>
5042 
 'false'</I> as in<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT
5043 
color="#0000BB">&nbsp;$pieplot</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
5044 
SetGuideLines</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
5045 
true</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">false</FONT><FONT
5046 
color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
5047 
</P>
5048 
<P> The first parameter is to enable/disable the guide-lines. With the
5049 
 same example as above this would then produce the image<DIV class="example">
5050 
<BR> <A href="exframes/frame_pielabelsex2.html" target="blank"><IMG border="0"
5051 
HEIGHT="350"         src="img/img/img/img/img/img/img/img/pielabelsex2.png" WIDTH="300"></A>
5052 
<BR><B>Figure 125:</B> Using guide lines for PiePlots with vertically
5053 
 lined up labels. <A href="exframes/frame_pielabelsex2.html" target="blank">
5054 
[src]</A>&nbsp;
5055 
<P></P>
5056 
</DIV></P>
5057 
<P> It is also possible to configure the vertical distance between the
5058 
 labels. By default the distance between the labels is roughly 40% of
5059 
 the labels font height. By using the method<I>
5060 
 PiePlot::SetGuideLinesAdjust()</I> it is possible to specify a
5061 
 fractional value which is interpretated as the distance between the
5062 
 bottom of one label to the bottom of the next. This means that
5063 
 specifying a value of '1.0' the labels will have no space between them
5064 
 and the bottom of one label will touch the top of another label. By
5065 
 default this value is 1.4.</P>
5066 
<P> By increasing or decreasing this value it is possible to make the
5067 
 labels become positioned more or less compact. Below we have taken the
5068 
 above example and reduced the distance to '1.1' and as can be seen this
5069 
 yields much more compact labeling.<DIV class="example">
5070 
<BR> <A href="exframes/frame_pielabelsex4.html" target="blank"><IMG border="0"
5071 
HEIGHT="350"         src="img/img/img/img/img/img/img/img/pielabelsex4.png" WIDTH="300"></A>
5072 
<BR><B>Figure 126:</B> Adjusting to a smaller vertical distance between
5073 
 the labels <A href="exframes/frame_pielabelsex4.html" target="blank">
5074 
[src]</A>&nbsp;
5075 
<P></P>
5076 
</DIV></P>
5077 
<P></P>
5078 
<P><B> Note:</B> Guide lines is only available in 2D Pie plots.</P>
5079 
<H3><A NAME="8_2_2">8.2.2 Creating 3D pie plots</A></H3>
5080 
<P> So far we have only made use of 2D pie plots, creating 3D pie plots
5081 
 is no more difficult. Instead of creating the plots with a call to
5082 
 PiePlot() you create the plots with a call to <A href="../ref/PiePlot3D.html#_C_PIEPLOT3D">
5083 
 PiePlot3D()</A> If we just take the first simple pie plot and replace
5084 
 the call to PiePlot() with a call to PiePlot3D() we get the following
5085 
 result.<DIV class="example">
5086 
<BR> <A href="exframes/frame_example27.html" target="blank"><IMG border="0"
5087 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example27.png" WIDTH="300"></A>
5088 
<BR><B>Figure 127:</B> A first example of a 3D pie plot <A href="exframes/frame_example27.html"
5089 
target="blank">[src]</A>&nbsp;
5090 
<P></P>
5091 
</DIV></P>
5092 
<P> 3D Pie plots have the same possibilities as the normal pie plots
5093 
 with the added twist of a 3:rd dimension. You can adjust the
5094 
 perspective angle with the method <A href="../ref/PiePlot3D.html#_PIEPLOT3D_SETANGLE">
5095 
 SetAngle()</A> So for example to make the pie more &quot;flat&quot; you just set
5096 
 it to a smaller angle. Setting the perspective angle to 20 degrees in
5097 
 the previous example will give the following result.<DIV class="example">
5098 
<BR> <A href="exframes/frame_example27.1.html" target="blank"><IMG border="0"
5099 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example27.1.png" WIDTH="300"></A>
5100 
<BR><B>Figure 128:</B> Adjusting the perspective angle <A href="exframes/frame_example27.1.html"
5101 
target="blank">[src]</A>&nbsp;
5102 
<P></P>
5103 
</DIV></P>
5104 
<P></P>
5105 
<H3><A NAME="8_2_3">8.2.3 Exploding pie slices</A></H3>
5106 
<P> One way to attract attention to some specific piece of information
5107 
 in a pie chart is to &quot;explode&quot; one or more slices. Both 2D and 3D pies
5108 
 support exploding one or several slices.</P>
5109 
<P> Exploding slices is accomplished by the methods <A href="../ref/PiePlot.html#_PIEPLOT_EXPLODE">
5110 
 Explode()</A> and <A href="../ref/PiePlot.html#_PIEPLOT_EXPLODESLICE">
5111 
 ExplodeSlice()</A> The first method is used if you want to explode more
5112 
 than one slices and the second is a shorthand to make it easy to just
5113 
 explode one slice.</P>
5114 
<P> For example to explode one slice the default &quot;explode&quot; radius you
5115 
 would just have to say<DIV class="phpscript"><CODE><FONT color="#000000">
5116 
 <FONT color="#0000BB">&nbsp;$pieplot</FONT><FONT color="#007700">-&gt;</FONT><FONT
5117 
color="#0000BB">ExplodeSlice</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
5118 
1</FONT><FONT color="#007700">)</FONT><FONT color="#0000BB"></FONT></FONT>
5119 
</CODE></DIV></P>
5120 
<P> The above line would explode the second slice (slices are numbered
5121 
 from 0 and upwards) the default amount. Doing this to the two previous
5122 
 example would result in<DIV class="example">
5123 
<BR> <A href="exframes/frame_example27.2.html" target="blank"><IMG border="0"
5124 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example27.2.png" WIDTH="300"></A>
5125 
<BR><B>Figure 129:</B> Exploding one slice <A href="exframes/frame_example27.2.html"
5126 
target="blank">[src]</A>&nbsp;
5127 
<P></P>
5128 
</DIV></P>
5129 
<P></P>
5130 
<P><DIV class="example">
5131 
<BR> <A href="exframes/frame_example27.3.html" target="blank"><IMG border="0"
5132 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example27.3.png" WIDTH="330"></A>
5133 
<BR><B>Figure 130:</B> Exploding one 3D slice <A href="exframes/frame_example27.3.html"
5134 
target="blank">[src]</A>&nbsp;
5135 
<P></P>
5136 
</DIV></P>
5137 
<P></P>
5138 
<P> To explode all slices at once you can use the <A href="../ref/PiePlot.html#_PIEPLOT_EXPLODEALL">
5139 
 PiePlot::ExplodeAll()</A> method. If you want to explode several slices
5140 
 you can use the <A href="../ref/PiePlot.html#_PIEPLOT_EXPLODE">
5141 
 PiePlot::Explode()</A> method and supply a suitable array argument.</P>
5142 
<H3><A NAME="8_2_4">8.2.4 Specifying and adjusting labels on pie plots</A>
5143 
</H3>
5144 
<P> By default the values shown just outside the pie for each slice are
5145 
 the percentage value for each slice. If you instead wanted the absolute
5146 
 value you would just have to use the <A href="../ref/PiePlot.html#_PIEPLOT_SETLABELTYPE">
5147 
 SetLabelType()</A> method. So to use the absolute value you would call</P>
5148 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
5149 
&nbsp;$pieplot</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
5150 
SetLabelType</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
5151 
&quot;PIE_VALUE_ABS&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB">
5152 
</FONT></FONT></CODE></DIV></P>
5153 
<P></P>
5154 
<P> Furthermore you could enhance the formatting of the value by either
5155 
 using a printf() style format string (using <A href="../ref/DisplayValue.html#_DISPLAYVALUE_SETFORMAT">
5156 
 SetFormat()</A> ) or by providing a formatting function callback (using
5157 
 <A href="../ref/DisplayValue.html#_DISPLAYVALUE_SETFORMATCALLBACK">
5158 
 SetFormatCallback()</A> ) for doing more advanced formatting.</P>
5159 
<P> You can also adjust the position of the labels by means of the <A href="../ref/PiePlot.html#_PIEPLOT_SETLABELPOS">
5160 
 PiePlot::SetLabelPos()</A> method. The argument to this method is
5161 
 either the fraction of the radius or the string 'auto'. In the latter
5162 
 case JpGraph automatically determines the best position and the the
5163 
 first case The following example illustrates this<DIV class="example">
5164 
<BR> <A href="exframes/frame_pieex8.html" target="blank"><IMG border="0" HEIGHT="200"
5165 
        src="img/img/img/img/img/img/img/img/pieex8.png" WIDTH="250"></A>
5166 
<BR><B>Figure 131:</B> Example of adjusting the position of the labels
5167 
 for the slices <A href="exframes/frame_pieex8.html" target="blank">
5168 
[src]</A>&nbsp;
5169 
<P></P>
5170 
</DIV></P>
5171 
<P></P>
5172 
<P> If this formatting is not enough you can also &quot;manually&quot; specify the
5173 
 labels for each slice individually. You do this by using the <A href="../ref/PiePlot.html#_PIEPLOT_SETLABELS">
5174 
 PiePLot::SetLabels()</A> method. This will let you specify individual
5175 
 text strings for each label. In each specification you can also add a
5176 
 printf() formatting specification for a number. The number passed on
5177 
 will be either the absolute value for the slice or the percentage value
5178 
 depending on what was specified in the call to <A href="../ref/PiePlot.html#_PIEPLOT_SETLABELTYPE">
5179 
 SetLabelType()</A></P>
5180 
<P> The SetLabels() method can also take a second parameter, the label
5181 
 position parameter. This is just a shortcut to the SetLabelPos() as
5182 
 described above. By default the position will be set to 'auto' if not
5183 
 explicitely specified.<DIV class="note"><B>Note:</B> The alignment of
5184 
 the labels will be different depending on whether they are inside or
5185 
 outside the pie. When inside the center of the strings will be aligned
5186 
 with the center of the slice at the specified fraction of the radius.
5187 
 When positioned outside the alignment will depend on the angle to avoid
5188 
 that the labels inadvertely writes over the pie.</DIV></P>
5189 
<H3><A NAME="8_2_5">8.2.5 Specifying slice colors and using themes</A></H3>
5190 
<P> Another typical change would be to change the colors of the slices.
5191 
 There are two fundamental ways of doing this. You either manually
5192 
 specify the colors for the slices as an array using the method <A href="../ref/PiePlot.html#_PIEPLOT_SETSLICECOLORS">
5193 
 SetSliceColors()</A> If you specify fewer colors than the number of
5194 
 slices they will just wrap around.</P>
5195 
<P> Another way is to use one of the pre-defined color &quot;themes&quot;. This is
5196 
 just a predefined set of colors that will be used for the slices. You
5197 
 choose what &quot;theme&quot; you like to use with the method (<A href="../ref/PiePlot.html#_PIEPLOT_SETTHEME">
5198 
 SetTheme()</A> ) At the time of this writing the available themes are</P>
5199 
<UL>
5200 
<LI> &quot;earth&quot;</LI>
5201 
<LI> &quot;pastel&quot;</LI>
5202 
<LI> &quot;sand&quot;</LI>
5203 
<LI> &quot;water&quot;</LI>
5204 
</UL>
5205 
<P> The following example shows the same pie using the different
5206 
 &quot;themes&quot; in order.<DIV class="example">
5207 
<BR> <A href="exframes/frame_example28.html" target="blank"><IMG border="0"
5208 
HEIGHT="150"         src="img/img/img/img/img/img/img/img/example28.png" WIDTH="150"></A>
5209 
<BR><B>Figure 132:</B> <A href="exframes/frame_example28.html" target="blank">
5210 
[src]</A>&nbsp;
5211 
<P></P>
5212 
</DIV></P>
5213 
<P><DIV class="example">
5214 
<BR> <A href="exframes/frame_example28.1.html" target="blank"><IMG border="0"
5215 
HEIGHT="150"         src="img/img/img/img/img/img/img/img/example28.1.png" WIDTH="150"></A>
5216 
<BR><B>Figure 133:</B> <A href="exframes/frame_example28.1.html" target="blank">
5217 
[src]</A>&nbsp;
5218 
<P></P>
5219 
</DIV></P>
5220 
<P><DIV class="example">
5221 
<BR> <A href="exframes/frame_example28.2.html" target="blank"><IMG border="0"
5222 
HEIGHT="150"         src="img/img/img/img/img/img/img/img/example28.2.png" WIDTH="150"></A>
5223 
<BR><B>Figure 134:</B> <A href="exframes/frame_example28.2.html" target="blank">
5224 
[src]</A>&nbsp;
5225 
<P></P>
5226 
</DIV></P>
5227 
<P><DIV class="example">
5228 
<BR> <A href="exframes/frame_example28.3.html" target="blank"><IMG border="0"
5229 
HEIGHT="150"         src="img/img/img/img/img/img/img/img/example28.3.png" WIDTH="150"></A>
5230 
<BR><B>Figure 135:</B> <A href="exframes/frame_example28.3.html" target="blank">
5231 
[src]</A>&nbsp;
5232 
<P></P>
5233 
</DIV></P>
5234 
<P></P>
5235 
<P> A complete color chart of all available colors in the different
5236 
 themes can be found <A href="themes.html"> here</A></P>
5237 
<P> Another simple change is to remove the border ( or change it's
5238 
 colors ) that separates each slice. This can be done by a call to <A href="../ref/PiePlot.html#_PIEPLOT_SHOWBORDER">
5239 
 ShowBorder()</A></P>
5240 
<H3><A NAME="8_2_6">8.2.6 Adding drop shadows to the slices</A></H3>
5241 
<P> An additional visual enhancements can be made by adding a drop
5242 
 shadow to the individual slices. This is accomplished by means of the <A
5243 
href="../ref/PiePlot.html#_PIEPLOT_SETSHADOW"> PiePlot::SetShadow()</A>
5244 
 method. Adding a drop shadow is often more affective if the pie has one
5245 
 or more slices exploded as the following example shows<DIV class="example">
5246 
<BR> <A href="exframes/frame_pieex9.html" target="blank"><IMG border="0" HEIGHT="200"
5247 
        src="img/img/img/img/img/img/img/img/pieex9.png" WIDTH="250"></A>
5248 
<BR><B>Figure 136:</B> Adding a drop hadow to the slices <A href="exframes/frame_pieex9.html"
5249 
target="blank">[src]</A>&nbsp;
5250 
<P></P>
5251 
</DIV></P>
5252 
<P></P>
5253 
<H3><A NAME="8_2_7">8.2.7 Another variant of 2D Pie plots</A></H3>
5254 
<P> As mentioned in the beginning there are two versions of the 2D pie
5255 
 plots. The normal pie plot created as an instance of <A href="../ref/PiePlot.html#_C_PIEPLOT">
5256 
 class PiePlot</A> and a variant created as an instance of <A href="../ref/PiePlot.html#_C_PIEPLOTC">
5257 
 class PiePlotC</A></P>
5258 
<P> This variant is an extension of the standard PiePlot in the sense
5259 
 that it also have a filled circle in the center. The following example
5260 
 illustrates this</P>
5261 
<P><DIV class="example">
5262 
<BR> <A href="exframes/frame_piecex1.html" target="blank"><IMG border="0"
5263 
HEIGHT="300"         src="img/img/img/img/img/img/img/img/piecex1.png" WIDTH="300"></A>
5264 
<BR><B>Figure 137:</B> Example of the variant of pie plot with a filled
5265 
 center circle <A href="exframes/frame_piecex1.html" target="blank">
5266 
[src]</A>&nbsp;
5267 
<P></P>
5268 
</DIV></P>
5269 
<P></P>
5270 
<P> Since the PiePlotC is an extension to the basic pie plot all the
5271 
 normal formatting you can do for pie plots you can also do for the
5272 
 PiePlotC .</P>
5273 
<P> The additional formatting only concerns the filled middle circle.
5274 
 You have the option of adjusting size, fill color and all font
5275 
 properties. You perform these operations with the methods</P>
5276 
<P></P>
5277 
<TABLE>
5278 
<TR><TD><A href="../ref/PiePlotC.html#_PIEPLOTC_SETMIDCOLOR">
5279 
PiePlotC::SetMidColor()</A></TD><TD>Set fill color of mid circle</TD></TR>
5280 
<TR><TD><A href="../ref/PiePlotC.html#_PIEPLOTC_SETMIDSIZE">
5281 
PiePlotC::SetMidSize()</A></TD><TD>Set size (fraction of radius)</TD></TR>
5282 
<TR><TD><A href="../ref/PiePlotC.html#_PIEPLOTC_SETMIDTITLE">
5283 
PiePlotC::SetMidTitle()</A></TD><TD>Set title string (may be
5284 
 multi-lined)</TD></TR>
5285 
<TR><TD><A href="../ref/PiePlotC.html#_PIEPLOTC_SETMID">
5286 
PiePlotC::SetMid()</A></TD><TD>Set all parameters in a single method
5287 
 call</TD></TR>
5288 
</TABLE>
5289 
<P> In addition to the normal CSIM for PiePlot:s the center area is also
5290 
 a CSIM hotspot. You specify the target CSIM with a call to <A href="../ref/PiePlotC.html#_PIEPLOTC_SETMIDCSIM">
5291 
 PiePlotC::SetMidCSIM()</A></P>
5292 
<P> The next example shows an example with some more innovative
5293 
 formatting. In this example we have :</P>
5294 
<UL>
5295 
<LI> hidden the frame around the pie graph</LI>
5296 
<LI> exploded all the slices</LI>
5297 
<LI> added drop shadow to the individual slices (and the center filled
5298 
 circle)</LI>
5299 
<LI> specified individual multi line labels.</LI>
5300 
<LI> changed the font for the title to a TTF font.</LI>
5301 
</UL>
5302 
<P><DIV class="example">
5303 
<BR> <A href="exframes/frame_piecex2.html" target="blank"><IMG border="0"
5304 
HEIGHT="400"         src="img/img/img/img/img/img/img/img/piecex2.png" WIDTH="400"></A>
5305 
<BR><B>Figure 138:</B> PiePlotC with some more innovative formatting to
5306 
 make it more interesting. <A href="exframes/frame_piecex2.html" target="blank">
5307 
[src]</A>&nbsp;
5308 
<P></P>
5309 
</DIV></P>
5310 
<P></P>
5311 
<P></P>
5312 
<H2><A NAME="8_3">8.3 Polar plots</A></H2>
5313 
<P></P>
5314 
<H3><A NAME="8_3_1">8.3.1 Overview</A></H3>
5315 
<P> Each data point in a polar plot is represented by a tuple consisting
5316 
 of a radius and an angle. The polar plot itself can be either outlined
5317 
 or filled. In addition each point may have a standard marker (the same
5318 
 as for line and scatter plots).</P>
5319 
<P> The scale for the radius can be either linear or logarithmic.</P>
5320 
<P> A polar graph is created by creating an instance of <A href="../ref/PolarGraph.html#_POLARGRAPH_POLARGRAPH">
5321 
PolarGraph::PolarGraph()</A>. The polar graph type inherits all the
5322 
 capabilities of ordinary X-Y graphs, i.e they can have background
5323 
 images, background gradients, tabbed titles and so on.</P>
5324 
<P> Polar graphs comes in two basic types, they can either show a full
5325 
 360 degree graph or a half 180 degree graph. The two examples below
5326 
 show these two basic types of graphs.</P>
5327 
<P><DIV class="example">
5328 
<BR> <A href="exframes/frame_polarex0.html" target="blank"><IMG border="0"
5329 
HEIGHT="250"         src="img/img/img/img/img/img/img/img/polarex0.png" WIDTH="250"></A>
5330 
<BR><B>Figure 139:</B> A simple 360 degree polar graph <A href="exframes/frame_polarex0.html"
5331 
target="blank">[src]</A>&nbsp;
5332 
<P></P>
5333 
</DIV></P>
5334 
<P><DIV class="example">
5335 
<BR> <A href="exframes/frame_polarex0-180.html" target="blank"><IMG border="0"
5336 
HEIGHT="250"         src="img/img/img/img/img/img/img/img/polarex0-180.png" WIDTH="250"></A>
5337 
<BR><B>Figure 140:</B> The 180 degree variant polar plot. <A href="exframes/frame_polarex0-180.html"
5338 
target="blank">[src]</A>&nbsp;
5339 
<P></P>
5340 
</DIV></P>
5341 
<P></P>
5342 
<H3><A NAME="8_3_2">8.3.2 Adjusting the radius scale</A></H3>
5343 
<P> The radius axis can be shown in either a linear or logarithmic
5344 
 scale. This is controlled, as usual, by a call to <A href="../ref/PolarGraph.html#_POLARGRAPH_SETSCALE">
5345 
PolarGraph::SetScale()</A> The two examples below show the same plot in
5346 
 either linear or logarithmic scale</P>
5347 
<P><DIV class="example">
5348 
<BR> <A href="exframes/frame_polarex3.html" target="blank"><IMG border="0"
5349 
HEIGHT="300"         src="img/img/img/img/img/img/img/img/polarex3.png" WIDTH="300"></A>
5350 
<BR><B>Figure 141:</B> Using a logarithmic scale <A href="exframes/frame_polarex3.html"
5351 
target="blank">[src]</A>&nbsp;
5352 
<P></P>
5353 
</DIV></P>
5354 
<P></P>
5355 
<P><DIV class="example">
5356 
<BR> <A href="exframes/frame_polarex3-lin.html" target="blank"><IMG border="0"
5357 
HEIGHT="300"         src="img/img/img/img/img/img/img/img/polarex3-lin.png" WIDTH="300"></A>
5358 
<BR><B>Figure 142:</B> Using a linear scale <A href="exframes/frame_polarex3-lin.html"
5359 
target="blank">[src]</A>&nbsp;
5360 
<P></P>
5361 
</DIV></P>
5362 
<P></P>
5363 
<P> Please note that the maximum values of the scales are different.</P>
5364 
<P> By default the scale will be auto scaled depending on the data. You
5365 
 can also specify a manual scale by supplying an extra argument to the
5366 
 SetScale() value. The only difference from the manual scaling with the
5367 
 other X-Y-graphs is that for polar graph you only specify a manual
5368 
 maximum. The minimum will always be 0 for the linear scale and a scaled
5369 
 value of 10 (i.e 1, 0.1, 0.001 and so on) for the logarithmic scale.</P>
5370 
<P> The plot is clipped to the plot area so if you specify a smaller
5371 
 scale then the maximum value that part of the plot that are outside the
5372 
 plot area will be clipped.</P>
5373 
<H3><A NAME="8_3_3">8.3.3 Adjusting the grid lines</A></H3>
5374 
<P> As usual you have full freedom to select what grid lines you like to
5375 
 show (and what colors they should have). There are three different
5376 
 types of grid lines you may adjust. The radius minor and major grid
5377 
 lines and the angle grid lines.</P>
5378 
<P> You select what grid lines to show with a call to <A href="../ref/PolarAxis.html#_POLARAXIS_SHOWGRID">
5379 
PolarAxis::ShowGrid()</A> The two example below shows a logarithmic plot
5380 
 with either just major grid lines or both minor and major grid lines.</P>
5381 
<P><DIV class="example">
5382 
<BR> <A href="exframes/frame_polarex4.html" target="blank"><IMG border="0"
5383 
HEIGHT="350"         src="img/img/img/img/img/img/img/img/polarex4.png" WIDTH="300"></A>
5384 
<BR><B>Figure 143:</B> Using a logarithmic scale with just major
5385 
 gridlines <A href="exframes/frame_polarex4.html" target="blank">[src]</A>
5386 
&nbsp;
5387 
<P></P>
5388 
</DIV></P>
5389 
<P></P>
5390 
<P><DIV class="example">
5391 
<BR> <A href="exframes/frame_polarex5.html" target="blank"><IMG border="0"
5392 
HEIGHT="350"         src="img/img/img/img/img/img/img/img/polarex5.png" WIDTH="300"></A>
5393 
<BR><B>Figure 144:</B> Using a logarithmic scale with both minor and
5394 
 major gridlines <A href="exframes/frame_polarex5.html" target="blank">
5395 
[src]</A>&nbsp;
5396 
<P></P>
5397 
</DIV></P>
5398 
<P> The colors of the grid lines are specified with a call to <A href="../ref/PolarAxis.html#_POLARAXIS_SETGRIDCOLOR">
5399 
 PolarAxis::SetGridColor()</A></P>
5400 
<P> For the angle grid lines it is possible to specify the angle
5401 
 division between each grid line with the method <A href="../ref/PolarAxis.html#_POLARAXIS_SETANGLESTEP">
5402 
 PolarAxis::SetAngleStep()</A> You specify the step distance in degrees.
5403 
 By default the step size is 15 degrees.</P>
5404 
<H3><A NAME="8_3_4">8.3.4 Adjusting the label fonts</A></H3>
5405 
<P> You can individually specify different fonts and colors for the
5406 
 angle and the radius labels. The radius font is specified with
5407 
 PolarAxis::SetFont() and the angle font is specified with a call to <A href="../ref/PolarAxis.html#_POLARAXIS_SETANGLEFONT">
5408 
 PolarAxis::SetAngleFont()</A></P>
5409 
<P> You can adjust the color with the method <A href="../ref/PolarAxis.html#_POLARAXIS_SETCOLOR">
5410 
PolarAxis::SetColor()</A> ?&gt;</P>
5411 
<P> The following example specifies different color for the labels. it
5412 
 also shows that you can add both a radial axis title as well as a
5413 
 tabbed title. In this example we have also chosen not to show the frame
5414 
 around the edge of the plot.</P>
5415 
<P><DIV class="example">
5416 
<BR> <A href="exframes/frame_polarex9.html" target="blank"><IMG border="0"
5417 
HEIGHT="320"         src="img/img/img/img/img/img/img/img/polarex9.png" WIDTH="350"></A>
5418 
<BR><B>Figure 145:</B> Different colors for labels, specifying both a
5419 
 tabbed title as well as a axis title <A href="exframes/frame_polarex9.html"
5420 
target="blank">[src]</A>&nbsp;
5421 
<P></P>
5422 
</DIV></P>
5423 
<P></P>
5424 
<H3><A NAME="8_3_5">8.3.5 Adjusting the labels</A></H3>
5425 
<P> As can be seen from the previous examples the angle labels have a
5426 
 small superscripted &quot;o&quot; after each label. You can select if you like to
5427 
 show this degree mark or not with a call to the <A href="../ref/PolarAxis.html#_POLARAXIS_SHOWANGLEDEGREEMARK">
5428 
 PolarAxis::SetANgleDegreeMark()</A> method by which you can enable or
5429 
 disable that mark after the angels.</P>
5430 
<P> For the radius labels all standard formatting that can be done to
5431 
 the X-Y axis such as format string or format callbacks are supported.</P>
5432 
<P> A common modification for polar plots is probably to disable the
5433 
 display the last label when using a 360 degree plot since the last
5434 
 label will &quot;collide&quot; with the plot box around the plot area. It is
5435 
 possible to disable the last label with a call to <A href="../ref/Axis.html#_AXIS_HIDELASTTICKLABEL">
5436 
Axis::HideLastTickLabel()</A> As you can see this has been used in some
5437 
 of the examples in this chapter.</P>
5438 
<H3><A NAME="8_3_6">8.3.6 Image maps</A></H3>
5439 
<P> If you have specified markers for the polar plot (by setting the
5440 
 mark property of the plot) each marker can be a hot spot in a client
5441 
 side image map. The target URL are as usual specified with the
5442 
 SetCSIMTargets() as the following short code excerpt shows<DIV class="phpscript">
5443 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;</FONT><FONT color="#FF8000">
5444 
//&nbsp;Start&nbsp;by&nbsp;specifying&nbsp;the&nbsp;proper&nbsp;URL&nbsp;targets
5445 
<BR></FONT><FONT color="#0000BB">$targets&nbsp;</FONT><FONT color="#007700">
5446 
=&nbsp;array(</FONT><FONT color="#DD0000">&quot;#1&quot;</FONT><FONT color="#007700">,</FONT><FONT
5447 
color="#DD0000">&quot;#2&quot;</FONT><FONT color="#007700">,&nbsp;.......&nbsp;);
5448 
<BR></FONT><FONT color="#0000BB">$polarplot&nbsp;</FONT><FONT color="#007700">
5449 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">PoalrPlot</FONT><FONT color="#007700">
5450 
(</FONT><FONT color="#0000BB">$data</FONT><FONT color="#007700">);
5451 
<BR></FONT><FONT color="#0000BB">$polarplot</FONT><FONT color="#007700">
5452 
-&gt;</FONT><FONT color="#0000BB">mark</FONT><FONT color="#007700">-&gt;</FONT><FONT
5453 
color="#0000BB">SetType</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
5454 
MARK_SQUARE</FONT><FONT color="#007700">);
5455 
<BR></FONT><FONT color="#0000BB">$polarplot</FONT><FONT color="#007700">
5456 
-&gt;</FONT><FONT color="#0000BB">SetCSIMTargets</FONT><FONT color="#007700">
5457 
(</FONT><FONT color="#0000BB">targets</FONT><FONT color="#007700">);
5458 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
5459 
color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
5460 
$polarplot</FONT><FONT color="#007700">);
5461 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
5462 
color="#0000BB">StrokeCSIM</FONT><FONT color="#007700">();</FONT><FONT color="#0000BB">
5463 
</FONT></FONT></CODE></DIV></P>
5464 
<P></P>
5465 
<H3><A NAME="8_3_7">8.3.7 A final example</A></H3>
5466 
<P> As a final example we show a full 360 degree polar plot with square
5467 
 markers as well as background color gradient and a legend for the plot.<DIV
5468 
class="example">
5469 
<BR> <A href="exframes/frame_polarex7-2.html" target="blank"><IMG border="0"
5470 
HEIGHT="400"         src="img/img/img/img/img/img/img/img/polarex7-2.png" WIDTH="300"></A>
5471 
<BR><B>Figure 146:</B> A polar plot with both legend and background
5472 
 gradient fill. <A href="exframes/frame_polarex7-2.html" target="blank">
5473 
[src]</A>&nbsp;
5474 
<P></P>
5475 
</DIV></P>
5476 
<P></P>
5477 
<H1><A NAME="9">9 Gantt charts</A></H1>
5478 
<P></P>
5479 
<H2><A NAME="9_1">9.1 Why use Gantt charts?</A></H2>
5480 
<P> The cynical view: To explain why your project is over-due and
5481 
 over-budget.</P>
5482 
<P> The pragmatic view: To keep management of our back and know what we
5483 
 have forgotten</P>
5484 
<P> The common view: As a tool to help identify project issues and
5485 
 highlight problem areas.</P>
5486 
<P> Basically, Gantt charts are used to show the state of a number of
5487 
 activities (possible grouped) against time.</P>
5488 
<H2><A NAME="9_2">9.2 Capabilities in JpGraph Gantt module</A></H2>
5489 
<P></P>
5490 
<UL>
5491 
<LI> Both automatic and manual scaling of date</LI>
5492 
<LI> Full support for independent CSIM for both labels and activity bars</LI>
5493 
<LI> Extremely flexible scales, possibility to use both months, weeks,
5494 
 days, hours and minutes as scales. Furthermore (unlike MS Project) you
5495 
 can have as may scales displayed at the same time as you like.</LI>
5496 
<LI> Support for visualization of grouped activities</LI>
5497 
<LI> Gantt charts can be automatically sized according to the number of
5498 
 bars and scale used. This means you don't have to supply a specific
5499 
 size when creating a graph.</LI>
5500 
<LI> Unlimited number of activities</LI>
5501 
<LI> Supports platform independent Week number calculation according to
5502 
 ISO:8601</LI>
5503 
<LI> Rich possibility to display a variety of scales or combination of
5504 
 scales supports both day, week, month, year. Each scale header is
5505 
 totally configurable in terms of font, size, color, background etc</LI>
5506 
<LI> User configurable date format in the scale headlines</LI>
5507 
<LI> Visualization of constrains between activities, start-to-start,
5508 
 start-to-end, end-to-start and end-to-end</LI>
5509 
<LI> Scales have &quot;intelligent&quot; grids</LI>
5510 
<LI> Supports title and subtitle with user specified font, size and
5511 
 color</LI>
5512 
<LI> Activity bars can have multiple patterns and colors</LI>
5513 
<LI> Activity bar may have shadows</LI>
5514 
<LI> Activity bars can have internal progress bars displayed to show how
5515 
 much of a given task has been accomplished</LI>
5516 
<LI> Activity titles can have individual fonts, colors and backgrounds</LI>
5517 
<LI> Activity bars can have captions</LI>
5518 
<LI> Activity bars can have specified left- and right end markers</LI>
5519 
<LI> Bar heights can be specified in absolute pixels or in percent of
5520 
 the activity line width</LI>
5521 
<LI> Supports milestones with many different marks</LI>
5522 
<LI> Supports vertical marker lines with text</LI>
5523 
<LI> Can easily be localized</LI>
5524 
<LI> Full support for CSIM (or drill down graphs)</LI>
5525 
<LI> Alternate row colors</LI>
5526 
<LI> ... and more</LI>
5527 
</UL>
5528 
<P></P>
5529 
<H2><A NAME="9_3">9.3 A simple Gantt chart</A></H2>
5530 
<P> Time to show you an example of a Gantt chart and how easy it is to
5531 
 make one. Lets make it the simplest possible Gantt chart. One activity,
5532 
 named &quot;Project&quot;, which lasts from &quot;2001-11-01&quot; to &quot;2002-02-20&quot;.</P>
5533 
<P> All it takes to do this (using default values for everything) is the
5534 
 following code.<DIV class="phpscript">(File: ganttex00.php)
5535 
<BR><CODE><FONT color="#000000"> <FONT color="#0000BB">&lt;?php
5536 
<BR></FONT><FONT color="#007700">include&nbsp;(</FONT><FONT color="#DD0000">
5537 
&quot;../jpgraph.php&quot;</FONT><FONT color="#007700">);
5538 
<BR>include&nbsp;(</FONT><FONT color="#DD0000">&quot;../jpgraph_gantt.php&quot;</FONT><FONT
5539 
color="#007700">);
5540 
<BR>
5541 
<BR></FONT><FONT color="#FF8000">//&nbsp;A&nbsp;new&nbsp;graph&nbsp;with&nbsp;automatic&nbsp;size
5542 
<BR></FONT><FONT color="#0000BB">$graph&nbsp;</FONT><FONT color="#007700">
5543 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">GanttGraph</FONT><FONT color="#007700">
5544 
(</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT
5545 
color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
5546 
&quot;auto&quot;</FONT><FONT color="#007700">);
5547 
<BR>
5548 
<BR></FONT><FONT color="#FF8000">//&nbsp;&nbsp;A&nbsp;new&nbsp;activity&nbsp;on&nbsp;row&nbsp;'0'
5549 
<BR></FONT><FONT color="#0000BB">$activity&nbsp;</FONT><FONT color="#007700">
5550 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">GanttBar</FONT><FONT color="#007700">
5551 
(</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT
5552 
color="#DD0000">&quot;Project&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
5553 
&quot;2001-12-21&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
5554 
&quot;2002-01-20&quot;</FONT><FONT color="#007700">);
5555 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
5556 
color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
5557 
$activity</FONT><FONT color="#007700">);
5558 
<BR>
5559 
<BR></FONT><FONT color="#FF8000">//&nbsp;Display&nbsp;the&nbsp;Gantt&nbsp;chart
5560 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
5561 
color="#0000BB">Stroke</FONT><FONT color="#007700">();
5562 
<BR></FONT><FONT color="#0000BB">?&gt;
5563 
<BR></FONT></FONT></CODE></DIV></P>
5564 
<P> The resulting image is shown in Figure 147 below.<DIV style="margin-left:-120px;">
5565 
<DIV class="example">
5566 
<BR> <A href="exframes/frame_ganttex00.html" target="blank"><IMG border="0"
5567 
HEIGHT="112"         src="img/img/img/img/img/img/img/img/ganttex00.png" WIDTH="486"></A>
5568 
<BR><B>Figure 147:</B> Your first simple Gantt chart. <A href="exframes/frame_ganttex00.html"
5569 
target="blank">[src]</A>&nbsp;
5570 
<P></P>
5571 
</DIV>
5572 
<P></P>
5573 
</DIV></P>
5574 
<P> Let's note a few things with the above image and code:</P>
5575 
<UL>
5576 
<LI> You always need to include both jpgraph.php and jpgraph_gantt.php</LI>
5577 
<LI> A bar is specified a minimum of four parameters, vertical position
5578 
 (more about that in a second), a title, start and end date.</LI>
5579 
<LI> If you don't specify a size for the image it will be automatically
5580 
 decided based on the min and max dates for the bars rounded to a full
5581 
 week.</LI>
5582 
<LI> By default the week and day scale are displayed.</LI>
5583 
<LI> Weekend background are displayed default in a slightly gray color</LI>
5584 
<LI> Sundays are written in red.</LI>
5585 
<LI> Weeks are numbered according to ISO 8601</LI>
5586 
<LI> Activity bars are rendered as blue stripes on a white background by
5587 
 default.</LI>
5588 
</UL>
5589 
<P> So, lets start making this graph a little bit more interesting.
5590 
 First we are going to add a title, then we will add a month scale and
5591 
 finally we will change the color of the bar.</P>
5592 
<P> All that is taken care of in the code below.<DIV class="phpscript">
5593 
(File: ganttex01.php)
5594 
<BR><CODE><FONT color="#000000"> <FONT color="#0000BB">&lt;?php
5595 
<BR></FONT><FONT color="#007700">include&nbsp;(</FONT><FONT color="#DD0000">
5596 
&quot;../jpgraph.php&quot;</FONT><FONT color="#007700">);
5597 
<BR>include&nbsp;(</FONT><FONT color="#DD0000">&quot;../jpgraph_gantt.php&quot;</FONT><FONT
5598 
color="#007700">);
5599 
<BR>
5600 
<BR></FONT><FONT color="#0000BB">$graph&nbsp;</FONT><FONT color="#007700">
5601 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">GanttGraph</FONT><FONT color="#007700">
5602 
(</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT
5603 
color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
5604 
&quot;auto&quot;</FONT><FONT color="#007700">);
5605 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
5606 
color="#0000BB">SetShadow</FONT><FONT color="#007700">();
5607 
<BR>
5608 
<BR></FONT><FONT color="#FF8000">//&nbsp;Add&nbsp;title&nbsp;and&nbsp;subtitle
5609 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
5610 
color="#0000BB">title</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
5611 
Set</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
5612 
&quot;A&nbsp;nice&nbsp;main&nbsp;title&quot;</FONT><FONT color="#007700">);
5613 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
5614 
color="#0000BB">title</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
5615 
SetFont</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
5616 
FF_ARIAL</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
5617 
FS_BOLD</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">12</FONT><FONT
5618 
color="#007700">);
5619 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
5620 
color="#0000BB">subtitle</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
5621 
Set</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
5622 
&quot;(Draft&nbsp;version)&quot;</FONT><FONT color="#007700">);
5623 
<BR>
5624 
<BR></FONT><FONT color="#FF8000">//&nbsp;Show&nbsp;day,&nbsp;week&nbsp;and&nbsp;month&nbsp;scale
5625 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
5626 
color="#0000BB">ShowHeaders</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
5627 
GANTT_HDAY&nbsp;</FONT><FONT color="#007700">|&nbsp;</FONT><FONT color="#0000BB">
5628 
GANTT_HWEEK&nbsp;</FONT><FONT color="#007700">|&nbsp;</FONT><FONT color="#0000BB">
5629 
GANTT_HMONTH</FONT><FONT color="#007700">);
5630 
<BR>
5631 
<BR></FONT><FONT color="#FF8000">
5632 
//&nbsp;Instead&nbsp;of&nbsp;week&nbsp;number&nbsp;show&nbsp;the&nbsp;date&nbsp;for&nbsp;the&nbsp;first&nbsp;day&nbsp;in&nbsp;the&nbsp;week
5633 
<BR>//&nbsp;on&nbsp;the&nbsp;week&nbsp;scale
5634 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
5635 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
5636 
week</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">SetStyle</FONT><FONT
5637 
color="#007700">(</FONT><FONT color="#0000BB">WEEKSTYLE_FIRSTDAY</FONT><FONT
5638 
color="#007700">);
5639 
<BR>
5640 
<BR></FONT><FONT color="#FF8000">
5641 
//&nbsp;Make&nbsp;the&nbsp;week&nbsp;scale&nbsp;font&nbsp;smaller&nbsp;than&nbsp;the&nbsp;default
5642 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
5643 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
5644 
week</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">SetFont</FONT><FONT
5645 
color="#007700">(</FONT><FONT color="#0000BB">FF_FONT0</FONT><FONT color="#007700">
5646 
);
5647 
<BR>
5648 
<BR></FONT><FONT color="#FF8000">
5649 
//&nbsp;Use&nbsp;the&nbsp;short&nbsp;name&nbsp;of&nbsp;the&nbsp;month&nbsp;together&nbsp;with&nbsp;a&nbsp;2&nbsp;digit&nbsp;year
5650 
<BR>//&nbsp;on&nbsp;the&nbsp;month&nbsp;scale
5651 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
5652 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
5653 
month</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
5654 
SetStyle</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
5655 
MONTHSTYLE_SHORTNAMEYEAR2</FONT><FONT color="#007700">);
5656 
<BR>
5657 
<BR></FONT><FONT color="#FF8000">
5658 
//&nbsp;Format&nbsp;the&nbsp;bar&nbsp;for&nbsp;the&nbsp;first&nbsp;activity
5659 
<BR>//&nbsp;($row,$title,$startdate,$enddate)
5660 
<BR></FONT><FONT color="#0000BB">$activity&nbsp;</FONT><FONT color="#007700">
5661 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">GanttBar</FONT><FONT color="#007700">
5662 
(</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT
5663 
color="#DD0000">&quot;Project&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
5664 
&quot;2001-12-21&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
5665 
&quot;2002-01-20&quot;</FONT><FONT color="#007700">);
5666 
<BR>
5667 
<BR></FONT><FONT color="#FF8000">
5668 
//&nbsp;Yellow&nbsp;diagonal&nbsp;line&nbsp;pattern&nbsp;on&nbsp;a&nbsp;red&nbsp;background
5669 
<BR></FONT><FONT color="#0000BB">$activity</FONT><FONT color="#007700">
5670 
-&gt;</FONT><FONT color="#0000BB">SetPattern</FONT><FONT color="#007700">(</FONT><FONT
5671 
color="#0000BB">BAND_RDIAG</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
5672 
&quot;yellow&quot;</FONT><FONT color="#007700">);
5673 
<BR></FONT><FONT color="#0000BB">$activity</FONT><FONT color="#007700">
5674 
-&gt;</FONT><FONT color="#0000BB">SetFillColor</FONT><FONT color="#007700">
5675 
(</FONT><FONT color="#DD0000">&quot;red&quot;</FONT><FONT color="#007700">);
5676 
<BR>
5677 
<BR></FONT><FONT color="#FF8000">//&nbsp;Finally&nbsp;add&nbsp;the&nbsp;bar&nbsp;to&nbsp;the&nbsp;graph
5678 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
5679 
color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
5680 
$activity</FONT><FONT color="#007700">);
5681 
<BR>
5682 
<BR></FONT><FONT color="#FF8000">//&nbsp;...&nbsp;and&nbsp;display&nbsp;it
5683 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
5684 
color="#0000BB">Stroke</FONT><FONT color="#007700">();
5685 
<BR></FONT><FONT color="#0000BB">?&gt;
5686 
<BR></FONT></FONT></CODE></DIV> The resulting image is shown in Figure
5687 
 148 below.<DIV class="example">
5688 
<BR> <A href="exframes/frame_ganttex01.html" target="blank"><IMG border="0"
5689 
HEIGHT="152"         src="img/img/img/img/img/img/img/img/ganttex01.png" WIDTH="486"></A>
5690 
<BR><B>Figure 148:</B> Making the Gantt chart a little bit more
5691 
 interesting with title and more colors. <A href="exframes/frame_ganttex01.html"
5692 
target="blank">[src]</A>&nbsp;
5693 
<P></P>
5694 
</DIV></P>
5695 
<P> From the above example you might note a few things</P>
5696 
<UL>
5697 
<LI> The margins adjust automatically to the added title and subtitle</LI>
5698 
<LI> The height of the scale headers adjust automatically when you
5699 
 change the font.</LI>
5700 
<LI> You have great flexibility in choosing what format the scale labels
5701 
 will have. If you for example wanted the full 4 digit year in the month
5702 
 header all you have to change is use the constant
5703 
 MONTHSTYLE_SHORTNAMEYEAR2 in the code above to
5704 
 MONTHSTYLE_SHORTNAMEYEAR4</LI>
5705 
<LI> You have full freedom of manipulating headers in terms of font,
5706 
 color, background and size.</LI>
5707 
</UL>
5708 
<P> To show that this is really simple let's show the full year in the
5709 
 month, and set the header style to be white text on a dark blue
5710 
 background by adding the lines<DIV class="phpscript"><CODE><FONT color="#000000">
5711 
 <FONT color="#0000BB">&nbsp;</FONT><FONT color="#FF8000">
5712 
//&nbsp;Use&nbsp;the&nbsp;short&nbsp;name&nbsp;of&nbsp;the&nbsp;month&nbsp;together&nbsp;with&nbsp;a&nbsp;4&nbsp;digit&nbsp;year
5713 
<BR>//&nbsp;on&nbsp;the&nbsp;month&nbsp;scale
5714 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
5715 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
5716 
month</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
5717 
SetStyle</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
5718 
MONTHSTYLE_SHORTNAMEYEAR4</FONT><FONT color="#007700">);
5719 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
5720 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
5721 
month</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
5722 
SetTextColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
5723 
&quot;white&quot;</FONT><FONT color="#007700">);
5724 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
5725 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
5726 
month</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
5727 
SetBackgroundColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
5728 
&quot;blue&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
5729 
</FONT></CODE></DIV></P>
5730 
<P>to the code above. The resulting image is shown in Figure 149<DIV class="example">
5731 
<BR> <A href="exframes/frame_ganttex02.html" target="blank"><IMG border="0"
5732 
HEIGHT="112"         src="img/img/img/img/img/img/img/img/ganttex02.png" WIDTH="381"></A>
5733 
<BR><B>Figure 149:</B> Enhancing the scale headers. <A href="exframes/frame_ganttex02.html"
5734 
target="blank">[src]</A>&nbsp;
5735 
<P></P>
5736 
</DIV></P>
5737 
<P></P>
5738 
<H2><A NAME="9_4">9.4  The structure of a Gantt chart</A></H2>
5739 
<P> A Gantt chart is made up of four distinct areas.</P>
5740 
<OL>
5741 
<LI>On the left side there is the activity title column.</LI>
5742 
<LI>On the top there is the scale headers (up to four headers may be
5743 
 displayed)</LI>
5744 
<LI>The actual plot area where all the Gantt bars and markers go</LI>
5745 
<LI>The margin area, where for example the titles are shown</LI>
5746 
</OL>
5747 
<P> Since a Gantt chart inherits all the usual properties of a JpGraph
5748 
 Graph() you have the access to the same method to formatting the image
5749 
 as before. For example to have a shadow around the image you call
5750 
 Graph::SetShadow() and to set the margin color you can use
5751 
 Graph::SetMarginColor(). Please refer to the reference documentation
5752 
 for a full list of supported features.</P>
5753 
<P> To create a Gantt chart you<STRONG> add</STRONG> objects to it. As
5754 
 of this writing you may add the following object by the use of the
5755 
 GanttChart::Add() method</P>
5756 
<UL>
5757 
<LI> Gantt bars (indicates the length of an activity)</LI>
5758 
<LI> Milestones, a single mark at a specific date</LI>
5759 
<LI> Vertical line, might be use to mark phases in projects</LI>
5760 
</UL>
5761 
<P> All these objects may be extensively modified in terms of
5762 
 formatting. You can specify color (both fill- and frame color), size,
5763 
 titles, style and patterns and so on. All these objects comes with (in
5764 
 my mind) sensible default so you don't have to specify a lot of
5765 
 parameters. But if you need a fine grain control or if you disagree
5766 
 with my taste you<STRONG> can</STRONG>.</P>
5767 
<H2><A NAME="9_5">9.5 Creating a GanttChart</A></H2>
5768 
<P> You create a new Gantt Chart with a call to GanttChart(). The
5769 
 signature for GanttGraph is the same as for ordinary JpGraph graphs,
5770 
 i.e<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
5771 
&nbsp;</FONT><FONT color="#007700">function&nbsp;</FONT><FONT color="#0000BB">
5772 
GanttGraph</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
5773 
$aWidth</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
5774 
$aHeight</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
5775 
$aCachedName</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
5776 
$aTimeOut</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
5777 
$aInline</FONT><FONT color="#007700">)</FONT><FONT color="#0000BB"></FONT>
5778 
</FONT></CODE></DIV></P>
5779 
<P>The only real difference is that for GanttCharts you can specify one
5780 
 or both of the dimension parameters (width and height) as -1 in which
5781 
 case that dimension will be automatically sized determined by scale and
5782 
 fonts chosen. The following examples shows some possible ways of
5783 
 creating a new graph</P>
5784 
<UL>
5785 
<LI> $graph=new GanttGraph()
5786 
<BR> The size of the graph will be determined automatically, no caching
5787 
 will be used and the graph will be generated in-line.</LI>
5788 
<LI> $graph=new GanttGraph(-1,-1,&quot;auto&quot;)
5789 
<BR> The size of the graph will be determined automatically, caching
5790 
 will be used (the name will be based on the script name), no timeout
5791 
 will be used and the graph will be generated in-line</LI>
5792 
<LI> $graph=new GanttGraph(450,-1,&quot;auto&quot;,5)
5793 
<BR> Same as the previous entry but the width is fixed to 450 points and
5794 
 the cached image will have a timeout of 5 min.</LI>
5795 
<LI> $graph=new GanttGraph(-1,-1,&quot;auto&quot;,5,false)
5796 
<BR> The image will not be generated in-line, only the cache will be
5797 
 updated if it has timed out, otherwise nothing will happen.</LI>
5798 
</UL>
5799 
<P> Since GanttGraph() inherits all the methods (that make sense for
5800 
 GanttGraph) from Graph you can specify shadow, color etc of the general
5801 
 frame.</P>
5802 
<H2><A NAME="9_6">9.6 Positioning objects in the Gantt plot</A></H2>
5803 
<P> Bars and Milestones need both a vertical position and a horizontal
5804 
 position. The horizontal start position is specified as a date, e.g.
5805 
 &quot;2001-06-23&quot;, and the vertical positions are specified as a number
5806 
 [0,1,2,3,...]. This vertical number indicates the position from the top
5807 
 where the object should be placed. To understand this you might imagine
5808 
 a number of &quot;invisible&quot; horizontal bands with a certain height. If you
5809 
 specify 0 as the vertical position the bar will be placed in the first
5810 
 band, specify 3 and the bar will be placed in the fourth band and so
5811 
 on.</P>
5812 
<P> It is perfectly legal, and perhaps even desirable to leave &quot;gaps&quot;
5813 
 when laying out bands to group related activities. So, for example you
5814 
 could have three activities/bars at positions 1,2,3 and then another 2
5815 
 bars at position 6,7 leaving band 0,4,5 empty.</P>
5816 
<P> All these &quot;invisible bands&quot; have the same height (equ-spaced). The
5817 
 height of each band is automatically determined and depends on both the
5818 
 method of layout ( as specified by (GanttChart::SetLayout()) and the
5819 
 individual heights of the individual bars and titles. The rules are
5820 
 quite simple:</P>
5821 
<UL>
5822 
<LI> If you use layout=GANTT_FROMTOP (the default and most common) the
5823 
 height will equal the height (+ a margin) of the highest gantt bar. The
5824 
 height calculation of each bar takes into account both the actual bar,
5825 
 the title, and any left- right-marks (more about that later) that may
5826 
 be present. The name &quot;fromtop&quot; refers to that when you have explicitly
5827 
 specified a height the bars will usually be added from band 0 and
5828 
 onwards and hence being added from the top. (This might leave empty
5829 
 space at the bottom of the plot area in the graph if the height of the
5830 
 graph has been explicitly specified).</LI>
5831 
<LI> If you use layout=GANTT_EVEN the bars are evenly (hence the name)
5832 
 spread out over the available height in the gantt chart and no
5833 
 consideration is taken of the individual bars heights. Note that if you
5834 
 use automatic sizing you cant use even layout. It just doesn't make
5835 
 sense. Even layout is for those cases when you deliberately specify a
5836 
 very large image and want the bars evenly distributed using the full
5837 
 height.</LI>
5838 
</UL>
5839 
<P></P>
5840 
<H2><A NAME="9_7">9.7 Gantt bars</A></H2>
5841 
<P> The most common of all object in a Gantt chart is of course the
5842 
 activity bar (GanttBar()). In terms of formatting this object has a
5843 
 very large flexibility. The full signature for the GanttBar constructor
5844 
 is<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
5845 
&nbsp;</FONT><FONT color="#007700">function&nbsp;</FONT><FONT color="#0000BB">
5846 
GanttBar</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
5847 
$aVPos</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">$aTitle</FONT><FONT
5848 
color="#007700">,</FONT><FONT color="#0000BB">$aStart</FONT><FONT color="#007700">
5849 
,</FONT><FONT color="#0000BB">$aEnd</FONT><FONT color="#007700">,</FONT><FONT
5850 
color="#0000BB">$aCaption</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
5851 
$aHeight</FONT><FONT color="#007700">)</FONT><FONT color="#0000BB"></FONT>
5852 
</FONT></CODE></DIV></P>
5853 
<P></P>
5854 
<P></P>
5855 
<TABLE border="0">
5856 
<TR><TD valign="top">
5857 
<!--span style=&quot;font-family:times;font-size:85%;font-weight:bold;&quot;-->
5858 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$aVPos&nbsp;</FONT></FONT>
5859 
</CODE></TD><TD valign="top">&nbsp;</TD><TD>The vertical position for the
5860 
 bar, [0..n]</TD></TR>
5861 
<TR><TD valign="top">
5862 
<!--span style=&quot;font-family:times;font-size:85%;font-weight:bold;&quot;-->
5863 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$aTitle&nbsp;</FONT></FONT>
5864 
</CODE></TD><TD valign="top">&nbsp;</TD><TD>Title for the activity</TD></TR>
5865 
<TR><TD valign="top">
5866 
<!--span style=&quot;font-family:times;font-size:85%;font-weight:bold;&quot;-->
5867 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$aStart&nbsp;</FONT></FONT>
5868 
</CODE></TD><TD valign="top">&nbsp;</TD><TD>Start date for the activity given
5869 
 as string, e.g &quot;2001-09-22&quot;</TD></TR>
5870 
<TR><TD valign="top">
5871 
<!--span style=&quot;font-family:times;font-size:85%;font-weight:bold;&quot;-->
5872 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$aEnd&nbsp;</FONT></FONT></CODE>
5873 
</TD><TD valign="top">&nbsp;</TD><TD>End date for activity given as<B> either</B>
5874 
 a date (a string) or as the duration (in days) of the activity, e.g
5875 
 both &quot;2001-10-15&quot; and 20.5 are valid inputs</TD></TR>
5876 
<TR><TD valign="top">
5877 
<!--span style=&quot;font-family:times;font-size:85%;font-weight:bold;&quot;-->
5878 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$aCaption&nbsp;</FONT></FONT>
5879 
</CODE></TD><TD valign="top">&nbsp;</TD><TD>Text string (caption) to appear
5880 
 at the end (right side) of the bar</TD></TR>
5881 
<TR><TD valign="top">
5882 
<!--span style=&quot;font-family:times;font-size:85%;font-weight:bold;&quot;-->
5883 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$aHeight&nbsp;</FONT></FONT>
5884 
</CODE></TD><TD valign="top">&nbsp;</TD><TD>Height of bar given as<B> either</B>
5885 
 a value in range [0,1] in which case this is interpretated as what
5886 
 fraction of the vertical position should the bar occupy. The height can
5887 
 also be given in absolute pixels [1..200]</TD></TR>
5888 
</TABLE>
5889 
<H3><A NAME="9_7_1">9.7.1 Specifying vertical position</A></H3>
5890 
<P> As described above vertical positions are specified as a numeric
5891 
 value [0..n] where 'n' is an arbitrary constant. (For practical
5892 
 purposes n is most likely &lt; 100)</P>
5893 
<P> Using our previous example we will illustrate this parameter by
5894 
 changing the position of our 'Project' activity to position 7. Therefor
5895 
 we change the call to GanttBar() to<DIV class="phpscript"><CODE><FONT color="#000000">
5896 
 <FONT color="#0000BB">&nbsp;$activity&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT
5897 
color="#0000BB">GanttBar</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
5898 
7</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">&quot;Project&quot;</FONT><FONT
5899 
color="#007700">,</FONT><FONT color="#DD0000">&quot;2001-12-21&quot;</FONT><FONT color="#007700">
5900 
,</FONT><FONT color="#DD0000">&quot;2002-02-20&quot;</FONT><FONT color="#007700">
5901 
);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
5902 
<P> and we then get the chart as shown below in Figure 150.</P>
5903 
<P><DIV class="example">
5904 
<BR> <A href="exframes/frame_ganttex03.html" target="blank"><IMG border="0"
5905 
HEIGHT="280"         src="img/img/img/img/img/img/img/img/ganttex03.png" WIDTH="486"></A>
5906 
<BR><B>Figure 150:</B> Changing the vertical position to 7 <A href="exframes/frame_ganttex03.html"
5907 
target="blank">[src]</A>&nbsp;
5908 
<P></P>
5909 
</DIV></P>
5910 
<P> Note that the height of each position (vertical position) will
5911 
 depend on the actual height of the bar.</P>
5912 
<H3><A NAME="9_7_2">9.7.2 Specifying start and end position for a bar</A>
5913 
</H3>
5914 
<P> Start of bars are given as a date string. The format depends on the
5915 
 current locale. Examples of valid date strings are</P>
5916 
<UL>
5917 
<LI> &quot;2001-10-22&quot;</LI>
5918 
<LI> &quot;22 October 2001&quot;</LI>
5919 
<LI> &quot;22 Oct 2001&quot;</LI>
5920 
</UL>
5921 
<P> Even if several format are supported it is recommended to use all
5922 
 numeric dates, i.e in the form &quot;2001-10-22&quot;.</P>
5923 
<P> Specifying the end position may be done in two different ways,
5924 
 either by the end date in the same way as for the start date. The other
5925 
 way is to specify the<B> length</B> of the activity in number of days
5926 
 (and fractions thereof). Examples of valid end dates are:</P>
5927 
<UL>
5928 
<LI> &quot;2001-11-15&quot;</LI>
5929 
<LI> &quot;15 Nov 2001&quot;</LI>
5930 
<LI> 22, (specifies duration of 22 days)</LI>
5931 
<LI> 22.7, (specifies duration of 22.7 days)</LI>
5932 
</UL>
5933 
<P> Please note that duration is specified as numerical values and<B>
5934 
 not</B> strings.</P>
5935 
<H3><A NAME="9_7_3">9.7.3 Milestones</A></H3>
5936 
<P> Milestones are similar to bars but have no end date since milestones
5937 
 just apply to one single date. Milestones are created much the same way
5938 
 as activities but using method MileStone() instead.</P>
5939 
<P> The full signature for milestones are<DIV class="phpscript"><CODE><FONT
5940 
color="#000000"> <FONT color="#0000BB">&nbsp;</FONT><FONT color="#007700">
5941 
function&nbsp;</FONT><FONT color="#0000BB">MileStone</FONT><FONT color="#007700">
5942 
(</FONT><FONT color="#0000BB">$aVPos</FONT><FONT color="#007700">,</FONT><FONT
5943 
color="#0000BB">$aTitle</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
5944 
$aDate</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
5945 
$aCaption</FONT><FONT color="#007700">)</FONT><FONT color="#0000BB"></FONT>
5946 
</FONT></CODE></DIV></P>
5947 
<P></P>
5948 
<P></P>
5949 
<TABLE border="0">
5950 
<TR><TD valign="top">
5951 
<!--span style=&quot;font-family:times;font-size:85%;font-weight:bold;&quot;-->
5952 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$aVPos&nbsp;</FONT></FONT>
5953 
</CODE></TD><TD valign="top">&nbsp;</TD><TD>The vertical position for the
5954 
 bar, [0..n]</TD></TR>
5955 
<TR><TD valign="top">
5956 
<!--span style=&quot;font-family:times;font-size:85%;font-weight:bold;&quot;-->
5957 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$aTitle&nbsp;</FONT></FONT>
5958 
</CODE></TD><TD valign="top">&nbsp;</TD><TD>Title for the activity</TD></TR>
5959 
<TR><TD valign="top">
5960 
<!--span style=&quot;font-family:times;font-size:85%;font-weight:bold;&quot;-->
5961 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$aDate&nbsp;</FONT></FONT>
5962 
</CODE></TD><TD valign="top">&nbsp;</TD><TD>Date for the milestone</TD></TR>
5963 
<TR><TD valign="top">
5964 
<!--span style=&quot;font-family:times;font-size:85%;font-weight:bold;&quot;-->
5965 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$aCaption&nbsp;</FONT></FONT>
5966 
</CODE></TD><TD valign="top">&nbsp;</TD><TD>Text to the right of the
5967 
 milestone</TD></TR>
5968 
</TABLE>
5969 
<P> Valid milestones are for example</P>
5970 
<UL>
5971 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
5972 
&nbsp;$milestone&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">
5973 
MileStone</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">3</FONT><FONT
5974 
color="#007700">,</FONT><FONT color="#DD0000">&quot;Code&nbsp;complete&quot;</FONT><FONT
5975 
color="#007700">,</FONT><FONT color="#DD0000">&quot;2001-12-01&quot;</FONT><FONT color="#007700">
5976 
);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
5977 
<P></P>
5978 
</LI>
5979 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
5980 
&nbsp;$milestone&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">
5981 
MileStone</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">3</FONT><FONT
5982 
color="#007700">,</FONT><FONT color="#DD0000">&quot;Code&nbsp;complete&quot;</FONT><FONT
5983 
color="#007700">,</FONT><FONT color="#DD0000">&quot;2001-12-01&quot;</FONT><FONT color="#007700">
5984 
,</FONT><FONT color="#DD0000">&quot;(2001-12-01)&quot;</FONT><FONT color="#007700">
5985 
);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
5986 
<P></P>
5987 
</LI>
5988 
</UL>
5989 
<P> By default milestones are rendered as a filled &quot;Diamond&quot; shape. This
5990 
 may be optionally modified. The actual shape is specified by the 'mark'
5991 
 property of milestone which is an instance of the PlotMark() class
5992 
 (same class responsible for the marks in line graphs).</P>
5993 
<P> To change the shape of a milestone to, say a triangle, you use the
5994 
 SetType() method as in<DIV class="phpscript"><CODE><FONT color="#000000">
5995 
 <FONT color="#0000BB">&nbsp;$milestone</FONT><FONT color="#007700">-&gt;</FONT><FONT
5996 
color="#0000BB">mark</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
5997 
SetType</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
5998 
MARK_DTRIANGLE</FONT><FONT color="#007700">)</FONT><FONT color="#0000BB">
5999 
</FONT></FONT></CODE></DIV></P>
6000 
<P> Let's put this into practice and add a milestone to our previous
6001 
 example by adding the following two lines of code which result in
6002 
 Figure 151 shown below.<DIV class="example">
6003 
<BR> <A href="exframes/frame_ganttex04.html" target="blank"><IMG border="0"
6004 
HEIGHT="189"         src="img/img/img/img/img/img/img/img/ganttex04.png" WIDTH="493"></A>
6005 
<BR><B>Figure 151:</B> Illustration of how to add a milestone to a gantt
6006 
 chart <A href="exframes/frame_ganttex04.html" target="blank">[src]</A>&nbsp;
6007 
<P></P>
6008 
</DIV></P>
6009 
<P></P>
6010 
<P> You may note that by default the title color is red for milestones.
6011 
 If you like to change this to be instead, say bold black, you would
6012 
 invoke the SetColor() and SetFont() methods on the title property of
6013 
 milestones as in<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT
6014 
color="#0000BB">&nbsp;$milestone</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6015 
title</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">SetFont</FONT><FONT
6016 
color="#007700">(</FONT><FONT color="#0000BB">FF_FONT1</FONT><FONT color="#007700">
6017 
,</FONT><FONT color="#0000BB">FF_BOLD</FONT><FONT color="#007700">);
6018 
<BR></FONT><FONT color="#0000BB">$milestone</FONT><FONT color="#007700">
6019 
-&gt;</FONT><FONT color="#0000BB">title</FONT><FONT color="#007700">-&gt;</FONT><FONT
6020 
color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
6021 
&quot;black&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
6022 
</FONT></CODE></DIV></P>
6023 
<P> and thew result would now (not surprisingly be)<DIV class="example">
6024 
<BR> <A href="exframes/frame_ganttex05.html" target="blank"><IMG border="0"
6025 
HEIGHT="189"         src="img/img/img/img/img/img/img/img/ganttex05.png" WIDTH="502"></A>
6026 
<BR><B>Figure 152:</B> Modifying the milestone title color and font <A href="exframes/frame_ganttex05.html"
6027 
target="blank">[src]</A>&nbsp;
6028 
<P></P>
6029 
</DIV></P>
6030 
<P> To modify the caption you do exactly the same but act on property
6031 
 'caption' instead of 'title', i.e.<DIV class="phpscript"><CODE><FONT color="#000000">
6032 
 <FONT color="#0000BB">&nbsp;$milestone</FONT><FONT color="#007700">-&gt;</FONT><FONT
6033 
color="#0000BB">caption</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6034 
SetFont</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
6035 
FF_FONT1</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
6036 
FF_BOLD</FONT><FONT color="#007700">);
6037 
<BR></FONT><FONT color="#0000BB">$milestone</FONT><FONT color="#007700">
6038 
-&gt;</FONT><FONT color="#0000BB">caption</FONT><FONT color="#007700">-&gt;</FONT><FONT
6039 
color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
6040 
&quot;black&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
6041 
</FONT></CODE></DIV></P>
6042 
<P></P>
6043 
<P> It is worth noting that you modify the bar title and caption the
6044 
 exact same way by acting on the 'title' and 'caption' property for the
6045 
 bars.</P>
6046 
<H3><A NAME="9_7_4">9.7.4 Vertical line</A></H3>
6047 
<P> The final object you may add to a Gantt chart is simple, but quite
6048 
 useful, a straight vertical line extending over the whole plot height.
6049 
 This could for example be used to illustrate different phases in a
6050 
 project. You create a line object by a call to GanttVLine()</P>
6051 
<P> The full signature for GanttVLine() is<DIV class="phpscript"><CODE><FONT
6052 
color="#000000"> <FONT color="#0000BB">&nbsp;</FONT><FONT color="#007700">
6053 
function&nbsp;</FONT><FONT color="#0000BB">GanttVLine</FONT><FONT color="#007700">
6054 
(</FONT><FONT color="#0000BB">$aDate</FONT><FONT color="#007700">,</FONT><FONT
6055 
color="#0000BB">$aTitle</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
6056 
$aColor</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
6057 
$aWeight</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
6058 
$aStyle</FONT><FONT color="#007700">)</FONT><FONT color="#0000BB"></FONT>
6059 
</FONT></CODE></DIV></P>
6060 
<P></P>
6061 
<P></P>
6062 
<TABLE border="0">
6063 
<TR><TD valign="top">
6064 
<!--span style=&quot;font-family:times;font-size:85%;font-weight:bold;&quot;-->
6065 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$aDate&nbsp;</FONT></FONT>
6066 
</CODE></TD><TD valign="top">&nbsp;</TD><TD>Date for the milestone</TD></TR>
6067 
<TR><TD valign="top">
6068 
<!--span style=&quot;font-family:times;font-size:85%;font-weight:bold;&quot;-->
6069 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$aTitle&nbsp;</FONT></FONT>
6070 
</CODE></TD><TD valign="top">&nbsp;</TD><TD>Title for the line. The title is
6071 
 displayed at the bottom of the line</TD></TR>
6072 
<TR><TD valign="top">
6073 
<!--span style=&quot;font-family:times;font-size:85%;font-weight:bold;&quot;-->
6074 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$aColor&nbsp;</FONT></FONT>
6075 
</CODE></TD><TD valign="top">&nbsp;</TD><TD>Color for the line</TD></TR>
6076 
<TR><TD valign="top">
6077 
<!--span style=&quot;font-family:times;font-size:85%;font-weight:bold;&quot;-->
6078 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$aWeight&nbsp;</FONT></FONT>
6079 
</CODE></TD><TD valign="top">&nbsp;</TD><TD>Line width</TD></TR>
6080 
<TR><TD valign="top">
6081 
<!--span style=&quot;font-family:times;font-size:85%;font-weight:bold;&quot;-->
6082 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$aStyle&nbsp;</FONT></FONT>
6083 
</CODE></TD><TD valign="top">&nbsp;</TD><TD>Line style,&quot;dashed&quot;, &quot;dotted&quot; and
6084 
 so on</TD></TR>
6085 
</TABLE>
6086 
<P> Valid creations of lines are for example</P>
6087 
<UL>
6088 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6089 
&nbsp;$vline&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">
6090 
GanttVLine</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
6091 
&quot;2001-12-24&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
6092 
</FONT></CODE></DIV>
6093 
<P></P>
6094 
</LI>
6095 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6096 
&nbsp;$vline&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">
6097 
GanttVLine</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
6098 
&quot;2001-12-24&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
6099 
&quot;Phase&nbsp;1&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
6100 
</FONT></CODE></DIV>
6101 
<P></P>
6102 
</LI>
6103 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6104 
&nbsp;$vline&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">
6105 
GanttVLine</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
6106 
&quot;2001-12-24&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
6107 
&quot;Phase&nbsp;1&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
6108 
&quot;darkred&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
6109 
</FONT></CODE></DIV>
6110 
<P></P>
6111 
</LI>
6112 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6113 
&nbsp;$vline&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">
6114 
GanttVLine</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
6115 
&quot;2001-12-24&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
6116 
&quot;Phase&nbsp;1&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
6117 
&quot;darkred&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">5</FONT><FONT
6118 
color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
6119 
<P></P>
6120 
</LI>
6121 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6122 
&nbsp;$vline&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">
6123 
GanttVLine</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
6124 
&quot;2001-12-24&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
6125 
&quot;Phase&nbsp;1&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
6126 
&quot;darkred&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">5</FONT><FONT
6127 
color="#007700">,</FONT><FONT color="#DD0000">&quot;dotted&quot;</FONT><FONT color="#007700">
6128 
);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
6129 
<P></P>
6130 
</LI>
6131 
</UL>
6132 
<P> To add the line to the graph you just have to call GanttGraph::Add()
6133 
 as with milestones and bars. Let's illustrate the use of vertical lines
6134 
 by adding a line to the previous example.<DIV class="phpscript"><CODE><FONT
6135 
color="#000000"> <FONT color="#0000BB">&nbsp;$vline&nbsp;</FONT><FONT color="#007700">
6136 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">GanttVLine</FONT><FONT color="#007700">
6137 
(</FONT><FONT color="#DD0000">&quot;2001-12-24&quot;</FONT><FONT color="#007700">,</FONT><FONT
6138 
color="#DD0000">&quot;Phase&nbsp;1&quot;</FONT><FONT color="#007700">);
6139 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
6140 
color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
6141 
$vline</FONT><FONT color="#007700">);
6142 
<BR></FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
6143 
<P> and the example (See 153) now becomes<DIV class="example">
6144 
<BR> <A href="exframes/frame_ganttex06.html" target="blank"><IMG border="0"
6145 
HEIGHT="189"         src="img/img/img/img/img/img/img/img/ganttex06.png" WIDTH="502"></A>
6146 
<BR><B>Figure 153:</B> Adding a vertical line with a title to the Gantt
6147 
 chart <A href="exframes/frame_ganttex06.html" target="blank">[src]</A>&nbsp;
6148 
<P></P>
6149 
</DIV></P>
6150 
<P> From the above figure you can see that by default the line is drawn
6151 
 at the beginning of the day of the specified date and in a 'dashed'
6152 
 style. This can (of course!) be modified so that the line is
6153 
 drawn/aligned anywhere in the specified day. You modify this by
6154 
 invoking the method SetDayOffset() with an argument specifying the
6155 
 fraction of the day where you want the line positioned.</P>
6156 
<P> If you, for example, want to display the line in the middle of the
6157 
 day just add the line<DIV class="phpscript"><CODE><FONT color="#000000">
6158 
 <FONT color="#0000BB">&nbsp;$vline</FONT><FONT color="#007700">-&gt;</FONT><FONT
6159 
color="#0000BB">SetDayOffset</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
6160 
0.5</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT>
6161 
</CODE></DIV></P>
6162 
<P> to the previous code and the result will be<DIV class="example">
6163 
<BR> <A href="exframes/frame_ganttex07.html" target="blank"><IMG border="0"
6164 
HEIGHT="189"         src="img/img/img/img/img/img/img/img/ganttex07.png" WIDTH="502"></A>
6165 
<BR><B>Figure 154:</B> Modifying the position of the line within the day
6166 
 <A href="exframes/frame_ganttex07.html" target="blank">[src]</A>&nbsp;
6167 
<P></P>
6168 
</DIV></P>
6169 
<P></P>
6170 
<P> As usual you may modify the font, size and color by invoking the
6171 
 appropriate method (SetFont(), SetColor()) on the 'title' property of
6172 
 lines.</P>
6173 
<H3><A NAME="9_7_5">9.7.5 Adding markers to a gantt bar</A></H3>
6174 
<P> You can easily add a variety of markers both to the start and end of
6175 
 the gantt bar. They could for example be used as an alternate way to
6176 
 illustrate important milestones or anticipated deliveries.</P>
6177 
<P> The left and right markers are accessed through the two properties
6178 
 'leftMark' and 'rightMark'. They are both instances of the general
6179 
 'PlotMark' class which is also used for the milestones (and in line
6180 
 graphs). The 'PlotMark' class supports several different styles, for
6181 
 example, diamond (the default for milestones), filled and unfilled
6182 
 circles, squares, stares, and so on. Please refer to the reference
6183 
 section for a complete listing.</P>
6184 
<P> Let's illustrate this by adding a right marker to the previous
6185 
 example. We will use a style of a filled (red) circle with a white
6186 
 title, say, &quot;M5&quot;. In order to accomplish this we must augment the
6187 
 previous example with the following lines:<DIV class="phpscript"><CODE><FONT
6188 
color="#000000"> <FONT color="#0000BB">&nbsp;$activity</FONT><FONT color="#007700">
6189 
-&gt;</FONT><FONT color="#0000BB">rightMark</FONT><FONT color="#007700">-&gt;</FONT><FONT
6190 
color="#0000BB">Show</FONT><FONT color="#007700">();&nbsp;&nbsp;&nbsp;&nbsp;
6191 
<BR></FONT><FONT color="#0000BB">$activity</FONT><FONT color="#007700">
6192 
-&gt;</FONT><FONT color="#0000BB">rightMark</FONT><FONT color="#007700">-&gt;</FONT><FONT
6193 
color="#0000BB">title</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6194 
Set</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">&quot;M5&quot;</FONT><FONT
6195 
color="#007700">);
6196 
<BR></FONT><FONT color="#0000BB">$activity</FONT><FONT color="#007700">
6197 
-&gt;</FONT><FONT color="#0000BB">rightMark</FONT><FONT color="#007700">-&gt;</FONT><FONT
6198 
color="#0000BB">SetType</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
6199 
MARK_FILLEDCIRCLE</FONT><FONT color="#007700">);
6200 
<BR></FONT><FONT color="#0000BB">$activity</FONT><FONT color="#007700">
6201 
-&gt;</FONT><FONT color="#0000BB">rightMark</FONT><FONT color="#007700">-&gt;</FONT><FONT
6202 
color="#0000BB">SetWidth</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
6203 
10</FONT><FONT color="#007700">);
6204 
<BR></FONT><FONT color="#0000BB">$activity</FONT><FONT color="#007700">
6205 
-&gt;</FONT><FONT color="#0000BB">rightMark</FONT><FONT color="#007700">-&gt;</FONT><FONT
6206 
color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
6207 
&quot;red&quot;</FONT><FONT color="#007700">);
6208 
<BR></FONT><FONT color="#0000BB">$activity</FONT><FONT color="#007700">
6209 
-&gt;</FONT><FONT color="#0000BB">rightMark</FONT><FONT color="#007700">-&gt;</FONT><FONT
6210 
color="#0000BB">SetFillColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
6211 
&quot;red&quot;</FONT><FONT color="#007700">);
6212 
<BR></FONT><FONT color="#0000BB">$activity</FONT><FONT color="#007700">
6213 
-&gt;</FONT><FONT color="#0000BB">rightMark</FONT><FONT color="#007700">-&gt;</FONT><FONT
6214 
color="#0000BB">title</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6215 
SetFont</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
6216 
FF_ARIAL</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
6217 
FS_BOLD</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">12</FONT><FONT
6218 
color="#007700">);
6219 
<BR></FONT><FONT color="#0000BB">$activity</FONT><FONT color="#007700">
6220 
-&gt;</FONT><FONT color="#0000BB">rightMark</FONT><FONT color="#007700">-&gt;</FONT><FONT
6221 
color="#0000BB">title</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6222 
SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
6223 
&quot;white&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
6224 
</FONT></CODE></DIV></P>
6225 
<P> This might seem like a lot of lines but this is as complicated as it
6226 
 possible can get. As an illustration in the example belwo more or less
6227 
 everything that is changeable has been changed, the default font,
6228 
 font-color, fill-color, frame-color and width of marker. The two lines
6229 
 only really necessary are the first two, showing the mark and setting a
6230 
 title. One could still get a good result by using default values for
6231 
 the rest of the properties.</P>
6232 
<P> The resulting image can be seen in Figure 155 below.<DIV class="example">
6233 
<BR> <A href="exframes/frame_ganttex08.html" target="blank"><IMG border="0"
6234 
HEIGHT="243"         src="img/img/img/img/img/img/img/img/ganttex08.png" WIDTH="502"></A>
6235 
<BR><B>Figure 155:</B> Adding a right marker to a bar. <A href="exframes/frame_ganttex08.html"
6236 
target="blank">[src]</A>&nbsp;
6237 
<P></P>
6238 
</DIV></P>
6239 
<P> We have deliberately introduced a &quot;strangeness&quot; here. If the
6240 
 previous two examples are compared it can bee seen that the last
6241 
 example is larger than the previous one. Why?</P>
6242 
<P> The explanation is trivial once we recall that the height of bars
6243 
 are sized relative to the horizontal spacing. The horizontal spacing
6244 
 are based on the highest single bar including title size and, here come
6245 
 the explanation, marker size. The horizontal spacing has grown since
6246 
 the minimum height is now based on 10 points(=the height of the mark).
6247 
 The bar still occupy the same percentage of the height so it seems to
6248 
 have grown.</P>
6249 
<P> If this behavior is unwanted it is always possible to specify an
6250 
 absolute size for the bar heigh, say 8 pixels, with a call<DIV class="phpscript">
6251 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$activity</FONT><FONT
6252 
color="#007700">-&gt;</FONT><FONT color="#0000BB">SetHeight</FONT><FONT color="#007700">
6253 
(</FONT><FONT color="#0000BB">8</FONT><FONT color="#007700">);</FONT><FONT
6254 
color="#0000BB"></FONT></FONT></CODE></DIV></P>
6255 
<P> and achieve the result in Figure 156 below.<DIV class="example">
6256 
<BR> <A href="exframes/frame_ganttex09.html" target="blank"><IMG border="0"
6257 
HEIGHT="243"         src="img/img/img/img/img/img/img/img/ganttex09.png" WIDTH="502"></A>
6258 
<BR><B>Figure 156:</B> Specifying an absolute size for the height of the
6259 
 bar. <A href="exframes/frame_ganttex09.html" target="blank">[src]</A>&nbsp;
6260 
<P></P>
6261 
</DIV></P>
6262 
<P> It is worth noting that the height reserved for each bar is still
6263 
 the same since we haven't changed the height of the marker and the
6264 
 reserved space is the maximum height used by any bar.</P>
6265 
<H3><A NAME="9_7_6">9.7.6 Adjusting the minimum distance between bars</A>
6266 
</H3>
6267 
<P> Let's see what happens if we set the height of each bar to be 100%
6268 
 of the reserved height by adding another activity/bar below the first
6269 
 one and set the height of each bar to 100% by adding the lines (We omit
6270 
 the added lines to add another bar since they are just a copy of the
6271 
 first bar)<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6272 
&nbsp;$activity</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6273 
SetHeight</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">1.0</FONT><FONT
6274 
color="#007700">);
6275 
<BR></FONT><FONT color="#0000BB">$activity2</FONT><FONT color="#007700">
6276 
-&gt;</FONT><FONT color="#0000BB">SetHeight</FONT><FONT color="#007700">(</FONT><FONT
6277 
color="#0000BB">1.0</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB">
6278 
</FONT></FONT></CODE></DIV></P>
6279 
<P> to the previous example. (Note that a value in the range [0..1] is
6280 
 interpretated as the fraction of the reserved height while a value &gt; 1
6281 
 is interpretated as the absolute size in pixels.)<DIV class="example">
6282 
<BR> <A href="exframes/frame_ganttex10.html" target="blank"><IMG border="0"
6283 
HEIGHT="243"         src="img/img/img/img/img/img/img/img/ganttex10.png" WIDTH="502"></A>
6284 
<BR><B>Figure 157:</B> Setting the height for each bar to 100% <A href="exframes/frame_ganttex10.html"
6285 
target="blank">[src]</A>&nbsp;
6286 
<P></P>
6287 
</DIV></P>
6288 
<P> Aha.. What we are trying to do doesn't really make sense. Since we
6289 
 have specified that the bar will always occupy 100% of the available
6290 
 reserved with there will be no distance between the bars. So what if we
6291 
 specify the bar as 10 pixel absolute by changing the lines to<DIV class="phpscript">
6292 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$activity</FONT><FONT
6293 
color="#007700">-&gt;</FONT><FONT color="#0000BB">SetHeight</FONT><FONT color="#007700">
6294 
(</FONT><FONT color="#0000BB">10</FONT><FONT color="#007700">);
6295 
<BR></FONT><FONT color="#0000BB">$activity2</FONT><FONT color="#007700">
6296 
-&gt;</FONT><FONT color="#0000BB">SetHeight</FONT><FONT color="#007700">(</FONT><FONT
6297 
color="#0000BB">10</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB">
6298 
</FONT></FONT></CODE></DIV></P>
6299 
<P> we instead get<DIV class="example">
6300 
<BR> <A href="exframes/frame_ganttex11.html" target="blank"><IMG border="0"
6301 
HEIGHT="243"         src="img/img/img/img/img/img/img/img/ganttex11.png" WIDTH="502"></A>
6302 
<BR><B>Figure 158:</B> Setting both bars height to 10 pixels <A href="exframes/frame_ganttex11.html"
6303 
target="blank">[src]</A>&nbsp;
6304 
<P></P>
6305 
</DIV></P>
6306 
<P> So what can we actually do? Well if you remember the reserved height
6307 
 for each bar is the maximum height of all bars including titles. This
6308 
 guarantees that no two bars will ever overlap. To guarantee that titles
6309 
 don't end up too close together there is a<B> Vertical Label Margin</B>
6310 
 which basically specifies some extra &quot;air&quot; in between the titles. The
6311 
 amount of air is specified in percent of the title height. To set the
6312 
 margin you use<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6313 
&nbsp;GanttGraph</FONT><FONT color="#007700">::</FONT><FONT color="#0000BB">
6314 
SetLabelVMarginFactor</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
6315 
$aMargin</FONT><FONT color="#007700">)</FONT><FONT color="#0000BB"></FONT>
6316 
</FONT></CODE></DIV></P>
6317 
<P> As an example let's set that margin in the previous example to 0 and
6318 
 see what happens.<DIV class="example">
6319 
<BR> <A href="exframes/frame_ganttex12.html" target="blank"><IMG border="0"
6320 
HEIGHT="212"         src="img/img/img/img/img/img/img/img/ganttex12.png" WIDTH="502"></A>
6321 
<BR><B>Figure 159:</B> Setting the vertical label margin to 0% <A href="exframes/frame_ganttex12.html"
6322 
target="blank">[src]</A>&nbsp;
6323 
<P></P>
6324 
</DIV></P>
6325 
<P> As you would perhaps expect the two bars just barely touches now
6326 
 since there are no extra margin added. If the two bars hadn't had the
6327 
 extra right marker it would have looked very compressed.</P>
6328 
<P> By default the vertical margin is set to 40%.</P>
6329 
<H2><A NAME="9_8">9.8 Formatting the scale headers</A></H2>
6330 
<P> The scale headers allow you to view up to four different scales at
6331 
 the same time. The four basic scales are:</P>
6332 
<UL>
6333 
<LI> Day scale</LI>
6334 
<LI> Week scale</LI>
6335 
<LI> Month scale</LI>
6336 
<LI> Year scale</LI>
6337 
</UL>
6338 
<P> You can choose what scale to include and exclude by using the
6339 
 SetScale() method. For example, for a detailed gantt you might choose
6340 
 to display days and weeks by specifying<DIV class="phpscript"><CODE><FONT
6341 
color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
6342 
-&gt;</FONT><FONT color="#0000BB">ShowHeaders</FONT><FONT color="#007700">
6343 
(&nbsp;</FONT><FONT color="#0000BB">GANTT_HWEEK&nbsp;</FONT><FONT color="#007700">
6344 
|&nbsp;</FONT><FONT color="#0000BB">GANTT_DAY&nbsp;</FONT><FONT color="#007700">);</FONT><FONT
6345 
color="#0000BB"></FONT></FONT></CODE></DIV></P>
6346 
<P> If you instead wanted &quot;the big picture&quot; it might be enough to show
6347 
 year and months by specifying<DIV class="phpscript"><CODE><FONT color="#000000">
6348 
 <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
6349 
color="#0000BB">ShowHeaders</FONT><FONT color="#007700">(&nbsp;</FONT><FONT color="#0000BB">
6350 
GANTT_YEAR&nbsp;</FONT><FONT color="#007700">|&nbsp;</FONT><FONT color="#0000BB">
6351 
GANTT_MONTH&nbsp;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
6352 
</FONT></CODE></DIV></P>
6353 
<P> You can choose freely the combination of scales that you want, but a
6354 
 chart must at least have one scale of course.</P>
6355 
<P> Once you have decided what level of details you need you can then
6356 
 fine tune the exact layout/formatting of each of the enabled scales as
6357 
 described below.</P>
6358 
<P> These scale header are all accessed through the graph instance
6359 
 variables 'scale' as in<DIV class="phpscript"><CODE><FONT color="#000000">
6360 
 <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
6361 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6362 
week</FONT></FONT></CODE></DIV></P>
6363 
<P> or<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6364 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">scale</FONT><FONT
6365 
color="#007700">-&gt;</FONT><FONT color="#0000BB">day</FONT></FONT></CODE></DIV>
6366 
</P>
6367 
<P>. All these headers share the following properties.</P>
6368 
<UL>
6369 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6370 
&nbsp;Show</FONT><FONT color="#007700">()</FONT><FONT color="#0000BB"></FONT></FONT>
6371 
</CODE></DIV>
6372 
<P> Determine if the scale should be shown or not</P>
6373 
</LI>
6374 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6375 
&nbsp;SetFont</FONT><FONT color="#007700">()</FONT><FONT color="#0000BB"></FONT>
6376 
</FONT></CODE></DIV>
6377 
<P>Font for text in header</P>
6378 
</LI>
6379 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6380 
&nbsp;SetFontColor</FONT><FONT color="#007700">()</FONT><FONT color="#0000BB">
6381 
</FONT></FONT></CODE></DIV>
6382 
<P> Specify the color of the header text</P>
6383 
</LI>
6384 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6385 
&nbsp;SetStyle</FONT><FONT color="#007700">()</FONT><FONT color="#0000BB"></FONT>
6386 
</FONT></CODE></DIV>
6387 
<P>Specify what date format should be used, for example in the week
6388 
 scale it is possible to show either week number, the start date of the
6389 
 week and so on.</P>
6390 
</LI>
6391 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6392 
&nbsp;SetBackgroundColor</FONT><FONT color="#007700">()</FONT><FONT color="#0000BB">
6393 
</FONT></FONT></CODE></DIV>
6394 
<P>As it says, the background color for the header</P>
6395 
</LI>
6396 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6397 
&nbsp;SetFrameWeight</FONT><FONT color="#007700">()</FONT><FONT color="#0000BB">
6398 
</FONT></FONT></CODE></DIV>
6399 
<P>The line weight of the box around the scale</P>
6400 
</LI>
6401 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6402 
&nbsp;SetFrameColor</FONT><FONT color="#007700">()</FONT><FONT color="#0000BB">
6403 
</FONT></FONT></CODE></DIV>
6404 
<P>The line color for the frame</P>
6405 
</LI>
6406 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6407 
&nbsp;SetTitleVertMargin</FONT><FONT color="#007700">()</FONT><FONT color="#0000BB">
6408 
</FONT></FONT></CODE></DIV>
6409 
<P>The margin, in percent, below and above the title text</P>
6410 
</LI>
6411 
</UL>
6412 
<P> In addition to these methods each scale also has the property 'grid'
6413 
 which determines the appearance of grid lines for that specific scale.
6414 
 You may modify the appearance of grid lines by the &quot;normal&quot; line
6415 
 methods, i.e. SetColor(),SetWeight() SetStyle() and Show(). So for
6416 
 example to set the week grid line red you would use<DIV class="phpscript">
6417 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
6418 
-&gt;</FONT><FONT color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT
6419 
color="#0000BB">week</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6420 
grid</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">SetColor</FONT><FONT
6421 
color="#007700">(</FONT><FONT color="#DD0000">&quot;red&quot;</FONT><FONT color="#007700">
6422 
);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
6423 
<P> Each of the scales also have some specific formatting possibilities
6424 
 as described below.</P>
6425 
<H3><A NAME="9_8_1">9.8.1 Minute scale</A></H3>
6426 
<P> Minute scale is the lowest resolution you can use. It is often
6427 
 convenient to use Minute scale with &quot;GanttScale::SetINtervall()&quot; since
6428 
 by default the increment will be 1 minute. The style of minute scale
6429 
 can be further adjusted by the use<I> style</I> parameters which can be
6430 
 one of</P>
6431 
<OL>
6432 
<LI> &quot;MINUTESTYLE_MM&quot;, This will display minutes as a two digit number
6433 
 with a leading zero if necessary</LI>
6434 
<LI> &quot;MINUTESTYLE_CUSTOM&quot;, This will let you specify you own custom
6435 
 minute style by making a call to<I> HeaderProperty:: SetFormatString()</I>
6436 
</LI>
6437 
</OL>
6438 
<P> Minute scale is enabled by adding the GANTT_HMIN in the
6439 
 GanttGraph::ShowHeaders() call. For example as in<DIV class="phpscript">
6440 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
6441 
-&gt;</FONT><FONT color="#0000BB">ShowHeaders</FONT><FONT color="#007700">(</FONT><FONT
6442 
color="#0000BB">GANTT_HDAY&nbsp;</FONT><FONT color="#007700">|&nbsp;</FONT><FONT color="#0000BB">
6443 
GANTT_HHOUR&nbsp;</FONT><FONT color="#007700">|&nbsp;</FONT><FONT color="#0000BB">
6444 
GANTT_HMIN</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
6445 
</FONT></CODE></DIV></P>
6446 
<P> The code snippet below shows how to set up a minute scale with 30
6447 
 min interval and some custom colors.<DIV class="phpscript"><CODE><FONT color="#000000">
6448 
 <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
6449 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6450 
minute</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6451 
SetIntervall</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
6452 
30</FONT><FONT color="#007700">);
6453 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
6454 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6455 
minute</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6456 
SetBackgroundColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
6457 
'lightyellow:1.5'</FONT><FONT color="#007700">);
6458 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
6459 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6460 
minute</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6461 
SetFont</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
6462 
FF_FONT0</FONT><FONT color="#007700">);
6463 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
6464 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6465 
minute</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6466 
SetStyle</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
6467 
MINUTESTYLE_MM</FONT><FONT color="#007700">);
6468 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
6469 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6470 
minute</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">grid</FONT><FONT
6471 
color="#007700">-&gt;</FONT><FONT color="#0000BB">SetColor</FONT><FONT color="#007700">
6472 
(</FONT><FONT color="#DD0000">'lightgray'</FONT><FONT color="#007700">);</FONT><FONT
6473 
color="#0000BB"></FONT></FONT></CODE></DIV></P>
6474 
<P></P>
6475 
<H3><A NAME="9_8_2">9.8.2 Hour scale</A></H3>
6476 
<P> The hour scale has more builtin formatting possibilities. The
6477 
 following formatting options are available</P>
6478 
<OL>
6479 
<LI> &quot;HOURSTYLE_HM24&quot;, Will display the only the hour in military time
6480 
 0-24 , for example 13:00</LI>
6481 
<LI> &quot;HOURSTYLE_H24&quot;, Will display the hour with both hour and minute in
6482 
 military time 0-24, for example 13</LI>
6483 
<LI>&quot;HOURSTYLE_HMAMPM&quot;, Will display the hour and minutes with a
6484 
 suitable am/pm postfix, for example 1:30pm</LI>
6485 
<LI> &quot;HOURSTYLE_HAMPM&quot;, Will display only the hour with a suitable am/pm
6486 
 postfix, for example 1pm</LI>
6487 
<LI>&quot;HOURSTYLE_CUSTOM&quot;, Custom defined format as specified with a call
6488 
 to HeaderProperty::SetFormatString()</LI>
6489 
</OL>
6490 
<P> For hours it is possible to specify the interval in either of two
6491 
 ways. With an integer, e.g. 6, or as time interval, e.g. &quot;1:30&quot; which
6492 
 makes the interval one and a half hour. The only restriction is that
6493 
 the interval must be even dividable for 24 hours since one day is the
6494 
 smallest possible interval to show. This means that it is allowed to
6495 
 use, for example 2,4,6,&quot;1:30&quot; or &quot;0:45&quot; as intervals but not 7, &quot;2:45&quot;.</P>
6496 
<P> The code snippet below shows hot to set up a hour scale to with 45
6497 
 minutes interval and some custom colors<DIV class="phpscript"><CODE><FONT
6498 
color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
6499 
-&gt;</FONT><FONT color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT
6500 
color="#0000BB">hour</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6501 
SetBackgroundColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
6502 
'lightyellow:1.5'</FONT><FONT color="#007700">);
6503 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
6504 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6505 
hour</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">SetFont</FONT><FONT
6506 
color="#007700">(</FONT><FONT color="#0000BB">FF_FONT1</FONT><FONT color="#007700">
6507 
);
6508 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
6509 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6510 
hour</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">SetStyle</FONT><FONT
6511 
color="#007700">(</FONT><FONT color="#0000BB">HOURSTYLE_HMAMPM</FONT><FONT
6512 
color="#007700">);
6513 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
6514 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6515 
hour</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6516 
SetIntervall</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
6517 
&quot;0:45&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
6518 
</FONT></CODE></DIV></P>
6519 
<P> The example below shows a gantt chart with the day and hour scale
6520 
 enabled<DIV class="example">
6521 
<BR> <A href="exframes/frame_gantthourex1.html" target="blank"><IMG border="0"
6522 
HEIGHT="173"         src="img/img/img/img/img/img/img/img/gantthourex1.png" WIDTH="545"></A>
6523 
<BR><B>Figure 160:</B> Using hour scale in the Gantt chart <A href="exframes/frame_gantthourex1.html"
6524 
target="blank">[src]</A>&nbsp;
6525 
<P></P>
6526 
</DIV></P>
6527 
<P></P>
6528 
<H3><A NAME="9_8_3">9.8.3 Day scale</A></H3>
6529 
<P> By default the day scale show the first letter of the week day but
6530 
 it is also posible to format the day scale in a number of different
6531 
 ways. Days can have one of the following scale formats.</P>
6532 
<UL>
6533 
<LI>DAYSTYLE_ONELETTER, On letter week day. Example &quot;M&quot;</LI>
6534 
<LI>DAYSTYLE_LONG, Full week day. Example &quot;Monday&quot;</LI>
6535 
<LI>DAYSTYLE_LONGDAYDATE1, Day with date. Example &quot;Monday 23 Jun&quot;</LI>
6536 
<LI>DAYSTYLE_LONGDAYDATE2, Day with date+year. Example &quot;Monday 23 Jun
6537 
 2003&quot;</LI>
6538 
<LI>DAYSTYLE_SHORT, Short date. Example &quot;Mon&quot;</LI>
6539 
<LI>DAYSTYLE_SHORTDAYDATE1, Short date+date. Example &quot;Mon 23/6&quot;</LI>
6540 
<LI>DAYSTYLE_SHORTDAYDATE2, Short date+date. Example &quot;Mon 23 Jun&quot;</LI>
6541 
<LI>DAYSTYLE_SHORTDAYDATE3,Short date+date. Example &quot;Mon 23&quot;</LI>
6542 
<LI>DAYSTYLE_SHORTDATE1, Short date. Example &quot;23/6&quot;</LI>
6543 
<LI>DAYSTYLE_SHORTDATE2, Short date. Example &quot;23 Jun&quot;</LI>
6544 
<LI>DAYSTYLE_SHORTDATE3, Short date. Example &quot;Mon 23&quot;</LI>
6545 
<LI>DAYSTYLE_SHORTDATE4, Short date. Example &quot;23&quot;</LI>
6546 
<LI>DAYSTYLE_CUSTOM, Custom specified formatting string. Example &quot;M&quot;</LI>
6547 
</UL>
6548 
<P> The formatting is specified by using the SetStyle() method as in<DIV class="phpscript">
6549 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
6550 
-&gt;</FONT><FONT color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT
6551 
color="#0000BB">day</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6552 
SetStyle</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
6553 
DAYSTYLE_LONG</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB">
6554 
</FONT></FONT></CODE></DIV></P>
6555 
<P> The graphical formatting possibilities for days allow the
6556 
 possibility to specify a different color for the weekend background and
6557 
 also for the Sunday.</P>
6558 
<UL>
6559 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6560 
&nbsp;SetWeekendColor</FONT><FONT color="#007700">()</FONT><FONT color="#0000BB">
6561 
</FONT></FONT></CODE></DIV>
6562 
<P>Set the background color for weekends. (Defaults to light gray)</P>
6563 
</LI>
6564 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6565 
&nbsp;SetSundayFontColor</FONT><FONT color="#007700">()</FONT><FONT color="#0000BB">
6566 
</FONT></FONT></CODE></DIV>
6567 
<P>The Sunday font color. (Defaults to red)</P>
6568 
</LI>
6569 
</UL>
6570 
<P> In addition to this there is also a possibility to choose whether or
6571 
 not the weekend background should be extended vertically down over the
6572 
 plot area. (the default). Since that is a property more of the whole
6573 
 plot this behavior is modified with a call to the method<DIV class="phpscript">
6574 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;UseWeekendBackground</FONT><FONT
6575 
color="#007700">()</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
6576 
</P>
6577 
<P>of the scale, e.g.
6578 
<BR> &nbsp;<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6579 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">scale</FONT><FONT
6580 
color="#007700">-&gt;</FONT><FONT color="#0000BB">UseWeekendBackground</FONT><FONT
6581 
color="#007700">(</FONT><FONT color="#0000BB">false</FONT><FONT color="#007700">
6582 
);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
6583 
<P></P>
6584 
<H3><A NAME="9_8_4">9.8.4 Week scale</A></H3>
6585 
<P> Week scales, if enabled, by default shows the week number in range 1
6586 
 to 53 (as defined by ISO-8601, see the reference section).</P>
6587 
<P> It might be worth pointing out here that the week number calculation
6588 
 is carried out within JpGraph and does not rely on the underlying OS
6589 
 date libraries. This makes the behavior consistent over several OS:s
6590 
 (at least M$ Windows does<B> not</B> comply to ISO-8601 or supply any
6591 
 way of doing this through the normal libraries, e.g. strftime())</P>
6592 
<P> You may modify the week behavior in three ways. You can specify
6593 
 (with SetStyle()) a different date format using the constants</P>
6594 
<UL>
6595 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6596 
&nbsp;WEEKSTYLE_WNBR</FONT></FONT></CODE></DIV>
6597 
<P> Show week number To further modify the formatting of the actual week
6598 
 number you can optionally supply a format string with a call to<DIV class="phpscript">
6599 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;SetLabelFormatString</FONT><FONT
6600 
color="#007700">()</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
6601 
</P>
6602 
<P> The format of the string should be a standard sprintf() syntax
6603 
 expecting an integer (the week number). By default a 'W' is prefixed to
6604 
 the number.</P>
6605 
</LI>
6606 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6607 
&nbsp;WEEKSTYLE_FIRSTDAY</FONT></FONT></CODE></DIV>
6608 
<P> Show date of first day in week.</P>
6609 
</LI>
6610 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6611 
&nbsp;WEEKSTYLE_FIRSTDAY2</FONT></FONT></CODE></DIV>
6612 
<P> Show date of first day in week and short month</P>
6613 
</LI>
6614 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6615 
&nbsp;WEEKSTYLE_FIRSTDAYWNBR</FONT></FONT></CODE></DIV>
6616 
<P> Show weeknumber of first day in week.</P>
6617 
</LI>
6618 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6619 
&nbsp;WEEKSTYLE_FIRSTDAY2WNBR</FONT></FONT></CODE></DIV>
6620 
<P> Show weeknumber of first day in week and month</P>
6621 
</LI>
6622 
</UL>
6623 
<P></P>
6624 
<H3><A NAME="9_8_5">9.8.5 Month scale</A></H3>
6625 
<P> For month scale you can use the SetStyle() method to choose between
6626 
 a variety of formats.</P>
6627 
<UL>
6628 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6629 
&nbsp;MONTHSTYLE_SHORTNAME</FONT></FONT></CODE></DIV>
6630 
<P>Display the month name in its locale specific short form, i.e Jan,
6631 
 Feb etc</P>
6632 
</LI>
6633 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6634 
&nbsp;MONTHSTYLE_SHORTNAMEYEAR2</FONT></FONT></CODE></DIV>
6635 
<P>Display the month name in its locale specific short form together
6636 
 with a 2 digit year , i.e Jan '01, Feb '01 etc</P>
6637 
</LI>
6638 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6639 
&nbsp;MONTHSTYLE_SHORTNAMEYEAR4</FONT></FONT></CODE></DIV>
6640 
<P>Display the month name in its locale specific short form together
6641 
 with a 4 digit year , i.e Jan 2001, Feb 2001 etc</P>
6642 
</LI>
6643 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6644 
&nbsp;MONTHSTYLE_LONGNAME</FONT></FONT></CODE></DIV>
6645 
<P>Display the month name in its locale specific long name, i.e.
6646 
 January, February</P>
6647 
</LI>
6648 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6649 
&nbsp;MONTHSTYLE_LONGNAMEYEAR2</FONT></FONT></CODE></DIV>
6650 
<P>Display the month name in its locale specific long name together with
6651 
 a 2 digit year , i.e January '01, February '01 etc</P>
6652 
</LI>
6653 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6654 
&nbsp;MONTHSTYLE_LONGNAMEYEAR4</FONT></FONT></CODE></DIV>
6655 
<P>Display the month name in its locale specific long name together with
6656 
 a 4 digit year , i.e January 2001, February 2001 etc</P>
6657 
</LI>
6658 
<LI><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6659 
&nbsp;MONTHSTYLE_FIRSTLETTER</FONT></FONT></CODE></DIV>
6660 
<P>The first letter of the month name</P>
6661 
</LI>
6662 
</UL>
6663 
<P></P>
6664 
<H3><A NAME="9_8_6">9.8.6 Year scale</A></H3>
6665 
<P> Year scale has no extra formatting possibilities.</P>
6666 
<H2><A NAME="9_9">9.9 More formatting for bars</A></H2>
6667 
<P> This section shows some further modification you might do to
6668 
 activity bars.</P>
6669 
<H3><A NAME="9_9_1">9.9.1 Adding caption to bars</A></H3>
6670 
<P> Caption for bars are placed at the far right side of the bars. They
6671 
 can for example be used to indicate the resources assigned to a task,
6672 
 the duration of the task or the progress of the activity.</P>
6673 
<P> Caption text for a bar is specified either when creating a bar or
6674 
 later by accessing the 'caption' property of bars. So the two lines<DIV class="phpscript">
6675 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$activity&nbsp;</FONT><FONT
6676 
color="#007700">=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">GanttBar</FONT><FONT color="#007700">
6677 
(</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT
6678 
color="#DD0000">&quot;Activity&nbsp;1&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
6679 
&quot;2001-11-21&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
6680 
&quot;2001-12-20&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
6681 
&quot;[BS,ER]&quot;</FONT><FONT color="#007700">)</FONT><FONT color="#0000BB"></FONT>
6682 
</FONT></CODE></DIV></P>
6683 
<P> and<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6684 
&nbsp;$activity</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6685 
caption</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">Set</FONT><FONT
6686 
color="#007700">(</FONT><FONT color="#DD0000">&quot;[BS,ER]&quot;</FONT><FONT color="#007700">
6687 
);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
6688 
<P> are both ways of specifying the caption &quot;[BS,ER]&quot; for the activity.
6689 
 Since activity is a standard JpGraph text object you can easily modify
6690 
 font, color and size with calls to SetFont() and SetColor(), (e.g.<DIV class="phpscript">
6691 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$activity</FONT><FONT
6692 
color="#007700">-&gt;</FONT><FONT color="#0000BB">caption</FONT><FONT color="#007700">
6693 
-&gt;</FONT><FONT color="#0000BB">SetFont</FONT><FONT color="#007700">(</FONT><FONT
6694 
color="#0000BB">FF_ARIAL</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
6695 
FF_BOLD</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">9</FONT><FONT
6696 
color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
6697 
</P>
6698 
<P></P>
6699 
<P> The figure below illustrates the use of caption<DIV class="example">
6700 
<BR> <A href="exframes/frame_ganttex13.html" target="blank"><IMG border="0"
6701 
HEIGHT="186"         src="img/img/img/img/img/img/img/img/ganttex13.png" WIDTH="409"></A>
6702 
<BR><B>Figure 161:</B> Illustration of the use of captions <A href="exframes/frame_ganttex13.html"
6703 
target="blank">[src]</A>&nbsp;
6704 
<P></P>
6705 
</DIV></P>
6706 
<P></P>
6707 
<H3><A NAME="9_9_2">9.9.2 Adding progress indicators to bars</A></H3>
6708 
<P> To indicate the progress of a specific activity it is also possible
6709 
 to add a progress indicator to each bar. This progress indicator
6710 
 consists of a smaller bar within the bar. By default this progress bar
6711 
 is black and 70% of the height of the bar. These parameter can (of
6712 
 course) all be changed.</P>
6713 
<P> The properties for the progress indicator are accessed through the
6714 
 'progress' property and it's methods.</P>
6715 
<P> To set the progress for a specific activity you only specify the
6716 
 percent as a fraction. As in<DIV class="phpscript"><CODE><FONT color="#000000">
6717 
 <FONT color="#0000BB">&nbsp;$activity</FONT><FONT color="#007700">-&gt;</FONT><FONT
6718 
color="#0000BB">progress</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6719 
Set</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">0.4</FONT><FONT
6720 
color="#007700">)</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
6721 
</P>
6722 
<P> In Figure 162 the previous example is modified to indicate the
6723 
 progress of each activity by the default progress indicator. A solid
6724 
 bar. To make it clearer we have also modified the caption to reflect
6725 
 the displayed progress. (At the same time we also modified the scale
6726 
 headers just to illustrate some more formatting options).<DIV class="example">
6727 
<BR> <A href="exframes/frame_ganttex14.html" target="blank"><IMG border="0"
6728 
HEIGHT="191"         src="img/img/img/img/img/img/img/img/ganttex14.png" WIDTH="409"></A>
6729 
<BR><B>Figure 162:</B> Adding progress indicators. <A href="exframes/frame_ganttex14.html"
6730 
target="blank">[src]</A>&nbsp;
6731 
<P></P>
6732 
</DIV></P>
6733 
<P> To specify a different format for the progress you use the
6734 
 SetPattern() method as in<DIV class="phpscript"><CODE><FONT color="#000000">
6735 
 <FONT color="#0000BB">&nbsp;$activity</FONT><FONT color="#007700">-&gt;</FONT><FONT
6736 
color="#0000BB">progress</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6737 
SetPattern</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
6738 
BAND_RDIAG</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
6739 
&quot;blue&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
6740 
</FONT></CODE></DIV></P>
6741 
<P> In the reference section you can see the exact parameters and all
6742 
 available methods.<DIV class="example">
6743 
<BR> <A href="exframes/frame_ganttex15.html" target="blank"><IMG border="0"
6744 
HEIGHT="191"         src="img/img/img/img/img/img/img/img/ganttex15.png" WIDTH="409"></A>
6745 
<BR><B>Figure 163:</B> Changing the style of the progress indicators. <A href="exframes/frame_ganttex15.html"
6746 
target="blank">[src]</A>&nbsp;
6747 
<P></P>
6748 
</DIV></P>
6749 
<P></P>
6750 
<H2><A NAME="9_10">9.10 Grouping activities</A></H2>
6751 
<P> It is common to group activities. We have used this feature in the
6752 
 examples of constrains. There is no special type for activity bars that
6753 
 are used to illustrate grouping. The common way of illustrating this
6754 
 (as have been used above) is to add &quot;half&quot; a triangle marker at both
6755 
 ends of the bar. The special provision that JpGraph does is that if you
6756 
 add a left or right marker of type MARK_LEFTTRIANGLE or
6757 
 MARK_RIGHTTRIANGLE those triangles will be drawn under the bars to give
6758 
 the effect as show in the examples above. In the example above we also
6759 
 have made the grouping bars have slightly less heigh since the end
6760 
 triangles will visually &quot;grow&quot; the bar.</P>
6761 
<P> So to get the effect we want for a group bar we have to use the two
6762 
 lines:<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6763 
&nbsp;$groupbar</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6764 
leftMark</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6765 
SetType</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
6766 
&quot;MARK_LEFTTRIANGLE&quot;</FONT><FONT color="#007700">);
6767 
<BR></FONT><FONT color="#0000BB">$groupbar</FONT><FONT color="#007700">
6768 
-&gt;</FONT><FONT color="#0000BB">rightMark</FONT><FONT color="#007700">-&gt;</FONT><FONT
6769 
color="#0000BB">SetType</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
6770 
&quot;MARK_RIGHTTRIANGLE&quot;</FONT><FONT color="#007700">)</FONT><FONT color="#0000BB">
6771 
</FONT></FONT></CODE></DIV></P>
6772 
<P></P>
6773 
<P> As of the current version There is not yet any formatting support to
6774 
 accomplish the effect of indentation for the titles so this is
6775 
 accomplished by using a fixed width font and adding spaces in front of
6776 
 the title.</P>
6777 
<H2><A NAME="9_11">9.11 Using multiple columns as titles</A></H2>
6778 
<P> It is often of interest not only to show one title for a gantt bar
6779 
 but often one wants to show, title, start date, end date, duration or
6780 
 effort and so on. Up until now we have, to keep things simple only
6781 
 shown a single title for each activity. We will now show you how you
6782 
 can specify an arbitrary number of columns as titles for a Gantt chart
6783 
 as well as adding icons in the graph columns.</P>
6784 
<P> First out is an example to help visualize what we will achieve<DIV class="example">
6785 
<BR> <A href="exframes/frame_gantticonex1.html" target="blank"><IMG border="0"
6786 
HEIGHT="197"         src="img/img/img/img/img/img/img/img/gantticonex1.png" WIDTH="590"></A>
6787 
<BR><B>Figure 164:</B> A Gantt chart with multiple columns <A href="exframes/frame_gantticonex1.html"
6788 
target="blank">[src]</A>&nbsp;
6789 
<P></P>
6790 
</DIV></P>
6791 
<P> To use multiple columns there is two steps. First you need to set
6792 
 the titles (name, color, fonts etc). Thereafter you need to add the
6793 
 title columns for each individual bar.</P>
6794 
<P> To set the columns you will have to work with the<I> Activity
6795 
 information</I> property of the scale. The following code excerpt show
6796 
 this<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6797 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">scale</FONT><FONT
6798 
color="#007700">-&gt;</FONT><FONT color="#0000BB">actinfo</FONT><FONT color="#007700">
6799 
-&gt;</FONT><FONT color="#0000BB">SetColTitles</FONT><FONT color="#007700">
6800 
(
6801 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;array(</FONT><FONT color="#DD0000">'Note'</FONT><FONT color="#007700">
6802 
,</FONT><FONT color="#DD0000">'Task'</FONT><FONT color="#007700">,</FONT><FONT
6803 
color="#DD0000">'Duration'</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
6804 
'Start'</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
6805 
'Finish'</FONT><FONT color="#007700">),array(</FONT><FONT color="#0000BB">
6806 
30</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">100</FONT><FONT
6807 
color="#007700">));</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
6808 
</P>
6809 
<P>You will notice two things. We fist specify the titles using an
6810 
 array. We have also specified a second array with the numbers 30 and
6811 
 100. This is an optional array that specifies the minimum width of, in
6812 
 this case, the first two columns. By default the columns will be wide
6813 
 enough to hold the widest text string in the column. However for
6814 
 esthetic reasons you might sometimes want to increase the minium width.
6815 
 This is what we have done here for the first two columns.</P>
6816 
<P> Furthermore you can also adjust the background colors and the style
6817 
 and colors of the vertical dividing grid lines. In the previous image
6818 
 we used the lines<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT
6819 
color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6820 
scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">actinfo</FONT><FONT
6821 
color="#007700">-&gt;</FONT><FONT color="#0000BB">SetBackgroundColor</FONT><FONT
6822 
color="#007700">(</FONT><FONT color="#DD0000">'green:0.5@0.5'</FONT><FONT
6823 
color="#007700">);
6824 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
6825 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6826 
actinfo</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6827 
SetFont</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
6828 
FF_ARIAL</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
6829 
FS_NORMAL</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">10</FONT><FONT
6830 
color="#007700">);
6831 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
6832 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6833 
actinfo</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">vgrid</FONT><FONT
6834 
color="#007700">-&gt;</FONT><FONT color="#0000BB">SetStyle</FONT><FONT color="#007700">
6835 
(</FONT><FONT color="#DD0000">'solid'</FONT><FONT color="#007700">);
6836 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
6837 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6838 
actinfo</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">vgrid</FONT><FONT
6839 
color="#007700">-&gt;</FONT><FONT color="#0000BB">SetColor</FONT><FONT color="#007700">
6840 
(</FONT><FONT color="#DD0000">'gray'</FONT><FONT color="#007700">);</FONT><FONT
6841 
color="#0000BB"></FONT></FONT></CODE></DIV></P>
6842 
<P> The style for the grid lines can also be &quot;dashed&quot;, &quot;dotted&quot; or
6843 
 &quot;longdashed&quot; as in other line formatting contexts within the library.
6844 
 You can also adjust if you would like the small &quot;3D&quot; effect in the
6845 
 titles. By default this is enabled. You can easily turn this of with a
6846 
 call to<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6847 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">scale</FONT><FONT
6848 
color="#007700">-&gt;</FONT><FONT color="#0000BB">actinfo</FONT><FONT color="#007700">
6849 
-&gt;</FONT><FONT color="#0000BB">SetStyle</FONT><FONT color="#007700">(</FONT><FONT
6850 
color="#0000BB">ACTINFO_2D</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB">
6851 
</FONT></FONT></CODE></DIV></P>
6852 
<P> To adjust the colors of the vertical dividing lines in the title the
6853 
 method SetColor() is used as in
6854 
 &quot;$graph-&gt;scale-&gt;actinfo-&gt;SetColor('navy');&quot;.</P>
6855 
<P> The second thins is to actually populate the columns. This is done
6856 
 (of course) as you add the activity bars to the graph. Previous we just
6857 
 used a string as the title when we wasn't using columns. By simply
6858 
 replacing this string with an array we specify the content of the
6859 
 columns.</P>
6860 
<P> For example to specify two column titles we just create a
6861 
 hypothetical Gantt bar as In the full example above we put all this in
6862 
 arrays to make for better coding practice since we create several bars.</P>
6863 
<P> In addition to ordinary text you can also add an image or any of the
6864 
 predefined icons available. In order to add that in a column you first
6865 
 create an instance of<I> IconImage()</I> and then specify that instance
6866 
 instead of the text. So in the previous code snippet if we wanted a
6867 
 &quot;open folder&quot; image in the first column we would change the lines to<DIV
6868 
class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
6869 
&nbsp;$iconopen&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">
6870 
IconImage</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
6871 
GICON_FOLDEROPEN</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
6872 
0.6</FONT><FONT color="#007700">);
6873 
<BR></FONT><FONT color="#0000BB">$title2</FONT><FONT color="#007700">=</FONT><FONT
6874 
color="#DD0000">&quot;&quot;</FONT><FONT color="#007700">;
6875 
<BR></FONT><FONT color="#0000BB">$bar&nbsp;</FONT><FONT color="#007700">
6876 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">GanttBar</FONT><FONT color="#007700">
6877 
(</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">,array(</FONT><FONT
6878 
color="#0000BB">$iconopen</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
6879 
$title2</FONT><FONT color="#007700">),</FONT><FONT color="#DD0000">
6880 
&quot;2003-11-23&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
6881 
&quot;2003-12-05&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
6882 
</FONT></CODE></DIV></P>
6883 
<P> The available builtin icons are</P>
6884 
<UL>
6885 
<LI>GICON_WARNINGRED</LI>
6886 
<LI>GICON_TEXT</LI>
6887 
<LI>GICON_ENDCONS</LI>
6888 
<LI>GICON_MAIL</LI>
6889 
<LI>GICON_STARTCONS</LI>
6890 
<LI>GICON_CALC</LI>
6891 
<LI>GICON_MAGNIFIER</LI>
6892 
<LI>GICON_LOCK</LI>
6893 
<LI>GICON_STOP</LI>
6894 
<LI>GICON_WARNINGYELLOW</LI>
6895 
<LI>GICON_FOLDEROPEN</LI>
6896 
<LI>GICON_FOLDER</LI>
6897 
<LI>GICON_TEXTIMPORTANT</LI>
6898 
</UL>
6899 
<P> In addition you can also use any of you own images if you specify
6900 
 the argument as a string, for example<DIV class="phpscript"><CODE><FONT color="#000000">
6901 
 <FONT color="#0000BB">&nbsp;$myicon&nbsp;</FONT><FONT color="#007700">=&nbsp;</FONT><FONT
6902 
color="#0000BB">IconImage</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
6903 
'myicon.png'</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
6904 
</FONT></CODE></DIV></P>
6905 
<P> If you wonder, the second argument in the<I> IconImage()</I> call is
6906 
 an optional scaling factor which you can use to adjust the size of the
6907 
 image.</P>
6908 
<H3><A NAME="9_11_1">9.11.1 Adding a title for the columns</A></H3>
6909 
<P> Precisely as before you can also have a title spanning all the
6910 
 columns. This title is specified with the property<I> tableTitle</I> of
6911 
 the scale. Specifying a table title will automatically adjust the
6912 
 height of the column titles to fit the table title. The small code
6913 
 snippet below shows how to add a title.<DIV class="phpscript"><CODE><FONT
6914 
color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
6915 
-&gt;</FONT><FONT color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT
6916 
color="#0000BB">tableTitle</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6917 
Set</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">'Phase&nbsp;1'</FONT><FONT
6918 
color="#007700">);
6919 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
6920 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6921 
tableTitle</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6922 
SetFont</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
6923 
FF_ARIAL</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
6924 
FS_NORMAL</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">12</FONT><FONT
6925 
color="#007700">);
6926 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
6927 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6928 
SetTableTitleBackground</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
6929 
'darkgreen@0.6'</FONT><FONT color="#007700">);
6930 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
6931 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6932 
tableTitle</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6933 
Show</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">true</FONT><FONT
6934 
color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
6935 
</P>
6936 
<P> A full example of this is shown below<DIV class="example">
6937 
<BR> <A href="exframes/frame_gantthourminex1.html" target="blank"><IMG border="0"
6938 
HEIGHT="215"         src="img/img/img/img/img/img/img/img/gantthourminex1.png" WIDTH="1200"></A>
6939 
<BR><B>Figure 165:</B> Adding a column titles stratching all title
6940 
 columns. <A href="exframes/frame_gantthourminex1.html" target="blank">
6941 
[src]</A>&nbsp;
6942 
<P></P>
6943 
</DIV></P>
6944 
<P></P>
6945 
<H3><A NAME="9_11_2">9.11.2 Specifying CSIM entries for column titles</A>
6946 
</H3>
6947 
<P> In exactly the same way as for a single title it is possible to
6948 
 specify individual CSIM targets for each of the title columns. This is
6949 
 accomplished by specifying an array for both the target and the alt
6950 
 text instead of a single string as arguments for<I> SetCSIMTarget()</I>
6951 
 The following code snippet shows how to specify that.<DIV class="phpscript">
6952 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$bar</FONT><FONT color="#007700">
6953 
-&gt;</FONT><FONT color="#0000BB">title</FONT><FONT color="#007700">-&gt;</FONT><FONT
6954 
color="#0000BB">SetCSIMTarget</FONT><FONT color="#007700">(array(</FONT><FONT
6955 
color="#DD0000">'sometarget1.html'</FONT><FONT color="#007700">,</FONT><FONT
6956 
color="#DD0000">'sometarget1.html'</FONT><FONT color="#007700">),
6957 
<BR>array(</FONT><FONT color="#DD0000">'alttext1'</FONT><FONT color="#007700">
6958 
,</FONT><FONT color="#DD0000">'alttext2'</FONT><FONT color="#007700">));</FONT><FONT
6959 
color="#0000BB"></FONT></FONT></CODE></DIV></P>
6960 
<P></P>
6961 
<H2><A NAME="9_12">9.12 More general Gantt formatting</A></H2>
6962 
<P> In this section we will show a few more way by which you may
6963 
 customize the gantt chart itself. This includes</P>
6964 
<UL>
6965 
<LI> Adding a table title (not to be confused with the graph title)</LI>
6966 
<LI> Adjusting appearance of the various lines in the bar chart</LI>
6967 
</UL>
6968 
<P></P>
6969 
<H3><A NAME="9_12_1">9.12.1 Adding a table title</A></H3>
6970 
<P> The (default) white area in the top left of the gantt table may have
6971 
 a title. This is accessed by the 'tableTitle' property of the gantt
6972 
 scale. Using this is straightforward as the following lines show.<DIV class="phpscript">
6973 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
6974 
-&gt;</FONT><FONT color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT
6975 
color="#0000BB">tableTitle</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6976 
Set</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
6977 
&quot;(Rev:&nbsp;1.22)&quot;</FONT><FONT color="#007700">);
6978 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
6979 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6980 
tableTitle</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6981 
SetFont</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
6982 
FF_FONT1</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
6983 
FS_BOLD</FONT><FONT color="#007700">);
6984 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
6985 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6986 
SetTableTitleBackground</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
6987 
&quot;silver&quot;</FONT><FONT color="#007700">);
6988 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
6989 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6990 
tableTitle</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
6991 
Show</FONT><FONT color="#007700">();</FONT><FONT color="#0000BB"></FONT></FONT>
6992 
</CODE></DIV></P>
6993 
<P> The example lines above also changes the default white background to
6994 
 silver. Adding these lines to the previous example gives the following
6995 
 result:<DIV class="example">
6996 
<BR> <A href="exframes/frame_ganttex16.html" target="blank"><IMG border="0"
6997 
HEIGHT="191"         src="img/img/img/img/img/img/img/img/ganttex16.png" WIDTH="439"></A>
6998 
<BR><B>Figure 166:</B> Adding a table title. <A href="exframes/frame_ganttex16.html"
6999 
target="blank">[src]</A>&nbsp;
7000 
<P></P>
7001 
</DIV></P>
7002 
<P> From the above example you might notice that the width of the left
7003 
 column (which holds all the titles) have automatically adjusted itself
7004 
 to make the table title fit.</P>
7005 
<H3><A NAME="9_12_2">9.12.2 Modifying the divider lines</A></H3>
7006 
<P> The vertical and horizontal lines between the titles and the bars
7007 
 can be modified by accessing the 'divider' and 'dividerh' properties of
7008 
 the scale. Again, this is straightforward as the following example
7009 
 shows:<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
7010 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">scale</FONT><FONT
7011 
color="#007700">-&gt;</FONT><FONT color="#0000BB">divider</FONT><FONT color="#007700">
7012 
-&gt;</FONT><FONT color="#0000BB">SetWeight</FONT><FONT color="#007700">(</FONT><FONT
7013 
color="#0000BB">3</FONT><FONT color="#007700">);
7014 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
7015 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7016 
divider</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7017 
SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
7018 
&quot;navy&quot;</FONT><FONT color="#007700">);
7019 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
7020 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7021 
dividerh</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7022 
SetWeight</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">3</FONT><FONT
7023 
color="#007700">);
7024 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
7025 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7026 
dividerh</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7027 
SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
7028 
&quot;navy&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
7029 
</FONT></CODE></DIV></P>
7030 
<P> The effect of this is shown in Figure 167 below<DIV class="example">
7031 
<BR> <A href="exframes/frame_ganttex17.html" target="blank"><IMG border="0"
7032 
HEIGHT="191"         src="img/img/img/img/img/img/img/img/ganttex17.png" WIDTH="433"></A>
7033 
<BR><B>Figure 167:</B> Modifying the dividing line <A href="exframes/frame_ganttex17.html"
7034 
target="blank">[src]</A>&nbsp;
7035 
<P></P>
7036 
</DIV></P>
7037 
<P></P>
7038 
<H3><A NAME="9_12_3">9.12.3 Modifying the box around the plot</A></H3>
7039 
<P> In a similar manner to the other plots in JpGraph you modify the Box
7040 
 round the plot with the standard graph method 'SetBox()' as in<DIV class="phpscript">
7041 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
7042 
-&gt;</FONT><FONT color="#0000BB">SetBox</FONT><FONT color="#007700">(</FONT><FONT
7043 
color="#0000BB">true</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
7044 
&quot;navy&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">3</FONT><FONT
7045 
color="#007700">)</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
7046 
</P>
7047 
<P> which will result in a thicker plot box around the area as shown
7048 
 below<DIV class="example">
7049 
<BR> <A href="exframes/frame_ganttex18.html" target="blank"><IMG border="0"
7050 
HEIGHT="191"         src="img/img/img/img/img/img/img/img/ganttex18.png" WIDTH="433"></A>
7051 
<BR><B>Figure 168:</B> Modifying the box around the plotarea <A href="exframes/frame_ganttex18.html"
7052 
target="blank">[src]</A>&nbsp;
7053 
<P></P>
7054 
</DIV></P>
7055 
<P><DIV class="note"><B>Note:</B> You might notice the slight
7056 
 discrepancy in design that here you use a method and in the previous
7057 
 cases accessed a property which you modified. This is the unfortunate
7058 
 affect of the evolving design and development of this library once it
7059 
 was realised that the original design could be improved upon.</DIV></P>
7060 
<H3><A NAME="9_12_4">9.12.4 Horizontal grids and alternating line colors</A>
7061 
</H3>
7062 
<P> In order to make large charts easier to read it is possible to
7063 
 specify alternating an horizontal grid and optional alternating line
7064 
 colors in the background for Gantt charts. The horizontal grid is
7065 
 accessed through the<I> Graph::hgrid</I> property and the line (used in
7066 
 the grid) is accessed through the<I> Graph::hgrid::line</I>
7067 
 sub-property</P>
7068 
<P> In order to specify the alternating line colors the<I>
7069 
 SetRowFillColor()</I> method is used. For example, to use alternating
7070 
 blue background with blue grid line the following lines would have to
7071 
 be added to the graph script<DIV class="phpscript"><CODE><FONT color="#000000">
7072 
 <FONT color="#0000BB">&nbsp;</FONT><FONT color="#FF8000">
7073 
//&nbsp;Setup&nbsp;a&nbsp;horizontal&nbsp;grid
7074 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
7075 
color="#0000BB">hgrid</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7076 
Show</FONT><FONT color="#007700">();
7077 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
7078 
color="#0000BB">hgrid</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7079 
line</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">SetColor</FONT><FONT
7080 
color="#007700">(</FONT><FONT color="#DD0000">'lightblue'</FONT><FONT color="#007700">
7081 
);
7082 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
7083 
color="#0000BB">hgrid</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7084 
SetRowFillColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
7085 
'darkblue@0.9'</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB">
7086 
</FONT></FONT></CODE></DIV></P>
7087 
<P> Below is an example of a Gantt graph using this formatting<DIV class="example">
7088 
<BR> <A href="exframes/frame_gantthgridex1.html" target="blank"><IMG border="0"
7089 
HEIGHT="253"         src="img/img/img/img/img/img/img/img/gantthgridex1.png" WIDTH="500"></A>
7090 
<BR><B>Figure 169:</B> Adding a horizontal grid to the graph <A href="exframes/frame_gantthgridex1.html"
7091 
target="blank">[src]</A>&nbsp;
7092 
<P></P>
7093 
</DIV></P>
7094 
<P></P>
7095 
<H3><A NAME="9_12_5">9.12.5 Adding icons to Gantt graphs</A></H3>
7096 
 As is illustrated in the image above it is also possible (just like for
7097 
 normal Graph) to add small images (or icons) to a Gantt graph by
7098 
 creating an IconPlot() instance and then adding it to the graph. In the
7099 
 image above the following lines were used to add the small image of
7100 
 &quot;tux&quot; in the left lower corner<DIV class="phpscript"><CODE><FONT color="#000000">
7101 
 <FONT color="#0000BB">&nbsp;$icon&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT
7102 
color="#0000BB">IconPlot</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
7103 
'penguin.png'</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
7104 
0.01</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">0.95</FONT><FONT
7105 
color="#007700">,</FONT><FONT color="#0000BB">1</FONT><FONT color="#007700">
7106 
,</FONT><FONT color="#0000BB">15</FONT><FONT color="#007700">);
7107 
<BR></FONT><FONT color="#0000BB">$icon</FONT><FONT color="#007700">-&gt;</FONT><FONT
7108 
color="#0000BB">SetAnchor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
7109 
'left'</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
7110 
'bottom'</FONT><FONT color="#007700">);
7111 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
7112 
color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
7113 
$icon</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT>
7114 
</CODE></DIV>
7115 
<P></P>
7116 
<H3><A NAME="9_12_6">9.12.6 Adjusting the margins with auto-sizing</A></H3>
7117 
 As of version 1.17 it is possible to use Graph::SetMargin() to specify
7118 
 the margin for a Gantt graph even when the vertical height is
7119 
 determined automatically. For example to generate a graph with no left,
7120 
 right or bottom margin the following lines would be needed<DIV class="phpscript">
7121 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$graph&nbsp;</FONT><FONT color="#007700">
7122 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">GanttGraph</FONT><FONT color="#007700">
7123 
(</FONT><FONT color="#0000BB">500</FONT><FONT color="#007700">);
7124 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
7125 
color="#0000BB">SetMargin</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
7126 
0</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">0</FONT><FONT
7127 
color="#007700">,</FONT><FONT color="#0000BB">30</FONT><FONT color="#007700">
7128 
,</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">);</FONT><FONT
7129 
color="#0000BB"></FONT></FONT></CODE></DIV>
7130 
<P></P>
7131 
<H2><A NAME="9_13">9.13 Simplifying the drawing of Gantt graphs</A></H2>
7132 
<P> As we have shown in the previous examples constructing a Gantt chart
7133 
 consists of a number of repetitive tasks; Create the individual
7134 
 activity bars and add them to the graph.</P>
7135 
<P> Now when you have a basic understanding of how this works you are
7136 
 ready to appreciate a small helper method. <A href="">
7137 
GanttGraph::CreateSimple()</A>. This method takes a few arrays of data
7138 
 which specifies you Gantt chart and then constructs this chart. By
7139 
 using this method you sacrifices a few adjustment possibilities for
7140 
 simplicity. This method is nothing magical it just takes the data for
7141 
 the activities,(start and end date, titles, progress, any constrains
7142 
 and so on) and constructs the activities and adds them to the graph.</P>
7143 
<P> The activities are specified in data array which for each activity
7144 
 have the following fields</P>
7145 
<UL>
7146 
<LI> What row the activity should be on</LI>
7147 
<LI> Activity type, controls the appearance. Can be one of
7148 
<OL>
7149 
<LI> ACTYPE_NORMAL, A standard activty bar</LI>
7150 
<LI> ACTYPE_GROUP, A Grouping bar</LI>
7151 
<LI> ACTYPE_MILESTONE, A milestone</LI>
7152 
<LI></LI>
7153 
</OL>
7154 
<P></P>
7155 
</LI>
7156 
<LI> Title text</LI>
7157 
<LI> Start date</LI>
7158 
<LI> End date (NOT FOR Milestones!)</LI>
7159 
<LI> Caption</LI>
7160 
</UL>
7161 
<P></P>
7162 
<P> So for example to create a Gantt chart consisting of two activities
7163 
 which are grouped and a milestone one would have to use something
7164 
 similar to the following code</P>
7165 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
7166 
&nbsp;$data&nbsp;</FONT><FONT color="#007700">=&nbsp;array(
7167 
<BR>&nbsp;&nbsp;array(</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT
7168 
color="#0000BB">ACTYPE_GROUP</FONT><FONT color="#007700">,&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT
7169 
color="#DD0000">&quot;Phase&nbsp;1&quot;</FONT><FONT color="#007700">,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT
7170 
color="#DD0000">&quot;2001-10-26&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
7171 
&quot;2001-11-23&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
7172 
&quot;&quot;</FONT><FONT color="#007700">),
7173 
<BR>&nbsp;&nbsp;array(</FONT><FONT color="#0000BB">1</FONT><FONT color="#007700">,</FONT><FONT
7174 
color="#0000BB">ACTYPE_NORMAL</FONT><FONT color="#007700">,&nbsp;&nbsp;&nbsp;</FONT><FONT
7175 
color="#DD0000">&quot;&nbsp;&nbsp;Label&nbsp;2&quot;</FONT><FONT color="#007700">,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT
7176 
color="#DD0000">&quot;2001-10-26&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
7177 
&quot;2001-11-13&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
7178 
&quot;[KJ]&quot;</FONT><FONT color="#007700">),
7179 
<BR>&nbsp;&nbsp;array(</FONT><FONT color="#0000BB">2</FONT><FONT color="#007700">,</FONT><FONT
7180 
color="#0000BB">ACTYPE_NORMAL</FONT><FONT color="#007700">,&nbsp;&nbsp;&nbsp;</FONT><FONT
7181 
color="#DD0000">&quot;&nbsp;&nbsp;Label&nbsp;3&quot;</FONT><FONT color="#007700">,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT
7182 
color="#DD0000">&quot;2001-11-20&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
7183 
&quot;2001-11-22&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
7184 
&quot;[EP]&quot;</FONT><FONT color="#007700">),
7185 
<BR>&nbsp;&nbsp;array(</FONT><FONT color="#0000BB">3</FONT><FONT color="#007700">,</FONT><FONT
7186 
color="#0000BB">ACTYPE_MILESTONE</FONT><FONT color="#007700">,</FONT><FONT
7187 
color="#DD0000">&quot;&nbsp;&nbsp;Phase&nbsp;1&nbsp;Done&quot;</FONT><FONT color="#007700">,&nbsp;</FONT><FONT
7188 
color="#DD0000">&quot;2001-11-23&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
7189 
&quot;M2&quot;</FONT><FONT color="#007700">)&nbsp;);
7190 
<BR>
7191 
<BR></FONT><FONT color="#FF8000">//&nbsp;Create&nbsp;the&nbsp;basic&nbsp;graph
7192 
<BR></FONT><FONT color="#0000BB">$graph&nbsp;</FONT><FONT color="#007700">
7193 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">GanttGraph</FONT><FONT color="#007700">
7194 
();
7195 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
7196 
color="#0000BB">title</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7197 
Set</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
7198 
&quot;Gantt&nbsp;Graph&nbsp;using&nbsp;CreateSimple()&quot;</FONT><FONT color="#007700">);
7199 
<BR>
7200 
<BR></FONT><FONT color="#FF8000">//&nbsp;Setup&nbsp;scale
7201 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
7202 
color="#0000BB">ShowHeaders</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
7203 
GANTT_HYEAR&nbsp;</FONT><FONT color="#007700">|&nbsp;</FONT><FONT color="#0000BB">
7204 
GANTT_HMONTH&nbsp;</FONT><FONT color="#007700">|&nbsp;</FONT><FONT color="#0000BB">
7205 
GANTT_HDAY&nbsp;</FONT><FONT color="#007700">|&nbsp;</FONT><FONT color="#0000BB">
7206 
GANTT_HWEEK</FONT><FONT color="#007700">);
7207 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
7208 
color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7209 
week</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">SetStyle</FONT><FONT
7210 
color="#007700">(</FONT><FONT color="#0000BB">WEEKSTYLE_FIRSTDAY</FONT><FONT
7211 
color="#007700">);
7212 
<BR>
7213 
<BR></FONT><FONT color="#FF8000">//&nbsp;Add&nbsp;the&nbsp;specified&nbsp;activities
7214 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
7215 
color="#0000BB">CreateSimple</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
7216 
$data</FONT><FONT color="#007700">);
7217 
<BR>
7218 
<BR></FONT><FONT color="#FF8000">//&nbsp;..&nbsp;and&nbsp;stroke&nbsp;the&nbsp;graph
7219 
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
7220 
color="#0000BB">Stroke</FONT><FONT color="#007700">();
7221 
<BR></FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
7222 
<P> This will then show up as<DIV class="example">
7223 
<BR> <A href="exframes/frame_ganttsimpleex1.html" target="blank"><IMG border="0"
7224 
HEIGHT="231"         src="img/img/img/img/img/img/img/img/ganttsimpleex1.png" WIDTH="523"></A>
7225 
<BR><B>Figure 170:</B> Using the simplified way via CreateSimple()
7226 
 method <A href="exframes/frame_ganttsimpleex1.html" target="blank">
7227 
[src]</A>&nbsp;
7228 
<P></P>
7229 
</DIV></P>
7230 
<P> You may (slightly) modify the appearance of the simple Gantt charts
7231 
 by means of the methods <A href="">GanttGraph::SetSimpleFont()</A> and <A
7232 
href="">GanttGraph::SetSimpleStyle()</A> But not anything else, remember
7233 
 that the purpose with this way of constructing graphs is to be simple.
7234 
 If you need full advanced control you have to construct all the
7235 
 activities in the &quot;normal&quot; way.</P>
7236 
<P> You can also specify constrains and progress for each bar by
7237 
 supplying additional data arrays to GanttGraph::CreateSimple().</P>
7238 
<H2><A NAME="9_14">9.14 Adding CSIM (Client side Image Maps) to Gantt
7239 
 charts</A></H2>
7240 
<P> Gantt charts can have independent (different targets) hot spots in
7241 
 both the activities and in the associated labels for each activity.</P>
7242 
<P> You specify the target and the associated &quot;Alt&quot; text for an activity
7243 
 bar by calling the <A href="../ref/GanttPlotObject.html#_GANTTPLOTOBJECT_SETCSIMTARGET">
7244 
 GanttBar::SetCSIMTarget()</A> and <A href="../ref/GanttPlotObject.html#_GANTTPLOTOBJECT_SETCSIMALT">
7245 
 GanttBar::SetCSIMAlt()</A></P>
7246 
<P> In a similar way you set the target and Alt texts for the activity
7247 
 title as the following code extract shows.<DIV class="phpscript"><CODE><FONT
7248 
color="#000000"> <FONT color="#0000BB">&nbsp;$bar</FONT><FONT color="#007700">
7249 
-&gt;</FONT><FONT color="#0000BB">SetCSIMTarget</FONT><FONT color="#007700">
7250 
(</FONT><FONT color="#DD0000">&quot;http://localhost/abc/&quot;</FONT><FONT color="#007700">
7251 
);
7252 
<BR></FONT><FONT color="#0000BB">$bar</FONT><FONT color="#007700">-&gt;</FONT><FONT
7253 
color="#0000BB">SetCSIMAlt</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
7254 
&quot;Alt&nbsp;Text&nbsp;for&nbsp;the&nbsp;bar&quot;</FONT><FONT color="#007700">);
7255 
<BR></FONT><FONT color="#0000BB">$bar</FONT><FONT color="#007700">-&gt;</FONT><FONT
7256 
color="#0000BB">title</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7257 
SetCSIMTarget</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
7258 
&quot;http://localhost/abc&quot;</FONT><FONT color="#007700">);
7259 
<BR></FONT><FONT color="#0000BB">$bar</FONT><FONT color="#007700">-&gt;</FONT><FONT
7260 
color="#0000BB">title</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7261 
SetCSIMAlt</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
7262 
&quot;Alt&nbsp;Text&nbsp;for&nbsp;the&nbsp;title&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB">
7263 
</FONT></FONT></CODE></DIV></P>
7264 
<P> The above code assumes that your activity is available in the
7265 
 variable 'bar'. In the example directory there is a complete example of
7266 
 how to use CSIM together with Gantt charts in the &quot;ganttcsimex1.php&quot;
7267 
 file. (Please note that this example makes use of the simplified Gantt
7268 
 chart specification using the CreateSimple() method.</P>
7269 
<H2><A NAME="9_15">9.15 Adding constrains between your activities</A></H2>
7270 
<P> With Gantt charts there is often the need to illustrate constrains
7271 
 between one or several activities. One of the most common constrain is
7272 
 that on activity can't start before an other activity finish.</P>
7273 
<P> JpGraph support visualizing the following types of constrains</P>
7274 
<UL>
7275 
<LI> Start to End</LI>
7276 
<LI> Start to Start</LI>
7277 
<LI> End to Start</LI>
7278 
<LI> End to End</LI>
7279 
</UL>
7280 
<P> An example will clarify how to specify a constrain between two
7281 
 activities.</P>
7282 
<P> Assume that we start with the Gantt schema as illustrated below<DIV class="example">
7283 
<BR> <A href="exframes/frame_ganttconstrainex0.html" target="blank"><IMG border="0"
7284 
HEIGHT="231"         src="img/img/img/img/img/img/img/img/ganttconstrainex0.png" WIDTH="523"></A>
7285 
<BR><B>Figure 171:</B> The original Gantt schema we wich to add
7286 
 constrains to <A href="exframes/frame_ganttconstrainex0.html" target="blank">
7287 
[src]</A>&nbsp;
7288 
<P></P>
7289 
</DIV></P>
7290 
<P> We would now like to add the constrains that the activity &quot;Label 3&quot;
7291 
 cant start before activity &quot;Label 2&quot; has finished and that the
7292 
 milestone &quot;Phase 1 done&quot; is depending on when activity &quot;Label 3&quot; is
7293 
 done.</P>
7294 
<P> The principle of adding constrains is that you for each activity you
7295 
 want to have a constrain you have to tell to what other activity this
7296 
 constrain should be to. That other activity is specified by telling on
7297 
 what row that activity lies. Depending on what type of constrain, e.g.
7298 
 Start-to-End, an arrow will now connect the two activities in correct
7299 
 way.</P>
7300 
<P> The way to do this is to call the <A href="../ref/GanttPlotObject.html#_GANTTPLOTOBJECT_SETCONSTRAIN">
7301 
 SetConstrain()</A> method on the activity. In this method you specify
7302 
 the type of constrain as well as to what other activity this constrain
7303 
 should be to. If you read the class reference you can also see that you
7304 
 can specify the type and size of arrow used. For now we will just use
7305 
 the default sizes and type.</P>
7306 
<P> So for example to add an End-To-Start constrain between &quot;Label 2&quot;
7307 
 and &quot;Label 3&quot; you could write<DIV class="phpscript"><CODE><FONT color="#000000">
7308 
 <FONT color="#0000BB">&nbsp;$bar2</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7309 
SetConstrain</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">2</FONT><FONT
7310 
color="#007700">,</FONT><FONT color="#0000BB">CONSTRAIN_ENDSTART</FONT><FONT
7311 
color="#007700">)</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
7312 
</P>
7313 
<P> The first parameter in the call above &quot;2&quot; is the row of the target
7314 
 activity (i.e. the row where &quot;Label 3&quot;) activity is. In the example
7315 
 below we have added the constrains we wanted.<DIV class="example">
7316 
<BR> <A href="exframes/frame_ganttconstrainex1.html" target="blank"><IMG border="0"
7317 
HEIGHT="253"         src="img/img/img/img/img/img/img/img/ganttconstrainex1.png" WIDTH="523"></A>
7318 
<BR><B>Figure 172:</B> Adding constrains to a gantt chart <A href="exframes/frame_ganttconstrainex1.html"
7319 
target="blank">[src]</A>&nbsp;
7320 
<P></P>
7321 
</DIV></P>
7322 
<P> A note: The actual path followed by the arrow is controlled by some
7323 
 heuristics to make it clear what the constrain is. It has been a design
7324 
 decision that in order to keep the API simple the user has no further
7325 
 detailed controlled on the actual path followed. However, in future
7326 
 version the heuristics may be extended and provide some
7327 
 user-controllable parameters.</P>
7328 
<H2><A NAME="9_16">9.16 Advanced formatting</A></H2>
7329 
<P></P>
7330 
<H3><A NAME="9_16_1">9.16.1 Showing only part of the graph</A></H3>
7331 
<P> You can choose to only display a vertical slice of the overall Gantt
7332 
 chart by explicitly specifying a date range with the method
7333 
 GanttGraph::SetDateRange(). This will cap any bars to only be displayed
7334 
 in between the start and end date given as parameters. For example
7335 
 specifying<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
7336 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7337 
SetDateRange</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
7338 
&quot;2001-12-20&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
7339 
&quot;2002-01-20&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
7340 
</FONT></CODE></DIV></P>
7341 
<P> will show the part of the Gantt chart between the 20 Dec 2001 and 20
7342 
 of January 2002. Please note that the format depends on the locale
7343 
 setting.</P>
7344 
<H3><A NAME="9_16_2">9.16.2 Specifying start day of week</A></H3>
7345 
<P> You can set the week start day with a call to
7346 
 GanttScale::SetWeekStart(). This method takes an integer [0,6] as input
7347 
 which represents the start day of the week, 0 means Sunday, 1 Monday, 2
7348 
 Tuesday and so on. The default is to start the week on Monday.</P>
7349 
<H2><A NAME="9_17">9.17 Localizing</A></H2>
7350 
<P> Depending on your installation of PHP you might have support for
7351 
 several locales. By default the locale is set up to use the default
7352 
 locale on the server.</P>
7353 
<P> To specifically set a locale you specify the wanted locale with a
7354 
 locale string (ala standard PHP), for example American English is
7355 
 specified with the string 'EN_US', British English with 'EN_UK' 'nl_NL'
7356 
 for Dutch and so on. If your current installation does not support the
7357 
 specified locale an error message will be given.<DIV class="phpscript"><CODE>
7358 
<FONT color="#000000"> <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">
7359 
-&gt;</FONT><FONT color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT
7360 
color="#0000BB">SetDateLocale</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
7361 
&quot;se_SE&quot;</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"></FONT>
7362 
</FONT></CODE></DIV></P>
7363 
<P> The result is displayed below.<DIV class="example">
7364 
<BR> <A href="exframes/frame_ganttex19.html" target="blank"><IMG border="0"
7365 
HEIGHT="191"         src="img/img/img/img/img/img/img/img/ganttex19.png" WIDTH="431"></A>
7366 
<BR><B>Figure 173:</B> Using swedish locale. (Can you spot the
7367 
 difference from English?) <A href="exframes/frame_ganttex19.html" target="blank">
7368 
[src]</A>&nbsp;
7369 
<P></P>
7370 
</DIV></P>
7371 
<P></P>
7372 
<H2><A NAME="9_18">9.18 Anti-aliasing in JpGraph</A></H2>
7373 
<P> From version 1.2 JpGraph supports drawing of anti-aliased lines.
7374 
 There are a few caveats in order to use this which is discussed in this
7375 
 section.</P>
7376 
<P><DIV class="note"><B>Note:</B> Note that anti-aliasing will not be
7377 
 used for either horizontal, vertical or 45 degree lines since they are
7378 
 by their nature are sampled at adequate rate.</DIV></P>
7379 
<H3><A NAME="9_18_1">9.18.1 Enabling anti-aliased lines</A></H3>
7380 
<P> Anti-aliased lines are enabled by calling the method <A href="../ref/Image.html#_IMAGE_SETANTIALIASING">
7381 
 SetAntiAliasing()</A> in the <A href="../ref/Image.html#_C_IMAGE">
7382 
 Image class</A> in the script where you want to use anti-aliasing.</P>
7383 
<P> The anti-aliasing for lines works by &quot;smoothing&quot; out the edges on
7384 
 the line by using a progressive scale of colors interpolated between
7385 
 the background color and the line color.</P>
7386 
<P><DIV class="note"><B>Note:</B> The algorithm used for anti-aliasing
7387 
 of lines is quite simple. It would be possible to achieve even better
7388 
 result by doing some real 2D signal processing. However, doing real
7389 
 time 2D signal processing on a HTTP server would be foolish so the
7390 
 design is deliberately kept simple. To achieve best visual result
7391 
 always use a dark line color on a light background.</DIV></P>
7392 
<P> An example will show that this, quite simple algorithm, gives a
7393 
 reasonable good result. The figures below shows a radar plot with and
7394 
 without anti-aliasing.</P>
7395 
<P><DIV class="example">
7396 
<BR> <A href="exframes/frame_radarex8.html" target="blank"><IMG border="0"
7397 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/radarex8.png" WIDTH="300"></A>
7398 
<BR><B>Figure 174:</B> Spiderplot without anti-aliasing <A href="exframes/frame_radarex8.html"
7399 
target="blank">[src]</A>&nbsp;
7400 
<P></P>
7401 
</DIV></P>
7402 
<P></P>
7403 
<P><DIV class="example">
7404 
<BR> <A href="exframes/frame_radarex8.1.html" target="blank"><IMG border="0"
7405 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/radarex8.1.png" WIDTH="300"></A>
7406 
<BR><B>Figure 175:</B> Spiderplot with anti-aliasing <A href="exframes/frame_radarex8.1.html"
7407 
target="blank">[src]</A>&nbsp;
7408 
<P></P>
7409 
</DIV></P>
7410 
<P></P>
7411 
<P> One thing you need to keep in mind when deciding to use
7412 
 anti-aliasing is that it could have potentially a dramatic effect on
7413 
 the time it takes to generate the image. Line drawing with
7414 
 anti-aliasing turned on is roughly 8 times slower than the normal line
7415 
 drawing so treat this feature wisely.</P>
7416 
<P> Furthermore there are a couple of &quot;gotchas&quot; you should be aware of
7417 
 when using anti-aliasing.</P>
7418 
<OL>
7419 
<LI> Anti-aliased lines uses up more of the available color-palette. The
7420 
 exact number of colors used is dependent on the line-angle, a near
7421 
 horizontal or near vertical line uses more colors (number of lines with
7422 
 different angles uses more colors). Hence it might not be possible to
7423 
 use anti-aliasing with color-gradient fill since the number of
7424 
 available colors in the palette might not be enough. A normal palette
7425 
 can keep around 256 colors. This means that you are advised to use a
7426 
 true-color image when using anti-aliasing.</LI>
7427 
<LI> Anti-aliasing does not work very well together with background
7428 
 images since it assumes a the same solid color on each side of the
7429 
 line. Doing a more advanced anti-aliasing algorithm would simple take
7430 
 to much processing power.</LI>
7431 
<LI>Anti-aliased lines will ignore the line width specified. They will
7432 
 always have a width of roughly 1.</LI>
7433 
</OL>
7434 
<P></P>
7435 
<H2><A NAME="9_19">9.19 Rotating the graphs</A></H2>
7436 
<P> JpGraph provide the possibility for you to rotate the generated
7437 
 graph an arbitrary angle. This will only affect the actual graph (axis,
7438 
 axis titles, labels and so on) and not fixed elements on the graph like
7439 
 title or footer.</P>
7440 
<P> Rotation is probably most used to rotate a graph 90 degrees, for
7441 
 example a bar graph to get the effect of horizontal bars.</P>
7442 
<P></P>
7443 
<HR> <SMALL>
7444 
<P><STRONG> Performance note:</STRONG> Adding a rotation transformation
7445 
 will make the graph generation slightly slower since each point of the
7446 
 graph as to go through a transformation step before being stroked on to
7447 
 the image. JpGraph optimizes this by using a pre-calculated
7448 
 transformation matric and also optimizes the special case 90 degrees.</P>
7449 
</SMALL>
7450 
<HR>
7451 
<P> By default the center of the rotation will be the center of the plot
7452 
 area, which may or may not coincide with the center of the entire
7453 
 image.</P>
7454 
<P> To control the rotation you use the two methods</P>
7455 
<UL>
7456 
<LI> <A href="../ref/RotImage.html#_ROTIMAGE_SETANGLE">
7457 
Graph::image::SetAngle()</A>, Specify rotation angle in degrees.</LI>
7458 
<LI> <A href="../ref/RotImage.html#_ROTIMAGE_SETCENTER">
7459 
Graph::image::SetCenter()</A>, Specify center of rotation in absolute
7460 
 image pixels</LI>
7461 
</UL>
7462 
<P> For example<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
7463 
&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">image</FONT><FONT
7464 
color="#007700">-&gt;</FONT><FONT color="#0000BB">SetAngle</FONT><FONT color="#007700">
7465 
(</FONT><FONT color="#0000BB">45</FONT><FONT color="#007700">);</FONT><FONT
7466 
color="#0000BB"></FONT></FONT></CODE></DIV></P>
7467 
<P></P>
7468 
<P> There is actually a third method that you could use, adding a
7469 
 translation to the graph<STRONG> after</STRONG> the rotation. Since
7470 
 this probably a very little used method we don't discuss it further but
7471 
 refer the reader to the class reference instead <A href="../ref/RotImage.html#_ROTIMAGE_SETTRANSLATION">
7472 
 Graph:image::SetTranslation()</A></P>
7473 
<P> When you rotate an image you should be aware of that the individual
7474 
 labels on the axis are not rotated. The design decision behind this is
7475 
<BR><STRONG> a)</STRONG> Bit mapped font can't be rotated
7476 
<BR><STRONG> b)</STRONG> Maintain readability</P>
7477 
<P> Please remember that you may still rotate the labels by calling the <A
7478 
href="../ref/Axis.html#_AXIS_SETLABELANGLE"> Axis::SetLabelAngle()</A>
7479 
 method.</P>
7480 
<P> Since the anchor point for labels is by default the optimum for
7481 
 graph at 0 degree you might want to adjust the anchor point and
7482 
 alignment for the labels on the axis to get a better visual appearance
7483 
 on you rotated graph. This is accomplished by the method <A href="../ref/Axis.html#_AXIS_SETLABELALIGN">
7484 
 Axis::SetLabelAlign()</A> For a detailed discussion on how to do this
7485 
 please see the section on horizontal bar graphs, ( <A href="3030barplot.html">
7486 
Working with bar plots</A> )</P>
7487 
<P> The table below shows some examples on different kinds of rotation
7488 
 to give you an idea of how changing the angle and rotation center may
7489 
 be used to generate different effects. The top left graph is the
7490 
 original image. The point of rotation has been marked with a red-cross
7491 
 in each of the images.</P>
7492 
<P><DIV class="example">
7493 
<BR> <A href="exframes/frame_rotex0.html" target="blank"><IMG border="0" HEIGHT="170"
7494 
        src="img/img/img/img/img/img/img/img/rotex0.png" WIDTH="270"></A>
7495 
<BR><B>Figure 176:</B> Original image <A href="exframes/frame_rotex0.html"
7496 
target="blank">[src]</A>&nbsp;
7497 
<P></P>
7498 
</DIV></P>
7499 
<P><DIV class="example">
7500 
<BR> <A href="exframes/frame_rotex1.html" target="blank"><IMG border="0" HEIGHT="170"
7501 
        src="img/img/img/img/img/img/img/img/rotex1.png" WIDTH="270"></A>
7502 
<BR><B>Figure 177:</B> Rotated 45 degrees around center of plot area <A href="exframes/frame_rotex1.html"
7503 
target="blank">[src]</A>&nbsp;
7504 
<P></P>
7505 
</DIV></P>
7506 
<P><DIV class="example">
7507 
<BR> <A href="exframes/frame_rotex2.html" target="blank"><IMG border="0" HEIGHT="170"
7508 
        src="img/img/img/img/img/img/img/img/rotex2.png" WIDTH="270"></A>
7509 
<BR><B>Figure 178:</B> Rotated 90 degrees around center of plot area <A href="exframes/frame_rotex2.html"
7510 
target="blank">[src]</A>&nbsp;
7511 
<P></P>
7512 
</DIV></P>
7513 
<P><DIV class="example">
7514 
<BR> <A href="exframes/frame_rotex3.html" target="blank"><IMG border="0" HEIGHT="170"
7515 
        src="img/img/img/img/img/img/img/img/rotex3.png" WIDTH="270"></A>
7516 
<BR><B>Figure 179:</B> Rotated 45 degrees around center of the image <A href="exframes/frame_rotex3.html"
7517 
target="blank">[src]</A>&nbsp;
7518 
<P></P>
7519 
</DIV></P>
7520 
<P><DIV class="example">
7521 
<BR> <A href="exframes/frame_rotex4.html" target="blank"><IMG border="0" HEIGHT="170"
7522 
        src="img/img/img/img/img/img/img/img/rotex4.png" WIDTH="270"></A>
7523 
<BR><B>Figure 180:</B> Rotated 90 degrees around center of the image <A href="exframes/frame_rotex4.html"
7524 
target="blank">[src]</A>&nbsp;
7525 
<P></P>
7526 
</DIV></P>
7527 
<P><DIV class="example">
7528 
<BR> <A href="exframes/frame_rotex5.html" target="blank"><IMG border="0" HEIGHT="170"
7529 
        src="img/img/img/img/img/img/img/img/rotex5.png" WIDTH="270"></A>
7530 
<BR><B>Figure 181:</B> Rotated -30 degrees around the lower left point
7531 
 of the plot area <A href="exframes/frame_rotex5.html" target="blank">
7532 
[src]</A>&nbsp;
7533 
<P></P>
7534 
</DIV></P>
7535 
<P></P>
7536 
<P> As you can see from the images above if you rotate about any other
7537 
 point than the center of the plot area the plot can be placed outside
7538 
 the image after rotation.</P>
7539 
<P> Since the rotation, by design, only affects the plot area it is
7540 
 often most effective to use when the color of the margin is the same as
7541 
 the background color.</P>
7542 
<H2><A NAME="9_20">9.20 Adjusting brightness and contrast for images and
7543 
 backgrounds</A></H2>
7544 
<P><STRONG> The following section only applies to palette images. This
7545 
 means it wont work on true-color images.</STRONG></P>
7546 
<P> It is often desirable to have a background image look a little bit
7547 
 &quot;washed&quot; out so it doesn't take the concentration away from the actual
7548 
 graph. There are basically two ways of accomplish this</P>
7549 
<OL>
7550 
<LI> Prepare the image with an external images editor to adjust the
7551 
 level of brightness and contrasty to a desirable level</LI>
7552 
<LI> Use JpGraph:s built in adjustment for contrast, brightness and
7553 
 color saturation.</LI>
7554 
</OL>
7555 
<P> To adjust the background image call The levels for both brightness
7556 
 and contrast are real numbers in the range [-1, 1] You can choose to
7557 
 adjust for example just the background image or you might also choose
7558 
 to adjust the whole image. To change the background image just use the
7559 
 method <A href="../ref/Graph.html#_GRAPH_ADJBACKGROUNDIMAGE">
7560 
 Graph::AdjBackgroundImage()</A> to specify a suitable value. Let's show
7561 
 some example on what we can do with this. The following example have
7562 
 been generated by using the small utility &quot;adjimg.php&quot; which you can
7563 
 find in the &quot;utils/&quot; directory.</P>
7564 
<P> <IMG alt="" border="0" HEIGHT="244"         src="img/img/img/img/img/img/img/img/imgadj_orig.jpg" WIDTH="246">
7565 
<BR> Brightness=0, contrast=0, saturation = -1 (Original image)</P>
7566 
<P> <IMG alt="" border="0" HEIGHT="244"         src="img/img/img/img/img/img/img/img/imgadj_b00c00sat-1.jpg" WIDTH="246">
7567 
<BR> Brightness=0, contrast=0, saturation = -1 (Black &amp; White image)</P>
7568 
<P> <IMG alt="" border="0" HEIGHT="244"         src="img/img/img/img/img/img/img/img/imgadj_b03c-03sat0.jpg" WIDTH="246">
7569 
<BR> Brightness=0.3, contrast=-0.3, saturation=0</P>
7570 
<P> <IMG alt="" border="0" HEIGHT="244"         src="img/img/img/img/img/img/img/img/imgadj_b04c-07sat0.jpg" WIDTH="246">
7571 
<BR> Brightness=0.4, contrast=-0.7, saturation=0</P>
7572 
<P> <IMG alt="" border="0" HEIGHT="244"         src="img/img/img/img/img/img/img/img/imgadj_b04c-07sat-1.jpg" WIDTH="246">
7573 
<BR> Brightness=0.4, contrast=-0.7, saturation=-1</P>
7574 
<P> <IMG alt="" border="0" HEIGHT="244"         src="img/img/img/img/img/img/img/img/imgadj_b0c0sat1.jpg" WIDTH="246">
7575 
<BR> Brightness=0, contrast=0, saturation=1</P>
7576 
<H2><A NAME="9_21">9.21 Timing the generation of graphs</A></H2>
7577 
<P> During development and optimization it can be very handy to have the
7578 
 actual time it took to generate the image as a footnote. The following
7579 
 example shows the usage of this feature<DIV class="example">
7580 
<BR> <A href="exframes/frame_example11.html" target="blank"><IMG border="0"
7581 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/example11.png" WIDTH="300"></A>
7582 
<BR><B>Figure 182:</B> Timing of a graph <A href="exframes/frame_example11.html"
7583 
target="blank">[src]</A>&nbsp;
7584 
<P></P>
7585 
</DIV></P>
7586 
<P> To enable this feature you can proceed in two ways.</P>
7587 
<OL>
7588 
<LI> You can either set the global define BRAND_TIMING (in jpgraph.php)
7589 
 to true. This will add the timing string to all graphs generated.</LI>
7590 
<LI> .. or you can enable it for a specific graph by setting the global
7591 
 variable $gJpgBrandTiming as in<DIV class="phpscript"><CODE><FONT color="#000000">
7592 
 <FONT color="#0000BB">&nbsp;$gJpgBrandTiming</FONT><FONT color="#007700">=</FONT><FONT
7593 
color="#0000BB">true</FONT><FONT color="#007700">;</FONT><FONT color="#0000BB">
7594 
</FONT></FONT></CODE></DIV>
7595 
<P>in the beginning of the script.</P>
7596 
</LI>
7597 
</OL>
7598 
<P> If you like you might also change the way the timing is formatted by
7599 
 setting the string defined by BRAND_TIMING_FORMAT (in jpgraph.php).
7600 
 This string represents a standard printf() format string.<DIV class="note">
7601 
<B>Note:</B> JpGraph contains a utility class called JpgTimer which you
7602 
 can use yourself should you need ms timing of part of your own code.
7603 
 The API is really simple. The class supports multiple running timers
7604 
 and you start a timer simply by calling the Push() method. This will
7605 
 start a new timer and put it on the top of the timer stack. To stop the
7606 
 timer, pop it from the stack and return the timing value simply call
7607 
 Pop().</DIV></P>
7608 
<H2><A NAME="9_22">9.22 Using country flags in various context</A></H2>
7609 
<P> JpGraph has built-in support for over 200 country flags, i.e. they
7610 
 are available to be used in graphs without any external image
7611 
 definitions.</P>
7612 
<P> Country flags can be used in primarily two settings</P>
7613 
<OL>
7614 
<LI> As image markers in line and scatter graphs</LI>
7615 
<LI> As background images for graphs</LI>
7616 
<LI> As a special type of icons (using the IconPlot()) which can be
7617 
 added to the graph in any arbitrary position. See next section</LI>
7618 
</OL>
7619 
<P> In order to make it easy to find the appropriate country flags they
7620 
 can be specified with either full or partial name or as an numeric
7621 
 index. The routines in JpGraph are &quot;smart&quot; enough to figure out which
7622 
 way you are trying to specify a particular flag.</P>
7623 
<P> To specify a country flag as a marker you have to specify the
7624 
 special mark type as one of MARK_FLAG1,MARK_FLAG2,MARK_FLAG3 or
7625 
 MARK_FLAG4</P>
7626 
<P> Flags are internally stored in 4 different sizes which is indicated
7627 
 by the number in the mark types. Flags may also be arbitrary scaled
7628 
 when displayed. Since this is partially overlapping functionality you
7629 
 might very well ask why the flags are stored in four different basic
7630 
 sizes. The reason is of course performance. It you only want a very
7631 
 small flag it takes processing time to scale down a large image to,
7632 
 say, a small icon size. At the same time for large flags to be used as
7633 
 background a small original flag might not have enough details to be
7634 
 scaled up to a large size. Hence the reason for storing the flags in 4
7635 
 different sizes.</P>
7636 
<P> The example below shows how to use country flags as markers<DIV class="example">
7637 
<BR> <A href="exframes/frame_markflagex1.html" target="blank"><IMG border="0"
7638 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/markflagex1.png" WIDTH="300"></A>
7639 
<BR><B>Figure 183:</B> Using country flags as line plot markers <A href="exframes/frame_markflagex1.html"
7640 
target="blank">[src]</A>&nbsp;
7641 
<P></P>
7642 
</DIV></P>
7643 
<P> To use country flags as background one has to use the method
7644 
 Graph::SetBackgroundCountryFlag(). With this method you can specify
7645 
 both how much of the image should be filled as well as how much of the
7646 
 flag should be mixed into the background.</P>
7647 
<P> To see a list of all supported country flags you can run the script
7648 
 &quot;listallcountryflags.php&quot; in the Example directory. This will show you
7649 
 a table with all flags.</P>
7650 
<H2><A NAME="9_23">9.23 Adding icons onto the graph</A></H2>
7651 
<P> In addition to the standard background image you can also add an
7652 
 arbitrary number of icons onto the background of the graph. These icons
7653 
 are created with a call to the special Plot class<I> IconPlot</I>.</P>
7654 
<P> The image from icons are taken from a file or as one of the builtin
7655 
 country flags.</P>
7656 
<P> You may control how much of the icon should be blended into the
7657 
 background by specifying a percentage (1-100). The example below shows
7658 
 how to mix in the picture of &quot;Tux&quot; into the background of a filled line
7659 
 graph. Note: This example uses alpha blending and will therefore
7660 
 require GD2.<DIV class="example">
7661 
<BR> <A href="exframes/frame_lineiconex1.html" target="blank"><IMG border="0"
7662 
HEIGHT="250"         src="img/img/img/img/img/img/img/img/lineiconex1.png" WIDTH="400"></A>
7663 
<BR><B>Figure 184:</B> Adding an icon into the background <A href="exframes/frame_lineiconex1.html"
7664 
target="blank">[src]</A>&nbsp;
7665 
<P></P>
7666 
</DIV></P>
7667 
<P> To specify any of the roughly 200 country flags as an icon you first
7668 
 create an empty Icon and then call the IconPlot::SetCountryFlag() with
7669 
 the appropriate parameters. (See the class reference). This is
7670 
 illustrated below by adding the Icelandic flag into the background as
7671 
 an icon<DIV class="example">
7672 
<BR> <A href="exframes/frame_lineiconex2.html" target="blank"><IMG border="0"
7673 
HEIGHT="250"         src="img/img/img/img/img/img/img/img/lineiconex2.png" WIDTH="400"></A>
7674 
<BR><B>Figure 185:</B> Adding an icon flag into the background <A href="exframes/frame_lineiconex2.html"
7675 
target="blank">[src]</A>&nbsp;
7676 
<P></P>
7677 
</DIV></P>
7678 
<P><DIV class="note"><B>Note:</B> Some older versions of PHP pre-4.3.3
7679 
 using the builtin GD have problems rendering blended images. If you
7680 
 have this problem then you need to upgrade to a more recent version of
7681 
 PHP.</DIV></P>
7682 
<H1><A NAME="10">10 Working with canvas graphs</A></H1>
7683 
<P> Canvas graphing is an advanced feature that comes in handy where you
7684 
 need to draw some more arbitrary graphics. To give you a flavor of what
7685 
 you can do the following example shows an architecture overview of
7686 
 JpGraph which was drawn using a canvas.<DIV class="example">
7687 
<BR> <A href="exframes/frame_canvas_jpgarchex.html" target="blank"><IMG border="0"
7688 
HEIGHT="650"         src="img/img/img/img/img/img/img/img/canvas_jpgarchex.png" WIDTH="700"></A>
7689 
<BR><B>Figure 186:</B> Example of what you can draw on a canvas <A href="exframes/frame_canvas_jpgarchex.html"
7690 
target="blank">[src]</A>&nbsp;
7691 
<P></P>
7692 
</DIV></P>
7693 
<P> Working with canvas requires more understanding of JpGraph as well
7694 
 as more programming and fine tuning.</P>
7695 
<H2><A NAME="10_1">10.1 Introduction</A></H2>
7696 
<P> Canvas graph is really not a graph. It a blank sheet of paper which
7697 
 you can use to draw arbitrary shapes and still have access to some of
7698 
 the convenient features of JpGraph.</P>
7699 
<P> You can work with a canvas in different levels of complexity. You
7700 
 can for example work directly with the Image class which provides a
7701 
 large number of primitives for drawing but requires that you use
7702 
 absolute pixel coordinates.</P>
7703 
<P> You can also make life a little bit easier by using a canvas scale.
7704 
 This lets you define your own scale on the canvas which often makes it
7705 
 easier by letting you work on a grid you have specified yourself. It
7706 
 also makes it very easy to re-scale you image automatically by just
7707 
 changing your scale. For example to half the size of you drawing you
7708 
 just make the scale twice as large.</P>
7709 
<P> To give you some help in working with different canvas you should
7710 
 include the &quot;jpgraph_canvtools.php&quot; file when working on canvases. This
7711 
 is not strictly necessary but it will give you some nice abstraction to
7712 
 help you create your masterpieces.</P>
7713 
<P> As another (concrete) example on the use of a canvas the figure
7714 
 below is a listing of font styles available with JpGraph.<DIV class="example">
7715 
<BR> <A href="exframes/frame_listfontsex1.html" target="blank"><IMG border="0"
7716 
HEIGHT="450"         src="img/img/img/img/img/img/img/img/listfontsex1.png" WIDTH="550"></A>
7717 
<BR><B>Figure 187:</B> Another example of using a canvas to draw a
7718 
 number of text boxes <A href="exframes/frame_listfontsex1.html" target="blank">
7719 
[src]</A>&nbsp;
7720 
<P></P>
7721 
</DIV></P>
7722 
<P></P>
7723 
<H2><A NAME="10_2">10.2 Creating a simple canvas</A></H2>
7724 
<P> In order to create a canvas graph you need to include the file
7725 
 &quot;jpgraph_canvas.php&quot; in addition to the standard &quot;jpgraph.php&quot; file.
7726 
 You might also want to include the &quot;jpgraph_canvtools.php&quot; to get
7727 
 access to some supporting classes that may (or not) come in handy.</P>
7728 
<P> Creating a canvas gives you the opportunity draw arbitrary shapes on
7729 
 a &quot;white&quot; piece of paper. Let's first show a simple example were we
7730 
 just draw a text box. We first show you the code which we will walk
7731 
 through<DIV class="phpscript">(File: canvasex01.php)
7732 
<BR><CODE><FONT color="#000000"> <FONT color="#0000BB">&lt;?php
7733 
<BR></FONT><FONT color="#FF8000">
7734 
//&nbsp;$Id:&nbsp;canvasex01.php,v&nbsp;1.3&nbsp;2002/10/23&nbsp;08:17:23&nbsp;aditus&nbsp;Exp&nbsp;$
7735 
<BR></FONT><FONT color="#007700">include&nbsp;</FONT><FONT color="#DD0000">
7736 
&quot;../jpgraph.php&quot;</FONT><FONT color="#007700">;
7737 
<BR>include&nbsp;</FONT><FONT color="#DD0000">&quot;../jpgraph_canvas.php&quot;</FONT><FONT
7738 
color="#007700">;
7739 
<BR>
7740 
<BR></FONT><FONT color="#FF8000">//&nbsp;Setup&nbsp;a&nbsp;basic&nbsp;canvas&nbsp;we&nbsp;can&nbsp;work&nbsp;
7741 
<BR></FONT><FONT color="#0000BB">$g&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT
7742 
color="#0000BB">CanvasGraph</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
7743 
400</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">300</FONT><FONT
7744 
color="#007700">,</FONT><FONT color="#DD0000">'auto'</FONT><FONT color="#007700">
7745 
);
7746 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7747 
color="#0000BB">SetMargin</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
7748 
5</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">11</FONT><FONT
7749 
color="#007700">,</FONT><FONT color="#0000BB">6</FONT><FONT color="#007700">
7750 
,</FONT><FONT color="#0000BB">11</FONT><FONT color="#007700">);
7751 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7752 
color="#0000BB">SetShadow</FONT><FONT color="#007700">();
7753 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7754 
color="#0000BB">SetMarginColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
7755 
&quot;teal&quot;</FONT><FONT color="#007700">);
7756 
<BR>
7757 
<BR></FONT><FONT color="#FF8000">
7758 
//&nbsp;We&nbsp;need&nbsp;to&nbsp;stroke&nbsp;the&nbsp;plotarea&nbsp;and&nbsp;margin&nbsp;before&nbsp;we&nbsp;add&nbsp;the
7759 
<BR>//&nbsp;text&nbsp;since&nbsp;we&nbsp;otherwise&nbsp;would&nbsp;overwrite&nbsp;the&nbsp;text.
7760 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7761 
color="#0000BB">InitFrame</FONT><FONT color="#007700">();
7762 
<BR>
7763 
<BR></FONT><FONT color="#FF8000">//&nbsp;Draw&nbsp;a&nbsp;text&nbsp;box&nbsp;in&nbsp;the&nbsp;middle
7764 
<BR></FONT><FONT color="#0000BB">$txt</FONT><FONT color="#007700">=</FONT><FONT
7765 
color="#DD0000">&quot;This\nis\na&nbsp;TEXT!!!&quot;</FONT><FONT color="#007700">;
7766 
<BR></FONT><FONT color="#0000BB">$t&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT
7767 
color="#0000BB">Text</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
7768 
$txt</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">200</FONT><FONT
7769 
color="#007700">,</FONT><FONT color="#0000BB">10</FONT><FONT color="#007700">
7770 
);
7771 
<BR></FONT><FONT color="#0000BB">$t</FONT><FONT color="#007700">-&gt;</FONT><FONT
7772 
color="#0000BB">SetFont</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
7773 
FF_ARIAL</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
7774 
FS_BOLD</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">40</FONT><FONT
7775 
color="#007700">);
7776 
<BR>
7777 
<BR></FONT><FONT color="#FF8000">
7778 
//&nbsp;How&nbsp;should&nbsp;the&nbsp;text&nbsp;box&nbsp;interpret&nbsp;the&nbsp;coordinates?
7779 
<BR></FONT><FONT color="#0000BB">$t</FONT><FONT color="#007700">-&gt;</FONT><FONT
7780 
color="#0000BB">Align</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
7781 
'center'</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">'top'</FONT><FONT
7782 
color="#007700">);
7783 
<BR>
7784 
<BR></FONT><FONT color="#FF8000">//&nbsp;How&nbsp;should&nbsp;the&nbsp;paragraph&nbsp;be&nbsp;aligned?
7785 
<BR></FONT><FONT color="#0000BB">$t</FONT><FONT color="#007700">-&gt;</FONT><FONT
7786 
color="#0000BB">ParagraphAlign</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
7787 
'center'</FONT><FONT color="#007700">);
7788 
<BR>
7789 
<BR></FONT><FONT color="#FF8000">
7790 
//&nbsp;Add&nbsp;a&nbsp;box&nbsp;around&nbsp;the&nbsp;text,&nbsp;white&nbsp;fill,&nbsp;black&nbsp;border&nbsp;and&nbsp;gray&nbsp;shadow
7791 
<BR></FONT><FONT color="#0000BB">$t</FONT><FONT color="#007700">-&gt;</FONT><FONT
7792 
color="#0000BB">SetBox</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
7793 
&quot;white&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
7794 
&quot;black&quot;</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">&quot;gray&quot;</FONT><FONT
7795 
color="#007700">);
7796 
<BR>
7797 
<BR></FONT><FONT color="#FF8000">//&nbsp;Stroke&nbsp;the&nbsp;text
7798 
<BR></FONT><FONT color="#0000BB">$t</FONT><FONT color="#007700">-&gt;</FONT><FONT
7799 
color="#0000BB">Stroke</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
7800 
$g</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">img</FONT><FONT
7801 
color="#007700">);
7802 
<BR>
7803 
<BR></FONT><FONT color="#FF8000">//&nbsp;Stroke&nbsp;the&nbsp;graph
7804 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7805 
color="#0000BB">Stroke</FONT><FONT color="#007700">();
7806 
<BR>
7807 
<BR></FONT><FONT color="#0000BB">?&gt;
7808 
<BR></FONT>
7809 
<BR></FONT></CODE></DIV></P>
7810 
<P> The example above starts by creating a (400x200) sized image. We set
7811 
 the margins to get a nice frame around the image. For canvases the
7812 
 margins has no effect in the way you enter coordinates. Top left is
7813 
 (0,0) and bottom right (including any potential margin and shadow) is
7814 
 the maximum. In this case the coordinates are X:0-399, and Y:0-199</P>
7815 
<P> We then call the <A href="../ref/CanvasGraph.html#_CANVASGRAPH_INITFRAME">
7816 
 InitFrame()</A> method which actually strokes the margin and plotarea
7817 
 to the graph. Since everything is stroked in the order you issue the
7818 
 commands you must make sure that the graphical objects you want on top
7819 
 is stroked last. This is different from the way you normally work with
7820 
 JpGraph since it queues up all you addition and then makes sure they
7821 
 are stroked in the correct order.</P>
7822 
<P> We then create a <A href="../ref/Text.html#_C_TEXT">Text</A> object,
7823 
 setup it's properties, including the absolute screen position where we
7824 
 want the text, and then stroke it. Her it might be a need for a closer
7825 
 explanation of the, perhaps misnamed, method <A href="../ref/Text.html#_TEXT_ALIGN">
7826 
Text::Align()</A> This method states<STRONG> how the text coordinates
7827 
 should be interpreted</STRONG> , i.e when we specify (200,10) as the
7828 
 coordinates for the text paragraph should that be interpreted as the
7829 
 top left corner, bottom-left corner or something else (of the bounding
7830 
 box)? In the code above we have chosen to interpret the X-coordinate as
7831 
 being the center of the bounding box and the Y-coordinate as the top.
7832 
 Hence the text will be aligned so that the (200,100) point in the graph
7833 
 is aligned with the middle of the top line of the paragraphs bounding
7834 
 box.</P>
7835 
<P> We also specify that the lines within the paragraph should be
7836 
 centered with a call to <A href="../ref/Text.html#_TEXT_PARAGRAPHALIGN">
7837 
 Text::ParagraphAlign()</A> Since we also choose to have a box around
7838 
 the text we have to make use of the method <A href="../ref/Text.html#_TEXT_SETBOX">
7839 
 Text::SetBox()</A> which is used to specify the fill color, the border
7840 
 color and the shadow color (if you leave out shadow color or set it to
7841 
 '', no shadow will be used).</P>
7842 
<P> Now we are ready to stroke the text onto the canvas. In order to do
7843 
 so we must specify the basic Image drawing class we want to use.
7844 
 Without discussing this further we just state that a suitable image
7845 
 class can always be found as the<STRONG> img</STRONG> property of the
7846 
 Graph class.</P>
7847 
<P> Finally we are ready to stroke the entire graph, which in effect
7848 
 sends the canvas back to the browser. Below you can see the effect of
7849 
 all this code</P>
7850 
<P><DIV class="example">
7851 
<BR> <A href="exframes/frame_canvasex01.html" target="blank"><IMG border="0"
7852 
HEIGHT="300"         src="img/img/img/img/img/img/img/img/canvasex01.png" WIDTH="400"></A>
7853 
<BR><B>Figure 188:</B> A simple canvas drawing with a text box in the
7854 
 middle <A href="exframes/frame_canvasex01.html" target="blank">[src]</A>
7855 
&nbsp;
7856 
<P></P>
7857 
</DIV></P>
7858 
<P></P>
7859 
<H2><A NAME="10_3">10.3 Adding lines and rectangles to a canvas</A></H2>
7860 
<P> A canvas also makes a good background for using standard graphic
7861 
 primitives, for example circles and lines. What you first have to
7862 
 remember is that you are (so far) working with absolute screen
7863 
 coordinates and secondly all drawing primitives are found in the <A href="../ref/Image.html#_C_IMAGE">
7864 
 Image Class</A> accessible as a property of the Graph class. So for
7865 
 example to draw a line between coordinate (0,0) and (100,100) you would
7866 
 have to add the line<DIV class="phpscript"><CODE><FONT color="#000000">
7867 
 <FONT color="#0000BB">&nbsp;$graph</FONT><FONT color="#007700">-&gt;</FONT><FONT
7868 
color="#0000BB">img</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7869 
Line</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">0</FONT><FONT
7870 
color="#007700">,</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">
7871 
,</FONT><FONT color="#0000BB">100</FONT><FONT color="#007700">,</FONT><FONT
7872 
color="#0000BB">100</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB">
7873 
</FONT></FONT></CODE></DIV></P>
7874 
<P></P>
7875 
<P> To your code. The following example shows some of the graphic
7876 
 primitives you have access to in the Image class<DIV class="phpscript">
7877 
(File: canvasex02.php)
7878 
<BR><CODE><FONT color="#000000"> <FONT color="#0000BB">&lt;?php
7879 
<BR></FONT><FONT color="#FF8000">
7880 
//&nbsp;$Id:&nbsp;canvasex02.php,v&nbsp;1.1&nbsp;2002/08/27&nbsp;20:08:57&nbsp;aditus&nbsp;Exp&nbsp;$
7881 
<BR></FONT><FONT color="#007700">include&nbsp;</FONT><FONT color="#DD0000">
7882 
&quot;../jpgraph.php&quot;</FONT><FONT color="#007700">;
7883 
<BR>include&nbsp;</FONT><FONT color="#DD0000">&quot;../jpgraph_canvas.php&quot;</FONT><FONT
7884 
color="#007700">;
7885 
<BR>
7886 
<BR></FONT><FONT color="#FF8000">//&nbsp;Setup&nbsp;a&nbsp;basic&nbsp;canvas&nbsp;we&nbsp;can&nbsp;work&nbsp;
7887 
<BR></FONT><FONT color="#0000BB">$g&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT
7888 
color="#0000BB">CanvasGraph</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
7889 
400</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">200</FONT><FONT
7890 
color="#007700">,</FONT><FONT color="#DD0000">'auto'</FONT><FONT color="#007700">
7891 
);
7892 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7893 
color="#0000BB">SetMargin</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
7894 
5</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">11</FONT><FONT
7895 
color="#007700">,</FONT><FONT color="#0000BB">6</FONT><FONT color="#007700">
7896 
,</FONT><FONT color="#0000BB">11</FONT><FONT color="#007700">);
7897 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7898 
color="#0000BB">SetShadow</FONT><FONT color="#007700">();
7899 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7900 
color="#0000BB">SetMarginColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
7901 
&quot;teal&quot;</FONT><FONT color="#007700">);
7902 
<BR>
7903 
<BR></FONT><FONT color="#FF8000">
7904 
//&nbsp;We&nbsp;need&nbsp;to&nbsp;stroke&nbsp;the&nbsp;plotarea&nbsp;and&nbsp;margin&nbsp;before&nbsp;we&nbsp;add&nbsp;the
7905 
<BR>//&nbsp;text&nbsp;since&nbsp;we&nbsp;otherwise&nbsp;would&nbsp;overwrite&nbsp;the&nbsp;text.
7906 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7907 
color="#0000BB">InitFrame</FONT><FONT color="#007700">();
7908 
<BR>
7909 
<BR></FONT><FONT color="#FF8000">//&nbsp;Add&nbsp;a&nbsp;black&nbsp;line
7910 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7911 
color="#0000BB">img</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7912 
SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
7913 
'black'</FONT><FONT color="#007700">);
7914 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7915 
color="#0000BB">img</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7916 
Line</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">0</FONT><FONT
7917 
color="#007700">,</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">
7918 
,</FONT><FONT color="#0000BB">100</FONT><FONT color="#007700">,</FONT><FONT
7919 
color="#0000BB">100</FONT><FONT color="#007700">);
7920 
<BR>
7921 
<BR></FONT><FONT color="#FF8000">//&nbsp;..&nbsp;and&nbsp;a&nbsp;circle&nbsp;(x,y,diameter)
7922 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7923 
color="#0000BB">img</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7924 
Circle</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">100</FONT><FONT
7925 
color="#007700">,</FONT><FONT color="#0000BB">100</FONT><FONT color="#007700">
7926 
,</FONT><FONT color="#0000BB">50</FONT><FONT color="#007700">);
7927 
<BR>
7928 
<BR></FONT><FONT color="#FF8000">
7929 
//&nbsp;..&nbsp;and&nbsp;a&nbsp;filled&nbsp;circle&nbsp;(x,y,diameter)
7930 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7931 
color="#0000BB">img</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7932 
SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">'red'</FONT><FONT
7933 
color="#007700">);
7934 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7935 
color="#0000BB">img</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7936 
FilledCircle</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
7937 
200</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">100</FONT><FONT
7938 
color="#007700">,</FONT><FONT color="#0000BB">50</FONT><FONT color="#007700">
7939 
);
7940 
<BR>
7941 
<BR></FONT><FONT color="#FF8000">//&nbsp;..&nbsp;add&nbsp;a&nbsp;rectangle
7942 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7943 
color="#0000BB">img</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7944 
SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
7945 
'green'</FONT><FONT color="#007700">);
7946 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7947 
color="#0000BB">img</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7948 
FilledRectangle</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
7949 
10</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">10</FONT><FONT
7950 
color="#007700">,</FONT><FONT color="#0000BB">50</FONT><FONT color="#007700">
7951 
,</FONT><FONT color="#0000BB">50</FONT><FONT color="#007700">);
7952 
<BR>
7953 
<BR></FONT><FONT color="#FF8000">//&nbsp;..&nbsp;add&nbsp;a&nbsp;filled&nbsp;rounded&nbsp;rectangle
7954 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7955 
color="#0000BB">img</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7956 
SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
7957 
'green'</FONT><FONT color="#007700">);
7958 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7959 
color="#0000BB">img</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7960 
FilledRoundedRectangle</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
7961 
300</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">30</FONT><FONT
7962 
color="#007700">,</FONT><FONT color="#0000BB">350</FONT><FONT color="#007700">
7963 
,</FONT><FONT color="#0000BB">80</FONT><FONT color="#007700">,</FONT><FONT
7964 
color="#0000BB">10</FONT><FONT color="#007700">);
7965 
<BR></FONT><FONT color="#FF8000">//&nbsp;..&nbsp;with&nbsp;a&nbsp;darker&nbsp;border
7966 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7967 
color="#0000BB">img</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7968 
SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
7969 
'darkgreen'</FONT><FONT color="#007700">);
7970 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7971 
color="#0000BB">img</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
7972 
RoundedRectangle</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
7973 
300</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">30</FONT><FONT
7974 
color="#007700">,</FONT><FONT color="#0000BB">350</FONT><FONT color="#007700">
7975 
,</FONT><FONT color="#0000BB">80</FONT><FONT color="#007700">,</FONT><FONT
7976 
color="#0000BB">10</FONT><FONT color="#007700">);
7977 
<BR>
7978 
<BR></FONT><FONT color="#FF8000">//&nbsp;Stroke&nbsp;the&nbsp;graph
7979 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
7980 
color="#0000BB">Stroke</FONT><FONT color="#007700">();
7981 
<BR>
7982 
<BR></FONT><FONT color="#0000BB">?&gt;
7983 
<BR></FONT>
7984 
<BR></FONT></CODE></DIV></P>
7985 
<P> Pleas note the way to access these routines through the img property
7986 
 of the Graph class. Please also keep in mind that the coordinates are
7987 
 absolute.</P>
7988 
<P><DIV class="example">
7989 
<BR> <A href="exframes/frame_canvasex02.html" target="blank"><IMG border="0"
7990 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/canvasex02.png" WIDTH="400"></A>
7991 
<BR><B>Figure 189:</B> Example of graphic primitives <A href="exframes/frame_canvasex02.html"
7992 
target="blank">[src]</A>&nbsp;
7993 
<P></P>
7994 
</DIV></P>
7995 
<P></P>
7996 
<P></P>
7997 
<HR> <SMALL>
7998 
<P><STRONG> A note on GD</STRONG> For those of you using GD 1.xx you
7999 
 might notice that the large &quot;filled circle&quot; isn't completely filled.
8000 
 This is because in GD 1.xx there are no low level primitives to fill an
8001 
 ellipse or circle so JpGraph tries to make the best out of a bad
8002 
 situation and manually fake a filled circle. For interest of speed
8003 
 JpGraph does not contain a complete (for example) Bresenham-circle fill
8004 
 but cheats by using some existing GD routines. This is not a perfect
8005 
 solution and for large filled circles like this you get some
8006 
 moire-patterns in the circle. If you upgrade to GD 2.x JpGraph will be
8007 
 able to make full use of those new existing methods and the fill will
8008 
 be perfect.</P>
8009 
</SMALL>
8010 
<HR>
8011 
<P> We refer you to the class reference to find out what other graphic
8012 
 primitives are available for use.</P>
8013 
<H2><A NAME="10_4">10.4 Using a canvas scale</A></H2>
8014 
<P> The previous method using absolute coordinates works. But nothing
8015 
 more. It doesn't give you any chance to easily scale the image (unless
8016 
 you manually recalculate all used coordinates) , it gets tedious to
8017 
 work with pixel level resolution. Especially if you just like to draw a
8018 
 few basic shapes.</P>
8019 
<P> To help with this you can use a scale for the canvas. This lets you
8020 
 define a &quot;work-space&quot; of your choice. You can for example set the
8021 
 coordinates to be between X:0-10, Y:0-10. This makes it easier to
8022 
 position objects on the canvas. This also has two additional
8023 
 advantages:</P>
8024 
<UL>
8025 
<LI> If you increase the size of the canvas all objects will be
8026 
 automatically scale to keep their proportions without any changes.</LI>
8027 
<LI> You can shrink/enlarge your drawing (not the image) by just using
8028 
 another scale. For example if you originally draw the image using a
8029 
 (0:10, 0:10) scale and then change the scale to (0:20, 0:20) then the
8030 
 effect will be that you drawings will &quot;shrink&quot; to half their size.</LI>
8031 
</UL>
8032 
<P></P>
8033 
<P> To use this type of scaling you must make sure you include the file
8034 
 &quot;jpgraph_canvtools.php&quot; . In addition to the scaling class their are
8035 
 also a couple of other utility classes that may come in handy,
8036 
 especially the <A href="../ref/Shape.html#_C_SHAPE"> Shape</A> class.</P>
8037 
<P> Using the scale is quite simple. You first instantiate a scale
8038 
 object passing the graph as a parameter and then specify the scale you
8039 
 want to use. This means you need to add the lines<DIV class="phpscript">
8040 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$scale&nbsp;</FONT><FONT color="#007700">
8041 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">CanvasScale</FONT><FONT color="#007700">
8042 
(</FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">);
8043 
<BR></FONT><FONT color="#0000BB">$scale</FONT><FONT color="#007700">-&gt;</FONT><FONT
8044 
color="#0000BB">Set</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
8045 
0</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">$xmax</FONT><FONT
8046 
color="#007700">,</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">
8047 
,</FONT><FONT color="#0000BB">$ymax</FONT><FONT color="#007700">);</FONT><FONT
8048 
color="#0000BB"></FONT></FONT></CODE></DIV></P>
8049 
<P></P>
8050 
<P> to your code. You can then use one of the translation methods (for
8051 
 example <A href="../ref/CanvasScale.html#_CANVASSCALE_TRANSLATE">
8052 
CanvasScale::Translate()</A>) in the canvas scale class to translate
8053 
 between your world coordinates and the absolute screen coordinates.
8054 
 This means you could take the code in the example above and just add
8055 
 the lines, for example,<DIV class="phpscript"><CODE><FONT color="#000000">
8056 
 <FONT color="#0000BB">&nbsp;</FONT><FONT color="#007700">list(</FONT><FONT color="#0000BB">
8057 
$x1</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">$y1</FONT><FONT
8058 
color="#007700">)&nbsp;=&nbsp;</FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700">
8059 
-&gt;</FONT><FONT color="#0000BB">scale</FONT><FONT color="#007700">-&gt;</FONT><FONT
8060 
color="#0000BB">Translate</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
8061 
$x1</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">$y1</FONT><FONT
8062 
color="#007700">);
8063 
<BR>list(</FONT><FONT color="#0000BB">$x2</FONT><FONT color="#007700">,</FONT><FONT
8064 
color="#0000BB">$y2</FONT><FONT color="#007700">)&nbsp;=&nbsp;</FONT><FONT color="#0000BB">
8065 
$this</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">scale</FONT><FONT
8066 
color="#007700">-&gt;</FONT><FONT color="#0000BB">Translate</FONT><FONT color="#007700">
8067 
(</FONT><FONT color="#0000BB">$x2</FONT><FONT color="#007700">,</FONT><FONT
8068 
color="#0000BB">$y2</FONT><FONT color="#007700">);
8069 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
8070 
color="#0000BB">img</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
8071 
Line</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">$x1</FONT><FONT
8072 
color="#007700">,</FONT><FONT color="#0000BB">$y1</FONT><FONT color="#007700">
8073 
,</FONT><FONT color="#0000BB">$x2</FONT><FONT color="#007700">,</FONT><FONT
8074 
color="#0000BB">$y2</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB">
8075 
</FONT></FONT></CODE></DIV></P>
8076 
<P> Since this pattern has to be repeated for every object that has to
8077 
 be drawn it makes good sense to encapsulate this in a separate class.
8078 
 This is exactly why the canvas tools file also have a utility class
8079 
 called <A href="../ref/Shape.html#_C_SHAPE"> Shape</A> This class is
8080 
 mainly a wrapper around the most commonly used methods in the basic
8081 
 Image class (with one important exception) and does all these the
8082 
 translation for you. Please see the class reference for a complete list
8083 
 of the available methods To set up the Shape class you instantiate it
8084 
 with the graphic context and the scale you want to use as argument as
8085 
 in</P>
8086 
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
8087 
&nbsp;$shape&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">
8088 
Shape</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">$g</FONT><FONT
8089 
color="#007700">,</FONT><FONT color="#0000BB">$scale</FONT><FONT color="#007700">
8090 
);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
8091 
<P></P>
8092 
<P> You are then ready to use all the methods in the shape class. Using
8093 
 a scale and imitating the previous example we would get the source
8094 
 shown below.<DIV class="phpscript">(File: canvasex03.php)
8095 
<BR><CODE><FONT color="#000000"> <FONT color="#0000BB">&lt;?php
8096 
<BR></FONT><FONT color="#FF8000">
8097 
//&nbsp;$Id:&nbsp;canvasex03.php,v&nbsp;1.1&nbsp;2002/08/27&nbsp;20:08:57&nbsp;aditus&nbsp;Exp&nbsp;$
8098 
<BR></FONT><FONT color="#007700">include&nbsp;</FONT><FONT color="#DD0000">
8099 
&quot;../jpgraph.php&quot;</FONT><FONT color="#007700">;
8100 
<BR>include&nbsp;</FONT><FONT color="#DD0000">&quot;../jpgraph_canvas.php&quot;</FONT><FONT
8101 
color="#007700">;
8102 
<BR>include&nbsp;</FONT><FONT color="#DD0000">&quot;../jpgraph_canvtools.php&quot;</FONT><FONT
8103 
color="#007700">;
8104 
<BR>
8105 
<BR></FONT><FONT color="#FF8000">//&nbsp;Define&nbsp;work&nbsp;space
8106 
<BR></FONT><FONT color="#0000BB">$xmax</FONT><FONT color="#007700">=</FONT><FONT
8107 
color="#0000BB">20</FONT><FONT color="#007700">;
8108 
<BR></FONT><FONT color="#0000BB">$ymax</FONT><FONT color="#007700">=</FONT><FONT
8109 
color="#0000BB">20</FONT><FONT color="#007700">;
8110 
<BR>
8111 
<BR></FONT><FONT color="#FF8000">//&nbsp;Setup&nbsp;a&nbsp;basic&nbsp;canvas&nbsp;we&nbsp;can&nbsp;work&nbsp;
8112 
<BR></FONT><FONT color="#0000BB">$g&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT
8113 
color="#0000BB">CanvasGraph</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
8114 
400</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">200</FONT><FONT
8115 
color="#007700">,</FONT><FONT color="#DD0000">'auto'</FONT><FONT color="#007700">
8116 
);
8117 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
8118 
color="#0000BB">SetMargin</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
8119 
5</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">11</FONT><FONT
8120 
color="#007700">,</FONT><FONT color="#0000BB">6</FONT><FONT color="#007700">
8121 
,</FONT><FONT color="#0000BB">11</FONT><FONT color="#007700">);
8122 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
8123 
color="#0000BB">SetShadow</FONT><FONT color="#007700">();
8124 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
8125 
color="#0000BB">SetMarginColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
8126 
&quot;teal&quot;</FONT><FONT color="#007700">);
8127 
<BR>
8128 
<BR></FONT><FONT color="#FF8000">
8129 
//&nbsp;We&nbsp;need&nbsp;to&nbsp;stroke&nbsp;the&nbsp;plotarea&nbsp;and&nbsp;margin&nbsp;before&nbsp;we&nbsp;add&nbsp;the
8130 
<BR>//&nbsp;text&nbsp;since&nbsp;we&nbsp;otherwise&nbsp;would&nbsp;overwrite&nbsp;the&nbsp;text.
8131 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
8132 
color="#0000BB">InitFrame</FONT><FONT color="#007700">();
8133 
<BR>
8134 
<BR></FONT><FONT color="#FF8000">//&nbsp;Create&nbsp;a&nbsp;new&nbsp;scale
8135 
<BR></FONT><FONT color="#0000BB">$scale&nbsp;</FONT><FONT color="#007700">
8136 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">CanvasScale</FONT><FONT color="#007700">
8137 
(</FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">);
8138 
<BR></FONT><FONT color="#0000BB">$scale</FONT><FONT color="#007700">-&gt;</FONT><FONT
8139 
color="#0000BB">Set</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
8140 
0</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">$xmax</FONT><FONT
8141 
color="#007700">,</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">
8142 
,</FONT><FONT color="#0000BB">$ymax</FONT><FONT color="#007700">);
8143 
<BR>
8144 
<BR></FONT><FONT color="#FF8000">
8145 
//&nbsp;The&nbsp;shape&nbsp;class&nbsp;is&nbsp;wrapper&nbsp;around&nbsp;the&nbsp;Imgae&nbsp;class&nbsp;which&nbsp;translates
8146 
<BR>//&nbsp;the&nbsp;coordinates&nbsp;for&nbsp;us
8147 
<BR></FONT><FONT color="#0000BB">$shape&nbsp;</FONT><FONT color="#007700">
8148 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">Shape</FONT><FONT color="#007700">(</FONT><FONT
8149 
color="#0000BB">$g</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
8150 
$scale</FONT><FONT color="#007700">);
8151 
<BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-&gt;</FONT><FONT
8152 
color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
8153 
'black'</FONT><FONT color="#007700">);
8154 
<BR>
8155 
<BR>
8156 
<BR></FONT><FONT color="#FF8000">//&nbsp;Add&nbsp;a&nbsp;black&nbsp;line
8157 
<BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-&gt;</FONT><FONT
8158 
color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
8159 
'black'</FONT><FONT color="#007700">);
8160 
<BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-&gt;</FONT><FONT
8161 
color="#0000BB">Line</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
8162 
0</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">0</FONT><FONT
8163 
color="#007700">,</FONT><FONT color="#0000BB">20</FONT><FONT color="#007700">
8164 
,</FONT><FONT color="#0000BB">20</FONT><FONT color="#007700">);
8165 
<BR>
8166 
<BR></FONT><FONT color="#FF8000">//&nbsp;..&nbsp;and&nbsp;a&nbsp;circle&nbsp;(x,y,diameter)
8167 
<BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-&gt;</FONT><FONT
8168 
color="#0000BB">Circle</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
8169 
5</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">14</FONT><FONT
8170 
color="#007700">,</FONT><FONT color="#0000BB">2</FONT><FONT color="#007700">
8171 
);
8172 
<BR>
8173 
<BR></FONT><FONT color="#FF8000">
8174 
//&nbsp;..&nbsp;and&nbsp;a&nbsp;filled&nbsp;circle&nbsp;(x,y,diameter)
8175 
<BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-&gt;</FONT><FONT
8176 
color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
8177 
'red'</FONT><FONT color="#007700">);
8178 
<BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-&gt;</FONT><FONT
8179 
color="#0000BB">FilledCircle</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
8180 
11</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">8</FONT><FONT
8181 
color="#007700">,</FONT><FONT color="#0000BB">3</FONT><FONT color="#007700">
8182 
);
8183 
<BR>
8184 
<BR></FONT><FONT color="#FF8000">//&nbsp;..&nbsp;add&nbsp;a&nbsp;rectangle
8185 
<BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-&gt;</FONT><FONT
8186 
color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
8187 
'green'</FONT><FONT color="#007700">);
8188 
<BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-&gt;</FONT><FONT
8189 
color="#0000BB">FilledRectangle</FONT><FONT color="#007700">(</FONT><FONT
8190 
color="#0000BB">15</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
8191 
8</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">19</FONT><FONT
8192 
color="#007700">,</FONT><FONT color="#0000BB">14</FONT><FONT color="#007700">
8193 
);
8194 
<BR>
8195 
<BR></FONT><FONT color="#FF8000">//&nbsp;..&nbsp;add&nbsp;a&nbsp;filled&nbsp;rounded&nbsp;rectangle
8196 
<BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-&gt;</FONT><FONT
8197 
color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
8198 
'green'</FONT><FONT color="#007700">);
8199 
<BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-&gt;</FONT><FONT
8200 
color="#0000BB">FilledRoundedRectangle</FONT><FONT color="#007700">(</FONT><FONT
8201 
color="#0000BB">2</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
8202 
3</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">8</FONT><FONT
8203 
color="#007700">,</FONT><FONT color="#0000BB">6</FONT><FONT color="#007700">
8204 
);
8205 
<BR></FONT><FONT color="#FF8000">//&nbsp;..&nbsp;with&nbsp;a&nbsp;darker&nbsp;border
8206 
<BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-&gt;</FONT><FONT
8207 
color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
8208 
'darkgreen'</FONT><FONT color="#007700">);
8209 
<BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-&gt;</FONT><FONT
8210 
color="#0000BB">RoundedRectangle</FONT><FONT color="#007700">(</FONT><FONT
8211 
color="#0000BB">2</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
8212 
3</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">8</FONT><FONT
8213 
color="#007700">,</FONT><FONT color="#0000BB">6</FONT><FONT color="#007700">
8214 
);
8215 
<BR>
8216 
<BR>
8217 
<BR></FONT><FONT color="#FF8000">//&nbsp;Stroke&nbsp;the&nbsp;graph
8218 
<BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-&gt;</FONT><FONT
8219 
color="#0000BB">Stroke</FONT><FONT color="#007700">();
8220 
<BR>
8221 
<BR></FONT><FONT color="#0000BB">?&gt;
8222 
<BR></FONT>
8223 
<BR></FONT></CODE></DIV> The source above gives the following result<DIV class="example">
8224 
<BR> <A href="exframes/frame_canvasex03.html" target="blank"><IMG border="0"
8225 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/canvasex03.png" WIDTH="400"></A>
8226 
<BR><B>Figure 190:</B> Drawing shapes on a canvas using a scale. <A href="exframes/frame_canvasex03.html"
8227 
target="blank">[src]</A>&nbsp;
8228 
<P></P>
8229 
</DIV></P>
8230 
<P> If we like to make a smaller image we could just change the image
8231 
 size and everything will be rescaled without any further code changes.
8232 
 SO for example making the image half the size would give the result<DIV class="example">
8233 
<BR> <A href="exframes/frame_canvasex04.html" target="blank"><IMG border="0"
8234 
HEIGHT="100"         src="img/img/img/img/img/img/img/img/canvasex04.png" WIDTH="200"></A>
8235 
<BR><B>Figure 191:</B> Shrinking the image to half the size is easy
8236 
 since the scaling will maintain the relative position of the objects <A href="exframes/frame_canvasex04.html"
8237 
target="blank">[src]</A>&nbsp;
8238 
<P></P>
8239 
</DIV></P>
8240 
<P> If we instead wanted to keep the image size but shrink the shapes we
8241 
 could just make the scale twice as large which would result in<DIV class="example">
8242 
<BR> <A href="exframes/frame_canvasex05.html" target="blank"><IMG border="0"
8243 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/canvasex05.png" WIDTH="400"></A>
8244 
<BR><B>Figure 192:</B> Shrinking hte graphic object by making the scale
8245 
 twice as large <A href="exframes/frame_canvasex05.html" target="blank">
8246 
[src]</A>&nbsp;
8247 
<P></P>
8248 
</DIV></P>
8249 
<P></P>
8250 
<P> We previously mentioned that the Shape class was a wrapper around
8251 
 the image class with one exception. So what is the exception? Well,
8252 
 glad you asked. The exception is that it contain an additional method
8253 
 which draws an &quot;indented rectangle&quot;. An indented rectangle is a
8254 
 rectangle where one of it's four corners have been moved into the
8255 
 rectangle. You create an indented rectangle by calling either <A href="../ref/Shape.html#_SHAPE_INDENTEDRECTANGLE">
8256 
 Shape::IndentedRectangle()</A> or A few examples illustrates what this
8257 
 shape looks like.<DIV class="example">
8258 
<BR> <A href="exframes/frame_canvasex06.html" target="blank"><IMG border="0"
8259 
HEIGHT="200"         src="img/img/img/img/img/img/img/img/canvasex06.png" WIDTH="400"></A>
8260 
<BR><B>Figure 193:</B> Examples of filled indented rectangles <A href="exframes/frame_canvasex06.html"
8261 
target="blank">[src]</A>&nbsp;
8262 
<P></P>
8263 
</DIV></P>
8264 
<P></P>
8265 
<P> As a final note we mention the class <A href="../ref/CanvasRectangleText.html#_C_CANVASRECTANGLETEXT">
8266 
 CanvasRectangleText</A> Which can be used to add a text with a rounded
8267 
 rectangle (possibly filled) onto the canvas. The previous example where
8268 
 all the available fonts were drawn were using this class. We don't
8269 
 describe it further but refer the interested reader to the class
8270 
 reference and the 'listfontsex1.php' example file.</P>
8271 
<H2><A NAME="10_5">10.5 Sample application: Drawing DB schema</A></H2>
8272 
<P> As a final example we shortly discuss how the canvas type of graph
8273 
 was used to generate the DB schema for the DDDA architecture.</P>
8274 
<P> The library php file &quot;utils/misc/imgdbschema.php&quot; included in the
8275 
 distribution contains some utility classes to make the drawing of table
8276 
 schemes easier. It contains two basic classes, Class ImgDBTable and
8277 
 Class ImgDBSchema. The first class understand how to draw an image
8278 
 illustrating a single table. The second class is responsible for
8279 
 automatically extract all the relevant information from a DB to draw a
8280 
 complete DB Schema.</P>
8281 
<P> Before going into this a little bit more we show what an example of
8282 
 this might look like.<DIV class="example">
8283 
<BR> <A href="exframes/frame_dbschemaex1.html" target="blank"><IMG border="0"
8284 
HEIGHT="750"         src="img/img/img/img/img/img/img/img/dbschemaex1.png" WIDTH="600"></A>
8285 
<BR><B>Figure 194:</B> Example of using the canvas graph style together
8286 
 with the imgdbschema.php library to semi-automatically generate a DB
8287 
 schema <A href="exframes/frame_dbschemaex1.html" target="blank">[src]</A>
8288 
&nbsp;
8289 
<P></P>
8290 
</DIV></P>
8291 
<P></P>
8292 
<P> Before going on it should be noted that the ImgDBSchema assumes that
8293 
 the DB can be accessed through a DB abstraction layer modeled after the
8294 
 abstraction layer available in the 'jpdb.php' file in the DDDA
8295 
 architecture. This abstraction layer assumes a MySQL database in the
8296 
 bottom. This specific dependency of this particular abstraction layer
8297 
 is the reason why these classes is not included in the generic canvas
8298 
 tools file.</P>
8299 
<P> The second thing to note is that this library does not contain a
8300 
 complete automatic-layout engine but rather a very simple automatic
8301 
 system which, if nothing else is specified, just puts the table in a
8302 
 rectangular grid. A complete graph layout engine would simple be to
8303 
 much to write in this context. This is also a very difficult
8304 
 optimization problem and sofar not even any of the available research
8305 
 programs that tries this can achieve a satisfactory layout without
8306 
 manual intervention.</P>
8307 
<P> The critical lines in the code to generate the above graph is<DIV class="phpscript">
8308 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;$tblposadj</FONT><FONT
8309 
color="#007700">=array(</FONT><FONT color="#0000BB">$tlo</FONT><FONT color="#007700">
8310 
,</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT
8311 
color="#0000BB">$tblwidth</FONT><FONT color="#007700">+</FONT><FONT color="#0000BB">
8312 
$tlo</FONT><FONT color="#007700">+</FONT><FONT color="#0000BB">2</FONT><FONT
8313 
color="#007700">,</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">
8314 
,</FONT><FONT color="#0000BB">2</FONT><FONT color="#007700">*</FONT><FONT
8315 
color="#0000BB">$tblwidth</FONT><FONT color="#007700">+</FONT><FONT color="#0000BB">
8316 
$tlo</FONT><FONT color="#007700">+</FONT><FONT color="#0000BB">4</FONT><FONT
8317 
color="#007700">,</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">
8318 
,-</FONT><FONT color="#0000BB">1</FONT><FONT color="#007700">,</FONT><FONT
8319 
color="#0000BB">16</FONT><FONT color="#007700">,-</FONT><FONT color="#0000BB">
8320 
1</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">16</FONT><FONT
8321 
color="#007700">);
8322 
<BR></FONT><FONT color="#0000BB">$dbschema&nbsp;</FONT><FONT color="#007700">
8323 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">ImgDBSchema</FONT><FONT color="#007700">
8324 
(</FONT><FONT color="#DD0000">&quot;jpgraph_doc&quot;</FONT><FONT color="#007700">
8325 
,</FONT><FONT color="#DD0000">&quot;FormatTblName&quot;</FONT><FONT color="#007700">
8326 
,</FONT><FONT color="#DD0000">&quot;FormatFldName&quot;</FONT><FONT color="#007700">
8327 
);
8328 
<BR></FONT><FONT color="#0000BB">$dbschema</FONT><FONT color="#007700">
8329 
-&gt;</FONT><FONT color="#0000BB">SetMargin</FONT><FONT color="#007700">(</FONT><FONT
8330 
color="#0000BB">$leftm</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
8331 
$topm</FONT><FONT color="#007700">);
8332 
<BR></FONT><FONT color="#0000BB">$dbschema</FONT><FONT color="#007700">
8333 
-&gt;</FONT><FONT color="#0000BB">SetTableWidth</FONT><FONT color="#007700">
8334 
(</FONT><FONT color="#0000BB">$tblwidth</FONT><FONT color="#007700">);
8335 
<BR></FONT><FONT color="#0000BB">$dbschema</FONT><FONT color="#007700">
8336 
-&gt;</FONT><FONT color="#0000BB">Stroke</FONT><FONT color="#007700">(</FONT><FONT
8337 
color="#0000BB">$this</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
8338 
img</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">$this</FONT><FONT
8339 
color="#007700">-&gt;</FONT><FONT color="#0000BB">iscale</FONT><FONT color="#007700">
8340 
,</FONT><FONT color="#0000BB">$tblposadj</FONT><FONT color="#007700">);</FONT><FONT
8341 
color="#0000BB"></FONT></FONT></CODE></DIV></P>
8342 
<P></P>
8343 
<P> The rest of the code in the file is just to setup the canvas, add an
8344 
 indented rectangle to group some tables and generate a footer with the
8345 
 date and time this image was generated.</P>
8346 
<P> The first line instantiates a new ImgDBSCheme layout engine asking
8347 
 it to draw an image for the database 'jpgraph_doc'. The following two
8348 
 arguments specify two callback functions for formatting the text for
8349 
 header and each field in a table.</P>
8350 
<P> The next line specify the top left margin where the drawing of the
8351 
 tables should be started.</P>
8352 
<P> The third line specify the width of a single table. The final lines
8353 
 starts the engine and draws all tables in the database to the canvas.
8354 
 The final argument requires some further explanation. This is an offset
8355 
 (x,y) from the top left corner how each individual table should be
8356 
 positioned. If the value is -1 indicates that the default value should
8357 
 be used. If this array is not specified then the tables will simple
8358 
 arranged line by line.</P>
8359 
<P> The full source code for drawing this DB schema example is shown
8360 
 below.</P>
8361 
<P><DIV class="phpscript">(File: dbschemaex1.php)
8362 
<BR><CODE><FONT color="#000000"> <FONT color="#0000BB">&lt;?php
8363 
<BR></FONT><FONT color="#FF8000">
8364 
/*=======================================================================
8365 
<BR>//&nbsp;File:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DBSCHEMAEX1.PHP
8366 
<BR>//&nbsp;Description:&nbsp;&nbsp;&nbsp;&nbsp;Draw&nbsp;a&nbsp;DB&nbsp;schema&nbsp;of&nbsp;the&nbsp;DDDA&nbsp;architecture
8367 
<BR>//&nbsp;Created:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2002-08-25
8368 
<BR>//&nbsp;Author:&nbsp;&nbsp;&nbsp;&nbsp;Johan&nbsp;Persson&nbsp;(johanp@aditus.nu)
8369 
<BR>
8370 
//&nbsp;Ver:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$Id:&nbsp;dbschemaex1.php,v&nbsp;1.1&nbsp;2002/08/27&nbsp;20:08:57&nbsp;aditus&nbsp;Exp&nbsp;$
8371 
<BR>//
8372 
<BR>//&nbsp;License:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This&nbsp;code&nbsp;is&nbsp;released&nbsp;under&nbsp;QPL
8373 
<BR>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Copyright&nbsp;(C)&nbsp;2001,2002&nbsp;Johan&nbsp;Persson
8374 
<BR>
8375 
//&nbsp;Note:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The&nbsp;actual&nbsp;drawing&nbsp;of&nbsp;the&nbsp;tables&nbsp;are&nbsp;semi-automatically
8376 
<BR>
8377 
//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;but&nbsp;you&nbsp;can&nbsp;easily&nbsp;adjust&nbsp;the&nbsp;individual&nbsp;tables&nbsp;position
8378 
<BR>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;with&nbsp;the&nbsp;'tblposadj'&nbsp;array.&nbsp;
8379 
<BR>//
8380 
<BR>
8381 
//========================================================================
8382 
<BR>*/
8383 
<BR></FONT><FONT color="#007700">include&nbsp;</FONT><FONT color="#DD0000">
8384 
&quot;../jpgraph.php&quot;</FONT><FONT color="#007700">;
8385 
<BR>include&nbsp;</FONT><FONT color="#DD0000">&quot;../jpgraph_canvas.php&quot;</FONT><FONT
8386 
color="#007700">;
8387 
<BR>include&nbsp;</FONT><FONT color="#DD0000">&quot;../jpgraph_canvtools.php&quot;</FONT><FONT
8388 
color="#007700">;
8389 
<BR>include&nbsp;</FONT><FONT color="#DD0000">&quot;../utils/misc/imgdbschema.inc&quot;</FONT><FONT
8390 
color="#007700">;
8391 
<BR>include&nbsp;</FONT><FONT color="#DD0000">&quot;../utils/jpdocgen/jpdb.php&quot;</FONT><FONT
8392 
color="#007700">;
8393 
<BR>
8394 
<BR>
8395 
<BR></FONT><FONT color="#FF8000">
8396 
//&nbsp;Global&nbsp;callback&nbsp;to&nbsp;format&nbsp;the&nbsp;table&nbsp;header&nbsp;names
8397 
<BR></FONT><FONT color="#007700">function&nbsp;</FONT><FONT color="#0000BB">
8398 
FormatTblName</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
8399 
$aName</FONT><FONT color="#007700">)&nbsp;{
8400 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#FF8000">
8401 
//&nbsp;We&nbsp;want&nbsp;to&nbsp;replace&nbsp;any&nbsp;specifi&nbsp;references&nbsp;to&nbsp;the
8402 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;'JpGraph'&nbsp;project&nbsp;with&nbsp;the&nbsp;generic&nbsp;'&lt;project&gt;'
8403 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#007700">return&nbsp;</FONT><FONT color="#0000BB">
8404 
str_replace</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
8405 
'JpGraph'</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">
8406 
'&lt;project&gt;'</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">
8407 
$aName</FONT><FONT color="#007700">);
8408 
<BR>}
8409 
<BR>
8410 
<BR></FONT><FONT color="#FF8000">
8411 
//&nbsp;Global&nbsp;callback&nbsp;to&nbsp;format&nbsp;each&nbsp;field&nbsp;name&nbsp;in&nbsp;the&nbsp;table
8412 
<BR></FONT><FONT color="#007700">function&nbsp;</FONT><FONT color="#0000BB">
8413 
FormatFldName</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
8414 
$aName</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">$aTable</FONT><FONT
8415 
color="#007700">)&nbsp;{
8416 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;</FONT><FONT color="#0000BB">$aName</FONT><FONT color="#007700">
8417 
;
8418 
<BR>}
8419 
<BR>
8420 
<BR>
8421 
<BR>class&nbsp;</FONT><FONT color="#0000BB">Driver&nbsp;</FONT><FONT color="#007700">
8422 
{
8423 
<BR>
8424 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;</FONT><FONT color="#0000BB">$ig</FONT><FONT color="#007700">
8425 
,&nbsp;</FONT><FONT color="#0000BB">$img</FONT><FONT color="#007700">,&nbsp;</FONT><FONT
8426 
color="#0000BB">$iscale</FONT><FONT color="#007700">,&nbsp;</FONT><FONT color="#0000BB">
8427 
$ishape</FONT><FONT color="#007700">;
8428 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;</FONT><FONT color="#0000BB">$iymax</FONT><FONT color="#007700">
8429 
,</FONT><FONT color="#0000BB">$ixmax</FONT><FONT color="#007700">;
8430 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;</FONT><FONT color="#0000BB">$iwidth</FONT><FONT color="#007700">
8431 
,</FONT><FONT color="#0000BB">$iheight</FONT><FONT color="#007700">;
8432 
<BR>
8433 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;</FONT><FONT color="#0000BB">Driver</FONT><FONT color="#007700">
8434 
()&nbsp;{
8435 
<BR>
8436 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#FF8000">
8437 
//&nbsp;Define&nbsp;Image&nbsp;size&nbsp;and&nbsp;coordinate&nbsp;grid&nbsp;space&nbsp;to&nbsp;work&nbsp;within
8438 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700">
8439 
-&gt;</FONT><FONT color="#0000BB">iwidth&nbsp;</FONT><FONT color="#007700">=&nbsp;</FONT><FONT
8440 
color="#0000BB">600</FONT><FONT color="#007700">;
8441 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700">
8442 
-&gt;</FONT><FONT color="#0000BB">iheight</FONT><FONT color="#007700">=&nbsp;</FONT><FONT
8443 
color="#0000BB">750</FONT><FONT color="#007700">;
8444 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700">
8445 
-&gt;</FONT><FONT color="#0000BB">iymax&nbsp;&nbsp;</FONT><FONT color="#007700">=&nbsp;</FONT><FONT
8446 
color="#0000BB">50</FONT><FONT color="#007700">;
8447 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700">
8448 
-&gt;</FONT><FONT color="#0000BB">ixmax&nbsp;&nbsp;</FONT><FONT color="#007700">=&nbsp;</FONT><FONT
8449 
color="#0000BB">55</FONT><FONT color="#007700">;
8450 
<BR>
8451 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#FF8000">//&nbsp;Setup&nbsp;a&nbsp;basic&nbsp;canvas
8452 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700">
8453 
-&gt;</FONT><FONT color="#0000BB">ig&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT
8454 
color="#0000BB">CanvasGraph</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
8455 
$this</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">iwidth</FONT><FONT
8456 
color="#007700">,</FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700">
8457 
-&gt;</FONT><FONT color="#0000BB">iheight</FONT><FONT color="#007700">,</FONT><FONT
8458 
color="#DD0000">'auto'</FONT><FONT color="#007700">);
8459 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700">
8460 
-&gt;</FONT><FONT color="#0000BB">img&nbsp;</FONT><FONT color="#007700">=&nbsp;</FONT><FONT
8461 
color="#0000BB">$this</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
8462 
ig</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">img</FONT><FONT
8463 
color="#007700">;
8464 
<BR>
8465 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#FF8000">//&nbsp;Define&nbsp;the&nbsp;scale&nbsp;to&nbsp;be&nbsp;used
8466 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700">
8467 
-&gt;</FONT><FONT color="#0000BB">iscale&nbsp;</FONT><FONT color="#007700">
8468 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">CanvasScale</FONT><FONT color="#007700">
8469 
(</FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700">-&gt;</FONT><FONT
8470 
color="#0000BB">ig</FONT><FONT color="#007700">);
8471 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700">
8472 
-&gt;</FONT><FONT color="#0000BB">iscale</FONT><FONT color="#007700">-&gt;</FONT><FONT
8473 
color="#0000BB">Set</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
8474 
0</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">$this</FONT><FONT
8475 
color="#007700">-&gt;</FONT><FONT color="#0000BB">ixmax</FONT><FONT color="#007700">
8476 
,</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT
8477 
color="#0000BB">$this</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
8478 
iymax</FONT><FONT color="#007700">);
8479 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700">
8480 
-&gt;</FONT><FONT color="#0000BB">ishape&nbsp;</FONT><FONT color="#007700">
8481 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">Shape</FONT><FONT color="#007700">(</FONT><FONT
8482 
color="#0000BB">$this</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
8483 
ig</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">$this</FONT><FONT
8484 
color="#007700">-&gt;</FONT><FONT color="#0000BB">iscale</FONT><FONT color="#007700">
8485 
);
8486 
<BR>
8487 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#FF8000">//&nbsp;A&nbsp;small&nbsp;frame&nbsp;around&nbsp;the&nbsp;canvas
8488 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700">
8489 
-&gt;</FONT><FONT color="#0000BB">ig</FONT><FONT color="#007700">-&gt;</FONT><FONT
8490 
color="#0000BB">SetMargin</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
8491 
2</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">3</FONT><FONT
8492 
color="#007700">,</FONT><FONT color="#0000BB">2</FONT><FONT color="#007700">
8493 
,</FONT><FONT color="#0000BB">3</FONT><FONT color="#007700">);
8494 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700">
8495 
-&gt;</FONT><FONT color="#0000BB">ig</FONT><FONT color="#007700">-&gt;</FONT><FONT
8496 
color="#0000BB">SetMarginColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
8497 
&quot;teal&quot;</FONT><FONT color="#007700">);
8498 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700">
8499 
-&gt;</FONT><FONT color="#0000BB">ig</FONT><FONT color="#007700">-&gt;</FONT><FONT
8500 
color="#0000BB">InitFrame</FONT><FONT color="#007700">();
8501 
<BR>
8502 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;}
8503 
<BR>
8504 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;</FONT><FONT color="#0000BB">Run</FONT><FONT color="#007700">
8505 
()&nbsp;{
8506 
<BR>
8507 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$leftm</FONT><FONT color="#007700">
8508 
=</FONT><FONT color="#0000BB">1.5</FONT><FONT color="#007700">;&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT
8509 
color="#FF8000">//&nbsp;Left&nbsp;margin&nbsp;(for&nbsp;table&nbsp;schemes)&nbsp;
8510 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$topm</FONT><FONT color="#007700">=</FONT><FONT
8511 
color="#0000BB">5</FONT><FONT color="#007700">;&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#FF8000">
8512 
//&nbsp;Top&nbsp;margin&nbsp;(for&nbsp;table&nbsp;schemes)&nbsp;
8513 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$tblwidth</FONT><FONT color="#007700">
8514 
=</FONT><FONT color="#0000BB">15</FONT><FONT color="#007700">;&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT
8515 
color="#FF8000">//&nbsp;Individual&nbsp;table&nbsp;width
8516 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$tlo</FONT><FONT color="#007700">=</FONT><FONT
8517 
color="#0000BB">1</FONT><FONT color="#007700">;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#FF8000">
8518 
//&nbsp;Offset&nbsp;for&nbsp;top&nbsp;line
8519 
<BR>
8520 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Add&nbsp;the&nbsp;background&nbsp;color&nbsp;for&nbsp;the&nbsp;project&nbsp;specific&nbsp;tables
8521 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700">
8522 
-&gt;</FONT><FONT color="#0000BB">ishape</FONT><FONT color="#007700">-&gt;</FONT><FONT
8523 
color="#0000BB">IndentedRectangle</FONT><FONT color="#007700">(</FONT><FONT
8524 
color="#0000BB">$leftm</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
8525 
$topm</FONT><FONT color="#007700">-</FONT><FONT color="#0000BB">1</FONT><FONT
8526 
color="#007700">,</FONT><FONT color="#0000BB">3</FONT><FONT color="#007700">
8527 
*</FONT><FONT color="#0000BB">$tblwidth</FONT><FONT color="#007700">+</FONT><FONT
8528 
color="#0000BB">$tlo</FONT><FONT color="#007700">+</FONT><FONT color="#0000BB">
8529 
6</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">45</FONT><FONT
8530 
color="#007700">,
8531 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$tlo</FONT><FONT color="#007700">
8532 
+</FONT><FONT color="#0000BB">2</FONT><FONT color="#007700">*</FONT><FONT
8533 
color="#0000BB">$tblwidth</FONT><FONT color="#007700">+</FONT><FONT color="#0000BB">
8534 
2</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">30</FONT><FONT
8535 
color="#007700">,</FONT><FONT color="#0000BB">CORNER_BOTTOMLEFT</FONT><FONT
8536 
color="#007700">,
8537 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#DD0000">'lightblue'</FONT><FONT
8538 
color="#007700">);
8539 
<BR>
8540 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#FF8000">
8541 
//&nbsp;Stroke&nbsp;the&nbsp;tables&nbsp;(series&nbsp;of&nbsp;x,y&nbsp;offsets,&nbsp;If&nbsp;=-1&nbsp;then&nbsp;use&nbsp;the
8542 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;automtic&nbsp;positioning
8543 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$tblposadj</FONT><FONT color="#007700">
8544 
=array(</FONT><FONT color="#0000BB">$tlo</FONT><FONT color="#007700">,</FONT><FONT
8545 
color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
8546 
$tblwidth</FONT><FONT color="#007700">+</FONT><FONT color="#0000BB">$tlo</FONT><FONT
8547 
color="#007700">+</FONT><FONT color="#0000BB">2</FONT><FONT color="#007700">
8548 
,</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">,</FONT><FONT
8549 
color="#0000BB">2</FONT><FONT color="#007700">*</FONT><FONT color="#0000BB">
8550 
$tblwidth</FONT><FONT color="#007700">+</FONT><FONT color="#0000BB">$tlo</FONT><FONT
8551 
color="#007700">+</FONT><FONT color="#0000BB">4</FONT><FONT color="#007700">
8552 
,
8553 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700">
8554 
,-</FONT><FONT color="#0000BB">1</FONT><FONT color="#007700">,</FONT><FONT
8555 
color="#0000BB">16</FONT><FONT color="#007700">,-</FONT><FONT color="#0000BB">
8556 
1</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">16</FONT><FONT
8557 
color="#007700">);
8558 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$dbschema&nbsp;</FONT><FONT color="#007700">
8559 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">ImgDBSchema</FONT><FONT color="#007700">
8560 
(</FONT><FONT color="#DD0000">'jpgraph_doc'</FONT><FONT color="#007700">
8561 
,</FONT><FONT color="#DD0000">'FormatTblName'</FONT><FONT color="#007700">
8562 
,</FONT><FONT color="#DD0000">'FormatFldName'</FONT><FONT color="#007700">
8563 
);
8564 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$dbschema</FONT><FONT color="#007700">
8565 
-&gt;</FONT><FONT color="#0000BB">SetMargin</FONT><FONT color="#007700">(</FONT><FONT
8566 
color="#0000BB">$leftm</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
8567 
$topm</FONT><FONT color="#007700">);
8568 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$dbschema</FONT><FONT color="#007700">
8569 
-&gt;</FONT><FONT color="#0000BB">SetTableWidth</FONT><FONT color="#007700">
8570 
(</FONT><FONT color="#0000BB">$tblwidth</FONT><FONT color="#007700">);
8571 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$dbschema</FONT><FONT color="#007700">
8572 
-&gt;</FONT><FONT color="#0000BB">Stroke</FONT><FONT color="#007700">(</FONT><FONT
8573 
color="#0000BB">$this</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
8574 
img</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">$this</FONT><FONT
8575 
color="#007700">-&gt;</FONT><FONT color="#0000BB">iscale</FONT><FONT color="#007700">
8576 
,</FONT><FONT color="#0000BB">$tblposadj</FONT><FONT color="#007700">);
8577 
<BR>
8578 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$tt&nbsp;</FONT><FONT color="#007700">
8579 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">CanvasRectangleText</FONT><FONT color="#007700">
8580 
();
8581 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$tt</FONT><FONT color="#007700">-&gt;</FONT><FONT
8582 
color="#0000BB">SetFillColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
8583 
''</FONT><FONT color="#007700">);
8584 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$tt</FONT><FONT color="#007700">-&gt;</FONT><FONT
8585 
color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
8586 
''</FONT><FONT color="#007700">);
8587 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$tt</FONT><FONT color="#007700">-&gt;</FONT><FONT
8588 
color="#0000BB">SetFontColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
8589 
'navy'</FONT><FONT color="#007700">);
8590 
<BR>
8591 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#FF8000">//&nbsp;Add&nbsp;explanation
8592 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$tt</FONT><FONT color="#007700">-&gt;</FONT><FONT
8593 
color="#0000BB">SetFont</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
8594 
FF_ARIAL</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
8595 
FS_NORMAL</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">12</FONT><FONT
8596 
color="#007700">);
8597 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$tt</FONT><FONT color="#007700">-&gt;</FONT><FONT
8598 
color="#0000BB">Set</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
8599 
'Project&nbsp;specific&nbsp;tables'</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
8600 
$tblwidth</FONT><FONT color="#007700">+</FONT><FONT color="#0000BB">
8601 
$leftm</FONT><FONT color="#007700">+</FONT><FONT color="#0000BB">3</FONT><FONT
8602 
color="#007700">,</FONT><FONT color="#0000BB">16</FONT><FONT color="#007700">
8603 
,</FONT><FONT color="#0000BB">15</FONT><FONT color="#007700">);
8604 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$tt</FONT><FONT color="#007700">-&gt;</FONT><FONT
8605 
color="#0000BB">Stroke</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
8606 
$this</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">img</FONT><FONT
8607 
color="#007700">,</FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700">
8608 
-&gt;</FONT><FONT color="#0000BB">iscale</FONT><FONT color="#007700">);
8609 
<BR>
8610 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#FF8000">//&nbsp;Add&nbsp;title
8611 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$tt</FONT><FONT color="#007700">-&gt;</FONT><FONT
8612 
color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
8613 
''</FONT><FONT color="#007700">);
8614 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$tt</FONT><FONT color="#007700">-&gt;</FONT><FONT
8615 
color="#0000BB">SetFont</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
8616 
FF_VERDANA</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
8617 
FS_BOLD</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">26</FONT><FONT
8618 
color="#007700">);
8619 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$tt</FONT><FONT color="#007700">-&gt;</FONT><FONT
8620 
color="#0000BB">Set</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
8621 
'DDDA&nbsp;-&nbsp;DB&nbsp;Schema'</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
8622 
9</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">0.5</FONT><FONT
8623 
color="#007700">,</FONT><FONT color="#0000BB">30</FONT><FONT color="#007700">
8624 
);
8625 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$tt</FONT><FONT color="#007700">-&gt;</FONT><FONT
8626 
color="#0000BB">Stroke</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
8627 
$this</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">img</FONT><FONT
8628 
color="#007700">,</FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700">
8629 
-&gt;</FONT><FONT color="#0000BB">iscale</FONT><FONT color="#007700">);
8630 
<BR>
8631 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#FF8000">//&nbsp;Add&nbsp;a&nbsp;version&nbsp;and&nbsp;date
8632 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$tt</FONT><FONT color="#007700">-&gt;</FONT><FONT
8633 
color="#0000BB">SetFillColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
8634 
'yellow'</FONT><FONT color="#007700">);
8635 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$tt</FONT><FONT color="#007700">-&gt;</FONT><FONT
8636 
color="#0000BB">SetFont</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
8637 
FF_FONT1</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
8638 
FS_NORMAL</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">10</FONT><FONT
8639 
color="#007700">);
8640 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$tt</FONT><FONT color="#007700">-&gt;</FONT><FONT
8641 
color="#0000BB">Set</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
8642 
&quot;Generated:&nbsp;&quot;</FONT><FONT color="#007700">.</FONT><FONT color="#0000BB">
8643 
date</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">&quot;ymd&nbsp;H:i&quot;</FONT><FONT
8644 
color="#007700">,</FONT><FONT color="#0000BB">time</FONT><FONT color="#007700">
8645 
()),</FONT><FONT color="#0000BB">1</FONT><FONT color="#007700">,</FONT><FONT
8646 
color="#0000BB">$this</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
8647 
iymax</FONT><FONT color="#007700">*</FONT><FONT color="#0000BB">0.96</FONT><FONT
8648 
color="#007700">,</FONT><FONT color="#0000BB">15</FONT><FONT color="#007700">
8649 
);&nbsp;
8650 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$tt</FONT><FONT color="#007700">-&gt;</FONT><FONT
8651 
color="#0000BB">Stroke</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
8652 
$this</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">img</FONT><FONT
8653 
color="#007700">,</FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700">
8654 
-&gt;</FONT><FONT color="#0000BB">iscale</FONT><FONT color="#007700">);
8655 
<BR>
8656 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;</FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700">
8657 
-&gt;</FONT><FONT color="#0000BB">ig</FONT><FONT color="#007700">-&gt;</FONT><FONT
8658 
color="#0000BB">Stroke</FONT><FONT color="#007700">();
8659 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;}
8660 
<BR>}
8661 
<BR>
8662 
<BR></FONT><FONT color="#0000BB">$driver&nbsp;</FONT><FONT color="#007700">
8663 
=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">Driver</FONT><FONT color="#007700">
8664 
();
8665 
<BR></FONT><FONT color="#0000BB">$driver</FONT><FONT color="#007700">-&gt;</FONT><FONT
8666 
color="#0000BB">Run</FONT><FONT color="#007700">();
8667 
<BR>
8668 
<BR></FONT><FONT color="#0000BB">?&gt;
8669 
<BR></FONT>
8670 
<BR></FONT></CODE></DIV></P>
8671 
<H1><A NAME="11">11 Anti-Spam Challenges</A></H1>
8672 
<P> JpGraph includes a module to easily generate Anti-Spam challenges.
8673 
 With this we mean an image consisting of numbers and letters which are
8674 
 very hard to read for an OCR program. This is often used to secure sign
8675 
 up for bulletin boards, on-line mail system or mailing lists since this
8676 
 very effectively prevent automatic sign up by robots (spam-bots).</P>
8677 
<P> The module in JpGraph responsible for this is<I>
8678 
 jpgraph_antispam.php</I> and behaves as a simplified plot module.</P>
8679 
<P> The example below illustrates how such an image can look like<DIV class="example">
8680 
<BR> <A href="exframes/frame_antispamex01.html" target="blank"><IMG border="0"
8681 
HEIGHT="34"         src="img/img/img/img/img/img/img/img/antispamex01.png" WIDTH="104"></A>
8682 
<BR><B>Figure 195:</B> Simple illustration of spam challenge image <A href="exframes/frame_antispamex01.html"
8683 
target="blank">[src]</A>&nbsp;
8684 
<P></P>
8685 
</DIV></P>
8686 
<P>Anti spam images have less functionality then the usual images
8687 
 generated with JpGraph in order to keep this utility reasonable small.
8688 
 The primary limitation is that there are now additional formatting
8689 
 options for the images and the image generated will always use the<I>
8690 
 JPEG</I> image format. Hence it is not possible to change this to use,
8691 
 for example, PNG.</P>
8692 
<H2><A NAME="11_1">11.1 Generating Anti-Spam challenge</A></H2>
8693 
<P> There are two basic alternatives on how to generate the content of
8694 
 the anti-spam image</P>
8695 
<OL>
8696 
<LI> Submit a string that should be used</LI>
8697 
<LI> Automatically generate a random string. If this alternative is
8698 
 chosen then the user of the library should save the created string and
8699 
 compare it to what the user enters.</LI>
8700 
</OL>
8701 
<P> In order to write a script to generate a new challenge there are
8702 
 four steps to be completed.</P>
8703 
<P><B> First</B> include the library file<I> jpgraph_antispam.php</I>.
8704 
 Note that there is no need to include the &quot;jpgraph.php&quot; library since
8705 
 all functionality is included in this library file.<DIV class="phpscript">
8706 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;</FONT><FONT color="#007700">
8707 
require_once&nbsp;</FONT><FONT color="#DD0000">&quot;jpgraph_antispam.php&quot;</FONT><FONT
8708 
color="#007700">;</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
8709 
</P>
8710 
<P><B> Secondly</B> a new instance of the class<I> AntiSpam</I> must be
8711 
 created<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
8712 
&nbsp;$spam&nbsp;</FONT><FONT color="#007700">=&nbsp;new&nbsp;</FONT><FONT color="#0000BB">
8713 
AntiSpam</FONT><FONT color="#007700">();</FONT><FONT color="#0000BB"></FONT>
8714 
</FONT></CODE></DIV></P>
8715 
<P><B> Thirdly</B> the string to be used in the challenge must be
8716 
 specified. To automatically generate a suitable string use<DIV class="phpscript">
8717 
<CODE><FONT color="#000000"> <FONT color="#0000BB">&nbsp;</FONT><FONT color="#FF8000">
8718 
//&nbsp;The&nbsp;argument&nbsp;determines&nbsp;the&nbsp;length&nbsp;of&nbsp;the&nbsp;generated&nbsp;string
8719 
<BR></FONT><FONT color="#0000BB">$chars&nbsp;</FONT><FONT color="#007700">=&nbsp;</FONT><FONT
8720 
color="#0000BB">$spam</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
8721 
Rand</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">5</FONT><FONT
8722 
color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
8723 
</P>
8724 
<P> If instead the string to be used should be specified this string
8725 
 should be specified in the initial creation of the AntiSpam() or by
8726 
 calling the<I> Set()</I> method as in<DIV class="phpscript"><CODE><FONT color="#000000">
8727 
 <FONT color="#0000BB">&nbsp;$spam</FONT><FONT color="#007700">-&gt;</FONT><FONT color="#0000BB">
8728 
Set</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">&quot;aui8k&quot;</FONT><FONT
8729 
color="#007700">);</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV>
8730 
</P>
8731 
<P>Please note that in order to minimize the risk for confusion the
8732 
 letters 'O' and the number '0' (zero) is not allowed since they are too
8733 
 alike and can be mistaken for each other.</P>
8734 
<P><B> The final and fourth step</B> is to output the image with a call
8735 
 the method<I> Stroke()</I> on the created instance of the<I> AntiSpam</I>
8736 
 class.<DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
8737 
&nbsp;</FONT><FONT color="#007700">if(&nbsp;</FONT><FONT color="#0000BB">$spam</FONT><FONT
8738 
color="#007700">-&gt;</FONT><FONT color="#0000BB">Stroke</FONT><FONT color="#007700">
8739 
()&nbsp;===&nbsp;</FONT><FONT color="#0000BB">false&nbsp;</FONT><FONT color="#007700">
8740 
)&nbsp;{
8741 
<BR>&nbsp;&nbsp;&nbsp;&nbsp;die(</FONT><FONT color="#DD0000">&quot;Illegal&nbsp;or&nbsp;no&nbsp;data&nbsp;to&nbsp;plot&quot;</FONT><FONT
8742 
color="#007700">);
8743 
<BR>}</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
8744 
<P>Note that we have put a guard around the output since in the case of
8745 
 an error this method will result a boolean false value. As with the
8746 
 other graph types it is possible to write the generated image to a file
8747 
 by submitting a file name as an argument to<I> Stroke()</I>.</P>
8748 
<H1><A NAME="12">12 Code defines in JpGraph</A></H1>
8749 
<P> Various settings in JpGraph are controlled by overall DEFINEs in the
8750 
 configuration file &quot;jpg-config.inc&quot;. Most of these defines have default
8751 
 values that should be valid for most usage.</P>
8752 
<P> In the rest of this chapter all constants are described with default
8753 
 value and usage.</P>
8754 
<P></P>
8755 
<TABLE cellpadding="3" cellspacing="0" class="codedefines">
8756 
<TR><TH>Define, default value</TH><TH>Comment</TH></TR>
8757 
<TR><TD valign="top">&quot;CACHE_DIR&quot;, &quot;/tmp/jpgraph_cache/&quot;</TD><TD>The full
8758 
 absolute name of directory to be used as a cache. This directory<STRONG>
8759 
 must</STRONG> be readable and writable for PHP. Must end with '/'</TD></TR>
8760 
<TR><TD valign="top">&quot;TTF_DIR&quot;, &quot;/usr/local/fonts/ttf/&quot;</TD><TD>
8761 
Directory for JpGraph TTF fonts. Must end with '/' The fonts must follow
8762 
 the naming conventions as used by the supplied TTF fonts in JpGraph.</TD>
8763 
</TR>
8764 
<TR><TD valign="top">&quot;CSIMCACHE_DIR&quot;, &quot;csimcache/&quot;</TD><TD>Directory for
8765 
 cache directory for CSIM graphs. Must end with '/' Cache directory
8766 
 specification for use with CSIM graphs that are using the cache. The
8767 
 directory must be the filesystem name as seen by PHP and the 'http'
8768 
 version must be the same directory but as seen by the HTTP server
8769 
 relative to the 'htdocs' directory. If a relative path is specified it
8770 
 is taken to be relative from where the image script is executed. Note:
8771 
 The default setting is to create a subdirectory in the directory from
8772 
 where the image script is executed and store all files there. As usual
8773 
 this directory must be writable by the PHP process.</TD></TR>
8774 
<TR><TD valign="top">&quot;CSIMCACHE_HTTP_DIR&quot;, &quot;csimcache&quot;</TD><TD>Directory
8775 
 for JpGraph TTF fonts. Must end with '/' Cache directory specification
8776 
 for use with CSIM graphs that are using the cache. The directory must
8777 
 be the filesystem name as seen by PHP and the 'http' version must be
8778 
 the same directory but as seen by the HTTP server relative to the
8779 
 'htdocs' directory. If a relative path is specified it is taken to be
8780 
 relative from where the image script is executed. Note: The default
8781 
 setting is to create a subdirectory in the directory from where the
8782 
 image script is executed and store all files there. As usual this
8783 
 directory must be writable by the PHP process.</TD></TR>
8784 
<TR><TD valign="top">&quot;CHINESE_TTF_FONT&quot;, &quot;bkai00mp.ttf&quot;</TD><TD> Actual
8785 
 name of the TTF file used together with FF_CHINESE aka FF_BIG5 This is
8786 
 the TTF file being used when the font family is specified as either
8787 
 FF_CHINESE or FF_BIG5</TD></TR>
8788 
<TR><TD valign="top">&quot;LANGUAGE_CYRILLIC&quot;, false</TD><TD> Special unicode
8789 
 Cyrillic language support.</TD></TR>
8790 
<TR><TD valign="top">&quot;CYRILLIC_FROM_WINDOWS&quot;, false</TD><TD> If you are
8791 
 setting this config to true the conversion will assume that the input
8792 
 text is windows 1251, if false it will assume koi8-r</TD></TR>
8793 
<TR><TD valign="top">'MINCHO_TTF_FONT', 'ipam.ttf'</TD><TD> Japanese
8794 
 TrueType font used with FF_MINCHO</TD></TR>
8795 
<TR><TD valign="top">'PMINCHO_TTF_FONT', 'ipamp.ttf'</TD><TD> Japanese
8796 
 TrueType font used with FF_PMINCHO</TD></TR>
8797 
<TR><TD valign="top">'GOTHIC_TTF_FONT', 'ipag.ttf'</TD><TD> Japanese
8798 
 TrueType font used with FF_GOTHIC</TD></TR>
8799 
<TR><TD valign="top">'PGOTHIC_TTF_FONT', 'ipagp.ttf'</TD><TD> Japanese
8800 
 TrueType font used with FF_PGOTHIC</TD></TR>
8801 
<TR><TD valign="top">&quot;INSTALL_PHP_ERR_HANDLER&quot;, false</TD><TD> Determine
8802 
 if the library should also setup the default PHP error handler to
8803 
 generate a graphic error message. This is useful during development to
8804 
 be able to see the error message as an image instead as a &quot;red-cross&quot;
8805 
 in a page where an image is expected.</TD></TR>
8806 
<TR><TD valign="top">&quot;CATCH_PHPERRMSG&quot;, true</TD><TD> Should the library
8807 
 examine the global php_errmsg string and convert any error in it to a
8808 
 graphical representation. This is handy for the occasions when, for
8809 
 example, header files cannot be found and this results in the graph not
8810 
 being created and just a &quot;red-cross&quot; image would be seen. This should
8811 
 be turned off for a production site.</TD></TR>
8812 
<TR><TD valign="top">&quot;USE_LIBRARY_GD2&quot;,false</TD><TD>Specify if we
8813 
 should use GD 2.x or GD 1.x If you have GD 2.x installed it is
8814 
 recommended that you use it since it will give a slightly, slightly
8815 
 better visual appearance for arcs. If you don't have GD2 installed this
8816 
 must be set to false!</TD></TR>
8817 
<TR><TD valign="top">'USE_TRUECOLOR',true</TD><TD>Should the image be a
8818 
 truecolor image? Note 1: Can only be used with GD 2.0.2 and above. Note
8819 
 2: GD 2.0.1 + PHP 4.0.6 on Win32 crashes when trying to use truecolor.
8820 
 Truecolor support is to be considered alpha since GD 2.x is still not
8821 
 considered stable (especially on Win32). Note 3: MUST be enabled to get
8822 
 background images working with GD2 Note 4: If enabled then truetype
8823 
 fonts will look very ugly =&gt; You can't have both background images and
8824 
 truetype fonts in the same image until these bugs has been fixed in GD
8825 
 2.01</TD></TR>
8826 
<TR><TD valign="top">&quot;USE_CACHE&quot;,false</TD><TD>Should the cache be used
8827 
 at all? By setting this to false no files will be generated in the
8828 
 cache directory. The difference from READ_CACHE being that setting
8829 
 READ_CACHE to false will still create the image in the cache directory
8830 
 just not use it. By setting USE_CACHE=false no files will even be
8831 
 generated in the cache directory.</TD></TR>
8832 
<TR><TD valign="top">&quot;READ_CACHE&quot;,true</TD><TD>Should we try to find an
8833 
 image in the cache before generating it? Set this define to false to
8834 
 bypass the reading of the cache and always regenerate the image. Note
8835 
 that even if reading the cache is disabled the cached will still be
8836 
 updated with the newly generated image. Set also &quot;USE_CACHE&quot; below.</TD>
8837 
</TR>
8838 
<TR><TD valign="top">&quot;DEFAULT_GFORMAT&quot;,&quot;auto&quot;</TD><TD>Default graphic
8839 
 format set to &quot;auto&quot; which will automatically choose the best available
8840 
 format in the order png,gif,jpg (The supported format depends on what
8841 
 your PHP installation supports)</TD></TR>
8842 
<TR><TD valign="top">&quot;USE_IMAGE_ERROR_HANDLER&quot;,true</TD><TD> Determine
8843 
 if the error handler should be image based or purely text based. Image
8844 
 based makes it easier since the script will always return an image even
8845 
 in case of errors.</TD></TR>
8846 
<TR><TD valign="top">&quot;USE_APPROX_COLORS&quot;,true</TD><TD>If the color
8847 
 palette is full should JpGraph try to allocate the closest match? If
8848 
 you plan on using background image or gradient fills it might be a good
8849 
 idea to enable this. If not you will otherwise get an error saying that
8850 
 the color palette is exhausted. The drawback of using approximations is
8851 
 that the colors might not be exactly what you specified. Note1: This
8852 
 does only apply to a palette image, not true color images since they
8853 
 don't have the limitations of maximum number of colors.</TD></TR>
8854 
<TR><TD valign="top">&quot;ERR_DEPRECATED&quot;,false</TD><TD>Should usage of
8855 
 deprecated functions and parameters give a fatal error? (Useful to
8856 
 check if code is future proof.)</TD></TR>
8857 
<TR><TD valign="top">&quot;BRAND_TIMING&quot;,false</TD><TD>Should the time taken
8858 
 to generate each picture be branded to the lower left in corner in each
8859 
 generated image? Useful for performance measurements generating graphs</TD>
8860 
</TR>
8861 
<TR><TD valign="top">&quot;BRAND_TIME_FORMAT&quot;,&quot;Generated in: %01.3fs&quot;</TD><TD>
8862 
What format should be used for the timing string?</TD></TR>
8863 
</TABLE>
8864 
<P> The following defines should very rarely need to be changed</P>
8865 
<P></P>
8866 
<TABLE cellpadding="3" cellspacing="0" class="codedefines">
8867 
<TR><TH>Define, default value</TH><TH>Comment</TH></TR>
8868 
<TR><TD valign="top">&quot;CACHE_FILE_GROUP&quot;,&quot;wwwadmin&quot;</TD><TD>What group
8869 
 should the cached file belong to (Set to &quot;&quot; will give the default group
8870 
 for the &quot;PHP-user&quot;) Please note that the Apache user must be a member
8871 
 of the specified group since otherwise it is impossible for Apache to
8872 
 set the specified group.</TD></TR>
8873 
<TR><TD valign="top">&quot;CACHE_FILE_MOD&quot;,0664</TD><TD>What permissions
8874 
 should the cached file have (Set to &quot;&quot; will give the default
8875 
 permissions for the &quot;PHP-user&quot;)</TD></TR>
8876 
<TR><TD valign="top">&quot;USE_BRESENHAM&quot;,false</TD><TD>Decide if we should
8877 
 use the Bresenham circle algorithm or the built in Arc(). Bresenham
8878 
 gives better visual appearance of circles but is more CPU intensive and
8879 
 slower then the built in Arc() function in GD. Turned off by default
8880 
 for speed</TD></TR>
8881 
<TR><TD valign="top">&quot;_CSIM_SPECIALFILE&quot;,&quot;_csim_special_&quot;</TD><TD>
8882 
Special file name to indicate that we only want to calc the image map in
8883 
 the call to Graph::Stroke() used internally from the GetHTMLCSIM()
8884 
 method.</TD></TR>
8885 
<TR><TD valign="top">&quot;_CSIM_DISPLAY&quot;,&quot;_jpg_csimd&quot;</TD><TD>HTTP GET
8886 
 argument that is used with image map to indicate to the script to just
8887 
 generate the image and not the full CSIM HTML page.</TD></TR>
8888 
</TABLE>
8889 
 &nbsp;
8890 
<P>&nbsp;</P>
8891 
<P>&amp;nbsp</P>
8892 
</DIV></BODY>
8893 
</HTML>