Commit | Line | Data |
---|---|---|
abfadf4c RK |
1 | Gallery.register( |
2 | 'interaction', | |
3 | { | |
4 | name: 'Custom interaction models', | |
5 | title: 'title', | |
6 | setup: function(parent) { | |
605b6119 RK |
7 | parent.innerHTML = [ |
8 | "<table border='1'>", | |
9 | "<tr><td>", | |
10 | "<b>Default interaction model</b>", | |
11 | "<div id='div_g' style='width:600px; height:300px;'></div>", | |
12 | "</td><td>Zoom: click-drag<br/>Pan: shift-click-drag<br/>Restore zoom level: double-click<br/>", | |
13 | "</td></tr>", | |
14 | "<tr><td>", | |
15 | "<b>No interaction model</b>", | |
16 | "<div id='div_g2' style='width:600px; height:300px;'></div>", | |
17 | "</td><td>Click and drag all you like, it won't do anything!", | |
18 | "<div id='g2_console'></div>", | |
19 | "</td></tr>", | |
20 | "<tr><td>", | |
21 | "<b>Custom interaction model</b>", | |
22 | "<button id='restore3'>Restore Position</button>", | |
23 | "<div id='div_g3' style='width:600px; height:300px;'></div>", | |
24 | "</td><td>", | |
25 | "Zoom in: double-click, scroll wheel<br/>", | |
26 | "Zoom out: ctrl-double-click, scroll wheel<br/>", | |
27 | "Standard Zoom: shift-click-drag", | |
28 | "Standard Pan: click-drag<br/>", | |
29 | "Restore zoom level: press button<br/>", | |
30 | "</td></tr>", | |
31 | "<tr><td>", | |
32 | "<b>Fun model!</b>", | |
33 | "<div id='div_g4' style='width:600px; height:300px;'></div>", | |
34 | "</td><td>", | |
35 | "Keep the mouse button pressed, and hover over all points", | |
36 | "to mark them.", | |
37 | "</td></tr>", | |
38 | "</table>"].join("\n"); | |
abfadf4c RK |
39 | |
40 | }, | |
41 | run: function() { | |
42 | // TODO(konigsberg): Add cleanup to remove callbacks. | |
43 | Dygraph.addEvent(document, "mousewheel", function() { lastClickedGraph = null; }); | |
44 | Dygraph.addEvent(document, "click", function() { lastClickedGraph = null; }); | |
45 | var g = new Dygraph(document.getElementById("div_g"), | |
46 | NoisyData, { errorBars : true }); | |
47 | var s = document.getElementById("g2_console"); | |
48 | var g2 = new Dygraph(document.getElementById("div_g2"), | |
49 | NoisyData, | |
50 | { | |
51 | errorBars : true, | |
52 | interactionModel: {} | |
53 | }); | |
54 | var g3 = new Dygraph(document.getElementById("div_g3"), | |
55 | NoisyData, { errorBars : true, interactionModel : { | |
56 | 'mousedown' : downV3, | |
57 | 'mousemove' : moveV3, | |
58 | 'mouseup' : upV3, | |
59 | 'click' : clickV3, | |
60 | 'dblclick' : dblClickV3, | |
61 | 'mousewheel' : scrollV3 | |
62 | }}); | |
63 | document.getElementById("restore3").onclick = function() { | |
64 | restorePositioning(g3); | |
c1f22b5a | 65 | } |
abfadf4c RK |
66 | var g4 = new Dygraph(document.getElementById("div_g4"), |
67 | NoisyData, { errorBars : true, drawPoints : true, interactionModel : { | |
68 | 'mousedown' : downV4, | |
69 | 'mousemove' : moveV4, | |
70 | 'mouseup' : upV4, | |
71 | 'dblclick' : dblClickV4, | |
72 | }, | |
73 | underlayCallback : captureCanvas | |
74 | }); | |
c1f22b5a | 75 | } |
c1f22b5a | 76 | }); |