<!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%; } .vis.timeline .item.red, .vis.timeline .item.red.selected { background-color: red; color: white; } .vis.timeline .item.green, .vis.timeline .item.green.selected { background-color: green; color: white; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> <script src="../dist/vis.js"></script> <link href="../dist/vis.css" rel="stylesheet" type="text/css" /> <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head> <body> <div> <label for="orientation">Orientation</label> <select id="orientation"> <option value="both">both</option> <option value="bottom" selected>bottom</option> <option value="top">top</option> </select> </div> <script> var o = document.getElementById('orientation'); o.onchange = function () { timeline.setOptions({ orientation: o.value }); }; </script> <br> <div id="visualization"></div> <div style="height: 1000px;"></div><!-- for testing vertical scroll on touch devices--> <script> var moment = vis.moment; 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: '<a href="http://google.com"><span style="color:#97B0F8;">' + names[g] + '</a>', title: 'Title of group ' + g, 'className': 'myGroup'}); } // create a dataset with items var items = new vis.DataSet({ type: {start: 'Moment', end: 'Moment'} }); for (var i = 0; i < itemCount; i++) { var start = now.clone().add(Math.random() * 200, 'hours'); var end = Math.random() > 0.5 ? start.clone().add(24, 'hours') : undefined; var group = Math.floor(Math.random() * groupCount); items.add({ id: i, group: group, content: 'item ' + i + ' <a href="http://google.com"><span style="color:#97B0F8;">(' + names[group] + ')</span></a> ', start: start, end: end, title: 'Title for item ' + i, //type: 'box', className: 'myItem' }); } // create visualization var container = document.getElementById('visualization'); var options = { //orientation: 'top', multiselect: true, editable: { add: true, remove: true, updateTime: true, updateGroup: true }, // orientation: { // item: 'top', // axis: 'both' // }, onAdd: function (item, callback) { item.content = prompt('Enter text content for new item:', item.content); if (item.content != null) { callback(item); // send back adjusted new item } else { callback(null); // cancel item creation } }, onMove: function (item, callback) { console.log('onMove', item) if (confirm('Do you really want to move the item to\n' + 'start: ' + item.start + '\n' + 'end: ' + item.end + '?')) { callback(item); // send back item as confirmation (can be changed) } else { callback(null); // cancel editing item } }, onMoving: function (item, callback) { var min = moment().minutes(0).seconds(0).milliseconds(0).add(-2, 'day').toDate(); if (item.start < min) { item.start = min; } //item.className = item.id > 3 ? 'red' : 'green'; //item.group = Math.random() > 0.5 ? 2 : 1; //item.hasMoved = true; //item.content = Math.round(Math.random() * 4); callback(item); // send back item as confirmation (can be changed) }, onUpdate: function (item, callback) { item.content = prompt('Edit items text:', item.content); if (item.content != null) { callback(item); // send back adjusted item } else { callback(null); // cancel updating the item } }, onRemove: function (item, callback) { if (confirm('Remove item ' + item.content + '?')) { callback(item); // confirm deletion } else { callback(null); // cancel deletion } }, //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); }); */ // timeline.on('click', function (props) { console.log('click', props); }); $(container).click(function (event) { console.log('click jquery', timeline.getEventProperties(event)); }); timeline.on('doubleClick', function (props) { console.log('doubleClick', props); }); timeline.on('contextmenu', function (props) { console.log('contextmenu', props); }); 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)); function log (msg) { var logs = document.getElementById('logs'); logs.innerHTML = msg + '<br>' + logs.innerHTML; } </script> <div id="logs"></div> </body> </html>