Fixup tracking example a wee bit, add it to index, lower the update timeout value a bit

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

examples/index.html

@@ -20,7 +20,7 @@
       <li><a href="selection.html">Selection support and zooming</a> and <a href="zooming.html">zooming with overview</a></li>
       <li><a href="time.html">Plotting time series</a> and <a href="visitors.html">visitors per day with zooming and weekends</a></li>
       <li><a href="dual-axis.html">Dual axis support</a></li>
-      <li><a href="interacting.html">Interacting with the data</a></li>
+      <li><a href="interacting.html">Interacting with the data</a> and <a href="tracking.html">tracking curves with crosshair</a></li>
     </ul>
  </body>
 </html>

examples/tracking.html

@@ -31,20 +31,26 @@ $(function () {
     }
 
     var plot = $.plot($("#placeholder"),
-           [ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ],
+           [ { data: sin, label: "sin(x) = -0.00"}, { data: cos, label: "cos(x) = -0.00" } ],
            { lines: { show: true },
              crosshair: { mode: "x" },
              grid: { hoverable: true, autoHighlight: false },
              yaxis: { min: -1.2, max: 1.2 }
              });
-
     var legends = $("#placeholder .legendLabel");
     legends.each(function () {
         // fix the widths so they don't jump around
-        $(this).css('width', $(this).width() + 30);
+        $(this).css('width', $(this).width());
     });
+
+    var updateLegendTimeout = null;
+    var latestPosition = null;
     
-    $("#placeholder").bind("plothover", function (event, pos, item) {
+    function updateLegend() {
+        updateLegendTimeout = null;
+        
+        var pos = latestPosition;
+        
         var axes = plot.getAxes();
         if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
             pos.y < axes.yaxis.min || pos.y > axes.yaxis.max)
@@ -68,8 +74,14 @@ $(function () {
             else
                 y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
             
-            legends.eq(i).text(series.label + " = " + y.toFixed(2));
+            legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
         }
+    }
+    
+    $("#placeholder").bind("plothover",  function (event, pos, item) {
+        latestPosition = pos;
+        if (!updateLegendTimeout)
+            updateLegendTimeout = setTimeout(updateLegend, 50);
     });
 });
 </script>

jquery.flot.js

@@ -870,8 +870,8 @@
             }
 
             // draw markings
-            if (options.grid.markings) {
-                var markings = options.grid.markings;
+            var markings = options.grid.markings;
+            if (markings) {
                 if ($.isFunction(markings))
                     // xmin etc. are backwards-compatible, to be removed in future
                     markings = markings({ xmin: axes.xaxis.min, xmax: axes.xaxis.max, ymin: axes.yaxis.min, ymax: axes.yaxis.max, xaxis: axes.xaxis, yaxis: axes.yaxis, x2axis: axes.x2axis, y2axis: axes.y2axis });
@@ -1752,7 +1752,7 @@
 
         function triggerRedrawOverlay() {
             if (!redrawTimeout)
-                redrawTimeout = setTimeout(redrawOverlay, 50);
+                redrawTimeout = setTimeout(redrawOverlay, 30);
         }
 
         function redrawOverlay() {