<html> <head> <title>Timeline | Vertical Scroll Option</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="../../../dist/vis.js"></script> <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Timeline vertical scroll option</h1> <h2>With <code> verticalScroll: true, zoomKey: 'ctrlKey'</code> </h2> <div id="mytimeline1"></div> <h2>With <code> horizontalScroll: true, verticalScroll: true, zoomKey: 'ctrlKey'</code> </h2> <div id="mytimeline2"></div> <script> // create groups var numberOfGroups = 25; var groups = new vis.DataSet() for (var i = 0; i < numberOfGroups; i++) { groups.add({ id: i, content: 'Truck ' + i }) } // create items var numberOfItems = 1000; var items = new vis.DataSet(); var itemsPerGroup = Math.round(numberOfItems/numberOfGroups); for (var truck = 0; truck < numberOfGroups; truck++) { var date = new Date(); for (var order = 0; order < itemsPerGroup; order++) { date.setHours(date.getHours() + 4 * (Math.random() < 0.2)); var start = new Date(date); date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); var end = new Date(date); var orderIndex = order + itemsPerGroup * truck items.add({ id: orderIndex, group: truck, start: start, end: end, content: 'Order ' + orderIndex }); } } // specify options var options = { stack: true, verticalScroll: true, zoomKey: 'ctrlKey', maxHeight: 200, start: new Date(), end: new Date(1000*60*60*24 + (new Date()).valueOf()), }; // create a Timeline options1 = jQuery.extend(options, {}); var container1 = document.getElementById('mytimeline1'); timeline1 = new vis.Timeline(container1, items, groups, options1); options2 = jQuery.extend(options, {horizontalScroll: true}); var container2 = document.getElementById('mytimeline2'); timeline2 = new vis.Timeline(container2, items, groups, options2); </script> </body> </html>