Title for Bar val=12 val=26 val=9 val=17 val=31 val=%d val=20 val=31 val=27 val=25 val=28 val=50

This is an example page with CSIM graphs with arbitrary HTML text

Clicked on bar: <none>

Clicked on pie slice: <none>

First we need to get hold of the image maps and include them in the HTML page.

For these graphs the maps are:

<map name="__mapname660197__" id="__mapname660197__" >
<area shape="poly" coords="135,18,135,5,268,5,268,18" href="#45"  alt="Title for Bar"  title="Title for Bar"  target="_blank"  />
<area shape="poly" coords="67, 210, 67, 146, 89, 146, 89, 210"  href="csim_in_html_ex2.php?clickedon=1" title="val=12" alt="val=12"  />
<area shape="poly" coords="121, 210, 121, 71, 143, 71, 143, 210"  href="csim_in_html_ex2.php?clickedon=2" title="val=26" alt="val=26"  />
<area shape="poly" coords="175, 210, 175, 162, 197, 162, 197, 210"  href="csim_in_html_ex2.php?clickedon=3" title="val=9" alt="val=9"  />
<area shape="poly" coords="229, 210, 229, 119, 251, 119, 251, 210"  href="csim_in_html_ex2.php?clickedon=4" title="val=17" alt="val=17"  />
<area shape="poly" coords="283, 210, 283, 44, 305, 44, 305, 210"  href="csim_in_html_ex2.php?clickedon=5" title="val=31" alt="val=31"  />
</map>

and 

<map name="__mapname784501__" id="__mapname784501__" >
<area shape="circle" coords="400,320,102" href="csim_in_html_ex2.php?pie_clickedon=1" title="val=%d" alt="val=%d"  />
<area shape="poly" coords="253, 197, 260, 187, 264, 174, 265, 165, 316, 165, 312, 190, 303, 214, 292, 230, 253, 197" href="csim_in_html_ex2.php?pie_clickedon=7" title="val=20"  alt="val=20"  />
<area shape="poly" coords="194, 224, 207, 225, 220, 222, 231, 217, 241, 209, 244, 206, 283, 239, 264, 256, 242, 269, 217, 275, 192, 275, 184, 274, 194, 224" href="csim_in_html_ex2.php?pie_clickedon=6" title="val=31"  alt="val=31"  />
<area shape="poly" coords="144, 193, 151, 203, 160, 212, 171, 219, 180, 221, 170, 271, 146, 263, 125, 249, 107, 231, 98, 214, 144, 193" href="csim_in_html_ex2.php?pie_clickedon=5" title="val=27"  alt="val=27"  />
<area shape="poly" coords="138, 138, 134, 150, 134, 163, 136, 175, 138, 181, 92, 202, 84, 178, 83, 153, 88, 128, 92, 117, 138, 138" href="csim_in_html_ex2.php?pie_clickedon=4" title="val=25"  alt="val=25"  />
<area shape="poly" coords="182, 97, 170, 101, 159, 107, 150, 116, 144, 126, 98, 105, 111, 83, 130, 66, 152, 53, 174, 47, 182, 97" href="csim_in_html_ex2.php?pie_clickedon=3" title="val=28"  alt="val=28"  />
<area shape="poly" coords="260, 148, 259, 135, 254, 124, 247, 113, 237, 105, 225, 100, 213, 97, 201, 98, 192, 47, 218, 46, 243, 52, 266, 63, 285, 80, 299, 100, 308, 124, 311, 148, 260, 148" href="csim_in_html_ex2.php?pie_clickedon=2" title="val=50"  alt="val=50"  />
</map>

The graphs are then displayed as shown in figure 1 & 2. With the following created <img> tags:

<img src="csim_in_html_graph_ex1.php?_jpg_csimd=1" ismap="ismap" usemap="#__mapname660197__" height="250" alt="" />
<img src="csim_in_html_graph_ex2.php?_jpg_csimd=1" ismap="ismap" usemap="#__mapname784501__" height="320" alt="" />

Note: For the Pie the center is counted as the first slice.


Figure 1. The included Bar CSIM graph.


Figure 2. The included Pie CSIM graph.