tests/interaction.html

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