5.44. Example - Image Map from Bar Chart

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)

Image Map from Bar Chart Example
# 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:
# Disable automatic output of the image by DrawGraph():
# Set up the rest of the plot:
$plot->SetTitle("PHPlot Example: Bar Chart with Image Map");
# 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:

# Now output the HTML page, with image map and embedded image:
?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<title>PHPlot Example: Bar Chart with Image Map</title>
<h1>PHPlot Example: Bar Chart with Image Map</h1>
<map name="map1">
<?php echo $image_map; ?>
<p>This is a plot with image map and tooltip text.</p>
<img src="<?php echo $plot->EncodeImage();?>" alt="Plot Image" usemap="#map1">

SourceForge.net Logo

This version of the manual was produced for the PHPlot Sourceforge project web service site, which requires the logo on each page.

To download a logo-free copy of the manual, see the PHPlot project downloads area.