ch21s03.html
27.4 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
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Formatting the plot</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="ch21.html" title="Chapter 21. Windrose"></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">Formatting the plot</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center">Chapter 21. Windrose</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="sect1" title="Formatting the plot"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="id2588129"></a>Formatting the plot</h2></div></div></div>
<div class="sect2" title="Positioning the plot"><div class="titlepage"><div><div><h3 class="title"><a name="id2588150"></a>Positioning the plot</h3></div></div></div>
<p>The position of the graph can be controlled with the method </p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">WindrosePlot::SetPos($aXPos,$aYPos)</code></p>
</li></ul></div><p>
</p>
<p>The position can be specified as either absolute position (in pixels) or as a
fraction of width and height. The anchor for the position is the center of the
windrose plot. For example, the following line centers the plot in 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
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$windplot->SetPos(0.5,0.5);</span></pre></td></tr></table></div><p>
</p>
</div>
<div class="sect2" title="Specifying the size of the plot"><div class="titlepage"><div><div><h3 class="title"><a name="id2588191"></a>Specifying the size of the plot</h3></div></div></div>
<p>In the same way as for the position the size of the windrose plot can be specified
as either an absolute value or as a fraction of the minimum of width and height. The
size specified refers to the diameter of the plot. </p>
<p>The size is controlled with the the method</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">WindrosePlot::SetSize($aDiameter)</code>
</p>
</li></ul></div><p>
</p>
<p>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">$windplot->SetSize(200);</span></pre></td></tr></table></div><p>
</p>
<p>The code above sets the diameter of the plot to 200 pixels, setting the value to
0.7 would set the diameter to 0.7 * min(WIDTH,HEIGHT) where width and height are the
size of the graph.</p>
</div>
<div class="sect2" title="Specifying the size of the Zero-circle (middle circle)"><div class="titlepage"><div><div><h3 class="title"><a name="id2588242"></a>Specifying the size of the Zero-circle (middle circle)</h3></div></div></div>
<p>The size of the middle circle (the zero-range circle) can be adjusted with the
method </p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">WindrosePlot::SetZCircleSize($aDiameter)</code>
</p>
<p><code class="code">$aDiameter</code>, The diameter can be specified as either an
absolute integer value or as a fraction of the windrose plot diameter.
</p>
</li></ul></div><p>
</p>
<p>For example the following line sets the size to 1/3 of the windrose 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">$windplot->SetZCircleSize(1/3);</span></pre></td></tr></table></div><p>
</p>
</div>
<div class="sect2" title="Formatting the plot legend"><div class="titlepage"><div><div><h3 class="title"><a name="id2588292"></a>Formatting the plot legend</h3></div></div></div>
<p>The legend is displayed in a fixed position just below the windrose plot as can be
seen in all the previous examples.</p>
<p>All legend methods is accessed through the legend property of the windrose plot 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">$windroseplot->legend->SetFont(...);</span></pre></td></tr></table></div><p>
</p>
<p>There are four basic attributes that can be customizable for the legend as
described in the following paragraphs. </p>
<div class="sect3" title="Specifying legend fonts"><div class="titlepage"><div><div><h4 class="title"><a name="id2588312"></a>Specifying legend fonts</h4></div></div></div>
<p>To allow for maximum flexibility font can be specified for both the numerical
ranges as well as for the text under the legend. In order to avoid making the
legend to wide it is often desirable to use a smaller font for the ranges and a
slightly larger font for the actual text under the legend (as well as inside the
"calm" circle - the indicator for bucket 0). </p>
<p>The fonts for the legend is adjusted by the following methods</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">SetTFont()</code>, The text below the legend</p>
</li><li class="listitem">
<p><code class="code">SetLFont()</code>, The font for the labels</p>
</li><li class="listitem">
<p><code class="code">SetCFont()</code>, The font for the label inside the "calm"
circle</p>
</li><li class="listitem">
<p><code class="code">SetFont()</code>, Sets all the font areas above the same
font. Note that if this method is called after one of the individual
settings previous specified (e.g. <code class="code">SetCFont()</code>) they will
be overwritten.</p>
</li></ul></div><p>
</p>
<p>The colors for the fonts are specified in an analogue way by using the methods </p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">SetTFontColor()</code></p>
</li><li class="listitem">
<p><code class="code">SetLFontColor()</code></p>
</li><li class="listitem">
<p><code class="code">SetCFontColor()</code></p>
</li><li class="listitem">
<p><code class="code">SetFontColor()</code></p>
</li></ul></div><p>
</p>
<p><a class="xref" href="ch21s03.html#fig.windrose-legend-methods" title="Figure 21.10. Windrose legend methods">Figure 21.10. Windrose legend methods</a> explains visually how these
methods are applied</p>
<div class="figure"><a name="fig.windrose-legend-methods"></a><p class="title"><b>Figure 21.10. Windrose legend methods</b></p><div class="figure-contents">
<div class="mediaobject"><img src="images/wind-legend-methods.png" alt="Windrose legend methods"></div>
</div></div><br class="figure-break">
<p><a class="xref" href="ch21s03.html#fig.windrose_ex6.1" title="Figure 21.11. Using chinese fonts (windrose_ex6.1.php)">Figure 21.11. Using chinese fonts <code class="uri"><a class="uri" href="example_src/windrose_ex6.1.html" target="_top">(<code class="filename">windrose_ex6.1.php</code>)</a></code> </a> illustrates how two fonts were used
for the legend. For the circle we have use a Chinese font (The Kanji characters
roughly means "Chinese language")</p>
<p>
</p><div class="caution" title="Caution" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Caution</h3>
<p>The source file (as every source file in the library) is encoded in
utf-8. For technical reasons some browsers might not render the Chinese
characters correctly when the source file is viewed.</p>
</div><p>
</p>
<p>
</p><div class="figure"><a name="fig.windrose_ex6.1"></a><p class="title"><b>Figure 21.11. Using chinese fonts <code class="uri"><a class="uri" href="example_src/windrose_ex6.1.html" target="_top">(<code class="filename">windrose_ex6.1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/windrose_ex6.1.png" alt="Using chinese fonts (windrose_ex6.1.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect3" title="Setting text and colors for the Zero-circle"><div class="titlepage"><div><div><h4 class="title"><a name="id2588533"></a>Setting text and colors for the Zero-circle</h4></div></div></div>
<p>The "Calm" circle can have it's size, line weight and color adjusted. In
addition (as was shown in <a class="xref" href="ch21s03.html#fig.windrose_ex6.1" title="Figure 21.11. Using chinese fonts (windrose_ex6.1.php)">Figure 21.11. Using chinese fonts <code class="uri"><a class="uri" href="example_src/windrose_ex6.1.html" target="_top">(<code class="filename">windrose_ex6.1.php</code>)</a></code> </a>) specify any
text within the circle. By default the text "Calm" is printed inside the circle.
The following methods are used to adjust these properties. </p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">SetCircleWeight($aWeight)</code></p>
</li><li class="listitem">
<p><code class="code">SetCircleRadius($aRadius)</code></p>
</li><li class="listitem">
<p><code class="code">SetCircleColor($aColor)</code></p>
</li><li class="listitem">
<p><code class="code">SetCircleText($aTxt)</code></p>
</li></ul></div><p>
</p>
</div>
<div class="sect3" title="Specifying number formats for ranges"><div class="titlepage"><div><div><h4 class="title"><a name="id2588593"></a>Specifying number formats for ranges</h4></div></div></div>
<p>For the ranges it is possible to adjust how the numbers are formatted with a
general format string (in the style of a <code class="code">printf()</code> format string).
This would allow, for example, to choose the number of decimal values to show in
the legend. The format string is specified with a call to </p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">Legend::SetFormat($aFmt)</code>. </p>
<p>The format will be applied to both the lower and upper range
value. This means that the actual legend range text in the legend
will be printed as [number format]-[number format]. </p>
</li></ul></div><p>
</p>
<p>The following example shows how to make sure the ranges are displayed as
integers</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">$wp->legend->SetFormat('%d');</span></pre></td></tr></table></div><p>
</p>
</div>
<div class="sect3" title="Specifying legend bottom text"><div class="titlepage"><div><div><h4 class="title"><a name="id2588652"></a>Specifying legend bottom text</h4></div></div></div>
<p>Finally it is also possible to specify a text at the bottom of the legend with
a call to </p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">Legend::SetText($aTxt)</code>. The text will be displayed
just underneath the legend as for example, shown in <a class="xref" href="ch21s03.html#fig.windrose_ex6.1" title="Figure 21.11. Using chinese fonts (windrose_ex6.1.php)">Figure 21.11. Using chinese fonts <code class="uri"><a class="uri" href="example_src/windrose_ex6.1.html" target="_top">(<code class="filename">windrose_ex6.1.php</code>)</a></code> </a>
</p>
</li></ul></div><p>
</p>
</div>
<div class="sect3" title="Specifying the numeric values displayed for the ranges"><div class="titlepage"><div><div><h4 class="title"><a name="id2588694"></a>Specifying the numeric values displayed for the ranges</h4></div></div></div>
<p>The values displayed in the legend for the ranges 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">WindRosePlot::SetRanges($aRanges)</code>. By default the
ranges are set to 0,1,2,3,5,6,10,13.5,99.0, this means that the
ranges printed will be 1-2, 2-3, 3-5, .... </p>
</li></ul></div><p>
</p>
<p>The following example shows how to change this to the ranges 0.000-0.001,
0.001-0.003, 0.003-0.005 </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">$windplot->SetRanges(array(0.001,0.003,0.005));
$windplot->SetFormat('%.3f');</span></pre></td></tr></table></div><p>
</p>
<p>As can be seen the first range (bucket 0) is not really directly printed. It
is by default indicated by the circle to the left in the legend.</p>
<p>In the example lines above we also changed the format to display the decimals.
Without this the default is only to show one decimal and that would show all
ranges as 0.0. An example of how this might look can be seen in figure 10 below.
</p>
</div>
</div>
<div class="sect2" title="Adjusting the grid colors"><div class="titlepage"><div><div><h3 class="title"><a name="id2588295"></a>Adjusting the grid colors</h3></div></div></div>
<p>The colors of both the radial grid and the circular grid can be adjusted. This is
done with the method </p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">WindrosePlot::SetGridColor($aColor1,$aColor2)</code>
</p>
</li></ul></div><p>
</p>
<p>The first argument specifies the grid circle color and the second argument
specifies the radial grid colors. </p>
</div>
<div class="sect2" title="Adjusting the weight of the grid circles"><div class="titlepage"><div><div><h3 class="title"><a name="id2588776"></a>Adjusting the weight of the grid circles</h3></div></div></div>
<p>To adjust the weight (thickness) of the grid lines (both circle and radial lines)
the following method is used</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">WindrosePlot::SetGridWeight($aWeight1,$aWeight2)</code></p>
<p>The first argument specifies the weight of the circle and the second
the weight of the radial lines.</p>
</li></ul></div><p>
</p>
<div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>It is possible to have individual colors of the radial grid lines (and line
style &weight) by using any of the methods </p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">SetRadialColors()</code></p>
</li><li class="listitem">
<p><code class="code">SetRadialStyles()</code>
</p>
</li><li class="listitem">
<p><code class="code">SetRadialWeight()</code></p>
</li></ul></div><p>
</p>
</div>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>Due to technical and performance limitations circle weight can only be
specified in the range [1,3] (inclusively).</p>
</div><p>
</p>
</div>
<div class="sect2" title="Adding a box around the plot"><div class="titlepage"><div><div><h3 class="title"><a name="id2588868"></a>Adding a box around the plot</h3></div></div></div>
<p>Finally we remember that it is possible to add a rectangular box around the plot
by using the method </p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">WindrosePlot::SetBox($aColor='black', $aWeight=1,
$aStyle='solid', $aShow=true)</code></p>
</li></ul></div><p>
</p>
<p>an example of this can be seen in <a class="xref" href="ch21s02.html#fig.windrose_2plots_ex1" title="Figure 21.7. Adding two windrose plots to the same graph (windrose_2plots_ex1.php)">Figure 21.7. Adding two windrose plots to the same graph <code class="uri"><a class="uri" href="example_src/windrose_2plots_ex1.html" target="_top">(<code class="filename">windrose_2plots_ex1.php</code>)</a></code> </a>.</p>
</div>
<div class="sect2" title="Adjusting the size of the center zero circle"><div class="titlepage"><div><div><h3 class="title"><a name="id2588901"></a>Adjusting the size of the center zero circle</h3></div></div></div>
<p>The size of the center circle can be manually adjusted as either specified in
absolute number of pixels or as fractions of the windrose plot (not the entire
windrose graph). This is done with the method </p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">WindrosePlot::SetZCircleSize($aSize)</code></p>
</li></ul></div><p>
</p>
</div>
<div class="sect2" title="Localizing the default names for the compass directions"><div class="titlepage"><div><div><h3 class="title"><a name="sec.windrose-locale-compass"></a>Localizing the default names for the compass directions</h3></div></div></div>
<p>By default the compass cardinal directions are presented in English locale using
standard denominations for the 16 compass directions. </p>
<p>Localizing these names are done with a call to the method </p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">WindrosePlot::SetCompassLabels($aLabels)</code></p>
</li></ul></div><p>
</p>
<p>The order of the names for the directions should start with the corresponding name
for "East" and then continue counter-clockwise all the way to "East North East".
Adjusting the names for the compass directions means two things: </p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>If there is named direction in the data (as key) that key must now
also be in localized form.</p>
</li><li class="listitem">
<p>The displayed names for the compass direction will be shown in
localized form.</p>
</li></ul></div><p>
</p>
<p>For example, the code snippet below shows how to localize the compass directions
into Swedish. </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
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">...
$data = array(
'sso' => array(12,8,2,3),
6 => array(5,4,4,5,4),
);
$se_CompassLbl =
array('O','ONO','NO','NNO','N','NNV','NV','VNV','V','VSV','SV','SSV','S','SSO','SO','OSO');
....
$windroseplot->SetCompassLabels($se_CompassLbl);
...</span></pre></td></tr></table></div><p>
</p>
<p>and the following shows how to make a localization into Japanese</p>
<p>
</p><div class="caution" title="Caution" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Caution</h3>
<p>The source file (as every source file in the library) is encoded in utf-8.
For technical reasons some browsers might not render the Japanese characters
correctly when the source file is viewed.</p>
</div><p>
</p>
<p>
</p><div class="figure"><a name="fig.windrose_ex7.1"></a><p class="title"><b>Figure 21.12. Japanese locale <code class="uri"><a class="uri" href="example_src/windrose_ex7.1.html" target="_top">(<code class="filename">windrose_ex7.1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/windrose_ex7.1.png" alt="Japanese locale (windrose_ex7.1.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect2" title="Adjusting the formatting of the windrose plot legs"><div class="titlepage"><div><div><h3 class="title"><a name="id2589068"></a>Adjusting the formatting of the windrose plot legs</h3></div></div></div>
<div class="sect3" title="Specifying range colors"><div class="titlepage"><div><div><h4 class="title"><a name="id2589080"></a>Specifying range colors</h4></div></div></div>
<p>To adjust the colors used for each range in the plot the method </p>
<p><code class="code">WindrosePlot::SetRangeColors($aRangeColors)</code>
</p>
<p>The following example shows how to set a red-brown color scale</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">$rangeColors = array('khaki','yellow','orange','orange:0.7','brown','darkred','black');
$windplot->SetRangeColors($rangeColors);</span></pre></td></tr></table></div><p>
</p>
</div>
<div class="sect3" title='Specifying the width of the plot "legs"'><div class="titlepage"><div><div><h4 class="title"><a name="id2589102"></a>Specifying the width of the plot "legs"</h4></div></div></div>
<p>The weight (width) of the legs used for each range in the plot is by default
set to the range 2,4,6,8,10,12,14,16,18,20 pixels. </p>
<p>This can be 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">WindrosePlot::SetRangeWeights($aWeights)</code>
</p>
</li></ul></div><p>
</p>
<p>If fewer weights than ranges used are supplied the ranges will wrap-around.
The following example shows how to set a larger difference in size for the legs
between the ranges. </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">$windplot->SetRangeWeights(array(2,6,10,14,18));</span></pre></td></tr></table></div><p>
</p>
</div>
</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="ch21.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>