4 <link rel=
"stylesheet" href=
"../dist/dygraph.css">
5 <title>interaction model
</title>
6 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
8 <script type=
"text/javascript" src=
"data.js"></script>
9 <script type=
"text/javascript" src=
"interaction.js"></script>
14 <b>Default interaction model
</b>
15 <div id=
"div_g" style=
"width:600px; height:300px;"></div>
16 </td><td>Zoom: click-drag
<br/>Pan: shift-click-drag
<br/>Restore zoom level: double-click
<br/>
19 <b>No interaction model
</b>
20 <div id=
"div_g2" style=
"width:600px; height:300px;"></div>
21 </td><td>Click and drag all you like, it won't do anything!
22 <div id=
"g2_console"></div>
25 <b>Custom interaction model
</b>
27 <input type=
"button" value=
"Restore position" onclick=
"restorePositioning(g3)">
28 <div id=
"div_g3" style=
"width:600px; height:300px;"></div>
30 Zoom in: double-click, scroll wheel
<br/>
31 Zoom out: ctrl-double-click, scroll wheel
<br/>
32 Standard Zoom: shift-click-drag
33 Standard Pan: click-drag
<br/>
34 Restore zoom level: press button
<br/>
38 <div id=
"div_g4" style=
"width:600px; height:300px;"></div>
40 Keep the mouse button pressed, and hover over all points
46 <script type=
"text/javascript">
47 document.addEventListener(
"mousewheel", function() {
48 lastClickedGraph = null;
50 document.addEventListener(
"click", function() { lastClickedGraph = null; }, false);
51 var g = new Dygraph(document.getElementById(
"div_g"),
52 NoisyData, { errorBars : true });
53 var s = document.getElementById(
"g2_console");
54 var g2 = new Dygraph(document.getElementById(
"div_g2"),
60 var g3 = new Dygraph(document.getElementById(
"div_g3"),
61 NoisyData, { errorBars : true, interactionModel : {
66 'dblclick' : dblClickV3,
67 'mousewheel' : scrollV3
69 var g4 = new Dygraph(document.getElementById(
"div_g4"),
70 NoisyData, { errorBars : true, drawPoints : true, interactionModel : {
74 'dblclick' : dblClickV4,
76 underlayCallback : captureCanvas