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.45. Example - Image Map from Pie 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-imagemap-bars.html" title="5.44. Example - Image Map from Bar Chart" /><link rel="next" href="ex-imagemap-nonembed.html" title="5.46. Example - Image Map and Non-embedded Plot Image" /></head><body><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">5.45. Example - Image Map from Pie Chart</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="ex-imagemap-bars.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-nonembed.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-pie"></a>5.45. Example - Image Map from Pie Chart</h2></div></div></div><p>This example produces an HTML page with an embedded image containing a piechart, and an image map. The image map makes the pie sectors in the chartinto hotlinks. In this example, tool-tip text identifies the segmentnumber and its numeric value, and clicking on a pie segment displays thesame text in an alert popup. These looks could be used instead to link toanother web page, display data in a popup window, etc.</p><p>This example also shows getting access to the data values. Thecallback handler accesses the data array to get the current segment valueand uses that in the tool-tip text and alert box. This is dependent on thedata type of the array, and the code shown here only works with data typetext-data-single.</p><p>Unlike the <a class="link" href="ex-imagemap-bars.html" title="5.44. Example - Image Map from Bar Chart">previous example</a> with abar chart, in this example the callback function needs to do some moresignificant calculations in order to produce the image map areas. This isbecause HTML image maps do not directly support any area shape whichcorresponds to a pie chart segment.Therefore the callback function approximates each pie chart segment with apolygon. This is explained in the code shown below.</p><p>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.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 withinan HTML page.</p><div class="example"><a id="example-imagemap-pie"></a><p class="title"><strong>Example 5.45. Image Map from Pie Chart (Browser screenshot)</strong></p><div class="example-contents"><div class="informalfigure"><div class="mediaobject"><img src="images/imagemap-pie.png" alt="Image Map from Pie Chart Example" /></div></div><pre class="programlisting"><?php# PHPlot example: Pie chart, embedded image with image maprequire_once 'phplot.php';# This global string accumulates the image map AREA tags.$image_map = "";# Data for pie chart:$data = array(array('', 20),array('', 30),array('', 10),array('', 40),array('', 10),);/*Callback handler for generating an image map for a pie chart.NOTE: The code in this function is excluded from the license terms forPHPlot, the PHPlot Reference Manual, and the PHPlot Test Suite. You mayfreely copy, use, modify, and redistribute the code in this function.Attribution is not necessary. Or, to put it another way, I am placingthis function in the public domain.Arguments:$im, $passthru : standard arguments for all callbacks.$shape : always 'pie'$segment : 0 for the first pie segment, 1 for the next, etc.$xc, $yc : Center of the pie, in device coordinates$wd, $ht : Pie diameters - width (horizontal), height (vertical)$start_angle, $end_angle : Segment arc angles, in degrees, offset from360. That is, the values are (360-A) for angle A. This is the wayPHPlot processes the angles for the GD function imagefilledarc().Note that sin(360-A) = -sin(A); and cos(360-A) = cos(A).Since the Y axis (sin) is reversed in device, or image, coordinateswith Y=0 at the top, this works out correctly.Method used:Approximate a pie segment using a polygon. Note the pie is not necessarilycircular, but is an ellipse.+ The 1st point is the pie center.+ The 2nd point is on the circumference*, at the start angle.+ The last point is on the circumference*, at the end angle.+ In between the 2nd and last point are N>=0 additional points on thecircumference*, spaced no more than 20 degrees apart. (20 is chosen bytrial and error for a reasonable fit.) So small segments will be approximatedby a single triangle. Larger segments will have more vertices.*Note: These points are actually slightly outside the circumference.This is done by increasing the two radius values by a small amount (2 pixels).This produces a better fit, for the case where we want to make sure all theinterior is covered, even if some of the exterior is also included. (Usingthe actual radii would result in the area omitting a small part of the pieinterior. For an image map, this would result in dead spaces.)The segment subdivisions are made to have about equal angles. This resultsin a closer fit. For example, with a maximum sub-segment arc of 20 degrees,and a segment of 24 degrees, we make two 12 degree sub-segments rather than a20 degree and a 4 degree.Note: Web image map coordinates have 0,0 in upper left, so Y is reversed.The pass-through argument gets the data array. This is used to include thepie segment value in the URL and/or tooltip. This will only work with datatype text-data-single, where array values map 1:1 to segment values.*/function store_map($im, $data, $shape, $segment, $unused,$xc, $yc, $wd, $ht, $start_angle, $end_angle){global $image_map;# Choose the largest step_angle <= 20 degrees that divides the segment# into equal parts. (20 degrees is chosen as a threshold.)# Note start_angle > end_angle due to reversal (360-A) of arguments.$arc_angle = $start_angle - $end_angle;$n_steps = (int)ceil($arc_angle / 20);$step_angle = $arc_angle / $n_steps;# Radius along horizontal and vertical, plus a tiny adjustment factor.$rx = $wd / 2 + 2;$ry = $ht / 2 + 2;# Push the initial point into the array: the center of the pie.$points = array($xc, $yc);# Loop by step_angle from end_angle to start_angle.# Don't use "$theta += $step_angle" because of cumulative error.# Note $theta and $done_angle are in radians; $step_angle and $end_angle# are in degrees.$done_angle = deg2rad($start_angle);for ($i = 0; ; $i++) {# Advance to next step, but not past the end:$theta = min($done_angle, deg2rad($end_angle + $i * $step_angle));# Generate a point at the current angle:$points[] = (int)($xc + $rx * cos($theta));$points[] = (int)($yc + $ry * sin($theta));# All done after generating a point at done_angle.if ($theta >= $done_angle) break;}# Demonstration data: Title (and tool-tip text), alt text, URL:# Fetch segment value from data arrayL$value = $data[$segment][1];$title = "Segment $segment = $value";$alt = "Region for segment $segment";$href = "javascript:alert('Segment $segment = $value')";$coords = implode(',', $points);# Generate the image map area:$image_map .= " <area shape=\"poly\" 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: Pie Chart with Image Map");$plot->SetImageBorderType('plain');$plot->SetDataValues($data);$plot->SetDataType('text-data-single');$plot->SetPlotType('pie');# Set the data_points callback which will generate the image map.# Include the data array as the pass-through argument, for tooltip text:$plot->SetCallback('data_points', 'store_map', $data);# 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: Pie Chart with Image Map</title></head><body><h1>PHPlot Example: Pie 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></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-bars.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-nonembed.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">5.44. Example - Image Map from Bar Chart </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> 5.46. Example - Image Map and Non-embedded Plot Image</td></tr></table></div></body></html>