60 lines
2.0 KiB
JavaScript
60 lines
2.0 KiB
JavaScript
var vis, $; // hush
|
|
|
|
var container = document.getElementById("viz");
|
|
var options = {editable: false,
|
|
showCurrentTime: false,
|
|
snap: null,
|
|
order: function(a,b) { return a.id - b.id; }
|
|
};
|
|
var timeline = new vis.Timeline(container, options);
|
|
var items;
|
|
|
|
$.getJSON("data.json", function(data) {
|
|
items = new vis.DataSet(data.items);
|
|
timeline.setData({groups: new vis.DataSet(data.groups),
|
|
items: items});
|
|
var start = data.items[0].start;
|
|
var end = data.items[data.items.length-1].start;
|
|
var span = end - start;
|
|
timeline.setWindow(start - (span/10), end + (span/10));
|
|
//timeline.fit(); // doesn't leave space on the ends
|
|
timeline.setOptions({min: start - (span/10),
|
|
max: end + (span/10),
|
|
zoomMin: 50,
|
|
zoomMax: 1.2*span});
|
|
var bar = timeline.addCustomTime(start, "cursor");
|
|
timeline.on("timechange", update_cursor);
|
|
update_cursor({time: new Date(start)});
|
|
timeline.on("doubleClick", zoom);
|
|
timeline.on("select", select_item);
|
|
$.get("done", function(_) {});
|
|
});
|
|
|
|
function zoom(properties) {
|
|
var target = properties.time.valueOf();
|
|
var w = timeline.getWindow();
|
|
var span = w.end - w.start;
|
|
var new_span = span / 2;
|
|
var new_start = target - new_span/2;
|
|
var new_end = target + new_span/2;
|
|
timeline.setWindow(new_start, new_end, {animation: true});
|
|
}
|
|
|
|
function update_cursor(properties) {
|
|
var t = properties.time;
|
|
document.getElementById("cursor_date").innerText = t;
|
|
var m = vis.moment(t);
|
|
document.getElementById("cursor_time").innerText = m.format("ss.SSSSSS");
|
|
}
|
|
|
|
function select_item(properties) {
|
|
var item_id = properties.items[0];
|
|
var i = items.get(item_id);
|
|
if (i.end) {
|
|
var elapsed = (i.end - i.start) / 1000;
|
|
$("div#elapsed").text("elapsed: " + elapsed + " s");
|
|
} else {
|
|
$("div#elapsed").text("");
|
|
}
|
|
}
|