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/ch20s03.html
2011-05-28 19:51:52 +10:00

270 lines
26 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Working with the odometer scale</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">Working with the odometer scale</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="Working with the odometer scale"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="id2583406"></a>Working with the odometer scale</h2></div></div></div>
<p>In the previous section we ignored the actual scale in order to focus on the
formatting options. Now we will do the (almost) opposite, only focus on how to
manipulate the scale and the scale labels. </p>
<p>There are a number of properties that can be adjusted in the scale.</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>The min and max values </p>
</li><li class="listitem">
<p>The fonts and for the scale</p>
</li><li class="listitem">
<p>The formatting of the scale values </p>
</li><li class="listitem">
<p>The start and end angles for the min and max values </p>
</li><li class="listitem">
<p>The tick interval </p>
</li><li class="listitem">
<p>The intervall of the scale labels </p>
</li></ul></div><p>
</p>
<p>The scale is an instance of <code class="code">class OdoScale</code> and is instantiated as an
object that is accessed through the "$scale" property of the plot</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">OdoPlot::scale</code></p>
</li></ul></div><p>
</p>
<div class="sect2" title="Adjusting the scale, ticks and labels"><div class="titlepage"><div><div><h3 class="title"><a name="id2585195"></a>Adjusting the scale, ticks and labels</h3></div></div></div>
<p>By default the scale runs between 0 (inclusively) and 100 (inclusively). trying to
set the indicator needle to a value outside this range will result in an
error.</p>
<p>The min an max values o the scale are specified with the method</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">OdoScale::Set($aMin,$aMax)</code></p>
</li></ul></div><p>
</p>
<p>The min/max values can be specified to any numeric value with the restriction that
<code class="code">$aMin &lt;= $aMax</code></p>
<p>To adjust which scale position should have tick marks and which tick marks should
have a labels the following method is used.</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">OdoScle::SetTicks($aTickInterval, $aLabelInterval)</code></p>
<p>The first argument specifies the tick interval, i.e. the interval tick
marks will be drawn in the odometer. The second argument specifies that
every n:th tick should have a label. </p>
</li></ul></div><p>
</p>
<p>The following line specifies that every 20 unit of the scale should have a tick
mark and that every second tick mark should have a label</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;scale-&gt;SetTicks(20,2)</span></pre></td></tr></table></div><p>
</p>
<p>
</p><div class="tip" title="Tip" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Tip</h3>
<p>To make sure that both the min and max value of the scale gets a tick mark
the tick multiplier should be an even divider to the scale range and the
label multiplier should be a factor in the tick multiplier.</p>
</div><p>
</p>
<p><a class="xref" href="ch20s03.html#fig.odotutex14" title="Figure 20.15.  (odotutex14.php)">Figure 20.15.  <code class="uri"><a class="uri" href="example_src/odotutex14.html" target="_top">(<code class="filename">odotutex14.php</code>)</a></code> </a> shows and example of how to change the scale,
tick and label positions.</p>
<p>
</p><div class="figure"><a name="fig.odotutex14"></a><p class="title"><b>Figure 20.15.  <code class="uri"><a class="uri" href="example_src/odotutex14.html" target="_top">(<code class="filename">odotutex14.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/odotutex14.png" alt="(odotutex14.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>To adjust the appearance of the tick marks in respect to line weight, length and
color the following three methods can be used:</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">OdoScale::SetTickLength($aLength)</code></p>
</li><li class="listitem">
<p><code class="code">OdoScale::SetTickWeight($aWeight)</code></p>
</li><li class="listitem">
<p><code class="code">OdoScale::SetTickColor('red')</code></p>
</li></ul></div><p>
</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p> The tick length of a major tick mark (which have labels) are 1.5 times
that of a minor tick mark. This factor can not be adjusted. </p>
</div><p>
</p>
</div>
<div class="sect2" title="Adjusting scale label format"><div class="titlepage"><div><div><h3 class="title"><a name="id2585211"></a>Adjusting scale label format</h3></div></div></div>
<p>The following section will show hot to customize the appearance of scale and
labels.</p>
<p>The scale labels can, as all other texts in the library have there font and color
adjusted. The text property for the labels i accessed through the property</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">OdoScale::label</code></p>
</li></ul></div><p>
</p>
<p>Since this is a standard Text object we can adjust the font and color 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;scale-&gt;label-&gt;SetFont(FF_FONT1,FS_BOLD);
$odo-&gt;scale-&gt;label-&gt;SetColor('navy');</span></pre></td></tr></table></div><p>
</p>
<p>The way the labels are formatted are controlled by a format string with the
standard "<code class="code">printf()</code>" syntax, e.g "<code class="code">%d</code>" (as default) displays
an integer and "<code class="code">%02f.1</code>" displays a label zero padded to two positions
and with one decimal place. </p>
<p>The format string is applied by using the <code class="code">OdoScale::SetLabelFormat()</code>
method of the scale class as 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
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$odo-&gt;scale-&gt;SetLabelFormat('%d%%');</span></pre></td></tr></table></div><p>
</p>
<p>The other aspect of the label formatting is exactly how the labels are positioned
within the scale. By using the method</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">OdoScale::SetLabelPos($aPos)</code></p>
</li></ul></div><p>
</p>
<p>it is possible to specify the distance from the center to the label edge. By
default this is 80% (i.e. specified as 0.8)</p>
<p>The following example shows the effect of applying some of these formatting
options.</p>
<p>
</p><div class="example"><a name="example.odotutex15"></a><p class="title"><b>Example 20.4. Adjusting the scale format (<code class="filename">odotutex15.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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
</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">170</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Setup graph 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">'</span><span class="hl-string">Custom formatting</span><span class="hl-quotes">'</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">'</span><span class="hl-string">white</span><span class="hl-quotes">'</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-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Add drop shadow for 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">SetShadow</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"> 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-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-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">lightgray:1.9</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"> Setup the scale</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">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-number">100</span><span class="hl-code">,</span><span class="hl-number">600</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">SetTicks</span><span class="hl-brackets">(</span><span class="hl-number">50</span><span class="hl-code">,</span><span class="hl-number">2</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">SetTickColor</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">brown</span><span class="hl-quotes">'</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">SetTickLength</span><span class="hl-brackets">(</span><span class="hl-number">0</span><span class="hl-number">.05</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">SetTickWeight</span><span class="hl-brackets">(</span><span class="hl-number">2</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">SetLabelPos</span><span class="hl-brackets">(</span><span class="hl-number">0</span><span class="hl-number">.75</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">SetFont</span><span class="hl-brackets">(</span><span class="hl-identifier">FF_FONT1</span><span class="hl-code">, </span><span class="hl-identifier">FS_BOLD</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">'</span><span class="hl-string">brown</span><span class="hl-quotes">'</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">SetFont</span><span class="hl-brackets">(</span><span class="hl-identifier">FF_ARIAL</span><span class="hl-code">,</span><span class="hl-identifier">FS_NORMAL</span><span class="hl-code">,</span><span class="hl-number">10</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Setup a label with a degree mark</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">scale</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetLabelFormat</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">%dC</span><span class="hl-quotes">'</span><span class="hl-code">.</span><span class="hl-identifier">SymChar</span><span class="hl-code">::</span><span class="hl-identifier">Get</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">degree</span><span class="hl-quotes">'</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">280</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Add drop shadow for needle</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">SetShadow</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"> 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 browser</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.odotutex15"></a><p class="title"><b>Figure 20.16. Adjusting the scale format <code class="uri"><a class="uri" href="example_src/odotutex15.html" target="_top">(<code class="filename">odotutex15.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/odotutex15.png" alt="Adjusting the scale format (odotutex15.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>As can be seen in <a class="xref" href="ch20s03.html#fig.odotutex15" title="Figure 20.16. Adjusting the scale format (odotutex15.php)">Figure 20.16. Adjusting the scale format <code class="uri"><a class="uri" href="example_src/odotutex15.html" target="_top">(<code class="filename">odotutex15.php</code>)</a></code> </a> we have used the
utility <code class="code">class SymChar</code> in order to get hold of the extended
character that represents the degree mark. Remember that in order to get the
extended character it is necessary to use a TTF scale.</p>
</div><p>
</p>
</div>
<div class="sect2" title="Adjusting the start and stop angle for the scale"><div class="titlepage"><div><div><h3 class="title"><a name="id2585402"></a>Adjusting the start and stop angle for the scale</h3></div></div></div>
<p>By default the scale labels start at 180 degree (9'a clock) and ends at 0 degree
(3'a clock). To offer full flexibility this can be adjusted.</p>
<p>The method used for this is</p>
<div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">OdoScale::SetAngle($aStart, $aEnd)</code></p>
<p>the angle is counted clockwise from the 6'a clock position. This means
that the normal half odometer has a start angle of 90 degrees and an end
angle of 270 degrees. </p>
</li></ul></div><p>For full circle odometers the standard start angle is 40 degrees and
the end angle is 320. This leaves a sector of 80 degrees free at the bottom of the
odometer. </p>
<p>For example we could decide that the scale will start and stop 20 degrees above
the horizontal line. The following example shows two odometer plots. The left uses
the default start and end angle while the right odometer plot have adjusted start
and end angles.</p>
<p>
</p><div class="figure"><a name="fig.odotutex16"></a><p class="title"><b>Figure 20.17. Adjusting start and end angles of scale <code class="uri"><a class="uri" href="example_src/odotutex16.html" target="_top">(<code class="filename">odotutex16.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/odotutex16.png" alt="Adjusting start and end angles of scale (odotutex16.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>To further emphasize that the scale below the start and stop angles are "invalid"
we could add a scale indicator in some gray:ish color that would signal that the
area below 0 and 100 is not a valid scale area. We can do this by setting the range
of the scale indicator to values outside the scale that would correspond to the
horizontal line.</p>
<p>In <a class="xref" href="ch20s03.html#fig.odotutex16" title="Figure 20.17. Adjusting start and end angles of scale (odotutex16.php)">Figure 20.17. Adjusting start and end angles of scale <code class="uri"><a class="uri" href="example_src/odotutex16.html" target="_top">(<code class="filename">odotutex16.php</code>)</a></code> </a> we can accomplish this by adding the
following two lines to the second odometer</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">$odo2-&gt;AddIndication(-15,0,'lightgray');
$odo2-&gt;AddIndication(100,115,'lightgray');</span></pre></td></tr></table></div><p>
</p>
<p>The result of this is shown in <a class="xref" href="ch20s03.html#fig.odotutex16.1" title="Figure 20.18. Adding gray areas below the min and max scale values (odotutex16.1.php)">Figure 20.18. Adding gray areas below the min and max scale values <code class="uri"><a class="uri" href="example_src/odotutex16.1.html" target="_top">(<code class="filename">odotutex16.1.php</code>)</a></code> </a></p>
<p>
</p><div class="figure"><a name="fig.odotutex16.1"></a><p class="title"><b>Figure 20.18. Adding gray areas below the min and max scale values <code class="uri"><a class="uri" href="example_src/odotutex16.1.html" target="_top">(<code class="filename">odotutex16.1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/odotutex16.1.png" alt="Adding gray areas below the min and max scale values (odotutex16.1.php)"></span> </div></div><p><br class="figure-break">
</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>