chengnan
/
s202226701001


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
							<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&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()),
  };


  // create a Timeline
  var container = document.getElementById('mytimeline');
  timeline = new vis.Timeline(container, null, options);
  timeline.setGroups(groups);
  timeline.setItems(items);
</script>

</body>
</html>