Social development practitioner. Trying to understand our world.
chart = {
// create a data set
var data = new vis.DataSet([
{
id: 1,
start: new Date((new Date()).getTime() - 60 * 1000),
end: new Date(),
content: 'Dynamic event'
}
]);
// specify options
var options = {
showCurrentTime: true,
showCustomTime: true
};
// create a timeline
var container = document.getElementById('mytimeline');
const timeline = new vis.Timeline(container, data, options);
// add event listener
timeline.on('timechange', function (event) {
document.getElementById("customTime").innerHTML = "Custom Time: " + event.time;
var item = data.get(1);
if (event.time > item.start) {
item.end = new Date(event.time);
var now = new Date();
if (event.time < now) {
item.content = "Dynamic event (past)";
item.className = 'past';
}
else if (event.time > now) {
item.content = "Dynamic event (future)";
item.className = 'future';
}
else {
item.content = "Dynamic event (now)";
item.className = 'now';
}
data.update(item);
}
});
// set a custom range from -2 minute to +3 minutes current time
var start = new Date((new Date()).getTime() - 2 * 60 * 1000);
var end = new Date((new Date()).getTime() + 3 * 60 * 1000);
timeline.setWindow(start, end, {animate: false});
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
