1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
/*global Gallery,Dygraph,data */
/*global NoisyData,downV3,moveV3,upV3,clickV3,dblClickV3,scrollV3,restorePositioning,downV4,moveV4,upV4,dblClickV4,captureCanvas */
//galleryActive=true
Gallery.register(
'interaction',
{
name: 'Custom interaction models',
title: 'title',
setup: function(parent) {
parent.innerHTML = [
"<h3>Default interaction model</h3>",
"<div style='width:600px;'>",
" <p style='text-align:center;'>",
" Zoom: click-drag, Pan: shift-click-drag, Restore: double-click",
" </p>",
" <div id='div_g' style='width:600px; height:300px;'></div>",
"</div>",
"",
"<h3>Empty interaction model</h3>",
"<div style='width:600px;'>",
" <p style='text-align:center;'>",
" Click and drag all you like, it won't do anything!",
" </p>",
" <div id='div_g2' style='width:600px; height:300px;'></div>",
"</div>",
"<div id='g2_console'></div>", // what is this?
"",
"<h3>Custom interaction model</h3>",
"<div style='width:600px;'>",
" <p style='text-align:center;'>",
" Zoom in: double-click, scroll wheel<br />",
" Zoom out: ctrl-double-click, scroll wheel<br />",
" Standard Zoom: shift-click-drag",
" Standard Pan: click-drag<br />",
" Restore zoom level: press button<br />",
" </p>",
" <button id='restore3'>Restore position</button>",
" <div id='div_g3' style='width:600px; height:300px;'></div>",
"</div>",
"<h3>Fun model!</h3>",
"<div style='width:600px;'>",
" <p style='text-align:center;'>",
" Keep the mouse button pressed, and hover over all points",
" to mark them.",
" </p>",
" <div id='div_g4' style='width:600px; height:300px;'></div>",
"</div>"
].join('\n');
},
run: function() {
new Dygraph(document.getElementById("div_g"),
NoisyData, { errorBars : true });
new Dygraph(document.getElementById("div_g2"),
NoisyData,
{
errorBars : true,
interactionModel: {}
});
var g3 = new Dygraph(document.getElementById("div_g3"),
NoisyData, { errorBars : true, interactionModel : {
'mousedown' : downV3,
'mousemove' : moveV3,
'mouseup' : upV3,
'click' : clickV3,
'dblclick' : dblClickV3,
'mousewheel' : scrollV3
}});
document.getElementById("restore3").onclick = function() {
restorePositioning(g3);
};
new Dygraph(document.getElementById("div_g4"),
NoisyData, {
errorBars : true,
drawPoints : true,
interactionModel : {
'mousedown' : downV4,
'mousemove' : moveV4,
'mouseup' : upV4,
'dblclick' : dblClickV4
},
underlayCallback : captureCanvas
});
}
});
|
