31:T559,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}); }32:[] 2f:{"title":"Building an Interactive Timeline with Vis.js","cells":[{"id":0,"value":"md`# Building an Interactive Timeline with Vis.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`\n\nThis notebook ports to Observable a [Vis.js](http://visjs.org) [example timeline from Laboratório de sistemas de Língua Falada](https://www.l2f.inesc-id.pt/~david/wiki/pt/extensions/vis/examples/timeline/13_past_and_future.html).\n\nI reproduce for learning purposes and as a springboard for discussion with my work colleagues.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"md`\n*A note from the original author:*\n\n> When the custom time bar is shown, the user can drag this bar to a specific\n time. The Timeline sends an event that the custom time is changed, after\n which the contents of the timeline can be changed according to the specified\n time in past or future.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"customTime = html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"mytimeline = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"css = html`\n