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