ch20s02.html
60.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
<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"><?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">-></span><span class="hl-identifier">title</span><span class="hl-code">-></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">-></span><span class="hl-identifier">caption</span><span class="hl-code">-></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">-></span><span class="hl-identifier">needle</span><span class="hl-code">-></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">-></span><span class="hl-identifier">needle</span><span class="hl-code">-></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">-></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->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">-></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">?></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"><?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">-></span><span class="hl-identifier">needle</span><span class="hl-code">-></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">-></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">-></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">?></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->title->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"><?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">-></span><span class="hl-identifier">title</span><span class="hl-code">-></span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">Result for 2002</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">-></span><span class="hl-identifier">title</span><span class="hl-code">-></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">-></span><span class="hl-identifier">title</span><span class="hl-code">-></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">-></span><span class="hl-identifier">subtitle</span><span class="hl-code">-></span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">New York Office</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">-></span><span class="hl-identifier">subtitle</span><span class="hl-code">-></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">-></span><span class="hl-identifier">caption</span><span class="hl-code">-></span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">Figure 1. Branch results.</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">-></span><span class="hl-identifier">caption</span><span class="hl-code">-></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-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">-></span><span class="hl-identifier">needle</span><span class="hl-code">-></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">-></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">-></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">?></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"><?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">-></span><span class="hl-identifier">title</span><span class="hl-code">-></span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">Result for 2002</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">-></span><span class="hl-identifier">title</span><span class="hl-code">-></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">-></span><span class="hl-identifier">title</span><span class="hl-code">-></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">-></span><span class="hl-identifier">subtitle</span><span class="hl-code">-></span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">New York Office</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">-></span><span class="hl-identifier">subtitle</span><span class="hl-code">-></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">-></span><span class="hl-identifier">caption</span><span class="hl-code">-></span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">"</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">"</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-></span><span class="hl-identifier">caption</span><span class="hl-code">-></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-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">-></span><span class="hl-identifier">needle</span><span class="hl-code">-></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">-></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">-></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">?></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"><?php</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> Make the border 40% darker than normal "khaki"</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-identifier">SetMarginColor</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">khaki:0.6</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">-></span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">khaki</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?></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"><?php</span><span class="hl-code">
</span><span class="hl-var">$odo</span><span class="hl-code">-></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">$odo</span><span class="hl-code">-></span><span class="hl-identifier">scale</span><span class="hl-code">-></span><span class="hl-identifier">label</span><span class="hl-code">-></span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">blue</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">-></span><span class="hl-identifier">needle</span><span class="hl-code">-></span><span class="hl-identifier">SetFillColor</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">yellow</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?></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->needle->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->needle->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->needle->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"><?php</span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-></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">-></span><span class="hl-identifier">needle</span><span class="hl-code">-></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">?></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<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->needle2->Show();
$odo->needle2->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->label->Set("mBar");
$odo->label->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">"=odotutex08.1|Adding a thicker border around the odometer plot"</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>