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

366 lines
27 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>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-&gt;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-&gt;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-&gt;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-&gt;legend-&gt;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-&gt;legend-&gt;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-&gt;SetRanges(array(0.001,0.003,0.005));
$windplot-&gt;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 &amp;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' =&gt; array(12,8,2,3),
6 =&gt; 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-&gt;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-&gt;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-&gt;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>