- Added element reference documentation to tutorial

6 files changed, 222 insertions, 13 deletions

diff --git a/docs/img/tutorial_example_07.svg b/docs/img/tutorial_example_07.svg
new file mode 100644
index 0000000..0967b19
--- /dev/null
+++ b/docs/img/tutorial_example_07.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" version="1.0" id="ezcGraph"><defs/><g id="ezcGraphChart" color-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="optimizeLegibility"><path d=" M 0.0000,200.0000 L 0.0000,0.0000 L 400.0000,0.0000 L 400.0000,200.0000 L 0.0000,200.0000 z " style="fill: #ffffff; fill-opacity: 0.00; stroke: none;" id="ezcGraphPolygon_1"/><path d=" M 0.0000,20.0000 L 0.0000,0.0000 L 400.0000,0.0000 L 400.0000,20.0000 L 0.0000,20.0000 z " style="fill: #000000; fill-opacity: 0.00; stroke: none;" id="ezcGraphPolygon_2"/><path d=" M 0.0000,200.0000 L 0.0000,20.0000 L 80.0000,20.0000 L 80.0000,200.0000 L 0.0000,200.0000 z " style="fill: #000000; fill-opacity: 0.00; stroke: none;" id="ezcGraphPolygon_4"/><ellipse cx="9" cy="29" rx="7" ry="7" style="fill: #c90062; fill-opacity: 1.00; stroke: none; cursor: pointer;" id="ezcGraphCircle_5" onclick="top.location = '/detailedData.php?browser=Mozilla'"/><ellipse cx="9" cy="47" rx="7" ry="7" style="fill: #e05206; fill-opacity: 1.00; stroke: none; cursor: pointer;" id="ezcGraphCircle_7" onclick="top.location = '/detailedData.php?browser=Explorer'"/><ellipse cx="9" cy="65" rx="7" ry="7" style="fill: #f0ab00; fill-opacity: 1.00; stroke: none; cursor: pointer;" id="ezcGraphCircle_9" onclick="top.location = '/detailedData.php?browser=Opera'"/><ellipse cx="9" cy="83" rx="7" ry="7" style="fill: #d4ba00; fill-opacity: 1.00; stroke: none; cursor: pointer;" id="ezcGraphCircle_11" onclick="top.location = '/detailedData.php?browser=Safari'"/><ellipse cx="9" cy="101" rx="7" ry="7" style="fill: #9c9a00; fill-opacity: 1.00; stroke: none; cursor: pointer;" id="ezcGraphCircle_13" onclick="top.location = '/detailedData.php?browser=Konqueror'"/><path d="M 240.00,110.00 L 312.00,110.00 A 72.00,72.00 0 1,1 178.24,72.99 z" style="fill: #c90062; fill-opacity: 1.00; stroke: none; cursor: pointer;" id="ezcGraphCircleSector_15" onclick="top.location = '/detailedData.php?browser=Mozilla'"/><path d="M 240.00,110.00 L 312.00,110.00 A 72.00,72.00 0 1,1 178.24,72.99 z" style="fill: none; stroke: #650031; stroke-width: 1; stroke-opacity: 1.00; stroke-linecap: round; stroke-linejoin: round;" id="ezcGraphCircleSector_16"/><path d="M 240.00,110.00 L 178.24,72.99 A 72.00,72.00 0 0,1 303.22,75.55 z" style="fill: #e05206; fill-opacity: 1.00; stroke: none; cursor: pointer;" id="ezcGraphCircleSector_17" onclick="top.location = '/detailedData.php?browser=Explorer'"/><path d="M 240.00,110.00 L 178.24,72.99 A 72.00,72.00 0 0,1 303.22,75.55 z" style="fill: none; stroke: #702903; stroke-width: 1; stroke-opacity: 1.00; stroke-linecap: round; stroke-linejoin: round;" id="ezcGraphCircleSector_18"/><path d="M 240.00,110.00 L 303.22,75.55 A 72.00,72.00 0 0,1 310.31,94.51 z" style="fill: #f0ab00; fill-opacity: 1.00; stroke: none; cursor: pointer;" id="ezcGraphCircleSector_19" onclick="top.location = '/detailedData.php?browser=Opera'"/><path d="M 240.00,110.00 L 303.22,75.55 A 72.00,72.00 0 0,1 310.31,94.51 z" style="fill: none; stroke: #785600; stroke-width: 1; stroke-opacity: 1.00; stroke-linecap: round; stroke-linejoin: round;" id="ezcGraphCircleSector_20"/><path d="M 240.00,110.00 L 310.31,94.51 A 72.00,72.00 0 0,1 311.70,103.44 z" style="fill: #d4ba00; fill-opacity: 1.00; stroke: none; cursor: pointer;" id="ezcGraphCircleSector_21" onclick="top.location = '/detailedData.php?browser=Safari'"/><path d="M 240.00,110.00 L 310.31,94.51 A 72.00,72.00 0 0,1 311.70,103.44 z" style="fill: none; stroke: #6a5d00; stroke-width: 1; stroke-opacity: 1.00; stroke-linecap: round; stroke-linejoin: round;" id="ezcGraphCircleSector_22"/><path d="M 240.00,110.00 L 311.70,103.44 A 72.00,72.00 0 0,1 312.00,110.00 z" style="fill: #9c9a00; fill-opacity: 1.00; stroke: none; cursor: pointer;" id="ezcGraphCircleSector_23" onclick="top.location = '/detailedData.php?browser=Konqueror'"/><path d="M 240.00,110.00 L 311.70,103.44 A 72.00,72.00 0 0,1 312.00,110.00 z" style="fill: none; stroke: #4e4d00; stroke-width: 1; stroke-opacity: 1.00; stroke-linecap: round; stroke-linejoin: round;" id="ezcGraphCircleSector_24"/><path d=" M 225.7767,161.4018 L 212.2975,187.0000" style="fill: none; stroke: #000000; stroke-width: 1; stroke-opacity: 1.00; stroke-linecap: round; stroke-linejoin: round;" id="ezcGraphLine_25"/><ellipse cx="225.77671190812" cy="161.40177545864" rx="3" ry="3" style="fill: #000000; fill-opacity: 1.00; stroke: none;" id="ezcGraphCircle_26"/><ellipse cx="212.29746558579" cy="187" rx="3" ry="3" style="fill: #000000; fill-opacity: 1.00; stroke: none;" id="ezcGraphCircle_27"/><path d=" M 241.0940,56.6779 L 246.0000,30.0000" style="fill: none; stroke: #000000; stroke-width: 1; stroke-opacity: 1.00; stroke-linecap: round; stroke-linejoin: round;" id="ezcGraphLine_29"/><ellipse cx="241.09399109615" cy="56.677888002012" rx="3" ry="3" style="fill: #000000; fill-opacity: 1.00; stroke: none;" id="ezcGraphCircle_30"/><ellipse cx="246" cy="30" rx="3" ry="3" style="fill: #000000; fill-opacity: 1.00; stroke: none;" id="ezcGraphCircle_31"/><path d=" M 289.9542,91.3177 L 320.5587,81.0000" style="fill: none; stroke: #000000; stroke-width: 1; stroke-opacity: 1.00; stroke-linecap: round; stroke-linejoin: round;" id="ezcGraphLine_33"/><ellipse cx="289.95415099231" cy="91.317729177593" rx="3" ry="3" style="fill: #000000; fill-opacity: 1.00; stroke: none;" id="ezcGraphCircle_34"/><ellipse cx="320.55870170543" cy="81" rx="3" ry="3" style="fill: #000000; fill-opacity: 1.00; stroke: none;" id="ezcGraphCircle_35"/><path d=" M 292.7014,101.8141 L 325.2401,99.0000" style="fill: none; stroke: #000000; stroke-width: 1; stroke-opacity: 1.00; stroke-linecap: round; stroke-linejoin: round;" id="ezcGraphLine_37"/><ellipse cx="292.7013858335" cy="101.81413561844" rx="3" ry="3" style="fill: #000000; fill-opacity: 1.00; stroke: none;" id="ezcGraphCircle_38"/><ellipse cx="325.24014134263" cy="99" rx="3" ry="3" style="fill: #000000; fill-opacity: 1.00; stroke: none;" id="ezcGraphCircle_39"/><path d=" M 293.2778,107.5662 L 325.6932,117.0000" style="fill: none; stroke: #000000; stroke-width: 1; stroke-opacity: 1.00; stroke-linecap: round; stroke-linejoin: round;" id="ezcGraphLine_41"/><ellipse cx="293.27777082731" cy="107.5661593895" rx="3" ry="3" style="fill: #000000; fill-opacity: 1.00; stroke: none;" id="ezcGraphCircle_42"/><ellipse cx="325.69316156359" cy="117" rx="3" ry="3" style="fill: #000000; fill-opacity: 1.00; stroke: none;" id="ezcGraphCircle_43"/><text id="ezcGraphTextBox_3" x="118.91" text-length="162.18px" y="16.3" style="font-size: 18px; font-family: sans-serif; fill: #1e1e1e; fill-opacity: 1.00; stroke: none;">Access statistics</text><text id="ezcGraphTextBox_6" x="17" text-length="44.52px" y="33.2" style="font-size: 12px; font-family: sans-serif; fill: #1e1e1e; fill-opacity: 1.00; stroke: none; cursor: pointer;" onclick="top.location = '/detailedData.php?browser=Mozilla'">Mozilla</text><text id="ezcGraphTextBox_8" x="17" text-length="50.88px" y="51.2" style="font-size: 12px; font-family: sans-serif; fill: #1e1e1e; fill-opacity: 1.00; stroke: none; cursor: pointer;" onclick="top.location = '/detailedData.php?browser=Explorer'">Explorer</text><text id="ezcGraphTextBox_10" x="17" text-length="31.8px" y="69.2" style="font-size: 12px; font-family: sans-serif; fill: #1e1e1e; fill-opacity: 1.00; stroke: none; cursor: pointer;" onclick="top.location = '/detailedData.php?browser=Opera'">Opera</text><text id="ezcGraphTextBox_12" x="17" text-length="38.16px" y="87.2" style="font-size: 12px; font-family: sans-serif; fill: #1e1e1e; fill-opacity: 1.00; stroke: none; cursor: pointer;" onclick="top.location = '/detailedData.php?browser=Safari'">Safari</text><text id="ezcGraphTextBox_14" x="17" text-length="57.24px" y="105.2" style="font-size: 12px; font-family: sans-serif; fill: #1e1e1e; fill-opacity: 1.00; stroke: none; cursor: pointer;" onclick="top.location = '/detailedData.php?browser=Konqueror'">Konqueror</text><text id="ezcGraphTextBox_28" x="113.01746558579" text-length="93.28px" y="189.8" style="font-size: 8px; font-family: sans-serif; fill: #1e1e1e; fill-opacity: 1.00; stroke: none; cursor: pointer;" onclick="top.location = '/detailedData.php?browser=Mozilla'">Mozilla: 19113 (58.6%)</text><text id="ezcGraphTextBox_32" x="252" text-length="97.52px" y="32.8" style="font-size: 8px; font-family: sans-serif; fill: #1e1e1e; fill-opacity: 1.00; stroke: none; cursor: pointer;" onclick="top.location = '/detailedData.php?browser=Explorer'">Explorer: 10917 (33.5%)</text><text id="ezcGraphTextBox_36" x="326.55870170543" text-length="46.64px" y="79.75" style="font-size: 8px; font-family: sans-serif; fill: #1e1e1e; fill-opacity: 1.00; stroke: none; cursor: pointer;" onclick="top.location = '/detailedData.php?browser=Opera'">Opera: 1464</text><text id="ezcGraphTextBox_36" x="326.55870170543" text-length="25.44px" y="88.55" style="font-size: 8px; font-family: sans-serif; fill: #1e1e1e; fill-opacity: 1.00; stroke: none;">(4.5%)</text><text id="ezcGraphTextBox_40" x="331.24014134263" text-length="46.64px" y="97.75" style="font-size: 8px; font-family: sans-serif; fill: #1e1e1e; fill-opacity: 1.00; stroke: none; cursor: pointer;" onclick="top.location = '/detailedData.php?browser=Safari'">Safari: 652</text><text id="ezcGraphTextBox_40" x="331.24014134263" text-length="25.44px" y="106.55" style="font-size: 8px; font-family: sans-serif; fill: #1e1e1e; fill-opacity: 1.00; stroke: none;">(2.0%)</text><text id="ezcGraphTextBox_44" x="331.69316156359" text-length="59.36px" y="115.75" style="font-size: 8px; font-family: sans-serif; fill: #1e1e1e; fill-opacity: 1.00; stroke: none; cursor: pointer;" onclick="top.location = '/detailedData.php?browser=Konqueror'">Konqueror: 474</text><text id="ezcGraphTextBox_44" x="331.69316156359" text-length="25.44px" y="124.55" style="font-size: 8px; font-family: sans-serif; fill: #1e1e1e; fill-opacity: 1.00; stroke: none;">(1.5%)</text></g></svg>
diff --git a/docs/img/tutorial_example_08.html b/docs/img/tutorial_example_08.html
new file mode 100644
index 0000000..7901f11
--- /dev/null
+++ b/docs/img/tutorial_example_08.html
@@ -0,0 +1,22 @@
+<html>
+    <head><title>Image map example</title></head>
+    <body>
+        <map 
+            name="ezcGraphPieChartMap">
+<area shape="poly" coords="16,29,15,30,15,31,15,32,14,33,13,34,12,35,11,35,10,35,9,36,7,35,6,35,5,35,4,34,3,33,2,32,2,31,2,30,2,29,2,27,2,26,2,25,3,24,4,23,5,22,6,22,7,22,8,22,10,22,11,22,12,22,13,23,14,24,15,25,15,26,15,27" href="/detailedData.php?browser=Mozilla" alt="symbol: Mozilla" title="symbol: Mozilla" />
+<area shape="poly" coords="17,22,78,22,78,36,17,36" href="/detailedData.php?browser=Mozilla" alt="text: Mozilla" title="text: Mozilla" />
+<area shape="poly" coords="16,47,15,48,15,49,15,50,14,51,13,52,12,53,11,53,10,53,9,54,7,53,6,53,5,53,4,52,3,51,2,50,2,49,2,48,2,47,2,45,2,44,2,43,3,42,4,41,5,40,6,40,7,40,8,40,10,40,11,40,12,40,13,41,14,42,15,43,15,44,15,45" href="/detailedData.php?browser=Explorer" alt="symbol: Explorer" title="symbol: Explorer" />
+<area shape="poly" coords="17,40,78,40,78,54,17,54" href="/detailedData.php?browser=Explorer" alt="text: Explorer" title="text: Explorer" />
+<area shape="poly" coords="16,65,15,66,15,67,15,68,14,69,13,70,12,71,11,71,10,71,9,72,7,71,6,71,5,71,4,70,3,69,2,68,2,67,2,66,2,65,2,63,2,62,2,61,3,60,4,59,5,58,6,58,7,58,8,58,10,58,11,58,12,58,13,59,14,60,15,61,15,62,15,63" href="/detailedData.php?browser=Opera" alt="symbol: Opera" title="symbol: Opera" />
+<area shape="poly" coords="17,58,78,58,78,72,17,72" href="/detailedData.php?browser=Opera" alt="text: Opera" title="text: Opera" />
+<area shape="poly" coords="16,83,15,84,15,85,15,86,14,87,13,88,12,89,11,89,10,89,9,90,7,89,6,89,5,89,4,88,3,87,2,86,2,85,2,84,2,83,2,81,2,80,2,79,3,78,4,77,5,76,6,76,7,76,8,76,10,76,11,76,12,76,13,77,14,78,15,79,15,80,15,81" href="/detailedData.php?browser=Safari" alt="symbol: Safari" title="symbol: Safari" />
+<area shape="poly" coords="17,76,78,76,78,90,17,90" href="/detailedData.php?browser=Safari" alt="text: Safari" title="text: Safari" />
+<area shape="poly" coords="16,101,15,102,15,103,15,104,14,105,13,106,12,107,11,107,10,107,9,108,7,107,6,107,5,107,4,106,3,105,2,104,2,103,2,102,2,101,2,99,2,98,2,97,3,96,4,95,5,94,6,94,7,94,8,94,10,94,11,94,12,94,13,95,14,96,15,97,15,98,15,99" href="/detailedData.php?browser=Konqueror" alt="symbol: Konqueror" title="symbol: Konqueror" />
+<area shape="poly" coords="17,94,78,94,78,108,17,108" href="/detailedData.php?browser=Konqueror" alt="text: Konqueror" title="text: Konqueror" />
+        </map>
+        <img
+            src="tutorial_example_08.png"
+            width="400" height="200"
+            usemap="#ezcGraphPieChartMap"
+    </body>
+</html>
diff --git a/docs/img/tutorial_example_08.png b/docs/img/tutorial_example_08.png
new file mode 100644
index 0000000..4ecaa52
--- /dev/null
+++ b/docs/img/tutorial_example_08.png
diff --git a/docs/tutorial.txt b/docs/tutorial.txt
index f96bb7e..26f1d0b 100644
--- a/docs/tutorial.txt
+++ b/docs/tutorial.txt
@@ -13,9 +13,9 @@ chart, and the available renderers make the chart output customizeable from
 simple two dimensional charts up to beautiful three dimensional data
 projections. 
 
-ezcGraph seperates different parts of the graph in chart elements, which
+ezcGraph separates different parts of the graph in chart elements, which
 display one part of a graph, like the title, the legend or one axis, which are
-all idenpendently configurable. This design not only allows you to use
+all independently configurable. This design not only allows you to use
 different colors or fonts for each chart element, but also define their
 position and size. The main chart elements are the same for all chart types.
 For easy definition of a overall layout for your graph you can use palettes,
@@ -39,23 +39,23 @@ ezcGraphChart
 
 ezcGraphDataSet
   All data sets extend this abstract class to provide the data in a general
-  form, accessable by the chart.
+  form, accessible by the chart.
 
 ezcGraphChartElement
   All chart element store configuration values defining their layout. A
   elements layout definition contains background, border, margin, padding and
-  fonf cofiguration. This class is extended by classes for Legend, Text, 
+  font configuration. This class is extended by classes for Legend, Text, 
   Background and the different axis types.
 
 ezcGraphChartElementAxis
   Extends ezcGraphChartElement and is the base class for all axis. There are
   different axis types for different data to be displayed, like numeric axis,
-  string labeld axis or the date axis.
+  string labeled axis or the date axis.
 
 ezcGraphAxisLabelRenderer
   Defines the rendering algorithm for labels and grid on axis. The distinction
   is necessary, because bar charts expect their labels placed directly below
-  the datapoint, but numerical data in line charts should be placed next to
+  the data point, but numerical data in line charts should be placed next to
   grid.
 
 ezcGraphPalette
@@ -87,7 +87,7 @@ You just create a new chart object, optionally set a title for the chart
 assign the data and render it. To assign data you access the dataset container
 like an array to define an identifier for your new created dataset. The
 dataset in this example is created from an array, where the keys are used as
-the indetifiers for the datapoints.
+the identifiers for the data points.
 
 Pie charts accept only one dataset, and the data point identifier are used to
 create the legend. To generate the output the default SVG renderer is used
@@ -119,10 +119,10 @@ a Post Script Type 1 font in this case, which can be used with ezcGraph, if
 ext/gd was compiled with --with-t1lib.
 
 In line 25 and 26 we change properties of the dataset, which influence how the
-data will be displayed. You can set properties on single datapoints, like the
-highlighted datapoint in line 25, or for complete datasets, like the changed
+data will be displayed. You can set properties on single data points, like the
+highlighted data point in line 25, or for complete datasets, like the changed
 symbol in line 26. Furthermore we change the label, used for the pie chart,
-because with the legend we don't need to display the datapoints name again in
+because with the legend we don't need to display the data points name again in
 the pie chart.
 
 Finally advice the renderer to add some shadow and render the image.
@@ -202,17 +202,91 @@ sometimes makes sense to use the date or numeric axis for both, x and y, axis.
 .. include:: tutorial_example_06.php
    :literal:
 
-From the random data generated in the lines 10 to 13 a polynom is generated in
+From the random data generated in the lines 10 to 13 a polynomials generated in
 line 17 which interpolates the existing data. The second parameter in the
-ezcGraphDataSetAveragePolynom contructor defines the maximum order of the used
+ezcGraphDataSetAveragePolynom constructor defines the maximum order of the used
 polygon. The interpolation uses the least squares method.
 
 In line 20 the x axis is defined as a numeric axis, too, so that the negative
-values display nicely and the output is like expected for methematical data.
+values display nicely and the output is like expected for mathematical data.
 
 .. image:: img/tutorial_example_06.svg.png
    :alt:   Some random statistical data
 
+Element references
+==================
+
+Description
+-----------
+
+Element references describe a mechanism to later modify and reference certain
+chart elements to add links, menus or other interactive features in your 
+application. The type of the references depend on the driver you use to render
+chart. The GD driver will return points describing polygons, so that you can
+generate image maps from the data, while the SVG driver will return the IDs of
+the according XML elements.
+
+The element references are created in the renderer, where the renderer known
+about the context of the chart element and the driver returns the data the
+renderer should reference. This way it is also possible to reference legend
+symbols and text, data labels and of course the actual data elements.
+
+SVG example
+-----------
+
+.. include:: tutorial_example_07.php
+   :literal:
+
+After creating a very simple chart like in the first example we start
+modifying the document using PHPs DOM extension. First we load the document
+and create a xpath query object on it. 
+
+The array returned by ezcGraphRenderer::getElementReferences() contains two
+arrays, one for the legend elements and one for the datasets. The data array
+itself contains all datasets with all data points, which contain all valid
+references depending on driver and chart type. In a svg document with a 2d
+renderer you will receive one ezcGraphCircleSector_[0-9]+ and one 
+ezcGraphTextBox_[0-9]+ element, but this may change with other rendering 
+options.
+
+In the loop we now receive the element for the id using xpath, to modify its
+attributes. $dom->getElementByID() does not work here, because these elements
+are not indexed by default for non HTML documents. We only modify the style
+attribute a bit, to change the cursor to a pointer, like expected for links
+and add a JavaScript onclick event handler to link to specified address. You
+get a resulting `SVG image`__ where you can click on the chart and legend
+elements.
+
+__ img/tutorial_example_07.svg
+
+GD example
+----------
+
+In the case of GD we want to generate an image map instead of modifying the
+generated image. The driver returns polygons described by their edge
+coordinates, which you can use to generate an image map.
+
+.. include:: tutorial_example_08.php
+   :literal:
+
+For the sake of a short example we only link the legend elements here. After
+generating the basic image, we request the element references from the
+renderer and use the to create the image map starting in line 30. we just
+iterate over the legend elements, which all may contain more then one
+polygon. In this case we receive one polygon for the symbol in the legend and
+another one for the legend text.
+
+In the lines 35 to 39 we build the coordinate string image map expects from
+the coordinate pairs we receive from the gd driver. The coordinate array
+consists of ezcGraphCoordinate objects, which are a simple structure containing
+two public properties, the x and the y coordinate as float values. We use this
+coordinate string create the polygon area elements in line 41.
+
+After assigning the image map to the image you got a `linked legend in your
+generated bitmap`__.
+
+__ img/tutorial_example_08.html
+
 More Information
 ================
 
diff --git a/docs/tutorial_example_07.php b/docs/tutorial_example_07.php
new file mode 100644
index 0000000..d86cac6
--- /dev/null
+++ b/docs/tutorial_example_07.php
@@ -0,0 +1,55 @@
+<?php
+
+require_once 'tutorial_autoload.php';
+
+$graph = new ezcGraphPieChart();
+$graph->palette = new ezcGraphPaletteEz();
+$graph->title = 'Access statistics';
+
+$graph->data['Access statistics'] = new ezcGraphArrayDataSet( array(
+    'Mozilla' => 19113,
+    'Explorer' => 10917,
+    'Opera' => 1464,
+    'Safari' => 652,
+    'Konqueror' => 474,
+) );
+
+$graph->render( 400, 200, 'tutorial_example_07.svg' );
+
+// Get element references from renderer
+$elements = $graph->renderer->getElementReferences();
+
+// Add links to charts
+$dom = new DOMDocument();
+$dom->load( 'tutorial_example_07.svg' );
+$xpath = new DomXPath( $dom );
+
+// Link chart elements
+foreach( $elements['data']['Access statistics'] as $objectName => $ids )
+{
+    foreach( $ids as $id )
+    {
+        echo "Link: $id\n";
+        $element = $xpath->query( '//*[@id = \'' . $id . '\']' )->item( 0 );
+
+        $element->setAttribute( 'style', $element->getAttribute( 'style' ) . ' cursor: pointer;' );
+        $element->setAttribute( 'onclick', 'top.location = \'/detailedData.php?browser=' . $objectName . '\'' );
+    }
+}
+
+// Link legend elements
+foreach( $elements['legend'] as $objectName => $ids )
+{
+    foreach( $ids as $id )
+    {
+        echo "Link: $id\n";
+        $element = $xpath->query( '//*[@id = \'' . $id . '\']' )->item( 0 );
+
+        $element->setAttribute( 'style', $element->getAttribute( 'style' ) . ' cursor: pointer;' );
+        $element->setAttribute( 'onclick', 'top.location = \'/detailedData.php?browser=' . $objectName . '\'' );
+    }
+}
+
+$dom->save( 'tutorial_example_07.svg' );
+
+?>
diff --git a/docs/tutorial_example_08.php b/docs/tutorial_example_08.php
new file mode 100644
index 0000000..b961bf2
--- /dev/null
+++ b/docs/tutorial_example_08.php
@@ -0,0 +1,56 @@
+<?php
+
+require_once 'tutorial_autoload.php';
+
+$graph = new ezcGraphPieChart();
+$graph->palette = new ezcGraphPaletteEzGreen();
+$graph->title = 'Access statistics';
+
+$graph->driver = new ezcGraphGdDriver();
+$graph->options->font = 'tutorial_font.ttf';
+
+$graph->data['Access statistics'] = new ezcGraphArrayDataSet( array(
+    'Mozilla' => 19113,
+    'Explorer' => 10917,
+    'Opera' => 1464,
+    'Safari' => 652,
+    'Konqueror' => 474,
+) );
+
+$graph->render( 400, 200, 'tutorial_example_08.png' );
+
+$elements = $graph->renderer->getElementReferences();
+
+?>
+<html>
+    <head><title>Image map example</title></head>
+    <body>
+        <map 
+            name="ezcGraphPieChartMap">
+<?php
+    foreach ( $elements['legend'] as $objectName => $polygones )
+    {
+        foreach ( $polygones as $shape => $polygone )
+        {
+            $coordinateString = '';
+            foreach( $polygone as $coordinate )
+            {
+                $coordinateString .= sprintf( '%d,%d,', $coordinate->x, $coordinate->y );
+            }
+
+            printf( "<area shape=\"poly\" coords=\"%s\" href=\"/detailedData.php?browser=%s\" alt=\"%s: %s\" title=\"%s: %s\" />\n",
+                substr( $coordinateString, 0, -1 ),
+                $objectName,
+                $shape, $objectName,
+                $shape, $objectName
+            );
+        }
+    }
+?>
+        </map>
+        <img
+            src="tutorial_example_08.png"
+            width="400" height="200"
+            usemap="#ezcGraphPieChartMap"
+    </body>
+</html>