<html> <head> <title>Timeline | A lot of grouped data</title> <script src="../../../docs/js/jquery.min.js"></script> <script src="../../../dist/vis.js"></script> <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { color: #4D4D4D; font: 10pt arial; } </style> </head> <body onresize="/*timeline.checkResize();*/"> <h1>Timeline vertical visibility</h1> <button onclick="showVisibleItems()">Show current visible items</button> <div> <h2>visible items:</h2> <h3 id="visibleItemsContainer"></h3> </div> <div id="mytimeline"></div> <br> <script> function showVisibleItems() { var a = timeline.getVisibleItems(); console.log(a); document.getElementById("visibleItemsContainer").innerHTML = "" document.getElementById("visibleItemsContainer").innerHTML += a; }; // get selected item count from url parameter var count = 1000; // create groups var groups = new vis.DataSet([ {id: 1, content: 'Truck 1'}, {id: 2, content: 'Truck 2'}, {id: 3, content: 'Truck 3'}, {id: 4, content: 'Truck 4'}, {id: 5, content: 'Truck 5'}, {id: 6, content: 'Truck 6'}, {id: 7, content: 'Truck 7'}, {id: 8, content: 'Truck 8'}, {id: 9, content: 'Truck 9'}, {id: 10, content: 'Truck 10'}, {id: 11, content: 'Truck 11'}, {id: 12, content: 'Truck 12'}, {id: 13, content: 'Truck 13'}, {id: 14, content: 'Truck 14'}, {id: 15, content: 'Truck 15'}, {id: 16, content: 'Truck 16'}, {id: 17, content: 'Truck 17'}, {id: 18, content: 'Truck 18'}, {id: 19, content: 'Truck 19'}, {id: 20, content: 'Truck 20'}, {id: 21, content: 'Truck 21'}, {id: 22, content: 'Truck 22'}, {id: 23, content: 'Truck 23'}, {id: 24, content: 'Truck 24'}, {id: 25, content: 'Truck 25'}, ]); // create items var items = new vis.DataSet(); var types = [ 'box', 'point', 'range', 'background'] var order = 1; var truck = 1; for (var j = 0; j < 25; j++) { var date = new Date(); for (var i = 0; i < count/25; i++) { 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 type = types[Math.floor(4 * Math.random())] items.add({ id: order, group: truck, start: start, end: end, type: type, content: 'Order ' + order }); order++; } truck++; } // specify options var options = { stack: true, maxHeight: 400, start: new Date(), end: new Date(1000*60*60*24 + (new Date()).valueOf()), }; // create a Timeline var container = document.getElementById('mytimeline'); timeline = new vis.Timeline(container, null, options); timeline.setGroups(groups); timeline.setItems(items); </script> </body> </html>