- <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 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()),
- 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>
|
