| @ -0,0 +1,122 @@ | |||||
| <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> | |||||
| <script src="../../googleAnalytics.js"></script> | |||||
| </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 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); | |||||
| items.add({ | |||||
| id: order, | |||||
| group: truck, | |||||
| start: start, | |||||
| end: end, | |||||
| 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()), | |||||
| editable: true, | |||||
| margin: { | |||||
| item: 10, // minimal margin between items | |||||
| axis: 5 // minimal margin between items and the axis | |||||
| }, | |||||
| orientation: 'top' | |||||
| }; | |||||
| // create a Timeline | |||||
| var container = document.getElementById('mytimeline'); | |||||
| timeline = new vis.Timeline(container, null, options); | |||||
| timeline.setGroups(groups); | |||||
| timeline.setItems(items); | |||||
| </script> | |||||
| </body> | |||||
| </html> | |||||