Use CSS for styling
[dygraphs.git] / tests / interaction.html
... / ...
CommitLineData
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>interaction model</title>
5 <!--
6 For production (minified) code, use:
7 <script type="text/javascript" src="dygraph-combined.js"></script>
8 -->
9 <script type="text/javascript" src="../dist/dygraph.js"></script>
10
11 <script type="text/javascript" src="data.js"></script>
12 <script type="text/javascript" src="interaction.js"></script>
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>
24 </td><td>Click and drag all you like, it won't do anything!
25 <div id="g2_console"></div>
26 </td></tr>
27 <tr><td>
28 <b>Custom interaction model</b>
29
30 <input type="button" value="Restore position" onclick="restorePositioning(g3)">
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/>
35 Standard Zoom: shift-click-drag
36 Standard Pan: click-drag<br/>
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>
48
49 <script type="text/javascript">
50 document.addEventListener("mousewheel", function() {
51 lastClickedGraph = null;
52 }, false);
53 document.addEventListener("click", function() { lastClickedGraph = null; }, false);
54 var g = new Dygraph(document.getElementById("div_g"),
55 NoisyData, { errorBars : true });
56 var s = document.getElementById("g2_console");
57 var g2 = new Dygraph(document.getElementById("div_g2"),
58 NoisyData,
59 {
60 errorBars : true,
61 interactionModel: {}
62 });
63 var g3 = new Dygraph(document.getElementById("div_g3"),
64 NoisyData, { errorBars : true, interactionModel : {
65 'mousedown' : downV3,
66 'mousemove' : moveV3,
67 'mouseup' : upV3,
68 'click' : clickV3,
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 });
81 </script>
82
83 </body>
84</html>