Fix #816; remove references to valueWindow (#817)
[dygraphs.git] / tests / link-interaction.html
CommitLineData
54425b14 1<!DOCTYPE html>
599fb4ad
DV
2<html>
3 <head>
fd6b8dad 4 <link rel="stylesheet" href="../dist/dygraph.css">
599fb4ad 5 <title>noise</title>
fbd6834a 6 <script type="text/javascript" src="../dist/dygraph.js"></script>
7e5ddc94 7
599fb4ad
DV
8 </head>
9 <body>
10 <div id="div_g"></div>
11 <b>Zoom:</b>
12 <a href="#" onclick="zoom(3600)">hour</a>
13 <a href="#" onclick="zoom(86400)">day</a>
14 <a href="#" onclick="zoom(604800)">week</a>
15 <a href="#" onclick="zoom(30 * 86400)">month</a>
16 <a href="#" onclick="reset()">full</a>
17 <b>Pan:</b>
18 <a href="#" onclick="pan(-1)">left</a>
19 <a href="#" onclick="pan(+1)">right</a>
20
21 <script type="text/javascript">
22 var r = [ ];
23 var base_time = Date.parse("2008/07/01");
24 var num = 24 * 0.25 * 365;
25 for (var i = 0; i < num; i++) {
26 r.push([ new Date(base_time + i * 3600 * 1000),
27 i + 50 * (i % 60), // line
28 i * (num - i) * 4.0 / num // parabola
29 ]);
30 }
31 var orig_range = [ r[0][0].valueOf(), r[r.length - 1][0].valueOf() ];
32 g = new Dygraph(
33 document.getElementById("div_g"),
34 r, {
35 rollPeriod: 7,
b1a3b195 36 animatedZooms: true,
599fb4ad
DV
37 // errorBars: true,
38 width: 600,
39 height: 300,
40 labels: ["Date", "a", "b"]
41 }
42 );
43
44 var desired_range = null;
45 function approach_range() {
46 if (!desired_range) return;
47 // go halfway there
48 var range = g.xAxisRange();
49 if (Math.abs(desired_range[0] - range[0]) < 60 &&
50 Math.abs(desired_range[1] - range[1]) < 60) {
51 g.updateOptions({dateWindow: desired_range});
52 // (do not set another timeout.)
53 } else {
54 var new_range;
55 new_range = [0.5 * (desired_range[0] + range[0]),
56 0.5 * (desired_range[1] + range[1])];
57 g.updateOptions({dateWindow: new_range});
58 animate();
59 }
60 }
61 function animate() {
62 setTimeout(approach_range, 50);
63 }
64
65 function zoom(res) {
66 var w = g.xAxisRange();
67 desired_range = [ w[0], w[0] + res * 1000 ];
68 animate();
69 }
70
71 function reset() {
72 desired_range = orig_range;
73 animate();
74 }
75
76 function pan(dir) {
77 var w = g.xAxisRange();
78 var scale = w[1] - w[0];
79 var amount = scale * 0.25 * dir;
80 desired_range = [ w[0] + amount, w[1] + amount ];
81 animate();
82 }
83 </script>
84 </body>
85</html>