This repository has been archived on 2024-04-08. You can view files and clone it, but cannot push or open issues or pull requests.
phptsmadmin/includes/jpgraph/docs/chunkhtml/ch20s02.html

634 lines
60 KiB
HTML
Raw Normal View History

2011-05-28 09:51:52 +00:00
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Creating and formatting basic odometer graphs</title><link rel="stylesheet" type="text/css" href="manual.css"><meta name="generator" content="DocBook XSL Stylesheets V1.76.0"><link rel="home" href="index.html" title="JpGraph Manual"><link rel="up" href="ch20.html" title="Chapter 20. Odometer"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">Creating and formatting basic odometer graphs</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center">Chapter 20. Odometer</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="sect1" title="Creating and formatting basic odometer graphs"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="id2583404"></a>Creating and formatting basic odometer graphs</h2></div></div></div>
<p>In order to use odometer graphs the extension module
"<code class="filename">jpgraph_odo.php</code>" must be included in the script (in addition
to the ordinary "<code class="filename">jpgraph.php</code>" code module).</p>
<p>The creation of Odometer graphs otherwise follows the traditional steps in the library
of creating a graph and then adding one or several plots to the canvas.</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p>Create a basic canvas graph as an instance of <code class="code">class
OdoGraph</code></p>
</li><li class="listitem">
<p>Create an instance of one or several odometer plots (the dials) as
instances of <code class="code">class OdoPlot</code>, set up the scale and appearance and
then add them to the graph canvas.</p>
</li><li class="listitem">
<p>Send back the graph to the client with a call to
<code class="code">OdoGraph::Stroke()</code></p>
</li></ol></div>
<p>The following script shows the principles</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> Create a new canvas 300x200 pixels</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">OdoGraph</span><span class="hl-brackets">(</span><span class="hl-number">300</span><span class="hl-code">,</span><span class="hl-number">200</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Adjust parameters as needed</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-code">.......</span><span class="hl-brackets">)</span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">caption</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-code">...</span><span class="hl-brackets">)</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> Create one of more Odometer</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$odo1</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">Odometer</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$odo2</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">Odometer</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
...
</span><span class="hl-comment">//</span><span class="hl-comment"> Adjust odometer parameters, colors etc</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$odo1</span><span class="hl-code">-&gt;</span><span class="hl-identifier">needle</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-number">21</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$odo2</span><span class="hl-code">-&gt;</span><span class="hl-identifier">needle</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-number">47</span><span class="hl-brackets">)</span><span class="hl-code">;
...
</span><span class="hl-comment">//</span><span class="hl-comment"> Position the odometer plots vertically</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$l</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">LayoutVert</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-var">$odo1</span><span class="hl-code">, </span><span class="hl-var">$odo2</span><span class="hl-code">, ...</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Add the odometers with the proper layout to the canvas</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Add</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-var">$l</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> If you only have a single odometer you may also write</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> $graph-&gt;Add( $odo1 );</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> Send back the image to the client</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Stroke</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p></p>
<div class="sect2" title="A basic odometer"><div class="titlepage"><div><div><h3 class="title"><a name="id2583483"></a>A basic odometer</h3></div></div></div>
<p>The following script shows the simplest possible odometer using just default
values</p>
<p>
</p><div class="example"><a name="example.odotutex00"></a><p class="title"><b>Example 20.1. A basic odometer (<code class="filename">odotutex00.php</code>) </b></p><div class="example-contents"> <div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-reserved">require_once</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">jpgraph/jpgraph.php</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-reserved">require_once</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">jpgraph/jpgraph_odo.php</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Create a new odometer graph (width=250, height=200 pixels)</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">OdoGraph</span><span class="hl-brackets">(</span><span class="hl-number">250</span><span class="hl-code">,</span><span class="hl-number">140</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Now we need to create an odometer to add to the graph.</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> By default the scale will be 0 to 100</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$odo</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">Odometer</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Set display value for the odometer</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$odo</span><span class="hl-code">-&gt;</span><span class="hl-identifier">needle</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-number">30</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Add the odometer to the graph</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Add</span><span class="hl-brackets">(</span><span class="hl-var">$odo</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> ... and finally stroke and stream the image back to the client</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Stroke</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div></div></div><p><br class="example-break"> </p><div class="figure"><a name="fig.odotutex00"></a><p class="title"><b>Figure 20.2. A basic odometer <code class="uri"><a class="uri" href="example_src/odotutex00.html" target="_top">(<code class="filename">odotutex00.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/odotutex00.png" alt="A basic odometer (odotutex00.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>The size of the Odometer is determined automatically to fit the given image size
as good as possible. Since the size of the odometer automatically adjust itself to
allow for any odometer caption, graph titles or graph captions there is rarely need
to manually override this automation. </p>
<p>However it is still possible to manually specify the absolute size (of the radius)
in pixels or as a fraction of the image size. </p>
<p>To set a specific value top the Odometer radius the following method is
used</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">OdoPlot::SetSize($aRadius)</code>
</p>
</li></ul></div><p>
</p>
<p>Since clas OdoGraph inherits all the basic graph features we can easily augment
the graph in <a class="xref" href="ch20s02.html#fig.odotutex00" title="Figure 20.2. A basic odometer (odotutex00.php)">Figure 20.2. A basic odometer <code class="uri"><a class="uri" href="example_src/odotutex00.html" target="_top">(<code class="filename">odotutex00.php</code>)</a></code> </a> to, for example, have titles by
adding the line</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph-&gt;title-&gt;Set('A suitable graph title');</span></pre></td></tr></table></div><p>
</p>
<p>In the following chapters we will go through all the options that exists to modify
the size, shape and appearance of the graph.</p>
<p>
</p><div class="tip" title="Tip" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Tip</h3>
<p>Remember that since Odometer inherits all the basic graph feature it will
support functionality like image cache (see <a class="xref" href="ch05s06.html" title="Efficient graph generation using the built-in cache subsystem">Efficient graph generation using the built-in cache subsystem</a>.) </p>
</div><p>
</p>
</div>
<div class="sect2" title="Half and Full Odometers"><div class="titlepage"><div><div><h3 class="title"><a name="id2583619"></a>Half and Full Odometers</h3></div></div></div>
<p>Odometers comes in two fundamental shapes, full and half circle. The default if
nothing else is specified is to create a half circle. The type of odometer is
specified in the creation of the odometer. </p>
<p>The type is controlled by the two constants </p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">ODO_FULL</code> Create a full circle odometer </p>
</li><li class="listitem">
<p><code class="code">ODO_HALF</code> Create a half circle odometer. This is also the
default value.</p>
</li></ul></div><p>
</p>
<p>As an example the following odometer plot instantiation will create a full
odometer plot</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$odo = new Odometer(ODO_FULL);</span></pre></td></tr></table></div><p>
</p>
<p>and the following a half odometer plot</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$odo = new Odometer(ODO_HALF);</span></pre></td></tr></table></div><p>
</p>
<p>In ?? an example of a very basic full circle odometer is shown</p>
<p>
</p><div class="figure"><a name="fig.odotutex01"></a><p class="title"><b>Figure 20.3. A full circle odometer <code class="uri"><a class="uri" href="example_src/odotutex01.html" target="_top">(<code class="filename">odotutex01.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/odotutex01.png" alt="A full circle odometer (odotutex01.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect2" title="Adding titles and captions"><div class="titlepage"><div><div><h3 class="title"><a name="id2583702"></a>Adding titles and captions</h3></div></div></div>
<p>Remember that each graph can have a title, a subtitle and subsubtitle. In addition
the Odmeter graphs offers the possibility to have a caption string. This is a text
(much like the title) but is drawn at the bottom of the graph instead of at the top. </p>
<p>The following script shows how to add a tite, subtitle and caption to our previous
example</p>
<p>
</p><div class="example"><a name="example.odotutex02"></a><p class="title"><b>Example 20.2. Adding titles and captions (<code class="filename">odotutex02.php</code>) </b></p><div class="example-contents"> <div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-reserved">require_once</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">jpgraph/jpgraph.php</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-reserved">require_once</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">jpgraph/jpgraph_odo.php</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Create a new odometer graph (width=250, height=200 pixels)</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">OdoGraph</span><span class="hl-brackets">(</span><span class="hl-number">250</span><span class="hl-code">,</span><span class="hl-number">180</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Setup titles</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">Result for 2002</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">white</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFont</span><span class="hl-brackets">(</span><span class="hl-identifier">FF_ARIAL</span><span class="hl-code">,</span><span class="hl-identifier">FS_BOLD</span><span class="hl-code">,</span><span class="hl-number">14</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">subtitle</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">New York Office</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">subtitle</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">white</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">caption</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">Figure 1. Branch results.</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">caption</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">white</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Now we need to create an odometer to add to the graph.</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> By default the scale will be 0 to 100</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$odo</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">Odometer</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Set display value for the odometer</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$odo</span><span class="hl-code">-&gt;</span><span class="hl-identifier">needle</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-number">30</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Add the odometer to the graph</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Add</span><span class="hl-brackets">(</span><span class="hl-var">$odo</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> ... and finally stroke and stream the image back to the client</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Stroke</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div></div></div><p><br class="example-break"> </p><div class="figure"><a name="fig.odotutex02"></a><p class="title"><b>Figure 20.4. Adding titles and captions <code class="uri"><a class="uri" href="example_src/odotutex02.html" target="_top">(<code class="filename">odotutex02.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/odotutex02.png" alt="Adding titles and captions (odotutex02.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>As can be see from the figure the margins will automatically adjust to hold the
specified titles and captions. </p>
<p>Remember that text strings can have multiple lines by separating lines with a '\n'
character. The following example shows how to add a more descriptive caption to the
graph</p>
<p>
</p><div class="example"><a name="example.odotutex03"></a><p class="title"><b>Example 20.3. Adding a multi line caption (<code class="filename">odotutex03.php</code>) </b></p><div class="example-contents"> <div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-reserved">require_once</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">jpgraph/jpgraph.php</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-reserved">require_once</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">jpgraph/jpgraph_odo.php</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Create a new odometer graph (width=250, height=200 pixels)</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">OdoGraph</span><span class="hl-brackets">(</span><span class="hl-number">250</span><span class="hl-code">,</span><span class="hl-number">200</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Setup titles</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">Result for 2002</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">white</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFont</span><span class="hl-brackets">(</span><span class="hl-identifier">FF_ARIAL</span><span class="hl-code">,</span><span class="hl-identifier">FS_BOLD</span><span class="hl-code">,</span><span class="hl-number">14</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">subtitle</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">New York Office</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">subtitle</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">white</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">caption</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">Figure 1.This is a very, very</span><span class="hl-special">\n</span><span class="hl-string">long text with multiples lines</span><span class="hl-special">\n</span><span class="hl-string">that are added as a caption.</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">caption</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">white</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Now we need to create an odometer to add to the graph.</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> By default the scale will be 0 to 100</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$odo</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">Odometer</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Set display value for the odometer</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$odo</span><span class="hl-code">-&gt;</span><span class="hl-identifier">needle</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-number">30</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Add the odometer to the graph</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Add</span><span class="hl-brackets">(</span><span class="hl-var">$odo</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> ... and finally stroke and stream the image back to the client</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Stroke</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div></div></div><p><br class="example-break"> </p><div class="figure"><a name="fig.odotutex03"></a><p class="title"><b>Figure 20.5. Adding a multi line caption <code class="uri"><a class="uri" href="example_src/odotutex03.html" target="_top">(<code class="filename">odotutex03.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/odotutex03.png" alt="Adding a multi line caption (odotutex03.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect2" title="Adjusting colors"><div class="titlepage"><div><div><h3 class="title"><a name="id2583801"></a>Adjusting colors</h3></div></div></div>
<p>Almost all areas in the graph have a customizable color. This means that for the
Odometer graph itself it is possible to adjust </p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>Margin colors</p>
</li><li class="listitem">
<p>The plot area (the rectangular area where the plot(s) are added</p>
</li><li class="listitem">
<p>The border line colors</p>
</li><li class="listitem">
<p>Shadow color</p>
</li></ul></div><p>
</p>
<p>For example the following line changes the margin color of the graph</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> Make the border 40% darker than normal &quot;khaki&quot;</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetMarginColor</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">khaki:0.6</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">khaki</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>For the odometer plot itself it is possible to adjust</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>Fascia color</p>
</li><li class="listitem">
<p>Scale label color (and font)</p>
</li><li class="listitem">
<p>Frame color (and width)</p>
</li><li class="listitem">
<p>Indicator color (the color of the odometer "needle"</p>
</li><li class="listitem">
<p>Adding colored segment for scale areas</p>
</li></ul></div><p>
</p>
<p>For example the following lines would change the fascia, indicator and scale label
color</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-var">$odo</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">white</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$odo</span><span class="hl-code">-&gt;</span><span class="hl-identifier">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">label</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">blue</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$odo</span><span class="hl-code">-&gt;</span><span class="hl-identifier">needle</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFillColor</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">yellow</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p><a class="xref" href="ch20s02.html#fig.odotutex04" title="Figure 20.6. Changing colors (odotutex04.php)">Figure 20.6. Changing colors <code class="uri"><a class="uri" href="example_src/odotutex04.html" target="_top">(<code class="filename">odotutex04.php</code>)</a></code> </a> shows the effect of adding the two code
snippets above to our previous example.</p>
<p>
</p><div class="figure"><a name="fig.odotutex04"></a><p class="title"><b>Figure 20.6. Changing colors <code class="uri"><a class="uri" href="example_src/odotutex04.html" target="_top">(<code class="filename">odotutex04.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/odotutex04.png" alt="Changing colors (odotutex04.php)"></span> </div></div><p><br class="figure-break">
</p>
<p></p>
</div>
<div class="sect2" title="Changing indicator needle style"><div class="titlepage"><div><div><h3 class="title"><a name="id2583878"></a>Changing indicator needle style</h3></div></div></div>
<p>The indicator is accessed through the "<code class="code">$needle</code>" property of the plot.
The indicator needle for the odometer can have six basic shapes. which are set by
the method</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">Needle::SetStyle($aStyle,$aStyleOption=null)</code></p>
</li></ul></div><p>
</p>
<p>The style is defined by one of the following symbolic constants.</p>
<p>
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p><code class="code">NEEDLE_STYLE_SIMPLE</code></p>
</li><li class="listitem">
<p><code class="code">NEEDLE_STYLE_STRAIGHT</code></p>
</li><li class="listitem">
<p><code class="code">NEEDLE_STYLE_ENDARROW</code>, (default)</p>
</li><li class="listitem">
<p><code class="code">NEEDLE_STYLE_SMALL_TRIANGLE</code></p>
</li><li class="listitem">
<p><code class="code">NEEDLE_STYLE_MEDIUM_TRIANGLE</code></p>
</li><li class="listitem">
<p><code class="code">NEEDLE_STYLE_LARGE_TRIANGLE</code></p>
</li><li class="listitem">
<p><code class="code">NEEDLE_STYLE_HUGE_TRIANGLE</code></p>
</li></ol></div><p>
</p>
<p>The following line would therefore create a plot with a "simple" indicator.</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$odo-&gt;needle-&gt;SetStyle(NEEDLE_STYLE_SIMPLE);</span></pre></td></tr></table></div><p>
</p>
<p>The different styles are illustrated in <a class="xref" href="ch20s02.html#fig.odotutex06" title="Figure 20.7. Possible shapes of the odometer indicator (odotutex06.php)">Figure 20.7. Possible shapes of the odometer indicator <code class="uri"><a class="uri" href="example_src/odotutex06.html" target="_top">(<code class="filename">odotutex06.php</code>)</a></code> </a></p>
<p>
</p><div class="figure"><a name="fig.odotutex06"></a><p class="title"><b>Figure 20.7. Possible shapes of the odometer indicator <code class="uri"><a class="uri" href="example_src/odotutex06.html" target="_top">(<code class="filename">odotutex06.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/odotutex06.png" alt="Possible shapes of the odometer indicator (odotutex06.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>For the needle style "<code class="code">NEEDLE_STYLE_ENDARROW</code>" it is also possible to
adjust the ending arrow. This is done by specifying the particular end arrow size as
the second parameter to <code class="code">SetStyle()</code>. , the <code class="code">$aStyleOption</code>
parameter.</p>
<p>To simplify the arrow style setting a number of predefined sizes are available.
When choosing an arrowhead the width and length are specified in three different
steps, small , medium and large. </p>
<p>The available end arrow styles are listed in ?? below</p>
<p>
</p><div class="table"><a name="id2584239"></a><p class="title"><b>Table 20.1. Available arrow size</b></p><div class="table-contents">
<table summary="Available arrow size" border="1"><colgroup><col class="c1"><col class="c2"></colgroup><thead><tr><th>Symbolic name</th><th>Description</th></tr></thead><tbody><tr><td><code class="code">NEEDLE_ARROW_SS</code></td><td>Small width, small length</td></tr><tr><td><code class="code">NEEDLE_ARROW_SM</code></td><td>Small width, small length</td></tr><tr><td><code class="code">NEEDLE_ARROW_SL</code></td><td>Small width, large length</td></tr><tr><td><code class="code">NEEDLE_ARROW_MS</code></td><td>Medium width, small length</td></tr><tr><td><code class="code">NEEDLE_ARROW_MM</code></td><td>Medium width, small length</td></tr><tr><td><code class="code">NEEDLE_ARROW_ML</code></td><td>Medium width, large length</td></tr><tr><td><code class="code">NEEDLE_ARROW_LS</code></td><td>Large width, small length</td></tr><tr><td><code class="code">NEEDLE_ARROW_LM</code></td><td>Large width, medium length</td></tr><tr><td><code class="code">NEEDLE_ARROW_LL</code></td><td>Large width, large length</td></tr></tbody></table>
</div></div><p><br class="table-break">
</p>
<p>The following code specifies a the largest available arrowhead</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$odo-&gt;needle-&gt;SetStyle(NEEDLE_STYLE_ARROWHEAD, NEEDLE_ARROW_LL);</span></pre></td></tr></table></div><p>
</p>
<p>An illustration of the various arrow heads are given in <a class="xref" href="ch20s02.html#fig.odotutex07" title="Figure 20.8. Illustration of various sizes of arrow heads (odotutex07.php)">Figure 20.8. Illustration of various sizes of arrow heads <code class="uri"><a class="uri" href="example_src/odotutex07.html" target="_top">(<code class="filename">odotutex07.php</code>)</a></code> </a></p>
<p>
</p><div class="figure"><a name="fig.odotutex07"></a><p class="title"><b>Figure 20.8. Illustration of various sizes of arrow heads <code class="uri"><a class="uri" href="example_src/odotutex07.html" target="_top">(<code class="filename">odotutex07.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/odotutex07.png" alt="Illustration of various sizes of arrow heads (odotutex07.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>The basic length and weight of the needle is specified with the methods</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">Needle::SetLength($aLength)</code></p>
</li><li class="listitem">
<p><code class="code">Needle::SetWeight($aWeight)</code></p>
</li></ul></div><p>
</p>
<p>The needle size is specified as fractions of the radius. So for example the
following line wold create a needle halfway into the plot area</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$odo-&gt;needle-&gt;SetLength(0.5);</span></pre></td></tr></table></div><p>
</p>
<p>The default size for a needles is 60% of the radius. </p>
<p></p>
</div>
<div class="sect2" title="Adding drop shadows"><div class="titlepage"><div><div><h3 class="title"><a name="id2584050"></a>Adding drop shadows</h3></div></div></div>
<p>It is possible to add drop shadows to both the overall graph s well as the
indicator needle. To add a drop shadow to the overall graph the method is as
usual</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">OdoGraph::SetShadow($aShadow=true,$aColor="gray@0.5",$aDx=4,$aDy=4)</code></p>
</li></ul></div><p>
</p>
<p>and to add a drop shadow to the indicator needle the method</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">OdoNeedle::SetShadow($aShadow=true,$aColor="gray@0.5",$aDx=4,$aDy=4)</code></p>
</li></ul></div><p>
</p>
<p>must be used.</p>
<p>The following two lines add both types of drop shadows to an odometer graph with
the result shown in ??</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetShadow</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
...
</span><span class="hl-var">$odo</span><span class="hl-code">-&gt;</span><span class="hl-identifier">needle</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetShadow</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>
</p><div class="figure"><a name="fig.odotutex08"></a><p class="title"><b>Figure 20.9. Adding drop shadows <code class="uri"><a class="uri" href="example_src/odotutex08.html" target="_top">(<code class="filename">odotutex08.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/odotutex08.png" alt="Adding drop shadows (odotutex08.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect2" title="Changing sizes and margins"><div class="titlepage"><div><div><h3 class="title"><a name="id2584579"></a>Changing sizes and margins</h3></div></div></div>
<p>The size of the odometer is automatically adjusted to fit the available space in
the image after margins for titles and captions have been taken into account. This
means that normally it is not necessary to adjust the margins manually.</p>
<p>The odometer plot can be adjusted with the method</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">OdoPlot::SetSiz&lt;e($aSize)</code></p>
</li></ul></div><p>
</p>
<p>Each odometer also have a margin surrounding it. This is the amount of "space"
around each individual odometer. The amount of space is adjusted by the method </p>
<p>OdoPlot::SetMargin($aMargin)</p>
<p>If we take the example in <a class="xref" href="ch20s02.html#fig.odotutex07" title="Figure 20.8. Illustration of various sizes of arrow heads (odotutex07.php)">Figure 20.8. Illustration of various sizes of arrow heads <code class="uri"><a class="uri" href="example_src/odotutex07.html" target="_top">(<code class="filename">odotutex07.php</code>)</a></code> </a> and increase the
individual margin around all odometers they will become smaller (if we keep the
original image size) and the result is shown in <a class="xref" href="ch20s02.html#fig.odotutex09" title="Figure 20.10. Increasing the individual margins around the plots (odotutex09.php)">Figure 20.10. Increasing the individual margins around the plots <code class="uri"><a class="uri" href="example_src/odotutex09.html" target="_top">(<code class="filename">odotutex09.php</code>)</a></code> </a></p>
<p>
</p><div class="figure"><a name="fig.odotutex09"></a><p class="title"><b>Figure 20.10. Increasing the individual margins around the plots <code class="uri"><a class="uri" href="example_src/odotutex09.html" target="_top">(<code class="filename">odotutex09.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/odotutex09.png" alt="Increasing the individual margins around the plots (odotutex09.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect2" title="Adding color indications in the scale"><div class="titlepage"><div><div><h3 class="title"><a name="id2584673"></a>Adding color indications in the scale</h3></div></div></div>
<p>An odometer usually have some colored markings to indicate safe and dangerous
values. The library allows the addition of any number of colored scale areas with
one or several calls to the method</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">OdoPlot::AddIndication($aMin,$aMax,$aColor)</code></p>
</li></ul></div><p>
</p>
<p>This method allows the specification of a min and max value of the scale which
will be given the background color specified as the third parameter.</p>
<p>The example in <a class="xref" href="ch20s02.html#fig.odotutex10" title="Figure 20.11. Adding colored scale indicators (odotutex10.php)">Figure 20.11. Adding colored scale indicators <code class="uri"><a class="uri" href="example_src/odotutex10.html" target="_top">(<code class="filename">odotutex10.php</code>)</a></code> </a> adds three different scale
area with 6 different scale areas</p>
<p>
</p><div class="figure"><a name="fig.odotutex10"></a><p class="title"><b>Figure 20.11. Adding colored scale indicators <code class="uri"><a class="uri" href="example_src/odotutex10.html" target="_top">(<code class="filename">odotutex10.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/odotutex10.png" alt="Adding colored scale indicators (odotutex10.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect2" title="Changing size of the non-colored center area"><div class="titlepage"><div><div><h3 class="title"><a name="id2584762"></a>Changing size of the non-colored center area</h3></div></div></div>
<p>In <a class="xref" href="ch20s02.html#fig.odotutex10" title="Figure 20.11. Adding colored scale indicators (odotutex10.php)">Figure 20.11. Adding colored scale indicators <code class="uri"><a class="uri" href="example_src/odotutex10.html" target="_top">(<code class="filename">odotutex10.php</code>)</a></code> </a> it can be seen that by default the scale
color indication goes all the way down to the base of the needle. It is however
possible to adjust this to the colored area stops a bit above the base of the
needle. The non colored area is adjusted with a call to the method</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">OdoPlot::SetCenterAreaWidth($aWidth)</code></p>
<p>The width is specified as a fraction of the radius of the plot.</p>
</li></ul></div><p>
</p>
<p>The following example in <a class="xref" href="ch20s02.html#fig.odotutex11" title="Figure 20.12. Adjusting the non-colored center area (odotutex11.php)">Figure 20.12. Adjusting the non-colored center area <code class="uri"><a class="uri" href="example_src/odotutex11.html" target="_top">(<code class="filename">odotutex11.php</code>)</a></code> </a>set the size of this
base area to be 45% of the plot radius.</p>
<p>
</p><div class="figure"><a name="fig.odotutex11"></a><p class="title"><b>Figure 20.12. Adjusting the non-colored center area <code class="uri"><a class="uri" href="example_src/odotutex11.html" target="_top">(<code class="filename">odotutex11.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/odotutex11.png" alt="Adjusting the non-colored center area (odotutex11.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect2" title="Using multiple indicator needles in one odometer"><div class="titlepage"><div><div><h3 class="title"><a name="id2584870"></a>Using multiple indicator needles in one odometer</h3></div></div></div>
<p>In all the previous example the odometer plots have all had a single indicator. It
is however possible to add up to four indicators to each plot. This could for
example be sued to show the current value and a sliding 3-day average.</p>
<p>The extra needles are accessed through the properties </p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">OdoPlot::needle2</code></p>
</li><li class="listitem">
<p><code class="code">OdoPlot::needle3</code></p>
</li><li class="listitem">
<p><code class="code">OdoPlot::needle4</code></p>
</li></ul></div><p>
</p>
<p>In order to enable one of these extra needles the method OdoNeedle::Show() has to
be called. The value of the indicator can then be set as the following example
shows.</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$odo-&gt;needle2-&gt;Show();
$odo-&gt;needle2-&gt;Set(44);</span></pre></td></tr></table></div><p>
</p>
<p>By default all the needles will have the same color so the color should be
manually changed to be able to differentiate among multiple needles. The example in
<a class="xref" href="ch20s02.html#fig.odotutex12" title="Figure 20.13. Adding a second scale indicator (odotutex12.php)">Figure 20.13. Adding a second scale indicator <code class="uri"><a class="uri" href="example_src/odotutex12.html" target="_top">(<code class="filename">odotutex12.php</code>)</a></code> </a> shows an example of this where we also have
made the second indicator a bit shorter to further make it easier to read.</p>
<p>
</p><div class="figure"><a name="fig.odotutex12"></a><p class="title"><b>Figure 20.13. Adding a second scale indicator <code class="uri"><a class="uri" href="example_src/odotutex12.html" target="_top">(<code class="filename">odotutex12.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/odotutex12.png" alt="Adding a second scale indicator (odotutex12.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect2" title="Adding an odometer legend (label)"><div class="titlepage"><div><div><h3 class="title"><a name="id2584953"></a>Adding an odometer legend (label)</h3></div></div></div>
<p>Most types of odometers have a legend in the middle of the meter usually
indicating what the scale shows. The odometer have a specific text property to add
text in that position.</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">OdoPlot::label</code></p>
</li></ul></div><p>
</p>
<p>The following code adds the label "mBar" as the scale indicator and also adjusts
the default font</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$odo-&gt;label-&gt;Set(&quot;mBar&quot;);
$odo-&gt;label-&gt;SetFont(FF_FONT2,FS_BOLD);</span></pre></td></tr></table></div><p>
</p>
<p>The result of this cane be seen in <a class="xref" href="ch20s02.html#fig.odotutex13" title="Figure 20.14. Adding a scale legend by using the label property (odotutex13.php)">Figure 20.14. Adding a scale legend by using the label property <code class="uri"><a class="uri" href="example_src/odotutex13.html" target="_top">(<code class="filename">odotutex13.php</code>)</a></code> </a></p>
<p>
</p><div class="figure"><a name="fig.odotutex13"></a><p class="title"><b>Figure 20.14. Adding a scale legend by using the label property <code class="uri"><a class="uri" href="example_src/odotutex13.html" target="_top">(<code class="filename">odotutex13.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/odotutex13.png" alt="Adding a scale legend by using the label property (odotutex13.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect2" title="Adjusting the width and color of the odometer frame (border)"><div class="titlepage"><div><div><h3 class="title"><a name="id2585069"></a>Adjusting the width and color of the odometer frame (border)</h3></div></div></div>
<p>The border of the odometer plot can be adjusted with a call to</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">OdoPlot::SetBorder($aColor,$aWidth=1)</code></p>
</li></ul></div><p>
</p>
<p>The following example shows the effect of making the odometer plot border
thicker</p>
<p>
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">&quot;=odotutex08.1|Adding a thicker border around the odometer plot&quot;</span></pre></td></tr></table></div><p>
</p>
</div>
</div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"> </td><td width="20%" align="center"><a accesskey="u" href="ch20.html">Up</a></td><td width="40%" align="right"> </td></tr><tr><td width="40%" align="left" valign="top"> </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> </td></tr></table></div></body></html>