Merge pull request #761 from justinsg/master
[dygraphs.git] / gallery / link-interaction.js
CommitLineData
e88a95b4 1/*global Gallery,Dygraph,data */
e2a5e398
RK
2Gallery.register(
3 'link-interaction',
4 {
5 name: 'Link Interaction',
6 setup: function(parent) {
605b6119
RK
7 parent.innerHTML = [
8 "<div id='div_g'></div>",
9 "<b>Zoom:</b>",
10 "<a href='#' id='hour'>hour</a> ",
11 "<a href='#' id='day'>day</a> ",
12 "<a href='#' id='week'>week</a> ",
13 "<a href='#' id='month'>month</a> ",
14 "<a href='#' id='full'>full</a> ",
15 "<b>Pan:</b> ",
16 "<a href='#' id='left'>left</a> ",
17 "<a href='#' id='right'>right</a> "].join("\n");
e2a5e398
RK
18 },
19 run: function() {
20 var r = [ ];
21 var base_time = Date.parse("2008/07/01");
22 var num = 24 * 0.25 * 365;
23 for (var i = 0; i < num; i++) {
24 r.push([ new Date(base_time + i * 3600 * 1000),
25 i + 50 * (i % 60), // line
26 i * (num - i) * 4.0 / num // parabola
27 ]);
28 }
29 var orig_range = [ r[0][0].valueOf(), r[r.length - 1][0].valueOf() ];
e88a95b4 30 var g = new Dygraph(
e2a5e398
RK
31 document.getElementById("div_g"),
32 r, {
33 rollPeriod: 7,
34 animatedZooms: true,
35 // errorBars: true,
36 width: 600,
37 height: 300,
38 labels: ["Date", "a", "b"]
39 }
40 );
41
e88a95b4 42 var desired_range = null, animate;
e2a5e398
RK
43 function approach_range() {
44 if (!desired_range) return;
45 // go halfway there
46 var range = g.xAxisRange();
47 if (Math.abs(desired_range[0] - range[0]) < 60 &&
48 Math.abs(desired_range[1] - range[1]) < 60) {
49 g.updateOptions({dateWindow: desired_range});
50 // (do not set another timeout.)
51 } else {
52 var new_range;
53 new_range = [0.5 * (desired_range[0] + range[0]),
54 0.5 * (desired_range[1] + range[1])];
55 g.updateOptions({dateWindow: new_range});
56 animate();
57 }
58 }
e88a95b4 59 animate = function() {
e2a5e398 60 setTimeout(approach_range, 50);
e88a95b4 61 };
e2a5e398 62
3c10a0f3 63 var zoom = function(res) {
e2a5e398
RK
64 var w = g.xAxisRange();
65 desired_range = [ w[0], w[0] + res * 1000 ];
66 animate();
e1e80cce 67 };
e2a5e398 68
3c10a0f3 69 var reset = function() {
e2a5e398
RK
70 desired_range = orig_range;
71 animate();
e1e80cce 72 };
e2a5e398 73
3c10a0f3 74 var pan = function(dir) {
e2a5e398
RK
75 var w = g.xAxisRange();
76 var scale = w[1] - w[0];
77 var amount = scale * 0.25 * dir;
78 desired_range = [ w[0] + amount, w[1] + amount ];
79 animate();
e1e80cce 80 };
3c10a0f3
RK
81
82 document.getElementById('hour').onclick = function() { zoom(3600); };
83 document.getElementById('day').onclick = function() { zoom(86400); };
84 document.getElementById('week').onclick = function() { zoom(604800); };
85 document.getElementById('month').onclick = function() { zoom(30 * 86400); };
86 document.getElementById('full').onclick = function() { reset(); };
87 document.getElementById('left').onclick = function() { pan(-1); };
88 document.getElementById('right').onclick = function() { pan(+1); };
e2a5e398 89 }
d0c6a883 90 });