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.46. Example - Image Map and Non-embedded Plot Image</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-imagemap-pie.html" title="5.45. Example - Image Map from Pie Chart" /><link rel="next" href="ex-pieangle.html" title="5.47. Example - Pie Chart Start Angle and Direction" /></head><body><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">5.46. Example - Image Map and Non-embedded Plot Image</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="ex-imagemap-pie.html">Prev</a> </td><th width="60%" align="center">Chapter 5. PHPlot Examples</th><td width="20%" align="right"> <a accesskey="n" href="ex-pieangle.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-nonembed"></a>5.46. Example - Image Map and Non-embedded Plot Image</h2></div></div></div><p>
This the complete example described in <a class="xref" href="adv-imgmap.html#adv-imgmap-nonembed" title="4.10.4. Image Maps with Non-embedded Image Data">Section 4.10.4, &#8220;Image Maps with Non-embedded Image Data&#8221;</a>.
It shows that image maps can also be produced when using PHPlot without
using embedded ("data-URL") images. The down-side is that the script must
run and process the plot data twice - once to create the HTML page with the
image map, and once to create the plot image.
</p><div class="example"><a id="example-imagemap-nonembed"></a><p class="title"><strong>Example 5.46. Image Map and Non-embedded Plot Image (Browser screenshot)</strong></p><div class="example-contents"><div class="informalfigure"><div class="mediaobject"><img src="images/imagemap-nonembed.png" alt="Image Map and Non-embedded Plot Image Example" /></div></div><pre class="programlisting">&lt;?php
# $Id: imagemapnonembed.php 1560 2013-03-27 20:22:36Z lbayuk $
# PHPlot example: Image Map and Non-embedded Plot Image
# This scripts creates a PHPlot plot image and an image map, without using
# embedded (data-url) images. The down-side is that this script has to 
# run twice, and generate the plot twice: once for the HTML wrapper page
# with image map, and once to create the actual image.
# This takes a 'mode' CGI parameter (HTTP GET) and generates a plot
# if mode=plot, and an HTML page and image map otherwise.
# Note: The image map links just produce popup (Javascript alert) messages,
# for demonstration purposes.
require_once 'phplot.php';

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

# Data for bar chart:
$data = array(
    array('1980', 13, 21,  8, 24, 10, 19),
    array('1990', 14, 19,  6, 26, 11, 13),
    array('2000', 11, 13,  8, 15,  9, 11),
    array('2010', 13, 16,  9, 21, 12, 13),
);
$legend = array('US', 'AL', 'CT', 'MS', 'PA', 'SD');

# Produce an image if the URL has mode=plot, and an HTML page otherwise:
$do_html = empty($_GET['mode']) || $_GET['mode'] != 'plot';

# Callback for 'data_points' : Generate 1 line in the image map.
function store_map($im, $data, $shape, $row, $col, $x1, $y1, $x2, $y2)
{
  global $image_map;
  if ($shape != 'rect') die("Error expecting rect shapes from plot\n");
  # Get the data point value. (Offset column by 1 to skip label)
  $value = $data[$row][$col+1];
  # See top note: URL for demonstration purposes.
  $message = "Data value: $value";
  $url = "javascript:alert('$message')";
  # Convert coords to integers:
  $coords = sprintf("%d,%d,%d,%d", $x1, $y1, $x2, $y2);
  # Area alt text (required attribute):
  $alt = "Region for Group $row bar $col";
  # Area title text, which is displayed as the tool-tip:
  $title = "Group $row bar $col";

  # Append one line to the image map:
  $image_map .= "  &lt;area shape=\"rect\" coords=\"$coords\""
             .  " title=\"$title\" alt=\"$alt\" href=\"$url\"&gt;\n";
}

# Produce an HTML page which includes the image map and the reference
# to the plot image. The plot image is generated by this same script,
# with a mode=plot URL parameter.
function generate_html()
{
    global $image_map;

    # Self-referencing URL for &lt;img&gt;, with additional mode=plot parameter.
    # If the URL already has parameters, use &amp; separator, else ?.
    $sep = empty($_SERVER['QUERY_STRING']) ? '?' : '&amp;';
    $url = htmlspecialchars($_SERVER['REQUEST_URI'] . $sep .  'mode=plot');

    echo &lt;&lt;&lt;END
&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 - Image Map and Non-embedded Plot Image&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;PHPlot Example: Bar Chart with image map, non-embedded&lt;/h1&gt;
&lt;p&gt;
This example uses a single PHP script to generate both a container HTML page
with image map, and the plot image itself. The image map is used to
produce tool-tip text for the plot image. The script is called twice.
&lt;/p&gt;
&lt;map name="map1"&gt;
$image_map
&lt;/map&gt;
&lt;p&gt;
If you are viewing this image 'live', via a web server, you can float your
cursor over a bar to see the tooltip text, and click to get an alert popup
containing the data value. (This will not work if you are viewing the
example in the reference manual.)
&lt;/p&gt;
&lt;img src="$url" alt="Plot image" usemap="#map1"&gt;
&lt;/body&gt;
&lt;/html&gt;

END;
}


$plot = new PHPlot(640, 480);
if ($do_html) {
    # When producing HTML, don't output the plot image:
    $plot-&gt;SetPrintImage(False);
    # Just to make it clear, this script usage returns HTML:
    header("Content-type: text/html");
    # The image map callback is only needed when doing the HTML page.
    # Pass the data array so the callback can fetch values from it.
    $plot-&gt;SetCallback('data_points', 'store_map', $data);
}
$plot-&gt;SetTitle("PHPlot Example: Image Map and Non-embedded Plot");
$plot-&gt;SetImageBorderType('plain');
$plot-&gt;SetDataValues($data);
$plot-&gt;SetDataType('text-data');
$plot-&gt;SetPlotType('bars');
$plot-&gt;SetXTickPos('none');
$plot-&gt;SetPlotAreaWorld(NULL, 0, NULL, 30);
$plot-&gt;SetLegend($legend);
$plot-&gt;DrawGraph();
if ($do_html) generate_html();
</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-imagemap-pie.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-pieangle.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">5.45. Example - Image Map from Pie Chart </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> 5.47. Example - Pie Chart Start Angle and Direction</td></tr></table></div></body></html>