Subversion Repositories cheapmusic

Rev

Blame | Last modification | View Log | RSS feed 

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><title>5.44. Example - Image Map from Bar Chart</title><link rel="stylesheet" type="text/css" href="phplotdoc.css" /><meta name="generator" content="DocBook XSL Stylesheets V1.78.1" /><link rel="home" href="index.html" title="PHPlot Reference Manual" /><link rel="up" href="examples.html" title="Chapter 5. PHPlot Examples" /><link rel="prev" href="ex-dlexformat.html" title="5.43. Example - Custom Data Value Label Formatting" /><link rel="next" href="ex-imagemap-pie.html" title="5.45. Example - Image Map from Pie Chart" /></head><body><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">5.44. Example - Image Map from Bar Chart</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="ex-dlexformat.html">Prev</a> </td><th width="60%" align="center">Chapter 5. PHPlot Examples</th><td width="20%" align="right"> <a accesskey="n" href="ex-imagemap-pie.html">Next</a></td></tr></table><hr /></div><div class="sect1"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a id="ex-imagemap-bars"></a>5.44. Example - Image Map from Bar Chart</h2></div></div></div><p>
This example produces an HTML page with an embedded image containing a bar
chart, and an image map.  The image map makes the bars in the bar chart into
hotlinks. In this example, tool-tip float-over text identifies the bars and
groups, and clicking on a bar displays the same text in an alert popup.
These looks could be used instead to link to another web page, display data
in a popup window, etc.
</p><p>
See <a class="xref" href="adv-imgmap.html" title="4.10. Image Maps for Plot Data">Section 4.10, &#8220;Image Maps for Plot Data&#8221;</a> for more information on image maps.
This capability was added in PHPlot-5.7.0.
See <a class="xref" href="EncodeImage.html" title="EncodeImage"><span class="refentrytitle">EncodeImage</span></a> for more on embedding plot images within
an HTML page.
</p><div class="example"><a id="example-imagemap-bars"></a><p class="title"><strong>Example 5.44. Image Map from Bar Chart (Browser screenshot)</strong></p><div class="example-contents"><div class="informalfigure"><div class="mediaobject"><img src="images/imagemap-bars.png" alt="Image Map from Bar Chart Example" /></div></div><pre class="programlisting">&lt;?php
# PHPlot example: Bar chart, embedded image with image map
require_once 'phplot.php';

# This global string accumulates the image map AREA tags.
$image_map = "";

# Data for bar chart:
$data = array(
    array('1950', 40, 95, 20),
    array('1960', 45, 85, 30),
    array('1970', 50, 80, 40),
    array('1980', 48, 77, 50),
    array('1990', 38, 72, 60),
    array('2000', 35, 68, 70),
    array('2010', 30, 67, 80),
);

# Callback for 'data_points': Generate 1 &lt;area&gt; line in the image map:
function store_map($im, $passthru, $shape, $row, $col, $x1, $y1, $x2, $y2)
{
    global $image_map;

    # Title, also tool-tip text:
    $title = "Group $row, Bar $col";
    # Required alt-text:
    $alt = "Region for group $row, bar $col";
    # Link URL, for demonstration only:
    $href = "javascript:alert('($row, $col)')";
    # Convert coordinates to integers:
    $coords = sprintf("%d,%d,%d,%d", $x1, $y1, $x2, $y2);
    # Append the record for this data point shape to the image map string:
    $image_map .= "  &lt;area shape=\"rect\" coords=\"$coords\""
               .  " title=\"$title\" alt=\"$alt\" href=\"$href\"&gt;\n";
}

# Create and configure the PHPlot object.
$plot = new PHPlot(640, 480);
# Disable error images, since this script produces HTML:
$plot-&gt;SetFailureImage(False);
# Disable automatic output of the image by DrawGraph():
$plot-&gt;SetPrintImage(False);
# Set up the rest of the plot:
$plot-&gt;SetTitle("PHPlot Example: Bar Chart with Image Map");
$plot-&gt;SetImageBorderType('plain');
$plot-&gt;SetDataValues($data);
$plot-&gt;SetDataType('text-data');
$plot-&gt;SetPlotType('bars');
$plot-&gt;SetXTickPos('none');
# Set the data_points callback which will generate the image map.
$plot-&gt;SetCallback('data_points', 'store_map');
$plot-&gt;SetPlotAreaWorld(NULL, 0, NULL, 100);
# Produce the graph; this also creates the image map via callback:
$plot-&gt;DrawGraph();

# Now output the HTML page, with image map and embedded image:
?&gt;&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;PHPlot Example: Bar Chart with Image Map&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;PHPlot Example: Bar Chart with Image Map&lt;/h1&gt;
&lt;map name="map1"&gt;
&lt;?php echo $image_map; ?&gt;
&lt;/map&gt;
&lt;p&gt;This is a plot with image map and tooltip text.&lt;/p&gt;
&lt;img src="&lt;?php echo $plot-&gt;EncodeImage();?&gt;" alt="Plot Image" usemap="#map1"&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre></div></div><br class="example-break" /></div><div class="navfooter"><hr /><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="ex-dlexformat.html">Prev</a> </td><td width="20%" align="center"><a accesskey="u" href="examples.html">Up</a></td><td width="40%" align="right"> <a accesskey="n" href="ex-imagemap-pie.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">5.43. Example - Custom Data Value Label Formatting </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> 5.45. Example - Image Map from Pie Chart</td></tr></table></div></body></html>