<!DOCTYPE HTML> <html> <head> <title>Timeline | Group example</title> <style> body, html { font-family: arial, sans-serif; font-size: 11pt; } #visualization { box-sizing: border-box; width: 100%; } </style> <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js --> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script> <script src="../dist/vis.js"></script> <link href="../dist/vis.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <label for="orientation">Orientation</label> <select id="orientation"> <option value="top">top</option> <option value="bottom" selected>bottom</option> </select> </div> <script> var o = document.getElementById('orientation'); o.onchange = function () { timeline.setOptions({ orientation: o.value }); }; </script> <br> <div id="visualization"></div> <script> var now = moment().minutes(0).seconds(0).milliseconds(0); var groupCount = 3; var itemCount = 20; // create a data set with groups var names = ['John (0)', 'Alston (1)', 'Lee (2)', 'Grant (3)']; var groups = new vis.DataSet(); for (var g = 0; g < groupCount; g++) { groups.add({id: g, content: names[g], title: 'Title of group ' + g}); } // create a dataset with items var items = new vis.DataSet(); for (var i = 0; i < itemCount; i++) { var start = now.clone().add('hours', Math.random() * 200); var group = Math.floor(Math.random() * groupCount); items.add({ id: i, group: group, content: 'item ' + i + ' <span style="color:#97B0F8;">(' + names[group] + ')</span>', start: start, title: 'Title for item ' + i, type: 'box' }); } // create visualization var container = document.getElementById('visualization'); var options = { //orientation: 'top', editable: { add: true, remove: true, updateTime: true, updateGroup: true }, //stack: false, //height: 200, groupOrder: 'content' }; console.time('create timeline'); var timeline = new vis.Timeline(container); console.timeEnd('create timeline'); console.time('set options'); timeline.setOptions(options); console.timeEnd('set options'); console.time('set groups'); timeline.setGroups(groups); console.timeEnd('set groups'); console.time('set items'); timeline.setItems(items); console.timeEnd('set items'); timeline.on('select', function (selection) { console.log('select', selection); }); /* timeline.on('rangechange', function (range) { console.log('rangechange', range); }); timeline.on('rangechanged', function (range) { console.log('rangechanged', range); }); */ items.on('add', console.log.bind(console)); items.on('update', console.log.bind(console)); items.on('remove', console.log.bind(console)); groups.on('add', console.log.bind(console)); groups.on('update', console.log.bind(console)); groups.on('remove', console.log.bind(console)); </script> </body> </html>