| 98 |
- |
1 |
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
|
|
|
2 |
<!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>
|
|
|
3 |
This example produces an HTML page with an embedded image containing a bar
|
|
|
4 |
chart, and an image map. The image map makes the bars in the bar chart into
|
|
|
5 |
hotlinks. In this example, tool-tip float-over text identifies the bars and
|
|
|
6 |
groups, and clicking on a bar displays the same text in an alert popup.
|
|
|
7 |
These looks could be used instead to link to another web page, display data
|
|
|
8 |
in a popup window, etc.
|
|
|
9 |
</p><p>
|
|
|
10 |
See <a class="xref" href="adv-imgmap.html" title="4.10. Image Maps for Plot Data">Section 4.10, “Image Maps for Plot Data”</a> for more information on image maps.
|
|
|
11 |
This capability was added in PHPlot-5.7.0.
|
|
|
12 |
See <a class="xref" href="EncodeImage.html" title="EncodeImage"><span class="refentrytitle">EncodeImage</span></a> for more on embedding plot images within
|
|
|
13 |
an HTML page.
|
|
|
14 |
</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"><?php
|
|
|
15 |
# PHPlot example: Bar chart, embedded image with image map
|
|
|
16 |
require_once 'phplot.php';
|
|
|
17 |
|
|
|
18 |
# This global string accumulates the image map AREA tags.
|
|
|
19 |
$image_map = "";
|
|
|
20 |
|
|
|
21 |
# Data for bar chart:
|
|
|
22 |
$data = array(
|
|
|
23 |
array('1950', 40, 95, 20),
|
|
|
24 |
array('1960', 45, 85, 30),
|
|
|
25 |
array('1970', 50, 80, 40),
|
|
|
26 |
array('1980', 48, 77, 50),
|
|
|
27 |
array('1990', 38, 72, 60),
|
|
|
28 |
array('2000', 35, 68, 70),
|
|
|
29 |
array('2010', 30, 67, 80),
|
|
|
30 |
);
|
|
|
31 |
|
|
|
32 |
# Callback for 'data_points': Generate 1 <area> line in the image map:
|
|
|
33 |
function store_map($im, $passthru, $shape, $row, $col, $x1, $y1, $x2, $y2)
|
|
|
34 |
{
|
|
|
35 |
global $image_map;
|
|
|
36 |
|
|
|
37 |
# Title, also tool-tip text:
|
|
|
38 |
$title = "Group $row, Bar $col";
|
|
|
39 |
# Required alt-text:
|
|
|
40 |
$alt = "Region for group $row, bar $col";
|
|
|
41 |
# Link URL, for demonstration only:
|
|
|
42 |
$href = "javascript:alert('($row, $col)')";
|
|
|
43 |
# Convert coordinates to integers:
|
|
|
44 |
$coords = sprintf("%d,%d,%d,%d", $x1, $y1, $x2, $y2);
|
|
|
45 |
# Append the record for this data point shape to the image map string:
|
|
|
46 |
$image_map .= " <area shape=\"rect\" coords=\"$coords\""
|
|
|
47 |
. " title=\"$title\" alt=\"$alt\" href=\"$href\">\n";
|
|
|
48 |
}
|
|
|
49 |
|
|
|
50 |
# Create and configure the PHPlot object.
|
|
|
51 |
$plot = new PHPlot(640, 480);
|
|
|
52 |
# Disable error images, since this script produces HTML:
|
|
|
53 |
$plot->SetFailureImage(False);
|
|
|
54 |
# Disable automatic output of the image by DrawGraph():
|
|
|
55 |
$plot->SetPrintImage(False);
|
|
|
56 |
# Set up the rest of the plot:
|
|
|
57 |
$plot->SetTitle("PHPlot Example: Bar Chart with Image Map");
|
|
|
58 |
$plot->SetImageBorderType('plain');
|
|
|
59 |
$plot->SetDataValues($data);
|
|
|
60 |
$plot->SetDataType('text-data');
|
|
|
61 |
$plot->SetPlotType('bars');
|
|
|
62 |
$plot->SetXTickPos('none');
|
|
|
63 |
# Set the data_points callback which will generate the image map.
|
|
|
64 |
$plot->SetCallback('data_points', 'store_map');
|
|
|
65 |
$plot->SetPlotAreaWorld(NULL, 0, NULL, 100);
|
|
|
66 |
# Produce the graph; this also creates the image map via callback:
|
|
|
67 |
$plot->DrawGraph();
|
|
|
68 |
|
|
|
69 |
# Now output the HTML page, with image map and embedded image:
|
|
|
70 |
?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
|
71 |
"http://www.w3.org/TR/html4/loose.dtd">
|
|
|
72 |
<html>
|
|
|
73 |
<head>
|
|
|
74 |
<title>PHPlot Example: Bar Chart with Image Map</title>
|
|
|
75 |
</head>
|
|
|
76 |
<body>
|
|
|
77 |
<h1>PHPlot Example: Bar Chart with Image Map</h1>
|
|
|
78 |
<map name="map1">
|
|
|
79 |
<?php echo $image_map; ?>
|
|
|
80 |
</map>
|
|
|
81 |
<p>This is a plot with image map and tooltip text.</p>
|
|
|
82 |
<img src="<?php echo $plot->EncodeImage();?>" alt="Plot Image" usemap="#map1">
|
|
|
83 |
</body>
|
|
|
84 |
</html>
|
|
|
85 |
</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>
|