tests/interaction.html

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