From f5efa0d4fbbcc033c3cbae5431c402beb8e0da0b Mon Sep 17 00:00:00 2001
From: Ole Laursen <olau@iola.dk>
Date: Fri, 13 May 2011 13:50:37 +0200
Subject: [PATCH] Rework interacting example slightly to make DOM text update
 optional

---
 examples/interacting.html | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/examples/interacting.html b/examples/interacting.html
index d04eedd..7db829d 100644
--- a/examples/interacting.html
+++ b/examples/interacting.html
@@ -16,13 +16,16 @@
     <p>One of the goals of Flot is to support user interactions. Try
     pointing and clicking on the points.</p>
 
-    <p id="hoverdata">Mouse hovers at
-    (<span id="x">0</span>, <span id="y">0</span>). <span id="clickdata"></span></p>
+    <p>
+      <label><input id="enablePosition" type="checkbox">Show mouse position</label>
+      <span id="hoverdata"></span>
+      <span id="clickdata"></span>
+    </p>
 
     <p>A tooltip is easy to build with a bit of jQuery code and the
     data returned from the plot.</p>
 
-    <p><input id="enableTooltip" type="checkbox">Enable tooltip</p>
+    <p><label><input id="enableTooltip" type="checkbox">Enable tooltip</label></p>
 
 <script type="text/javascript">
 $(function () {
@@ -57,8 +60,10 @@ $(function () {
 
     var previousPoint = null;
     $("#placeholder").bind("plothover", function (event, pos, item) {
-        $("#x").text(pos.x.toFixed(2));
-        $("#y").text(pos.y.toFixed(2));
+        if ($("#enablePosition:checked").length > 0) {
+            var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
+            $("#hoverdata").text(str);
+        }
 
         if ($("#enableTooltip:checked").length > 0) {
             if (item) {
@@ -82,7 +87,7 @@ $(function () {
 
     $("#placeholder").bind("plotclick", function (event, pos, item) {
         if (item) {
-            $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
+            $("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
             plot.highlight(item.series, item.datapoint);
         }
     });