<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Using StrokeCSIM()</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">Using StrokeCSIM()</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="Using StrokeCSIM()"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="id2536011"></a>Using StrokeCSIM()</h2></div></div></div>
<p>The simplest way of creating a creating a CSIM image is with the
<code class="code">StrokeCSIM()</code> method. As mentioned before this method actually
returns a (small) HTML page containing both the image-tag as well as the image map
specification. Hence it is not possible to use a script that ends with this method
in a standard image-tags src property.</p>
<p>There are two ways to create CSIM (or get hold of) the image maps</p>
<div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p>Use the CSIM image script as the target in a standard anchor reference,
for example </p>
<p>
</p><pre class="screen"><a href="mycsimscript.html"> </pre><p>
</p>
<p>This has the drawback that the image page will only contain the image and
nothing else.</p>
</li><li class="listitem">
<p>The other way will allow the image script to be included in an arbitrary
HTML page by just including the image script at the wanted place in the HTML
page using any of the standard "include" php statement. For example </p>
<p>
</p><pre class="screen"><h2> This is an CSIM image </h2>
<?php include "mycsimscript.php" ?></pre><p>
</p>
</li></ol></div>
<p>Note: If there are several CSIM images on the same page it is necessary to use
"include_once" in the scripts for the inclusion of
"<code class="filename">jpgraph.php</code>" and the other jpgraph library files since the
files will be included multiple times on the same page and one or more "<span class="italic">Already defined error</span>" will be displayed.</p>
<p>The process to replace <code class="code">Stroke()</code> with <code class="code">StrokeCSIM()</code> is
strait forward. Replace all existing calls to <code class="code">Stroke()</code> with the
equivalent calls to <code class="code">StrokeCSIM()</code>.</p>
<div class="sect2" title="Optional argument to StrokeCSIM()"><div class="titlepage"><div><div><h3 class="title"><a name="id2536113"></a>Optional argument to StrokeCSIM()</h3></div></div></div>
<p>Once difference compared with Stroke() is that if a filename is supplied to
the <code class="code">StrokeCSIM()</code> method it does not specify a file to write an
image to as is the case with Stroke(). The signature for the method is</p>
<p>
</p><pre class="screen">StrokeCSIM($aScriptName='auto', $aCSIMName='', $aBorder=0)</pre><p>
</p>
<p>The first (optional) argument is the name of the actual image script file
including the extension. So for example if the image script is called
"<code class="filename">mycsimscript.php</code>" the call should be </p>
<p>
</p><pre class="screen"> $graph -> StrokeCSIM ( 'mycsimscript.php' ) </pre><p>
</p>
<p>By using the predefined name 'auto'. This will be done automatically.</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>Why does the script name need to be used as the first parameter? The
reason is that in the creation of the HTML page which is sent back we
need to refer to the script in the image tag. In older versions of PHP
there where no 100% way of getting hold of the actual script name in all
circumstances and it was then necessary to specify it here. In PHP5 (and
newer version of PHP4) this is no longer a problem but this parameter is
still kept for backward compatibility.</p>
</div><p>
</p>
<p>The other arguments to <code class="code">StrokeCSIM()</code> are optional as well. The
second argument specifies the id that connect the map with the corresponding
image. Please note that if several CSIM images are used in the same HTML page it
is necessary to specify the image map name as the second parameter since all
image maps must be unique to properly match each image map against each image.
Please consult the class reference <code class="code">StrokeCSIM()</code> for more
details.</p>
<p>The final argument specifies whether the image should have border or
not.</p>
</div>
<div class="sect2" title="How does StrokeCSIM() work?"><div class="titlepage"><div><div><h3 class="title"><a name="id2536192"></a>How does StrokeCSIM() work?</h3></div></div></div>
<p>Knowledge of the exact technical details of the way <code class="code">StrokeCSIM()</code>
works is probably not needed by many people but for completeness we outline
those details in this short section.</p>
<p>The fundamental issue we have to solve is that we must be able to call the
image script in two modes. When the user includes the image script the
<code class="code">StrokeCSIM()</code> method should return the HTML page but when the
image script is later called directly in the image tag it must not return an
HTML page but rather the actual image.</p>
<p>The way this is solved is by using one <code class="code">GET</code> argument which is
passed on automatically when we use the image script name in the
<span class="markup"><img></span>-tag.</p>
<p>A look at the generated HTML from StrokeCSIM() will make this clear. In <a class="xref" href="ch10s04.html#fig.generated-csim-html-code" title="Figure 10.1. Example of generated HTML code for StrokeCSIM()">Figure 10.1. Example of generated HTML code for StrokeCSIM()</a> the resulting HTML code after
running the example script <code class="filename">bar_csimex1.php</code> is shown. The
argument to the src-property of the image tag is not simply the script name but
the script name with a additional argument, <code class="code">?_jpg_csimd=1</code>. This
argument is passed on to the library which then will run the script again but
this time only generate the image and not the HTML. (In the JpGraph internal
code this pre-defined argument is checked for and if it exists the image is send
back and not the HTML page.)</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>The actual string name of this parameter is defined by a
<code class="code">DEFINE</code> statement in JpGraph,
<code class="code">_CSIM_DISPLAY</code>.</p>
</div><p>
</p>
<p>
</p><div class="figure"><a name="fig.generated-csim-html-code"></a><p class="title"><b>Figure 10.1. Example of generated HTML code for StrokeCSIM()</b></p><div class="figure-contents">
<pre class="screen"><map name="__mapname1828__" id="__mapname1828__" >
<area shape="poly" coords="74, 210, 74, 165, 92, 165, 92, 210" href="bar_clsmex1.php#1" title="val=12" alt="val=12" />
<area shape="poly" coords="118, 210, 118, 112, 136, 112, 136, 210" href="bar_clsmex1.php#2" title="val=26" alt="val=26" />
<area shape="poly" coords="162, 210, 162, 176, 180, 176, 180, 210" href="bar_clsmex1.php#3" title="val=9" alt="val=9" />
<area shape="poly" coords="206, 210, 206, 146, 224, 146, 224, 210" href="bar_clsmex1.php#4" title="val=17" alt="val=17" />
<area shape="poly" coords="250, 210, 250, 93, 268, 93, 268, 210" href="bar_clsmex1.php#5" title="val=31" alt="val=31" />
</map>
<img src="bar_csimex1.php?_jpg_csimd=1" ismap="ismap" usemap="#__mapname1828__" border="0" width="310" height="250" alt="" />
</pre>
</div></div><p><br class="figure-break">
</p>
<p>
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>As the astute reader has come to realize CSIM scripts has a
performance impact in that each script has to be run twice. Once to get
hold of all the coordinates and generate the image and a second time via
the <img> tag in generated HTML. The library is intelligent enough to
minimize the code to run so that it only runs what is absolutely
necessary. This means that roughly 75% has to be run which yields a
total overhead of around 1.75 times when generating a CSIM image.</p>
</div><p>
</p>
</div>
<div class="sect2" title="Image maps and the cache system"><div class="titlepage"><div><div><h3 class="title"><a name="id2536305"></a>Image maps and the cache system</h3></div></div></div>
<p>For version 1.9 and later the cache system has been extended to include the
CSIM maps as well. For each CSIM graph two files are stored in the cache, the
image file itself as well as the wrapper HTML with the actual image map. </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>