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 ];
100 var yAxes = g.yAxisRanges();
102 for (var i =
0; i < yAxes.length; i++) {
103 newYAxes[i] = adjustAxis(yAxes[i], percentage);
107 dateWindow: adjustAxis(g.xAxisRange(), percentage),
108 valueRange: newYAxes[
0]
112 var v4Active = false;
115 function downV4(event, g, context) {
116 context.initializeMouseDown(event, g, context);
118 moveV4(event, g, context); // in case the mouse went down on a data point.
123 function moveV4(event, g, context) {
127 var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(g.graphDiv);
128 var canvasy = Dygraph.pageY(event) - Dygraph.findPosY(g.graphDiv);
130 var rows = g.numRows();
132 // [date, [val1, stdev1], [val2, stdev2]]
133 for (var row =
0; row < rows; row++) {
134 var date = g.getValue(row,
0);
135 var x = g.toDomCoords(date, null)[
0];
136 var diff = Math.abs(canvasx - x);
138 for (var col =
1; col <
3; col++) {
139 // TODO(konigsberg): these will throw exceptions as data is removed.
140 var vals = g.getValue(row, col);
141 if (vals == null) { continue; }
143 var y = g.toDomCoords(null, val)[
1];
144 var diff2 = Math.abs(canvasy - y);
147 for (var i in processed) {
148 var stored = processed[i];
149 if(stored[
0] == row && stored[
1] == col) {
155 processed.push([row, col]);
161 // drawV4(false, canvasx, canvasy);
164 // drawV4(false, canvasx, canvasy);
168 function upV4(event, g, context) {
174 function dblClickV4(event, g, context) {
178 function drawV4(x, y) {
181 ctx.strokeStyle =
"#000000";
182 ctx.fillStyle =
"#FFFF00";
184 ctx.arc(x,y,
5,
0,Math.PI*
2,true);
190 function captureCanvas(canvas, area, g) {
194 var g = new Dygraph(document.getElementById(
"div_g"),
195 NoisyData, { errorBars : true });
196 var g2 = new Dygraph(document.getElementById(
"div_g2"),
197 NoisyData, { errorBars : true, interactionModel : {} });
198 var g3 = new Dygraph(document.getElementById(
"div_g3"),
199 NoisyData, { errorBars : true, interactionModel : {
200 'mousedown' : downV3,
201 'mousemove' : moveV3,
203 'dblclick' : dblClickV3,
204 'mousewheel' : scrollV3
206 var g4 = new Dygraph(document.getElementById(
"div_g4"),
207 NoisyData, { errorBars : true, drawPoints : true, interactionModel : {
208 'mousedown' : downV4,
209 'mousemove' : moveV4,
211 'dblclick' : dblClickV4,
213 underlayCallback : captureCanvas
216 function unzoomGraph(g) {