<!DOCTYPE HTML> <html> <head> <title>Timeline | Dataset example</title> <style> body, html { font-family: arial, sans-serif; font-size: 11pt; height: 100%; margin: 0; padding: 0; } #visualization { box-sizing: border-box; width: 100%; height: 100%; } </style> <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js --> <script src="https://rawgithub.com/moment/moment/2.2.1/min/moment.min.js"></script> <script src="../../vis.js"></script> </head> <body> <div id="visualization"></div> <script> var now = moment().minutes(0).seconds(0).milliseconds(0); // create a dataset with items var items = new vis.DataSet({ convert: { start: 'Date', end: 'Date' } }); items.add([ {id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4)}, {id: 2, content: 'item 2', start: now.clone().add('days', -2)}, {id: 3, content: 'item 3', start: now.clone().add('days', 2)}, {id: 4, content: 'item 4', start: now.clone().add('days', 0), end: now.clone().add('days', 3).toDate()}, {id: 5, content: 'item 5', start: now.clone().add('days', 9), type:'point'}, {id: 6, content: 'item 6', start: now.clone().add('days', 11)} ]); var container = document.getElementById('visualization'); var options = { start: now.clone().add('days', -3), end: now.clone().add('days', 7), orientation: 'top', height: '100%' }; var timeline = new vis.Timeline(container, items, options); </script> </body> </html>