ch15s05.html
49.6 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
<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"><?php</span><span class="hl-code"> </span><span class="hl-comment">//</span><span class="hl-comment"> content="text/plain; charset=utf-8"</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">-></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-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$graph</span><span class="hl-code">-></span><span class="hl-identifier">img</span><span class="hl-code">-></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">-></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">-></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">A simple scatter plot</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_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">-></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">-></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.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"><?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">-></span><span class="hl-identifier">link</span><span class="hl-code">-></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">-></span><span class="hl-identifier">link</span><span class="hl-code">-></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">-></span><span class="hl-identifier">link</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">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">-></span><span class="hl-identifier">link</span><span class="hl-code">-></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">?></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->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->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->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 < $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->mark->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->mark->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->value->Show();
$sp1->value->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"><?php</span><span class="hl-code"> </span><span class="hl-comment">//</span><span class="hl-comment"> content="text/plain; charset=utf-8"</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">-></span><span class="hl-identifier">img</span><span class="hl-code">-></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">-></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">-></span><span class="hl-identifier">xaxis</span><span class="hl-code">-></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">-></span><span class="hl-identifier">yaxis</span><span class="hl-code">-></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">-></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">-></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">Pushpin graph</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">16</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">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">-></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">-></span><span class="hl-identifier">mark</span><span class="hl-code">-></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">-></span><span class="hl-identifier">mark</span><span class="hl-code">-></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">-></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">-></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.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>