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