1 // Use this as a template for new Gallery entries.
5 name
: 'Link Interaction',
6 setup
: function(parent
) {
8 "<div id='div_g'></div>" +
10 "<a href='#' onclick='zoom(3600)'>hour</a> " +
11 "<a href='#' onclick='zoom(86400)'>day</a> " +
12 "<a href='#' onclick='zoom(604800)'>week</a> " +
13 "<a href='#' onclick='zoom(30 * 86400)'>month</a> " +
14 "<a href='#' onclick='reset()'>full</a> " +
16 "<a href='#' onclick='pan(-1)'>left</a> " +
17 "<a href='#' onclick='pan(+1)'>right</a> ";
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
29 var orig_range
= [ r
[0][0].valueOf(), r
[r
.length
- 1][0].valueOf() ];
31 document
.getElementById("div_g"),
38 labels
: ["Date", "a", "b"]
42 var desired_range
= null;
43 function approach_range() {
44 if (!desired_range
) return;
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.)
53 new_range
= [0.5 * (desired_range
[0] + range
[0]),
54 0.5 * (desired_range
[1] + range
[1])];
55 g
.updateOptions({dateWindow
: new_range
});
60 setTimeout(approach_range
, 50);
63 window
.zoom
= function(res
) {
64 var w
= g
.xAxisRange();
65 desired_range
= [ w
[0], w
[0] + res
* 1000 ];
69 window
.reset
= function() {
70 desired_range
= orig_range
;
74 window
.pan
= function(dir
) {
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
];