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