Bug fix for dygraph point selection touch event.

[dygraphs.git] / tests / callback.html
diff --git a/tests/callback.html b/tests/callback.html

index bdfc6ad..d19c40e 100644 (file)
--- a/tests/callback.html
+++ b/tests/callback.html
@@ -1,12 +1,10 @@
+<!DOCTYPE html>
  <html>
    <head>
+    <link rel="stylesheet" href="../dist/dygraph.css">
      <title>callbacks</title>
-    <!--[if IE]>
-    <script type="text/javascript" src="excanvas.js"></script>
-    <![endif]-->
-    <script type="text/javascript" src="../dygraph-combined.js"></script>
-    <script type="text/javascript" src="../dygraph-canvas.js"></script>
-    <script type="text/javascript" src="../dygraph.js"></script>
+    <script type="text/javascript" src="../dist/dygraph.js"></script>
+
      <script type="text/javascript" src="data.js"></script>
      <style type="text/css">
        #div_g {
@@ -26,12 +24,16 @@
  
      <input type="button" value="Clear list" onclick="javascript:document.getElementById('status').innerHTML=''" />
      <input type="checkbox" id="highlight" checked><label for="highlight"> Show 'highlight' events</label>
+    <input type="checkbox" id="unhighlight" checked><label for="unhighlight">Show 'unhighlight' events</label>
+    <input type="checkbox" id="showLabels" checked
+    onclick='g.updateOptions({showLabelsOnHighlight: this.checked});'>
+    <label for="showLabels"> Show Labels on highlight</label>
      <div id="status" style="width:100%; height:200px;"></div>
  
      <script type="text/javascript">
        s = document.getElementById("status");
        g = null;
-      pts_info = function(e, x, pts) {
+      pts_info = function(e, x, pts, row) {
          var str = "(" + x + ") ";
          for (var i = 0; i < pts.length; i++) {
            var p = pts[i];
@@ -44,6 +46,7 @@
          var dataXY = g.toDataCoords(x, y);
          str += ", (" + x + ", " + y + ")";
          str += " -> (" + dataXY[0] + ", " + dataXY[1] + ")";
+        str += ", row #"+row;
  
          return str;
        };
@@ -55,9 +58,15 @@
                showRoller: true,
                errorBars: true,
  
-              highlightCallback: function(e, x, pts) {
+              highlightCallback: function(e, x, pts, row) {
                  if (document.getElementById('highlight').checked) {
-                  s.innerHTML += "<b>Highlight</b> " + pts_info(e,x,pts) + "<br/>";
+                  s.innerHTML += "<b>Highlight</b> " + pts_info(e,x,pts,row) + "<br/>";
+                }
+              },
+
+              unhighlightCallback: function(e) {
+                if (document.getElementById('unhighlight').checked) {
+                  s.innerHTML += "<b>Unhighlight</b><br/>";
                  }
                },
  
@@ -65,8 +74,12 @@
                  s.innerHTML += "<b>Click</b> " + pts_info(e,x,pts) + "<br/>";
                },
  
-              zoomCallback: function(minX, maxX) {
-                s.innerHTML += "<b>Zoom</b> [" + minX + ", " + maxX + "]<br/>";
+              pointClickCallback: function(e, p) {
+                s.innerHTML += "<b>Point Click</b> " + p.name + ": " + p.x + "<br/>";
+              },
+
+              zoomCallback: function(minX, maxX, yRanges) {
+                s.innerHTML += "<b>Zoom</b> [" + minX + ", " + maxX + ", [" + yRanges + "]]<br/>";
                },
  
                drawCallback: function(g) {