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