tests/interaction.html

   1 <html>
   2   <head>
   3     <title>interaction model</title>
   4     <!--[if IE]>
   5     <script type="text/javascript" src="../excanvas.js"></script>
   6     <![endif]-->
   7     <script type="text/javascript" src="../strftime/strftime-min.js"></script>
   8     <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
   9     <script type="text/javascript" src="../dygraph-canvas.js"></script>
  10     <script type="text/javascript" src="../dygraph.js"></script>
  11     <script type="text/javascript" src="data.js"></script>
  12     <script type="text/javascript" src="interaction.js"></script>
  13   </head>
  14   <body>
  15     <table border='1'>
  16     <tr><td>
  17     <b>Default interaction model</b>
  18     <div id="div_g" style="width:600px; height:300px;"></div>
  19     </td><td>Zoom: click-drag<br/>Pan: shift-click-drag<br/>Restore zoom level: double-click<br/>
  20     </td></tr>
  21     <tr><td>
  22     <b>No interaction model</b>
  23     <div id="div_g2" style="width:600px; height:300px;"></div>
  24     </td><td>Click and drag all you like, it won't do anything!</td></tr>
  25     <tr><td>
  26     <b>Custom interaction model</b>
  27
  28     <input type="button" value="Restore position" onclick="restorePositioning(g3)">
  29     <div id="div_g3" style="width:600px; height:300px;"></div>
  30     </td><td>
  31     Zoom in: double-click, scroll wheel<br/>
  32     Zoom out: ctrl-double-click, scroll wheel<br/>
  33     Standard Zoom: shift-click-drag
  34     Standard Pan: click-drag<br/>
  35     Restore zoom level: press button<br/>
  36     </td></tr>
  37     <tr><td>
  38     <b>Fun model!</b>
  39     <div id="div_g4" style="width:600px; height:300px;"></div>
  40     </td><td>
  41     Keep the mouse button pressed, and hover over all points
  42     to mark them.
  43     </td></tr>
  44
  45     </table>
  46
  47     <script type="text/javascript">
  48       Dygraph.addEvent(document, "mousewheel", function() { lastClickedGraph = null; });
  49       Dygraph.addEvent(document, "click", function() { lastClickedGraph = null; });
  50       var g = new Dygraph(document.getElementById("div_g"),
  51            NoisyData, { errorBars : true });
  52       var g2 = new Dygraph(document.getElementById("div_g2"),
  53            NoisyData, { errorBars : true, interactionModel : {} });
  54       var g3 = new Dygraph(document.getElementById("div_g3"),
  55            NoisyData, { errorBars : true, interactionModel : {
  56         'mousedown' : downV3,
  57         'mousemove' : moveV3,
  58         'mouseup' : upV3,
  59         'click' : clickV3,
  60         'dblclick' : dblClickV3,
  61         'mousewheel' : scrollV3
  62       }});
  63       var g4 = new Dygraph(document.getElementById("div_g4"),
  64            NoisyData, { errorBars : true, drawPoints : true, interactionModel : {
  65             'mousedown' : downV4,
  66             'mousemove' : moveV4,
  67             'mouseup' : upV4,
  68             'dblclick' : dblClickV4,
  69            },
  70            underlayCallback : captureCanvas
  71       });
  72     </script>
  73
  74   </body>
  75 </html>