1 files changed, 126 insertions, 0 deletions
diff --git a/www/lib/vis/examples/timeline/groups/verticalItemsHide.html b/www/lib/vis/examples/timeline/groups/verticalItemsHide.html
new file mode 100644
index 00000000..1f38fffe
--- /dev/null
+++ b/www/lib/vis/examples/timeline/groups/verticalItemsHide.html
@@ -0,0 +1,126 @@
+<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&nbsp;1'},
+    {id: 2, content: 'Truck&nbsp;2'},
+    {id: 3, content: 'Truck&nbsp;3'},
+    {id: 4, content: 'Truck&nbsp;4'},
+    {id: 5, content: 'Truck&nbsp;5'},
+    {id: 6, content: 'Truck&nbsp;6'},
+    {id: 7, content: 'Truck&nbsp;7'},
+    {id: 8, content: 'Truck&nbsp;8'},
+    {id: 9, content: 'Truck&nbsp;9'},
+    {id: 10, content: 'Truck&nbsp;10'},
+    {id: 11, content: 'Truck&nbsp;11'},
+    {id: 12, content: 'Truck&nbsp;12'},
+    {id: 13, content: 'Truck&nbsp;13'},
+    {id: 14, content: 'Truck&nbsp;14'},
+    {id: 15, content: 'Truck&nbsp;15'},
+    {id: 16, content: 'Truck&nbsp;16'},
+    {id: 17, content: 'Truck&nbsp;17'},
+    {id: 18, content: 'Truck&nbsp;18'},
+    {id: 19, content: 'Truck&nbsp;19'},
+    {id: 20, content: 'Truck&nbsp;20'},
+    {id: 21, content: 'Truck&nbsp;21'},
+    {id: 22, content: 'Truck&nbsp;22'},
+    {id: 23, content: 'Truck&nbsp;23'},
+    {id: 24, content: 'Truck&nbsp;24'},
+    {id: 25, content: 'Truck&nbsp;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>