Commit | Line | Data |
---|---|---|
54425b14 | 1 | <!DOCTYPE html> |
885c13e4 RK |
2 | <html> |
3 | <head> | |
4 | <title>interaction model</title> | |
7e5ddc94 DV |
5 | <!-- |
6 | For production (minified) code, use: | |
7 | <script type="text/javascript" src="dygraph-combined.js"></script> | |
8 | --> | |
fbd6834a | 9 | <script type="text/javascript" src="../dist/dygraph.js"></script> |
7e5ddc94 | 10 | |
885c13e4 | 11 | <script type="text/javascript" src="data.js"></script> |
9e9ca2eb | 12 | <script type="text/javascript" src="interaction.js"></script> |
885c13e4 RK |
13 | </head> |
14 | <body> | |
15 | <table border='1'> | |
16 | <tr><td> | |
17 | <b>Default interaction model</b> | |
18 | <div id="div_g" style="width:600px; height:300px;"></div> | |
19 | </td><td>Zoom: click-drag<br/>Pan: shift-click-drag<br/>Restore zoom level: double-click<br/> | |
20 | </td></tr> | |
21 | <tr><td> | |
22 | <b>No interaction model</b> | |
23 | <div id="div_g2" style="width:600px; height:300px;"></div> | |
027e9e9b DV |
24 | </td><td>Click and drag all you like, it won't do anything! |
25 | <div id="g2_console"></div> | |
26 | </td></tr> | |
885c13e4 RK |
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"> |
2b66af4f DV |
50 | document.addEventListener("mousewheel", function() { |
51 | lastClickedGraph = null; | |
52 | }, false); | |
53 | document.addEventListener("click", function() { lastClickedGraph = null; }, false); | |
885c13e4 RK |
54 | var g = new Dygraph(document.getElementById("div_g"), |
55 | NoisyData, { errorBars : true }); | |
027e9e9b | 56 | var s = document.getElementById("g2_console"); |
885c13e4 | 57 | var g2 = new Dygraph(document.getElementById("div_g2"), |
027e9e9b DV |
58 | NoisyData, |
59 | { | |
60 | errorBars : true, | |
0290d079 | 61 | interactionModel: {} |
027e9e9b | 62 | }); |
885c13e4 RK |
63 | var g3 = new Dygraph(document.getElementById("div_g3"), |
64 | NoisyData, { errorBars : true, interactionModel : { | |
65 | 'mousedown' : downV3, | |
66 | 'mousemove' : moveV3, | |
67 | 'mouseup' : upV3, | |
9d10bca3 | 68 | 'click' : clickV3, |
885c13e4 RK |
69 | 'dblclick' : dblClickV3, |
70 | 'mousewheel' : scrollV3 | |
71 | }}); | |
72 | var g4 = new Dygraph(document.getElementById("div_g4"), | |
73 | NoisyData, { errorBars : true, drawPoints : true, interactionModel : { | |
74 | 'mousedown' : downV4, | |
75 | 'mousemove' : moveV4, | |
76 | 'mouseup' : upV4, | |
77 | 'dblclick' : dblClickV4, | |
78 | }, | |
79 | underlayCallback : captureCanvas | |
80 | }); | |
885c13e4 RK |
81 | </script> |
82 | ||
83 | </body> | |
84 | </html> |