ch10s06.html
46.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Mixing several CSIM images in an HTML page with text</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="ch10.html" title="Chapter 10. Using CSIM (Client side image maps)"></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">Mixing several CSIM images in an HTML page with text</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center">Chapter 10. Using CSIM (Client side image maps)</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="sect1" title="Mixing several CSIM images in an HTML page with text"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="id2536399"></a>Mixing several CSIM images in an HTML page with text</h2></div></div></div>
<p>As was mentioned above using <code class="code">StrokeCSIM()</code> is very simple but it has
the drawback that it returns a single HTML page without any possibilities to add
additional text which makes its use fairly limited in real life situation where the
graph is part of a complex WEB-page. In this section we will discuss some best
practice to do this.</p>
<p>In principle there are two ways to do this</p>
<p>
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p>Store both the image map and the image in files which are later read
back in the HTML page. This has the advantage of being simple but the
drawback that it increases the processing time since writing and reading
from a file takes time.</p>
</li><li class="listitem">
<p>Avoiding the use of temporary file by mimicking the way
<code class="code">StrokeCSIM()</code> works and od the steps
<code class="code">StrokeCSIM()</code> does internally but in the script
directly. In the remainder of this section we will show how this can be
setup. That part will also introduce the method
<code class="code">StrokeCSIMImage()</code> which is key to include CSIM graphs
in HTML pages.</p>
</li></ol></div><p>
</p>
<div class="caution" title="Caution" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Caution</h3>
<p>Some of the described methods in this section was added in version 2.5 of the
library. In earlier versions more of this has to be done manually.</p>
</div>
<div class="sect2" title="Adding one CSIM graph in a HTML page"><div class="titlepage"><div><div><h3 class="title"><a name="sec2.adding-csim-in-html"></a>Adding one CSIM graph in a HTML page</h3></div></div></div>
<p>The library has been designed to make this as painless as possible but due to
the way CSIM works there are some manual work that cannot be avoided. We will
start slowly and in detail walk through an example where we include one CSIM
graph in an arbitrary HTML page. There are a few things to keep in mind, the
rest will be taken care of automatically by the library</p>
<p>
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p>In the HTML page the CSIM map must be semi-manually included. (It
doesn't matter where)</p>
</li><li class="listitem">
<p>The <span class="markup"><img> </span>tag for rendering the image must be
semi-manually created</p>
</li><li class="listitem">
<p>The original graph script needs a minor augmentation since it
should no longer end by calling <code class="code">StrokeCSIM()</code></p>
</li><li class="listitem">
<p>Some care needs to be taken to specify what the URL:s to be called
should be</p>
</li></ol></div><p>
</p>
<p>The library provides suitable functions for step 1 & 2 above so the only
thing that needs to be done in the HTML page is calling these functions at
suitable places. In principle the HTML page should have the structure shown in <a class="xref" href="ch10s06.html#ex.csim-html-ex1" title="Example 10.1. Principles of including CSIM graph in a HTML page">Example 10.1. Principles of including CSIM graph in a HTML page</a></p>
<p>
</p><div class="example"><a name="ex.csim-html-ex1"></a><p class="title"><b>Example 10.1. Principles of including CSIM graph in a HTML page</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
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code"><html>
<body>
</span><span class="hl-inlinetags"><?php</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> The name of the graph script file (change as needed!)</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$_graphfilename</span><span class="hl-code"> = </span><span class="hl-quotes">'</span><span class="hl-string">mycsimgraph.php</span><span class="hl-quotes">'</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> This is the filename of this HTML file</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-reserved">global</span><span class="hl-code"> </span><span class="hl-var">$_wrapperfilename</span><span class="hl-code">;
</span><span class="hl-var">$_wrapperfilename</span><span class="hl-code"> = </span><span class="hl-identifier">basename</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-reserved">__FILE__</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Create a random mapname used to connect the image map with the image</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$_mapname</span><span class="hl-code"> = </span><span class="hl-quotes">'</span><span class="hl-string">__mapname</span><span class="hl-quotes">'</span><span class="hl-code">.</span><span class="hl-identifier">rand</span><span class="hl-brackets">(</span><span class="hl-number">0</span><span class="hl-code">,</span><span class="hl-number">1000000</span><span class="hl-brackets">)</span><span class="hl-code">.</span><span class="hl-quotes">'</span><span class="hl-string">__</span><span class="hl-quotes">'</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> This is the actual graph script</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-var">$_graphfilename</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Get hold of the image map to include it in the HTML page</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$imgmap</span><span class="hl-code"> = </span><span class="hl-var">$graph</span><span class="hl-code">-></span><span class="hl-identifier">GetHTMLImageMap</span><span class="hl-brackets">(</span><span class="hl-var">$_mapname</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-reserved">echo</span><span class="hl-code"> </span><span class="hl-var">$imgmap</span><span class="hl-code">;
</span><span class="hl-inlinetags">?></span><span class="hl-code">
<p>Some arbitrary HTML text .... </p>
</span><span class="hl-inlinetags"><?php</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> We now create the <img> tag</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$imgtag</span><span class="hl-code"> = </span><span class="hl-var">$graph</span><span class="hl-code">-></span><span class="hl-identifier">GetCSIMImgHTML</span><span class="hl-brackets">(</span><span class="hl-var">$_mapname</span><span class="hl-code">,</span><span class="hl-var">$_graphfilename</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-reserved">echo</span><span class="hl-code"> </span><span class="hl-var">$imgtag</span><span class="hl-code">;
</span><span class="hl-inlinetags">?></span><span class="hl-code">
</body>
</html></span></pre></td></tr></table></div>
</div></div><p><br class="example-break">
</p>
<p>Before we discuss the HTML code in detail lets first show what augmentation is
needed in the graph script.</p>
<p>Normally the graph script will end with a call to either
<code class="code">Graph::Stroke()</code> or <code class="code">Graph::StrokeCSIM()</code>. However,
with CSIM style graph the complication is that we need to call the script twice.
Once to get the image map and once (in the final <img> tag) to actually
generate the image. In order to separate these two cases we make use of a URL
argument which will be used as a flag so that we know how to behave in the graph
script. In conjunction with HTML skeleton shown in <a class="xref" href="ch10s06.html#ex.csim-html-ex1" title="Example 10.1. Principles of including CSIM graph in a HTML page">Example 10.1. Principles of including CSIM graph in a HTML page</a> we need to change the graph script so that
it instead uses the method <code class="code">Graph::StrokeCSIMImage()</code> so that the
last line will be changed 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
2
3
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">...
$graph->StrokeCSIMImage();
?></span></pre></td></tr></table></div><p>
</p>
<p>This method will only stroke the image when the "secret" flag is passed as a
URL argument (which will be added automatically when the <img> tag is
constructed in the call to <code class="code">GetCSIMImgHTML()</code> . This means that the
first time this function gets called when we do the initial
<code class="code">require_once()</code> in the top of the HTML page this method will do
nothing, which is exactly what we want since we only want to include the graph
script in order to be able to do the call to <code class="code">GetHTMLImageMap()</code>
later down in the script.</p>
<p>We are now in position to discuss the HTML script above.</p>
<p>
</p><div class="variablelist"><dl><dt><span class="term">Line 1-2</span></dt><dd>
<p>This is the standard HTML opening tags (by choice we keep this
very simple and sloppy in these example.)</p>
</dd><dt><span class="term">Line 3-20</span></dt><dd>
<p>This is where we include the graph script. In addition we must
also create a map name that will be used to connect an image map
with the <span class="markup"><img></span> tag. We have chosen to create
a random name since the actual name is not significant. The only
criteria is that the name must be unique if there are multiple
maps in the same HTML page.</p>
<p>In addition we also record the name of the actual HTML page in
the variable "<code class="code">$wrapperfilename</code>". This is so we can
potentially use it as a target in the image script. We could
then have targets that redisplays the same page but with
potential additional or changed URL argument.</p>
</dd><dt><span class="term">Line 21-22</span></dt><dd>
<p>This is just an illustration that it is possible to add
arbitrary HTML markups and text on the page.</p>
</dd><dt><span class="term">Line 23-27</span></dt><dd>
<p>This is where we generate the needed <img> tag that should
be included in the page. It is illustrative to view how the
<img> tag actually looks.</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"><img src="mycsimgraph.php?_jpg_csimd=1" ismap="ismap"
usemap="#__mapname987066__" border="0" width="400" height="250" alt="" /></span></pre></td></tr></table></div><p>
</p>
<p>The name of the image is the specified graph name (which was
given as the second argument). As can bee seen a URL argument
"<code class="code">flag _jpg_csimd=2</code>" has been added. This is the
"secret" flag that instructs <code class="code">StrokeCSIMImage()</code> to
actually send back the image. The second thing to notice is the
map name. This is the random name we constructed that is used to
connect to the map we wanted to use with this image.</p>
</dd><dt><span class="term">Line 28-30</span></dt><dd>
<p>The closing HTML tags</p>
</dd></dl></div><p>
</p>
<p>What remains is to discuss how the actual CSIM targets in the graph script
should be constructed. Again there are some choices to be made on what should
happen when a user clicks on the gaph.</p>
<p>
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p>Clicking on a graph should open a "popup" window</p>
</li><li class="listitem">
<p>Clicking on a graph should open the same HTML page but with some
additional URL arguments</p>
</li><li class="listitem">
<p>Clicking on a graph should open a fresh page in the browser</p>
</li><li class="listitem">
<p>Clicking on the graph should open in an existing browser
window</p>
</li></ol></div><p>
</p>
<p>Earlier in this chapter we have shown how to handle case 1 so in the following
we will concentrate on cases 2-4. Before we start we need to discuss the third,
not yet mentioned, argument to the method <code class="code">SetCSIMTargets()</code>. To
remind ourself this method is used on the various objects in a graph that can
act as hotspots. The full signature for this method is</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">SetCSIMTargets($aURLTargets,$aAltTexts,$aWinTargets);</span></pre></td></tr></table></div><p>
</p>
<p>The first argument specifies the URLs. Depending on the actual object this is
either a string or an array of strings.</p>
<p>The second argument specified the HTML "alt" texts. In most browser this is
shown as a popup text if the mouse pointer hovers over a hotspot area.</p>
<p>The final argument specifies the URL target window (where the link should
open). Most browser recognizes a few special targets here</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p>"_blank" . This will open the URL in a new browser window</p>
</li><li class="listitem">
<p>"_top". Will break out of a frameset and display the target window
at top </p>
</li><li class="listitem">
<p>"" (empty). Will open the target in the current window</p>
</li><li class="listitem">
<p>"namedWindow". Will open the target in the named window</p>
</li></ul></div>
<p>In the discussions below we will assume that the graph is a basic barplot so
the URLs we specify are connected to each individual bar in the plot and are
specified with a call similar 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">$bplot->SetCSIMTargets($targets,$altnames,$wintargets)</span></pre></td></tr></table></div><p>
</p>
<p></p>
<p><span class="bold"><strong>Case 2: Opening the same page but with some different URL
arguments.</strong></span></p>
<p>To do this we make use of the name of the HTML wrapper file we stored in
<code class="code">$_wrapperfilename</code> . We can then construct the targets as shown
in <a class="xref" href="ch10s06.html#ex.csim-targ-same-window" title="Example 10.2. Creating CSIM URL targets to open in same browser window">Example 10.2. Creating CSIM URL targets to open in same browser window</a></p>
<p>
</p><div class="example"><a name="ex.csim-targ-same-window"></a><p class="title"><b>Example 10.2. Creating CSIM URL targets to open in same browser window</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
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags"><?php</span><span class="hl-code">
...
</span><span class="hl-reserved">global</span><span class="hl-code"> </span><span class="hl-var">$_wrapperfilename</span><span class="hl-code">;
</span><span class="hl-var">$n</span><span class="hl-code"> = .. ; </span><span class="hl-comment">//</span><span class="hl-comment"> Number of bars</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$targ</span><span class="hl-code"> = </span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">, </span><span class="hl-var">$alt</span><span class="hl-code"> = </span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">; </span><span class="hl-var">$wtarg</span><span class="hl-code"> = </span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-reserved">for</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-var">$i</span><span class="hl-code">=</span><span class="hl-number">0</span><span class="hl-code">; </span><span class="hl-var">$i</span><span class="hl-code"> < </span><span class="hl-var">$n</span><span class="hl-code">; ++</span><span class="hl-var">$i</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-var">$urlarg</span><span class="hl-code"> = </span><span class="hl-identifier">urlencode</span><span class="hl-brackets">(</span><span class="hl-code"> ... </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$targ</span><span class="hl-brackets">[</span><span class="hl-brackets">]</span><span class="hl-code"> = </span><span class="hl-var">$_wrapperfilename</span><span class="hl-code">.</span><span class="hl-quotes">'</span><span class="hl-string">?</span><span class="hl-quotes">'</span><span class="hl-code">.</span><span class="hl-var">$urlarg</span><span class="hl-code">;
</span><span class="hl-var">$alt</span><span class="hl-brackets">[</span><span class="hl-brackets">]</span><span class="hl-code"> = </span><span class="hl-quotes">'</span><span class="hl-string">val=%d</span><span class="hl-quotes">'</span><span class="hl-code">;
</span><span class="hl-var">$wtarg</span><span class="hl-brackets">[</span><span class="hl-brackets">]</span><span class="hl-code"> = </span><span class="hl-quotes">'</span><span class="hl-quotes">'</span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-var">$bplot</span><span class="hl-code">-></span><span class="hl-identifier">SetCSIMTargets</span><span class="hl-brackets">(</span><span class="hl-var">$targ</span><span class="hl-code">,</span><span class="hl-var">$alt</span><span class="hl-code">,</span><span class="hl-var">$wtarg</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>
<p>
</p><div class="caution" title="Caution" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Caution</h3>
<p>Remember to not include the "&" or the "=" used when constructing
the URL argument in the call to <code class="code">urlencode()</code>. Otherwise they
will become part of the data and not separators in the URL argument
string.</p>
</div><p>
</p>
<p><span class="bold"><strong>Case 3: Open a fresh page in the browser</strong></span></p>
<p>The following example opens the plain browser script in a fresh window. In
order to get hold of the script name we use the predefined PHP constant
<code class="code">__FILE__</code> . The target can of course be changed to any
URL.</p>
<p>
</p><div class="example"><a name="ex.csim-targ-fresh-window"></a><p class="title"><b>Example 10.3. Creating CSIM URL targets to open in a fresh window</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
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags"><?php</span><span class="hl-code">
...
</span><span class="hl-var">$n</span><span class="hl-code"> = .. ; </span><span class="hl-comment">//</span><span class="hl-comment"> Number of bars</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$targ</span><span class="hl-code"> = </span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">, </span><span class="hl-var">$alt</span><span class="hl-code"> = </span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">; </span><span class="hl-var">$wtarg</span><span class="hl-code"> = </span><span class="hl-reserved">array</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-reserved">for</span><span class="hl-brackets">(</span><span class="hl-code"> </span><span class="hl-var">$i</span><span class="hl-code">=</span><span class="hl-number">0</span><span class="hl-code">; </span><span class="hl-var">$i</span><span class="hl-code"> < </span><span class="hl-var">$n</span><span class="hl-code">; ++</span><span class="hl-var">$i</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-var">$urlarg</span><span class="hl-code"> = </span><span class="hl-identifier">urlencode</span><span class="hl-brackets">(</span><span class="hl-code"> ... </span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$targ</span><span class="hl-brackets">[</span><span class="hl-brackets">]</span><span class="hl-code"> = </span><span class="hl-reserved">__FILE__</span><span class="hl-code">.</span><span class="hl-quotes">'</span><span class="hl-string">?</span><span class="hl-quotes">'</span><span class="hl-code">.</span><span class="hl-var">$urlarg</span><span class="hl-code">;
</span><span class="hl-var">$alt</span><span class="hl-brackets">[</span><span class="hl-brackets">]</span><span class="hl-code"> = </span><span class="hl-quotes">'</span><span class="hl-string">val=%d</span><span class="hl-quotes">'</span><span class="hl-code">;
</span><span class="hl-var">$wtarg</span><span class="hl-brackets">[</span><span class="hl-brackets">]</span><span class="hl-code"> = </span><span class="hl-quotes">'</span><span class="hl-string">_blank</span><span class="hl-quotes">'</span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-var">$bplot</span><span class="hl-code">-></span><span class="hl-identifier">SetCSIMTargets</span><span class="hl-brackets">(</span><span class="hl-var">$targ</span><span class="hl-code">,</span><span class="hl-var">$alt</span><span class="hl-code">,</span><span class="hl-var">$wtarg</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>
<p><span class="bold"><strong>Case 4: Open in an existing window/frame</strong></span></p>
<p>By modifying the <code class="code">$wtarg[]</code> line in the example above 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
2
3
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-inlinetags"><?php</span><span class="hl-code">
</span><span class="hl-var">$wtarg</span><span class="hl-brackets">[</span><span class="hl-brackets">]</span><span class="hl-code"> = </span><span class="hl-quotes">'</span><span class="hl-quotes">'</span><span class="hl-code">;
</span><span class="hl-inlinetags">?></span></pre></td></tr></table></div><p>
</p>
<p>The target will open in the existing window.</p>
<p>In the "<code class="filename">Example/</code>" directory you can find the above a
fully working script as "<code class="filename">csim_in_html_ex1.php</code>" (HTML
script) and "<code class="filename">csim_in_html_graph_ex1.php</code>" (Graph
script).</p>
</div>
<div class="sect2" title="Adding multiple CSIM graphs in a HTML page"><div class="titlepage"><div><div><h3 class="title"><a name="id2536476"></a>Adding multiple CSIM graphs in a HTML page</h3></div></div></div>
<p>Having laid the foundation for inclusion of CSIM graphs in <a class="xref" href="ch10s06.html#sec2.adding-csim-in-html" title="Adding one CSIM graph in a HTML page">Adding one CSIM graph in a HTML page</a> it is now a simple exercise to
extend this to include multiple CSIM graphs in the same HTML page. The only
modifications we have to do is to make sure that:</p>
<p>
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p>Each image map has a unique name</p>
</li><li class="listitem">
<p>The graph scripts must create unique instances of the main Graph
class, i.e. they cannot both have an instance called
"<code class="code">$graph</code>"</p>
</li><li class="listitem">
<p>Include each graph script in turn and get the corresponding HTML
map</p>
</li><li class="listitem">
<p>Get the proper image tag for each graph</p>
</li></ol></div><p>
</p>
<p>In <a class="xref" href="ch10s06.html#ex.csim-html-two-graphs" title='Example 10.4. Example of HTML page that includes two Graph CSIM scripts ("Examples/csim_in_html_ex2.html")'>Example 10.4. Example of HTML page that includes two Graph CSIM scripts
("<code class="filename">Examples/csim_in_html_ex2.html</code>")</a> we show a complete HTML script that
includes two graphs, one bar (the same as in the previous example) and one Pie
graph. For illustrative purposes we use class <code class="code">PieGraphC</code> variant
which is a Pie graph with a circular middle. The result of calling this HTML
page is shown in ??</p>
<p>
</p><div class="example"><a name="ex.csim-html-two-graphs"></a><p class="title"><b>Example 10.4. Example of HTML page that includes two Graph CSIM scripts
("<code class="filename">Examples/csim_in_html_ex2.html</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
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
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code"><html>
<body>
</span><span class="hl-inlinetags"><?php</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> The names of the graph scripts</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$_graphfilename1</span><span class="hl-code"> = </span><span class="hl-quotes">'</span><span class="hl-string">csim_in_html_graph_ex1.php</span><span class="hl-quotes">'</span><span class="hl-code">;
</span><span class="hl-var">$_graphfilename2</span><span class="hl-code"> = </span><span class="hl-quotes">'</span><span class="hl-string">csim_in_html_graph_ex2.php</span><span class="hl-quotes">'</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> This is the filename of this HTML file</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-reserved">global</span><span class="hl-code"> </span><span class="hl-var">$_wrapperfilename</span><span class="hl-code">;
</span><span class="hl-var">$_wrapperfilename</span><span class="hl-code"> = </span><span class="hl-identifier">basename</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-reserved">__FILE__</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Create a random mapname used to connect the image map with the image</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$_mapname1</span><span class="hl-code"> = </span><span class="hl-quotes">'</span><span class="hl-string">__mapname</span><span class="hl-quotes">'</span><span class="hl-code">.</span><span class="hl-identifier">rand</span><span class="hl-brackets">(</span><span class="hl-number">0</span><span class="hl-code">,</span><span class="hl-number">1000000</span><span class="hl-brackets">)</span><span class="hl-code">.</span><span class="hl-quotes">'</span><span class="hl-string">__</span><span class="hl-quotes">'</span><span class="hl-code">;
</span><span class="hl-var">$_mapname2</span><span class="hl-code"> = </span><span class="hl-quotes">'</span><span class="hl-string">__mapname</span><span class="hl-quotes">'</span><span class="hl-code">.</span><span class="hl-identifier">rand</span><span class="hl-brackets">(</span><span class="hl-number">0</span><span class="hl-code">,</span><span class="hl-number">1000000</span><span class="hl-brackets">)</span><span class="hl-code">.</span><span class="hl-quotes">'</span><span class="hl-string">__</span><span class="hl-quotes">'</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> Get the graph scripts</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-var">$_graphfilename1</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-var">$_graphfilename2</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-comment">//</span><span class="hl-comment"> This line gets the image map and inserts it on the page</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$imgmap1</span><span class="hl-code"> = </span><span class="hl-var">$graph</span><span class="hl-code">-></span><span class="hl-identifier">GetHTMLImageMap</span><span class="hl-brackets">(</span><span class="hl-var">$_mapname1</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$imgmap2</span><span class="hl-code"> = </span><span class="hl-var">$piegraph</span><span class="hl-code">-></span><span class="hl-identifier">GetHTMLImageMap</span><span class="hl-brackets">(</span><span class="hl-var">$_mapname2</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-reserved">echo</span><span class="hl-code"> </span><span class="hl-var">$imgmap1</span><span class="hl-code">;
</span><span class="hl-reserved">echo</span><span class="hl-code"> </span><span class="hl-var">$imgmap2</span><span class="hl-code">;
</span><span class="hl-inlinetags">?></span><span class="hl-code">
<h2>This is an example page with CSIM graphs with arbitrary HTML text</h2>
</span><span class="hl-inlinetags"><?php</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-reserved">empty</span><span class="hl-brackets">(</span><span class="hl-var">$_GET</span><span class="hl-brackets">[</span><span class="hl-quotes">'</span><span class="hl-string">clickedon</span><span class="hl-quotes">'</span><span class="hl-brackets">]</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">echo</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string"><b style="color:darkred;">Clicked on bar: &lt;none></b></span><span class="hl-quotes">'</span><span class="hl-code">;
</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-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">echo</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string"><b style="color:darkred;">Clicked on bar: </span><span class="hl-quotes">'</span><span class="hl-code">.</span><span class="hl-var">$_GET</span><span class="hl-brackets">[</span><span class="hl-quotes">'</span><span class="hl-string">clickedon</span><span class="hl-quotes">'</span><span class="hl-brackets">]</span><span class="hl-code">.</span><span class="hl-quotes">'</span><span class="hl-string"></b></span><span class="hl-quotes">'</span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-reserved">echo</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string"><p /></span><span class="hl-quotes">'</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-reserved">empty</span><span class="hl-brackets">(</span><span class="hl-var">$_GET</span><span class="hl-brackets">[</span><span class="hl-quotes">'</span><span class="hl-string">pie_clickedon</span><span class="hl-quotes">'</span><span class="hl-brackets">]</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">echo</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string"><b style="color:darkred;">Clicked on pie slice: &lt;none></b></span><span class="hl-quotes">'</span><span class="hl-code">;
</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-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">echo</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string"><b style="color:darkred;">Clicked on pie slice: </span><span class="hl-quotes">'</span><span class="hl-code">.</span><span class="hl-var">$_GET</span><span class="hl-brackets">[</span><span class="hl-quotes">'</span><span class="hl-string">pie_clickedon</span><span class="hl-quotes">'</span><span class="hl-brackets">]</span><span class="hl-code">.</span><span class="hl-quotes">'</span><span class="hl-string"></b></span><span class="hl-quotes">'</span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-reserved">echo</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string"><p /></span><span class="hl-quotes">'</span><span class="hl-code">;
</span><span class="hl-inlinetags">?></span><span class="hl-code">
<p>First we need to get hold of the image maps and include them in the HTML
page.</p>
<p>For these graphs the maps are:</p>
</span><span class="hl-inlinetags"><?php</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> The we display the image map as well</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-reserved">echo</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string"><small><pre></span><span class="hl-quotes">'</span><span class="hl-code">.</span><span class="hl-identifier">htmlentities</span><span class="hl-brackets">(</span><span class="hl-var">$imgmap1</span><span class="hl-brackets">)</span><span class="hl-code">.</span><span class="hl-quotes">'</span><span class="hl-string"></pre></small></span><span class="hl-quotes">'</span><span class="hl-code">;
</span><span class="hl-inlinetags">?></span><span class="hl-code">
<p>
and
</p>
</span><span class="hl-inlinetags"><?php</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> The we display the image map as well</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-reserved">echo</span><span class="hl-code"> </span><span class="hl-quotes">'</span><span class="hl-string"><small><pre></span><span class="hl-quotes">'</span><span class="hl-code">.</span><span class="hl-identifier">htmlentities</span><span class="hl-brackets">(</span><span class="hl-var">$imgmap2</span><span class="hl-brackets">)</span><span class="hl-code">.</span><span class="hl-quotes">'</span><span class="hl-string"></pre></small></span><span class="hl-quotes">'</span><span class="hl-code">;
</span><span class="hl-inlinetags">?></span><span class="hl-code">
</span><span class="hl-inlinetags"><?php</span><span class="hl-code">
</span><span class="hl-comment">//</span><span class="hl-comment"> Construct the <img> tags for Figure 1 &amp; 2 and rebuild the URL arguments</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-var">$imgtag1</span><span class="hl-code"> = </span><span class="hl-var">$graph</span><span class="hl-code">-></span><span class="hl-identifier">GetCSIMImgHTML</span><span class="hl-brackets">(</span><span class="hl-var">$_mapname1</span><span class="hl-code">,</span><span class="hl-var">$_graphfilename1</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-var">$imgtag2</span><span class="hl-code"> = </span><span class="hl-var">$piegraph</span><span class="hl-code">-></span><span class="hl-identifier">GetCSIMImgHTML</span><span class="hl-brackets">(</span><span class="hl-var">$_mapname2</span><span class="hl-code">,</span><span class="hl-var">$_graphfilename2</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?></span><span class="hl-code">
<p>The graphs are then displayed as shown in figure 1 &amp; 2. With the following
created &lt;img> tags:</p>
<small><pre>
</span><span class="hl-inlinetags"><?php</span><span class="hl-code">
</span><span class="hl-reserved">echo</span><span class="hl-code"> </span><span class="hl-identifier">htmlentities</span><span class="hl-brackets">(</span><span class="hl-var">$imgtag1</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-reserved">echo</span><span class="hl-code"> </span><span class="hl-identifier">htmlentities</span><span class="hl-brackets">(</span><span class="hl-var">$imgtag2</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-inlinetags">?></span><span class="hl-code">
</pre></small>
<p>
Note: For the Pie the center is counted as the first slice.
</p>
<p>
<table border=0>
<tr><td valign="bottom">
</span><span class="hl-inlinetags"><?php</span><span class="hl-code">
</span><span class="hl-reserved">echo</span><span class="hl-code"> </span><span class="hl-var">$imgtag1</span><span class="hl-code">;
</span><span class="hl-inlinetags">?></span><span class="hl-code">
<br><b>Figure 1. </b>The included Bar CSIM graph.
</p>
</td>
<td valign="bottom">
</span><span class="hl-inlinetags"><?php</span><span class="hl-code">
</span><span class="hl-reserved">echo</span><span class="hl-code"> </span><span class="hl-var">$imgtag2</span><span class="hl-code">;
</span><span class="hl-inlinetags">?></span><span class="hl-code">
<br><b>Figure 2. </b>The included Pie CSIM graph.
</p>
</td>
</tr>
</table>
</body>
</html></span></pre></td></tr></table></div>
</div></div><p><br class="example-break">
</p>
<p>
</p><div class="figure"><a name="id2537145"></a><p class="title"><b>Figure 10.2. Browser window after calling HTML page in <a class="xref" href="ch10s06.html#ex.csim-html-two-graphs" title='Example 10.4. Example of HTML page that includes two Graph CSIM scripts ("Examples/csim_in_html_ex2.html")'>Example 10.4. Example of HTML page that includes two Graph CSIM scripts
("<code class="filename">Examples/csim_in_html_ex2.html</code>")</a> (Note: The image has been
scaled down to better fit this manual.)</b></p><div class="figure-contents">
<div class="mediaobject"><img src="images/csim-html-example-page.png" alt="Browser window after calling HTML page in (Note: The image has been scaled down to better fit this manual.)"></div>
</div></div><p><br class="figure-break">
</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="ch10.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>