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.
See Section 4.10, “Image Maps for Plot Data” for more information on image maps. This capability was added in PHPlot-5.7.0. See EncodeImage for more on embedding plot images within an HTML page.
Example 5.44. Image Map from Bar Chart (Browser screenshot)
<?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 <area> 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 .= " <area shape=\"rect\" coords=\"$coords\""
. " title=\"$title\" alt=\"$alt\" href=\"$href\">\n";
}
# Create and configure the PHPlot object.
$plot = new PHPlot(640, 480);
# Disable error images, since this script produces HTML:
$plot->SetFailureImage(False);
# Disable automatic output of the image by DrawGraph():
$plot->SetPrintImage(False);
# Set up the rest of the plot:
$plot->SetTitle("PHPlot Example: Bar Chart with Image Map");
$plot->SetImageBorderType('plain');
$plot->SetDataValues($data);
$plot->SetDataType('text-data');
$plot->SetPlotType('bars');
$plot->SetXTickPos('none');
# Set the data_points callback which will generate the image map.
$plot->SetCallback('data_points', 'store_map');
$plot->SetPlotAreaWorld(NULL, 0, NULL, 100);
# Produce the graph; this also creates the image map via callback:
$plot->DrawGraph();
# Now output the HTML page, with image map and embedded image:
?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>PHPlot Example: Bar Chart with Image Map</title>
</head>
<body>
<h1>PHPlot Example: Bar Chart with Image Map</h1>
<map name="map1">
<?php echo $image_map; ?>
</map>
<p>This is a plot with image map and tooltip text.</p>
<img src="<?php echo $plot->EncodeImage();?>" alt="Plot Image" usemap="#map1">
</body>
</html>