4 <title>interaction model
</title>
6 <script type=
"text/javascript" src=
"../excanvas.js"></script>
8 <script type=
"text/javascript" src=
"../strftime/strftime-min.js"></script>
9 <script type=
"text/javascript" src=
"../rgbcolor/rgbcolor.js"></script>
10 <script type=
"text/javascript" src=
"../dygraph-canvas.js"></script>
11 <script type=
"text/javascript" src=
"../dygraph.js"></script>
12 <script type=
"text/javascript" src=
"data.js"></script>
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/>
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!
</td></tr>
26 <b>Custom interaction model
</b>
28 <input type=
"button" value=
"Unzoom" onclick=
"unzoomGraph(g3)">
29 <div id=
"div_g3" style=
"width:600px; height:300px;"></div>
31 Zoom in: double-click, scroll wheel
<br/>
32 Zoom out: ctrl-double-click, scroll wheel
<br/>
33 Standard Zoom: shift-click-drag
34 Standard Pan: click-drag
<br/>
35 Restore zoom level: press button
<br/>
39 <div id=
"div_g4" style=
"width:600px; height:300px;"></div>
41 Keep the mouse button pressed, and hover over all points
47 <script type=
"text/javascript">
48 function downV3(event, g, context) {
49 context.initializeMouseDown(event, g, context);
50 if (event.altKey || event.shiftKey) {
51 Dygraph.startZoom(event, g, context);
53 Dygraph.startPan(event, g, context);
57 function moveV3(event, g, context) {
58 if (context.isPanning) {
59 Dygraph.movePan(event, g, context);
60 } else if (context.isZooming) {
61 Dygraph.moveZoom(event, g, context);
65 function upV3(event, g, context) {
66 if (context.isPanning) {
67 Dygraph.endPan(event, g, context);
68 } else if (context.isZooming) {
69 Dygraph.endZoom(event, g, context);
73 function dblClickV3(event, g, context) {
81 function scrollV3(event, g, context) {
82 var normal = event.detail ? event.detail * -
1 : event.wheelDelta /
40;
83 // For me the normalized value shows
0.075 for one click. If I took
84 // that verbatim, it would be a
7.5%. I think I'm gonna take
1/
10 of that.
85 // (double for left and right side)
86 var percentage = normal /
100;
89 Dygraph.cancelEvent(event);
92 function zoom(g, percentage) {
93 // Adjusts [x, y] toward each other by percentage%
94 function adjustAxis(axis, percentage) {
95 var delta = axis[
1] - axis[
0];
96 var increment = delta * percentage;
97 return [ axis[
0] + increment, axis[
1] - increment ];
99 var yAxes = g.yAxisRanges();
101 for (var i =
0; i < yAxes.length; i++) {
102 newYAxes[i] = adjustAxis(yAxes[i], percentage);
106 dateWindow: adjustAxis(g.xAxisRange(), percentage),
107 valueRange: newYAxes[
0]
111 var v4Active = false;
114 function downV4(event, g, context) {
115 context.initializeMouseDown(event, g, context);
117 moveV4(event, g, context); // in case the mouse went down on a data point.
122 function moveV4(event, g, context) {
126 var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(g.graphDiv);
127 var canvasy = Dygraph.pageY(event) - Dygraph.findPosY(g.graphDiv);
129 var rows = g.numRows();
131 // [date, [val1, stdev1], [val2, stdev2]]
132 for (var row =
0; row < rows; row++) {
133 var date = g.getValue(row,
0);
134 var x = g.toDomCoords(date, null)[
0];
135 var diff = Math.abs(canvasx - x);
137 for (var col =
1; col <
3; col++) {
138 // TODO(konigsberg): these will throw exceptions as data is removed.
139 var vals = g.getValue(row, col);
140 if (vals == null) { continue; }
142 var y = g.toDomCoords(null, val)[
1];
143 var diff2 = Math.abs(canvasy - y);
146 for (var i in processed) {
147 var stored = processed[i];
148 if(stored[
0] == row && stored[
1] == col) {
154 processed.push([row, col]);
160 // drawV4(false, canvasx, canvasy);
163 // drawV4(false, canvasx, canvasy);
167 function upV4(event, g, context) {
173 function dblClickV4(event, g, context) {
177 function drawV4(x, y) {
180 ctx.strokeStyle =
"#000000";
181 ctx.fillStyle =
"#FFFF00";
183 ctx.arc(x,y,
5,
0,Math.PI*
2,true);
189 function captureCanvas(canvas, area, g) {
193 var g = new Dygraph(document.getElementById(
"div_g"),
194 NoisyData, { errorBars : true });
195 var g2 = new Dygraph(document.getElementById(
"div_g2"),
196 NoisyData, { errorBars : true, interactionModel : {} });
197 var g3 = new Dygraph(document.getElementById(
"div_g3"),
198 NoisyData, { errorBars : true, interactionModel : {
199 'mousedown' : downV3,
200 'mousemove' : moveV3,
202 'dblclick' : dblClickV3,
203 'mousewheel' : scrollV3
205 var g4 = new Dygraph(document.getElementById(
"div_g4"),
206 NoisyData, { errorBars : true, drawPoints : true, interactionModel : {
207 'mousedown' : downV4,
208 'mousemove' : moveV4,
210 'dblclick' : dblClickV4,
212 underlayCallback : captureCanvas
215 function unzoomGraph(g) {