- Modified tutorial to reflect the new ezcGraphTools from feature request #9511

5 files changed, 63 insertions, 118 deletions

diff --git a/docs/img/tutorial_example_28.svg b/docs/img/tutorial_example_28.svg
index 0967b19..1319724 100644
--- a/docs/img/tutorial_example_28.svg
+++ b/docs/img/tutorial_example_28.svg
@@ -1,2 +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>
+<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: crosshair;" id="ezcGraphCircle_5" onclick="top.location = 'http://example.org/mozilla'"/><ellipse cx="9" cy="47" rx="7" ry="7" style="fill: #e05206; fill-opacity: 1.00; stroke: none; cursor: crosshair;" id="ezcGraphCircle_7" onclick="top.location = 'http://example.org/'"/><ellipse cx="9" cy="65" rx="7" ry="7" style="fill: #f0ab00; fill-opacity: 1.00; stroke: none; cursor: crosshair;" id="ezcGraphCircle_9" onclick="top.location = 'http://example.org/'"/><ellipse cx="9" cy="83" rx="7" ry="7" style="fill: #d4ba00; fill-opacity: 1.00; stroke: none; cursor: crosshair;" id="ezcGraphCircle_11" onclick="top.location = 'http://example.org/'"/><ellipse cx="9" cy="101" rx="7" ry="7" style="fill: #9c9a00; fill-opacity: 1.00; stroke: none; cursor: crosshair;" id="ezcGraphCircle_13" onclick="top.location = 'http://example.org/'"/><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: crosshair;" id="ezcGraphCircleSector_15" onclick="top.location = 'http://example.org/mozilla'"/><path d="M 239.86,110.50 L 311.50,110.50 A 71.50,71.50 0 1,1 178.41,73.67 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: crosshair;" id="ezcGraphCircleSector_17" onclick="top.location = 'http://example.org/'"/><path d="M 240.01,109.42 L 178.93,72.82 A 71.50,71.50 0 0,1 302.55,75.35 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: crosshair;" id="ezcGraphCircleSector_19" onclick="top.location = 'http://example.org/'"/><path d="M 243.33,108.75 L 303.02,76.23 A 71.50,71.50 0 0,1 309.72,94.13 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: crosshair;" id="ezcGraphCircleSector_21" onclick="top.location = 'http://example.org/'"/><path d="M 247.87,108.78 L 309.93,95.10 A 71.50,71.50 0 0,1 311.16,102.98 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: crosshair;" id="ezcGraphCircleSector_23" onclick="top.location = 'http://example.org/'"/><path d="M 250.95,109.50 L 311.25,103.98 A 71.50,71.50 0 0,1 311.50,109.50 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.7767" cy="161.4018" rx="3" ry="3" style="fill: #000000; fill-opacity: 1.00; stroke: none;" id="ezcGraphCircle_26"/><ellipse cx="212.2975" 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.094" cy="56.6779" 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.9542" cy="91.3177" rx="3" ry="3" style="fill: #000000; fill-opacity: 1.00; stroke: none;" id="ezcGraphCircle_34"/><ellipse cx="320.5587" 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.7014" cy="101.8141" rx="3" ry="3" style="fill: #000000; fill-opacity: 1.00; stroke: none;" id="ezcGraphCircle_38"/><ellipse cx="325.2401" 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.2778" cy="107.5662" rx="3" ry="3" style="fill: #000000; fill-opacity: 1.00; stroke: none;" id="ezcGraphCircle_42"/><ellipse cx="325.6932" cy="117" rx="3" ry="3" style="fill: #000000; fill-opacity: 1.00; stroke: none;" id="ezcGraphCircle_43"/><g id="ezcGraphTextBox_3"><path d=" M 118.4100,20.0000 L 118.4100,0.5000 L 282.0900,0.5000 L 282.0900,20.0000 L 118.4100,20.0000 z " style="fill: #ffffff; fill-opacity: 0.00; stroke: none;" id="ezcGraphPolygon_45"/><text id="ezcGraphTextBox_3_text" 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></g><g id="ezcGraphTextBox_6" style=" cursor: crosshair;" onclick="top.location = 'http://example.org/mozilla'"><path d=" M 16.5000,36.0000 L 16.5000,22.5000 L 62.5200,22.5000 L 62.5200,36.0000 L 16.5000,36.0000 z " style="fill: #ffffff; fill-opacity: 0.00; stroke: none;" id="ezcGraphPolygon_46"/><text id="ezcGraphTextBox_6_text" 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;">Mozilla</text></g><g id="ezcGraphTextBox_8" style=" cursor: crosshair;" onclick="top.location = 'http://example.org/'"><path d=" M 16.5000,54.0000 L 16.5000,40.5000 L 68.8800,40.5000 L 68.8800,54.0000 L 16.5000,54.0000 z " style="fill: #ffffff; fill-opacity: 0.00; stroke: none;" id="ezcGraphPolygon_47"/><text id="ezcGraphTextBox_8_text" 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;">Explorer</text></g><g id="ezcGraphTextBox_10" style=" cursor: crosshair;" onclick="top.location = 'http://example.org/'"><path d=" M 16.5000,72.0000 L 16.5000,58.5000 L 49.8000,58.5000 L 49.8000,72.0000 L 16.5000,72.0000 z " style="fill: #ffffff; fill-opacity: 0.00; stroke: none;" id="ezcGraphPolygon_48"/><text id="ezcGraphTextBox_10_text" 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;">Opera</text></g><g id="ezcGraphTextBox_12" style=" cursor: crosshair;" onclick="top.location = 'http://example.org/'"><path d=" M 16.5000,90.0000 L 16.5000,76.5000 L 56.1600,76.5000 L 56.1600,90.0000 L 16.5000,90.0000 z " style="fill: #ffffff; fill-opacity: 0.00; stroke: none;" id="ezcGraphPolygon_49"/><text id="ezcGraphTextBox_12_text" 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;">Safari</text></g><g id="ezcGraphTextBox_14" style=" cursor: crosshair;" onclick="top.location = 'http://example.org/'"><path d=" M 16.5000,108.0000 L 16.5000,94.5000 L 75.2400,94.5000 L 75.2400,108.0000 L 16.5000,108.0000 z " style="fill: #ffffff; fill-opacity: 0.00; stroke: none;" id="ezcGraphPolygon_50"/><text id="ezcGraphTextBox_14_text" 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;">Konqueror</text></g><g id="ezcGraphTextBox_28" style=" cursor: crosshair;" onclick="top.location = 'http://example.org/mozilla'"><path d=" M 112.5175,192.0000 L 112.5175,182.5000 L 207.2975,182.5000 L 207.2975,192.0000 L 112.5175,192.0000 z " style="fill: #ffffff; fill-opacity: 0.00; stroke: none;" id="ezcGraphPolygon_51"/><text id="ezcGraphTextBox_28_text" x="113.0175" text-length="93.28px" y="189.8" style="font-size: 8px; font-family: sans-serif; fill: #1e1e1e; fill-opacity: 1.00; stroke: none;">Mozilla: 19113 (58.6%)</text></g><g id="ezcGraphTextBox_32" style=" cursor: crosshair;" onclick="top.location = 'http://example.org/'"><path d=" M 251.5000,35.0000 L 251.5000,25.5000 L 350.5200,25.5000 L 350.5200,35.0000 L 251.5000,35.0000 z " style="fill: #ffffff; fill-opacity: 0.00; stroke: none;" id="ezcGraphPolygon_52"/><text id="ezcGraphTextBox_32_text" 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;">Explorer: 10917 (33.5%)</text></g><g id="ezcGraphTextBox_36" style=" cursor: crosshair;" onclick="top.location = 'http://example.org/'"><path d=" M 326.0587,90.0500 L 326.0587,72.4500 L 374.1987,72.4500 L 374.1987,90.0500 L 326.0587,90.0500 z " style="fill: #ffffff; fill-opacity: 0.00; stroke: none;" id="ezcGraphPolygon_53"/><text id="ezcGraphTextBox_36_text" x="326.5587" text-length="46.64px" y="79.75" style="font-size: 8px; font-family: sans-serif; fill: #1e1e1e; fill-opacity: 1.00; stroke: none;">Opera: 1464</text><text id="ezcGraphTextBox_36_text" x="326.5587" 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></g><g id="ezcGraphTextBox_40" style=" cursor: crosshair;" onclick="top.location = 'http://example.org/'"><path d=" M 330.7401,108.0500 L 330.7401,90.4500 L 378.8801,90.4500 L 378.8801,108.0500 L 330.7401,108.0500 z " style="fill: #ffffff; fill-opacity: 0.00; stroke: none;" id="ezcGraphPolygon_54"/><text id="ezcGraphTextBox_40_text" x="331.2401" text-length="46.64px" y="97.75" style="font-size: 8px; font-family: sans-serif; fill: #1e1e1e; fill-opacity: 1.00; stroke: none;">Safari: 652</text><text id="ezcGraphTextBox_40_text" x="331.2401" 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></g><g id="ezcGraphTextBox_44" style=" cursor: crosshair;" onclick="top.location = 'http://example.org/'"><path d=" M 331.1932,126.0500 L 331.1932,108.4500 L 392.0532,108.4500 L 392.0532,126.0500 L 331.1932,126.0500 z " style="fill: #ffffff; fill-opacity: 0.00; stroke: none;" id="ezcGraphPolygon_55"/><text id="ezcGraphTextBox_44_text" x="331.6932" text-length="59.36px" y="115.75" style="font-size: 8px; font-family: sans-serif; fill: #1e1e1e; fill-opacity: 1.00; stroke: none;">Konqueror: 474</text><text id="ezcGraphTextBox_44_text" x="331.6932" 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></g></svg>
diff --git a/docs/img/tutorial_example_29.html b/docs/img/tutorial_example_29.html
index 52383d1..ab74cf8 100644
--- a/docs/img/tutorial_example_29.html
+++ b/docs/img/tutorial_example_29.html
@@ -1,22 +1,31 @@
 <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_29.png"
-            width="400" height="200"
-            usemap="#ezcGraphPieChartMap"
-    </body>
+<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="http://example.org/mozilla" alt="Mozilla" />
+	<area shape="poly" coords="17,22,78,22,78,36,17,36" href="http://example.org/mozilla" alt="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="http://example.org/" alt="Explorer" />
+	<area shape="poly" coords="17,40,78,40,78,54,17,54" href="http://example.org/" alt="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="http://example.org/" alt="Opera" />
+	<area shape="poly" coords="17,58,78,58,78,72,17,72" href="http://example.org/" alt="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="http://example.org/" alt="Safari" />
+	<area shape="poly" coords="17,76,78,76,78,90,17,90" href="http://example.org/" alt="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="http://example.org/" alt="Konqueror" />
+	<area shape="poly" coords="17,94,78,94,78,108,17,108" href="http://example.org/" alt="Konqueror" />
+	<area shape="poly" coords="240,110,312,110,310,122,307,134,302,146,295,156,286,165,276,172,264,177,252,180,240,182,227,180,215,177,204,172,193,165,184,156,177,146,172,134,169,122,168,110,169,97,172,85,177,74,178,72" href="http://example.org/mozilla" alt="Mozilla" />
+	<area shape="poly" coords="80,178,206,178,206,196,80,196" href="http://example.org/mozilla" alt="Mozilla" />
+	<area shape="poly" coords="240,110,178,72,185,62,194,54,205,47,216,41,228,38,241,38,253,39,265,42,277,48,287,55,295,64,302,75,303,75" href="http://example.org/" alt="Explorer" />
+	<area shape="poly" coords="252,21,400,21,400,39,252,39" href="http://example.org/" alt="Explorer" />
+	<area shape="poly" coords="240,110,303,75,308,87,310,94" href="http://example.org/" alt="Opera" />
+	<area shape="poly" coords="326,72,400,72,400,90,326,90" href="http://example.org/" alt="Opera" />
+	<area shape="poly" coords="240,110,310,94,311,103" href="http://example.org/" alt="Safari" />
+	<area shape="poly" coords="331,90,400,90,400,108,331,108" href="http://example.org/" alt="Safari" />
+	<area shape="poly" coords="240,110,311,103,312,109" href="http://example.org/" alt="Konqueror" />
+	<area shape="poly" coords="331,108,400,108,400,126,331,126" href="http://example.org/" alt="Konqueror" />
+</map>
+    <img
+        src="tutorial_example_29.png"
+        width="400" height="200"
+        usemap="#ezcGraphPieChartMap"
+</body>
 </html>
diff --git a/docs/tutorial.txt b/docs/tutorial.txt
index 35b19fd..4300cc3 100644
--- a/docs/tutorial.txt
+++ b/docs/tutorial.txt
@@ -849,31 +849,23 @@ Element references are created in the renderer. This way it is also possible to
 reference legend symbols and text, data labels and of course the actual data
 elements.
 
+Since ezcGraph 1.1 you can define URLs for data sets and data points which
+will be used, when linking the elements later. You now can use the function
+provided in ezcGraphTools to create the image maps and add links into SVG
+images.
+
 SVG example
 -----------
 
 .. include:: tutorial_example_28.php
    :literal:
 
-After creating a very simple chart like in the first example, we start
-modifying the document using PHP's 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 in turn contain all valid
-references depending on the driver and chart type. In an 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 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 (as expected for links)
-and add a JavaScript onclick event handler to link to the specified address.
-The result is an `SVG image`__ where you can click on the chart and legend
-elements.
+Since ezcGraph 1.1 you can optionally set a custom cursor type used by the
+browser to indicate that you can click on a surface. The cursor defaults to a
+pointer normally used for links. Everything else you need to do is assigning
+URLs to the data sets or data points like in the lines 17 and 18 and then
+finally call ezcGraphTools::linkSvgElements (line 23) to modify your SVG. The
+result will be a clickable `SVG image`__.
 
 __ img/tutorial_example_28.svg
 
@@ -887,21 +879,12 @@ coordinates, which you can use to generate an image map.
 .. include:: tutorial_example_29.php
    :literal:
 
-For the sake of brevity, we only link the legend elements here. After
-generating the basic image, we request the element references from the
-renderer and use them to create the image map starting in line 30. We iterate
-over the legend elements, which may all 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 lines 35 to 39, we build the coordinate string image map from
-the coordinate pairs we receive from the GD driver. The coordinate array
-consists of ezcGraphCoordinate objects, which have a simple structure containing
-two public properties: the x and the y coordinates as float values. We use this
-coordinate string to create the polygon area elements in line 41.
-
-After assigning the image map to the image, the result is a `linked legend in your
-generated bitmap`__.
+In line 20 we associate a URL to the complete data set and in line 21 another
+URL only for the mozilla data point. Those URLs will be used to create the
+image map in line 31. As a second parameter besides the actual graph we can
+provide a name for the image map, which should be used to associate the image
+map to the image as in line 37. The result is a `linked legend and linked
+pie chart in your generated bitmap`__.
 
 __ img/tutorial_example_29.html
 
diff --git a/docs/tutorial_example_28.php b/docs/tutorial_example_28.php
index 2a2135c..6b09ba8 100644
--- a/docs/tutorial_example_28.php
+++ b/docs/tutorial_example_28.php
@@ -14,42 +14,12 @@ $graph->data['Access statistics'] = new ezcGraphArrayDataSet( array(
     'Konqueror' => 474,
 ) );
 
-$graph->render( 400, 200, 'tutorial_example_28.svg' );
-
-// Get element references from renderer
-$elements = $graph->renderer->getElementReferences();
-
-// Add links to charts
-$dom = new DOMDocument();
-$dom->load( 'tutorial_example_28.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 );
+$graph->data['Access statistics']->url = 'http://example.org/';
+$graph->data['Access statistics']->url['Mozilla'] = 'http://example.org/mozilla';
 
-        $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 . '\'' );
-    }
-}
+$graph->render( 400, 200, 'tutorial_example_28.svg' );
 
-$dom->save( 'tutorial_example_28.svg' );
+$graph->driver->options->linkCursor = 'crosshair';
+ezcGraphTools::linkSvgElements( $graph );
 
 ?>
diff --git a/docs/tutorial_example_29.php b/docs/tutorial_example_29.php
index be9b12e..afcaa0b 100644
--- a/docs/tutorial_example_29.php
+++ b/docs/tutorial_example_29.php
@@ -17,42 +17,25 @@ $graph->data['Access statistics'] = new ezcGraphArrayDataSet( array(
     'Konqueror' => 474,
 ) );
 
-$graph->render( 400, 200, 'tutorial_example_29.png' );
+$graph->data['Access statistics']->url = 'http://example.org/';
+$graph->data['Access statistics']->url['Mozilla'] = 'http://example.org/mozilla';
 
-$elements = $graph->renderer->getElementReferences();
+$graph->render( 400, 200, 'tutorial_example_29.png' );
 
 ?>
 <html>
     <head><title>Image map example</title></head>
-    <body>
-        <map 
-            name="ezcGraphPieChartMap">
+<body>
 <?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
-            );
-        }
-    }
+
+echo ezcGraphTools::createImageMap( $graph, 'ezcGraphPieChartMap' );
+
 ?>
-        </map>
-        <img
-            src="tutorial_example_29.png"
-            width="400" height="200"
-            usemap="#ezcGraphPieChartMap"
-    </body>
+    <img
+        src="tutorial_example_29.png"
+        width="400" height="200"
+        usemap="#ezcGraphPieChartMap" />
+</body>
 </html>
 <?php
 ?>