-// Use this as a template for new Gallery entries.
+/*global Gallery,Dygraph,data */
Gallery.register(
'link-interaction',
{
name: 'Link Interaction',
setup: function(parent) {
- parent.innerHTML =
- "<div id='div_g'></div>" +
- "<b>Zoom:</b>" +
- "<a href='#' id='hour'>hour</a> " +
- "<a href='#' id='day'>day</a> " +
- "<a href='#' id='week'>week</a> " +
- "<a href='#' id='month'>month</a> " +
- "<a href='#' id='full'>full</a> " +
- "<b>Pan:</b> " +
- "<a href='#' id='left'>left</a> " +
- "<a href='#' id='right'>right</a> ";
+ parent.innerHTML = [
+ "<div id='div_g'></div>",
+ "<b>Zoom:</b>",
+ "<a href='#' id='hour'>hour</a> ",
+ "<a href='#' id='day'>day</a> ",
+ "<a href='#' id='week'>week</a> ",
+ "<a href='#' id='month'>month</a> ",
+ "<a href='#' id='full'>full</a> ",
+ "<b>Pan:</b> ",
+ "<a href='#' id='left'>left</a> ",
+ "<a href='#' id='right'>right</a> "].join("\n");
},
run: function() {
var r = [ ];
]);
}
var orig_range = [ r[0][0].valueOf(), r[r.length - 1][0].valueOf() ];
- g = new Dygraph(
+ var g = new Dygraph(
document.getElementById("div_g"),
r, {
rollPeriod: 7,
}
);
- var desired_range = null;
+ var desired_range = null, animate;
function approach_range() {
if (!desired_range) return;
// go halfway there
animate();
}
}
- function animate() {
+ animate = function() {
setTimeout(approach_range, 50);
- }
+ };
var zoom = function(res) {
var w = g.xAxisRange();
desired_range = [ w[0], w[0] + res * 1000 ];
animate();
- }
+ };
var reset = function() {
desired_range = orig_range;
animate();
- }
+ };
var pan = function(dir) {
var w = g.xAxisRange();
var amount = scale * 0.25 * dir;
desired_range = [ w[0] + amount, w[1] + amount ];
animate();
- }
+ };
document.getElementById('hour').onclick = function() { zoom(3600); };
document.getElementById('day').onclick = function() { zoom(86400); };
document.getElementById('left').onclick = function() { pan(-1); };
document.getElementById('right').onclick = function() { pan(+1); };
}
- });
\ No newline at end of file
+ });