deon/phptsmadmin
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
21b013e3ba
phptsmadmin/includes/jpgraph/docs/chunkhtml/ch15s05.html

483 lines
50 KiB
HTML
Raw Normal View History

Added JPGraph v3.5.0b1
2011-05-28 09:51:52 +00:00
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Scatter 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="ch15.html" title="Chapter 15. Different types of linear (cartesian) graph types"></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">Scatter graphs</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center">Chapter 15. Different types of linear (cartesian) graph types</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="sect1" title="Scatter graphs"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="sec1.creating-scatter-graphs"></a>Scatter graphs</h2></div></div></div>
<p>Scatter plots are used to display a number of data points given by there x- and
y-coordinate. The difference from a line plot is that the x-coordinate must always
be specified. Each point is stroked on the image with a mark as with line plots. The
stroked marks can also be connected with an optional line.</p>
<p>To use a scatter plot the module "<code class="filename">jpgraph_scatter.php</code>" must
first be included in the script.</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>Carefully reviewing the constructor for line plots shows that it also can
accept both a x- and y-array with coordinates. This means that a line plot
can also be used to create a scatter plot. However scatter plots have some
formatting options not available for line plots.</p>
</div><p>
</p>
<p>Even though the normal use of scatter plots is to supply both x- and y-coordinates
it is still perfectly possible to use a text- or int-scale for the x-coordinates to
just enumerate the points (the points will be placed along an imaginary integer
scale). This is especially useful when using the "Impulse" type of scatter plot as
shown below.</p>
<p>If no x-coordinates are specified each value will be placed at consecutive
x-coordinates [<code class="code">1,2,3,..</code>] </p>
<p>A scatter plot is constructed by creating an instance of the <code class="code">class
ScatterPlot</code> supplied with the proper arguments, i.e.</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">$scatterplot = new ScatterPlot($ydata, $xdata);</span></pre></td></tr></table></div><p>
</p>
<p>The following example shows a very basic scatter plot</p>
<p>
</p><div class="example"><a name="example.scatterex1"></a><p class="title"><b>Example 15.3. A basic scatter plot (<code class="filename">scatterex1.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
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code"> </span><span class="hl-comment">//</span><span class="hl-comment"> content=&quot;text/plain; charset=utf-8&quot;</span><span class="hl-comment"></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_scatter.php</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$datax</span><span class="hl-code"> = </span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-number">3</span><span class="hl-number">.5</span><span class="hl-code">,</span><span class="hl-number">3</span><span class="hl-number">.7</span><span class="hl-code">,</span><span class="hl-number">3</span><span class="hl-code">,</span><span class="hl-number">4</span><span class="hl-code">,</span><span class="hl-number">6</span><span class="hl-number">.2</span><span class="hl-code">,</span><span class="hl-number">6</span><span class="hl-code">,</span><span class="hl-number">3</span><span class="hl-number">.5</span><span class="hl-code">,</span><span class="hl-number">8</span><span class="hl-code">,</span><span class="hl-number">14</span><span class="hl-code">,</span><span class="hl-number">8</span><span class="hl-code">,</span><span class="hl-number">11</span><span class="hl-number">.1</span><span class="hl-code">,</span><span class="hl-number">13</span><span class="hl-number">.7</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$datay</span><span class="hl-code"> = </span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-number">20</span><span class="hl-code">,</span><span class="hl-number">22</span><span class="hl-code">,</span><span class="hl-number">12</span><span class="hl-code">,</span><span class="hl-number">13</span><span class="hl-code">,</span><span class="hl-number">17</span><span class="hl-code">,</span><span class="hl-number">20</span><span class="hl-code">,</span><span class="hl-number">16</span><span class="hl-code">,</span><span class="hl-number">19</span><span class="hl-code">,</span><span class="hl-number">30</span><span class="hl-code">,</span><span class="hl-number">31</span><span class="hl-code">,</span><span class="hl-number">40</span><span class="hl-code">,</span><span class="hl-number">43</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-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">Graph</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-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetScale</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">linlin</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">img</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetMargin</span><span class="hl-brackets">(</span><span class="hl-number">40</span><span class="hl-code">,</span><span class="hl-number">40</span><span class="hl-code">,</span><span class="hl-number">40</span><span class="hl-code">,</span><span class="hl-number">40</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetShadow</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">A simple scatter plot</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFont</span><span class="hl-brackets">(</span><span class="hl-identifier">FF_FONT1</span><span class="hl-code">,</span><span class="hl-identifier">FS_BOLD</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$sp1</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">ScatterPlot</span><span class="hl-brackets">(</span><span class="hl-var">$datay</span><span class="hl-code">,</span><span class="hl-var">$datax</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Add</span><span class="hl-brackets">(</span><span class="hl-var">$sp1</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Stroke</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div></div></div><p><br class="example-break"> </p><div class="figure"><a name="fig.scatterex1"></a><p class="title"><b>Figure 15.65. A basic scatter plot <code class="uri"><a class="uri" href="example_src/scatterex1.html" target="_top">(<code class="filename">scatterex1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/scatterex1.png" alt="A basic scatter plot (scatterex1.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>In the same way as we adjusted the look and feel for markers for line plot (see
??) we can do the same here as shown in <a class="xref" href="ch15s05.html#fig.scatterex2" title="Figure 15.66. Adjusting the size and color of the marker (scatterex2.php)">Figure 15.66. Adjusting the size and color of the marker <code class="uri"><a class="uri" href="example_src/scatterex2.html" target="_top">(<code class="filename">scatterex2.php</code>)</a></code> </a></p>
<p>
</p><div class="figure"><a name="fig.scatterex2"></a><p class="title"><b>Figure 15.66. Adjusting the size and color of the marker <code class="uri"><a class="uri" href="example_src/scatterex2.html" target="_top">(<code class="filename">scatterex2.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/scatterex2.png" alt="Adjusting the size and color of the marker (scatterex2.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>The marks are accessed through the instance variable
<code class="code">ScatterPlot::mark</code> (in complete analogy with line plots)</p>
<div class="sect2" title="Combining marks with a line"><div class="titlepage"><div><div><h3 class="title"><a name="id2561472"></a>Combining marks with a line</h3></div></div></div>
<p>It is possible to combine the individual data points with a line - a link. The
properties for this link can be accessed by using the instance variable
<code class="code">ScatterPlot::link</code>.In order to enable the link the method
<code class="code">ScatterPlot::link::Show()</code> must first be called.</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>For historical reasons there is also a utility method
ScatterPlot::SetLinkPoints() where links can be enabled and adjusted.
However, this method will be removed in future versions of the
library.</p>
</div><p>
</p>
<p>The properties that can be adjusted are the normal line properties, i.e.
weight, color and line style. The following code snippet shows how to add a link
line with a dotted style drawn in black to scatter 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
2
3
4
5
6
7
8
9
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> Enable the link lines</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$scatterplot</span><span class="hl-code">-&gt;</span><span class="hl-identifier">link</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Show</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 the properties</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$scatterplot</span><span class="hl-code">-&gt;</span><span class="hl-identifier">link</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetWeigth</span><span class="hl-brackets">(</span><span class="hl-number">1</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$scatterplot</span><span class="hl-code">-&gt;</span><span class="hl-identifier">link</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">black</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$scatterplot</span><span class="hl-code">-&gt;</span><span class="hl-identifier">link</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetStyle</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">dotted</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div><p>
</p>
<p>In <a class="xref" href="ch15s05.html#fig.scatterlinkex3" title="Figure 15.67. Combining data points with a dotted line (scatterlinkex3.php)">Figure 15.67. Combining data points with a dotted line <code class="uri"><a class="uri" href="example_src/scatterlinkex3.html" target="_top">(<code class="filename">scatterlinkex3.php</code>)</a></code> </a> and <a class="xref" href="ch15s05.html#fig.scatterlinkex4" title="Figure 15.68. Combining data points with a red line (scatterlinkex4.php)">Figure 15.68. Combining data points with a red line <code class="uri"><a class="uri" href="example_src/scatterlinkex4.html" target="_top">(<code class="filename">scatterlinkex4.php</code>)</a></code> </a> there are two variants of adding a link
line to a scatter plot. For those figures we have also used two of the
predefined scientific axis styles (see <a class="xref" href="ch14.html#sec2.predef-axis-setup" title="Predefined scientific axis setups">Predefined scientific axis setups</a>).</p>
<p>
</p><div class="informaltable">
<table border="0"><colgroup><col class="c1"><col class="c2"></colgroup><tbody><tr><td>
<div class="figure"><a name="fig.scatterlinkex3"></a><p class="title"><b>Figure 15.67. Combining data points with a dotted line <code class="uri"><a class="uri" href="example_src/scatterlinkex3.html" target="_top">(<code class="filename">scatterlinkex3.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/scatterlinkex3.png" alt="Combining data points with a dotted line (scatterlinkex3.php)"></span> </div></div><br class="figure-break">
</td><td>
<div class="figure"><a name="fig.scatterlinkex4"></a><p class="title"><b>Figure 15.68. Combining data points with a red line <code class="uri"><a class="uri" href="example_src/scatterlinkex4.html" target="_top">(<code class="filename">scatterlinkex4.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/scatterlinkex4.png" alt="Combining data points with a red line (scatterlinkex4.php)"></span> </div></div><br class="figure-break">
</td></tr></tbody></table>
</div><p>
</p>
</div>
<div class="sect2" title="Creating impulse (or stem) - plots"><div class="titlepage"><div><div><h3 class="title"><a name="id2561573"></a>Creating impulse (or stem) - plots</h3></div></div></div>
<p>A variant of scatter plots often used electrical engineering is the stem plot
as shown in <a class="xref" href="ch15s02.html#fig.barplot-patterns" title="Figure 15.56. Supported pattern fills for bar plots">Figure 15.56. Supported pattern fills for bar plots</a></p>
<p>
</p><div class="figure"><a name="fig.impulsex1"></a><p class="title"><b>Figure 15.69. Stem plot <code class="uri"><a class="uri" href="example_src/impulsex1.html" target="_top">(<code class="filename">impulsex1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/impulsex1.png" alt="Stem plot (impulsex1.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>This variant of the scatter plot is created by calling the method</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">$scatterplot-&gt;SetStem();</span></pre></td></tr></table></div><p>
</p>
<div class="tip" title="Tip" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Tip</h3>
<p>It is possible to create a stem graphs without any mark by specifying
the mark type as (-1) . That way only the impulse lines will be
drawn.</p>
</div><p>In order to adjust the look and feel of the stems the following methods
can be used</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">ScatterPlot::SetWeight($aWeight)</code></p>
</li><li class="listitem">
<p><code class="code">ScatterPlot::SetColor($aColor)</code></p>
</li></ul></div><p>
</p>
<p>Another example of stem plot is shown in <a class="xref" href="ch15s05.html#fig.impulsex3" title="Figure 15.70. Adjusting the overall look and feel for the stem graph (impulsex3.php)">Figure 15.70. Adjusting the overall look and feel for the stem graph <code class="uri"><a class="uri" href="example_src/impulsex3.html" target="_top">(<code class="filename">impulsex3.php</code>)</a></code> </a>
where we have adjusted both the look and feel of the stem plot as well as the
position of the x-axis.</p>
<p>
</p><div class="figure"><a name="fig.impulsex3"></a><p class="title"><b>Figure 15.70. Adjusting the overall look and feel for the stem graph <code class="uri"><a class="uri" href="example_src/impulsex3.html" target="_top">(<code class="filename">impulsex3.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/impulsex3.png" alt="Adjusting the overall look and feel for the stem graph (impulsex3.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>There is also another complex impulse example shown in <a class="xref" href="ch14s08.html#fig.impulsex4" title="Figure 14.58. Adding a static line at y=0 to simulate an extra 0-axis (impulsex4.php)">Figure 14.58. Adding a static line at y=0 to simulate an extra 0-axis <code class="uri"><a class="uri" href="example_src/impulsex4.html" target="_top">(<code class="filename">impulsex4.php</code>)</a></code> </a> where we have used a <code class="code">PlotLine</code> to
create a "virtual" x-axis.</p>
</div>
<div class="sect2" title="Field plots"><div class="titlepage"><div><div><h3 class="title"><a name="sec1.creating-field-graphs"></a>Field plots</h3></div></div></div>
<p>A variant of scatter plot is the so called Field Plots. </p>
<p>This is basically a scatter plot where each scatter point is an arrow with a
direction between 0 to 359 degrees. This effectively allows the visualization of
3 parameters at each point (x,y and angle). </p>
<p>A field plot is created as an instance of <code class="code">class FieldPlot</code> with
three argument</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>an array of y-coordinates</p>
</li><li class="listitem">
<p>an array of x-coordinates</p>
</li><li class="listitem">
<p>an array of angles</p>
</li></ul></div><p>
</p>
<p>as the following code snippet 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
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$fieldplot = new FieldPlot($datay, $datax, $angle);</span></pre></td></tr></table></div><p>
</p>
<p>The size and color of each arrow in the field plot is controlled by accessing
the property <code class="code">FieldPlot::arrow</code> and using the two methods</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">FieldPlot::arrow-&gt;SetSize($aSize,$aArrowSize=2)</code></p>
<p><code class="code">$aSize</code>, Specifies the length (in pixels) of the
arrow</p>
<p><code class="code">$aArrowSize</code>, The arrow size is specified as an
integer in the range [0,9]. The possible arrow sizes are shown in
<a class="xref" href="ch15s05.html#fig.field-arrow-sizes" title="Figure 15.71. Possible sizes of arrow heads for field plots">Figure 15.71. Possible sizes of arrow heads for field plots</a>.</p>
<p>
</p><div class="figure"><a name="fig.field-arrow-sizes"></a><p class="title"><b>Figure 15.71. Possible sizes of arrow heads for field plots</b></p><div class="figure-contents">
<div class="mediaobject"><img src="images/field_arrow_sizes.png" alt="Possible sizes of arrow heads for field plots"></div>
</div></div><p><br class="figure-break">
</p>
</li><li class="listitem">
<p><code class="code">FieldPlot::arrow-&gt;SetColor($aColor)</code></p>
<p>The color of the arrow</p>
</li></ul></div><p>
</p>
<p>Another way to individually format each arrow is to use a callback method. The
callback method must have three arguments x- , y-coordinates and angle. The
callback method must return an array with three elements (color,size,arrow
size). The callback method is specified by calling</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">FieldPlot::SetCallback($aFunc)</code></p>
</li></ul></div><p>
</p>
<p><a class="xref" href="ch15s05.html#fig.fieldscatterex1" title="Figure 15.72. A field plot (fieldscatterex1.php)">Figure 15.72. A field plot <code class="uri"><a class="uri" href="example_src/fieldscatterex1.html" target="_top">(<code class="filename">fieldscatterex1.php</code>)</a></code> </a> shows a field plot with a callback
function.</p>
<p>
</p><div class="figure"><a name="fig.fieldscatterex1"></a><p class="title"><b>Figure 15.72. A field plot <code class="uri"><a class="uri" href="example_src/fieldscatterex1.html" target="_top">(<code class="filename">fieldscatterex1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/fieldscatterex1.png" alt="A field plot (fieldscatterex1.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect2" title="Balloon plots"><div class="titlepage"><div><div><h3 class="title"><a name="sec1.creating-balloon-graphs"></a>Balloon plots</h3></div></div></div>
<p>This is a variant of scatter plot where each data point is a filled circle and
the size of the circle is dynamically adjusted. This makes it possible to
display three values at each data point (x,y,"size"). There is no need for a
specific plot type for this since these types of plots can be constructed with
an ordinary scatter plot and a mark formatting callback.</p>
<p>In order to specify a callback for the marks the following method is
used</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">ScatterPlot::mark::SetCallbackYX($aFunction)</code></p>
<p>The argument for the callback function is y- and x-value for the
data point. The return value should specify the format of the marker
as an array of <span class="italic">(width, border_color,
fill_color, filename, image scale)</span>. All values must
be included.</p>
</li></ul></div><p>
</p>
<p>We can now create a balloon plot as follows. </p>
<p>
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p>Create a data array that specifies the data including both x- and
y-coordinate, color and size of the filled circle. For example
as:</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
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$data = array(
array(1,12,10,'orange'),
array(3,41,15,'red'),
array(4,5,19,'lightblue'),
array(5,70,22,'yellow')
);</span></pre></td></tr></table></div><p>
</p>
</li><li class="listitem">
<p>We must now convert this to some suitable data for a scatter plot.
The only thing to keep in mind is that we need to share the data
with the callback function and for that purpose we store the
formatting data in an external array indexed by the x,y-value. </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">$n = count($data);
for( $i=0; $i &lt; $n; ++$i ) {
$datax[$i] = $data[$i][0];
$datay[$i] = $data[$i][1];
$format[ strval($datax[$i]) ][ strval($datay[$i]) ] = array( $data[$i][2], $data[$i][3] );
}</span></pre></td></tr></table></div><p>
</p>
<p>The callback function can now be specified as</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
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">function FCallback($aYVal,$aXVal) {
// We need to access the global format array
global $format;
return array($format[ strval($aXVal) ][ strval($aYVal) ][0],'',
$format[ strval($aXVal) ][ strval($aYVal) ][1],'','');
}</span></pre></td></tr></table></div><p>
</p>
<p>The callback function will now return the format value (size and
color) we specified originally depending on the x,y - coordinate.
The callback function can be installed with a call to</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">$sp1-&gt;mark-&gt;SetCallbackYX('FCallback');</span></pre></td></tr></table></div><p>
</p>
</li><li class="listitem">
<p>The final step is to create an ordinary scatter plot with a marker
that is specified as a filled circle</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">$sp1 = new ScatterPlot($datay,$datax);
$sp1-&gt;mark-&gt;SetType(MARK_FILLEDCIRCLE);</span></pre></td></tr></table></div><p>
</p>
</li></ol></div><p>
</p>
<p>As an optional additions we can also enable the display of the values at each
data point by calling</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">$sp1-&gt;value-&gt;Show();
$sp1-&gt;value-&gt;SetFont(FF_FONT1,FS_BOLD);</span></pre></td></tr></table></div><p>
</p>
<p>Putting all these together gives the result shown in <a class="xref" href="ch15s05.html#fig.balloonex2" title="Figure 15.73. Using format callback to create a balloon plot (balloonex2.php)">Figure 15.73. Using format callback to create a balloon plot <code class="uri"><a class="uri" href="example_src/balloonex2.html" target="_top">(<code class="filename">balloonex2.php</code>)</a></code> </a></p>
<p>
</p><div class="figure"><a name="fig.balloonex2"></a><p class="title"><b>Figure 15.73. Using format callback to create a balloon plot <code class="uri"><a class="uri" href="example_src/balloonex2.html" target="_top">(<code class="filename">balloonex2.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/balloonex2.png" alt="Using format callback to create a balloon plot (balloonex2.php)"></span> </div></div><p><br class="figure-break">
</p>
</div>
<div class="sect2" title="Creating Geo-maps"><div class="titlepage"><div><div><h3 class="title"><a name="sec1.creating-geo-maps"></a>Creating Geo-maps</h3></div></div></div>
<p>Geo-maps (a.k.a. Geo-charts, push-pin graphs) is used to illustrate locations
around the world by putting markers on a flat projection of the earth. A Geo-map
is done by adding a Worldmap background to a standard scatter graph. The library
includes a suitable background in the "<code class="filename">Examples/</code>" directory
"<code class="filename">wordmap1.jpg</code>". This can then be done as the following
example shows</p>
<p>
</p><div class="example"><a name="example.pushpinex1"></a><p class="title"><b>Example 15.4. An example with geo maps (<code class="filename">pushpinex1.php</code>) </b></p><div class="example-contents"> <div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags">&lt;?php</span><span class="hl-code"> </span><span class="hl-comment">//</span><span class="hl-comment"> content=&quot;text/plain; charset=utf-8&quot;</span><span class="hl-comment"></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_scatter.php</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-reserved">DEFINE</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">WORLDMAP</span><span class="hl-quotes">'</span><span class="hl-code">,</span><span class="hl-quotes">'</span><span class="hl-string">worldmap1.jpg</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">markCallback</span><span class="hl-brackets">(</span><span class="hl-var">$y</span><span class="hl-code">,</span><span class="hl-var">$x</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"> Return array width</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> width,color,fill color, marker filename, imgscale</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> any value can be false, in that case the default value will</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> be used.</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> We only make one pushpin another color</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-reserved">if</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-var">$x</span><span class="hl-code"> == </span><span class="hl-number">54</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code">
</span><span class="hl-reserved">return</span><span class="hl-code"> </span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-reserved">false</span><span class="hl-code">,</span><span class="hl-reserved">false</span><span class="hl-code">,</span><span class="hl-reserved">false</span><span class="hl-code">,</span><span class="hl-quotes">'</span><span class="hl-string">red</span><span class="hl-quotes">'</span><span class="hl-code">,</span><span class="hl-number">0</span><span class="hl-number">.8</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-reserved">else</span><span class="hl-code">
</span><span class="hl-reserved">return</span><span class="hl-code"> </span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-reserved">false</span><span class="hl-code">,</span><span class="hl-reserved">false</span><span class="hl-code">,</span><span class="hl-reserved">false</span><span class="hl-code">,</span><span class="hl-quotes">'</span><span class="hl-string">green</span><span class="hl-quotes">'</span><span class="hl-code">,</span><span class="hl-number">0</span><span class="hl-number">.8</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"> Data arrays</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$datax</span><span class="hl-code"> = </span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-number">10</span><span class="hl-code">,</span><span class="hl-number">20</span><span class="hl-code">,</span><span class="hl-number">30</span><span class="hl-code">,</span><span class="hl-number">40</span><span class="hl-code">,</span><span class="hl-number">54</span><span class="hl-code">,</span><span class="hl-number">60</span><span class="hl-code">,</span><span class="hl-number">70</span><span class="hl-code">,</span><span class="hl-number">80</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$datay</span><span class="hl-code"> = </span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-number">12</span><span class="hl-code">,</span><span class="hl-number">23</span><span class="hl-code">,</span><span class="hl-number">65</span><span class="hl-code">,</span><span class="hl-number">18</span><span class="hl-code">,</span><span class="hl-number">84</span><span class="hl-code">,</span><span class="hl-number">28</span><span class="hl-code">,</span><span class="hl-number">86</span><span class="hl-code">,</span><span class="hl-number">44</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Setup 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-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">Graph</span><span class="hl-brackets">(</span><span class="hl-number">400</span><span class="hl-code">,</span><span class="hl-number">270</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> We add a small 1pixel left,right,bottom margin so the plot area</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> doesn't cover the frame around the graph.</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">img</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetMargin</span><span class="hl-brackets">(</span><span class="hl-number">1</span><span class="hl-code">,</span><span class="hl-number">1</span><span class="hl-code">,</span><span class="hl-number">1</span><span class="hl-code">,</span><span class="hl-number">1</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetScale</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">linlin</span><span class="hl-quotes">'</span><span class="hl-code">,</span><span class="hl-number">0</span><span class="hl-code">,</span><span class="hl-number">100</span><span class="hl-code">,</span><span class="hl-number">0</span><span class="hl-code">,</span><span class="hl-number">100</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> We don't want any axis to be shown</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">xaxis</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Hide</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">yaxis</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Hide</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"> Use a worldmap as the background and let it fill the plot area</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetBackgroundImage</span><span class="hl-brackets">(</span><span class="hl-identifier">WORLDMAP</span><span class="hl-code">,</span><span class="hl-identifier">BGIMG_FILLPLOT</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Setup a nice title with a striped bevel background</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Set</span><span class="hl-brackets">(</span><span class="hl-quotes">&quot;</span><span class="hl-string">Pushpin graph</span><span class="hl-quotes">&quot;</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetFont</span><span class="hl-brackets">(</span><span class="hl-identifier">FF_ARIAL</span><span class="hl-code">,</span><span class="hl-identifier">FS_BOLD</span><span class="hl-code">,</span><span class="hl-number">16</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">title</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetColor</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">white</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetTitleBackground</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">darkgreen</span><span class="hl-quotes">'</span><span class="hl-code">,</span><span class="hl-identifier">TITLEBKG_STYLE1</span><span class="hl-code">,</span><span class="hl-identifier">TITLEBKG_FRAME_BEVEL</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetTitleBackgroundFillStyle</span><span class="hl-brackets">(</span><span class="hl-identifier">TITLEBKG_FILLSTYLE_HSTRIPED</span><span class="hl-code">,</span><span class="hl-quotes">'</span><span class="hl-string">blue</span><span class="hl-quotes">'</span><span class="hl-code">,</span><span class="hl-quotes">'</span><span class="hl-string">darkgreen</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"> Finally create the scatterplot</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$sp</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">ScatterPlot</span><span class="hl-brackets">(</span><span class="hl-var">$datay</span><span class="hl-code">,</span><span class="hl-var">$datax</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> We want the markers to be an image</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$sp</span><span class="hl-code">-&gt;</span><span class="hl-identifier">mark</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetType</span><span class="hl-brackets">(</span><span class="hl-identifier">MARK_IMG_PUSHPIN</span><span class="hl-code">,</span><span class="hl-quotes">'</span><span class="hl-string">blue</span><span class="hl-quotes">'</span><span class="hl-code">,</span><span class="hl-number">0</span><span class="hl-number">.6</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Install the Y-X callback for the markers</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$sp</span><span class="hl-code">-&gt;</span><span class="hl-identifier">mark</span><span class="hl-code">-&gt;</span><span class="hl-identifier">SetCallbackYX</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">markCallback</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"> ... and add it to the graph</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Add</span><span class="hl-brackets">(</span><span class="hl-var">$sp</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> .. and output to browser</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$graph</span><span class="hl-code">-&gt;</span><span class="hl-identifier">Stroke</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?&gt;</span></pre></td></tr></table></div></div></div><p><br class="example-break"> </p><div class="figure"><a name="fig.pushpinex1"></a><p class="title"><b>Figure 15.74. An example with geo maps <code class="uri"><a class="uri" href="example_src/pushpinex1.html" target="_top">(<code class="filename">pushpinex1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/pushpinex1.png" alt="An example with geo maps (pushpinex1.php)"></span> </div></div><p><br class="figure-break">
</p>
<p>Another example of using worldmaps with Pie graphs is shown in <a class="xref" href="ch16.html#sec.pie-image-background" title="Adding background images to Pie graphs">Adding background images to Pie graphs</a></p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>The library does not include any conversion utility to/from
Longitude/Latitude to UTM coordinates that could be used to
automatically position data marks on the Mercator projection map. The
options to stretch and scale the worldmap would make it rather
cumbersome to create a accurate conversion. For a good overview on this
kind of translation see <code class="uri"><a class="uri" href="http://www.gpsy.com/gpsinfo/geotoutm/" target="_top">Converting
Latitude/Longitude to Universal Transverse Mercator
(UTM)</a></code></p>
</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="ch15.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>
Reference in New Issue Copy Permalink