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