Spit out pageX/pageY in "plotclick" and "plothover" events, add primitive tooltip stuff to demo

git-svn-id: https://flot.googlecode.com/svn/trunk@74 1e0a6537-2640-0410-bfb7-f154510ff394

API.txt

@@ -495,8 +495,9 @@ An example function might look like this:
 
 If you set "clickable" to true, the plot will listen for click events
 on the plot area and fire a "plotclick" event on the placeholder with
-a position and a nearby data item object as parameters. The returned
-coordinates are in the unit of the axes (not in pixels).
+a position and a nearby data item object as parameters. The coordinates
+are available both in the unit of the axes (not in pixels) and in
+global screen coordinates.
 
 If you set "hoverable" to true, the plot will listen for mouse move
 events on the plot area and fire a "plothover" event with the same
@@ -508,7 +509,8 @@ You can use "plotclick" and "plothover" events like this:
 
     $("#placeholder").bind("plotclick", function (event, pos, item) {
         alert("You clicked at " + pos.x + ", " + pos.y);
-        // secondary axis coordinates if present are in pos.x2, pos.y2
+        // secondary axis coordinates if present are in pos.x2, pos.y2,
+        // if you need global screen coordinates, they are pos.pageX, pos.pageY
     });
 
 The item object in this example is either null or a nearby object on the form:
@@ -518,6 +520,7 @@ The item object in this example is either null or a nearby object on the form:
       dataIndex: the index of the point in the data array
       series: the series object
       seriesIndex: the index of the series
+      pageX, pageY: the global screen coordinates of the point
   }
 
 For instance, if you have specified the data like this 

NEWS.txt

@@ -8,7 +8,8 @@ compatibility hooks are in place).
 
 Interactivity: added a new "plothover" event and this and the
 "plotclick" event now returns the closest data item (based on patch by
-/david).
+/david). See the revamped "interacting with the data" example for
+some hints on what you can do.
 
 Timestamps in time mode are now displayed according to
 UTC instead of the time zone of the visitor. This affects the way the

TODO

@@ -28,12 +28,13 @@ legend
 
 labels
   - labels on bars, data points
-  - plain "all points" option
-  - interactive "label this point" command
+  - interactive "label this point" command/tooltip support
 
 error margin indicators
   - for scientific/statistical purposes
 
+hi-low bars
+
 non-xy based graph types
   - figure out how to integrate them with the rest of the plugin
   - pie charts

examples/interacting.html

@@ -14,13 +14,15 @@
     <div id="placeholder" style="width:600px;height:300px"></div>
 
     <p>One of the goals of Flot is to support user interactions intelligently.
-    Try hovering over the graph above and clicking on the points (note that support for highlighting the points is still missing).</p>
+    Try hovering over the graph above and clicking on the points. A
+    tooltip is easy to build with a bit of jQuery code and the data returned
+    from the plot. Note that support for highlighting the points is
+    currently missing.</p>
 
     <p id="clickdata"></p>
 
     <p id="hoverdata" style="display:none">Mouse hovers at
-    (<span id="x"></span>, <span id="y"></span>).<br>
-    Nearby item: <span id="nearby"></span>.</p>
+    (<span id="x"></span>, <span id="y"></span>).</p>
 
 <script id="source" language="javascript" type="text/javascript">
 $(function () {
@@ -36,23 +38,46 @@ $(function () {
              points: { show: true },
              grid: { hoverable: true, clickable: true } });
 
+    function showTooltip(x, y, contents) {
+        $('<div id="tooltip">' + contents + '</div>').css( {
+            position: 'absolute',
+            display: 'none',
+            top: y + 5,
+            left: x + 5,
+            border: '1 px solid #fdd',
+            padding: '2px',
+            'background-color': '#fee',
+            opacity: 0.80
+        }).appendTo("body").fadeIn(200);
+    }
+
+    var previousPoint = null;
     $("#placeholder").bind("plothover", function (event, pos, item) {
         $("#x").text(pos.x.toFixed(2));
         $("#y").text(pos.y.toFixed(2));
+        $("#hoverdata").show();
 
-        var nearby = "none";
-        if (item)
-            nearby = "point " + item.dataIndex + " in " + item.series.label + " at (" + item.datapoint[0].toFixed(2) + ", " + item.datapoint[1].toFixed(2) + ")";
-        $("#nearby").text(nearby);
+        if (item) {
+            if (previousPoint != item.datapoint) {
+                previousPoint = item.datapoint;
                 
-        $("#hoverdata").show();
+                $("#tooltip").remove();
+                var x = item.datapoint[0].toFixed(2),
+                    y = item.datapoint[1].toFixed(2);
+                
+                showTooltip(item.pageX, item.pageY,
+                            item.series.label + " of " + x + " = " + y);
+            }
+        }
+        else {
+            $("#tooltip").remove();
+            previousPoint = null;            
+        }
     });
 
     $("#placeholder").bind("plotclick", function (event, pos, item) {
         if (item) {
-            var x = item.datapoint[0].toFixed(2);
-            var y = item.datapoint[1].toFixed(2);
-            $("#clickdata").text(item.series.label + " of " + x + " = " + y);
+            $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label);
         }
     });
 });

jquery.flot.js

@@ -1582,9 +1582,11 @@
             hoverTimeout = null;
         }
 
+        // trigger click or hover event (they send the same parameters
+        // so we share their code)
         function triggerClickHoverEvent(eventname, event) {
             var offset = eventHolder.offset(),
-                pos = {},
+                pos = { pageX: event.pageX, pageY: event.pageY },
                 canvasX = event.pageX - offset.left - plotOffset.left,
                 canvasY = event.pageY - offset.top - plotOffset.top;
 
@@ -1599,6 +1601,11 @@
             
             item = findNearbyItem(canvasX, canvasY);
 
+            if (item) {
+                item.pageX = parseInt(item.series.xaxis.p2c(item.datapoint[0]) + offset.left + plotOffset.left);
+                item.pageY = parseInt(item.series.yaxis.p2c(item.datapoint[1]) + offset.top + plotOffset.top);
+            }
+
             target.trigger(eventname, [ pos, item ]);
         }