<!DOCTYPE HTML>
<!-- 
  This example is used mainly for developers to test performance issues by controlling number of groups, 
  number of items and their types.
 -->
<html>

<head>
  <title>Timeline | Stress Performance example</title>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="visualization"></div>
</body>

<script>
  var now = moment();
  var groupCount = 20;
  var itemCount = 400;

  // create a data set with groups
  var groups = new vis.DataSet();
  for (var g = 0; g < groupCount; g++) {
    groups.add({
      id: g,
      content: "group " + g
    });
  }

  var types = ['point', 'range', 'box', 'background']
  // create a dataset with items
  var items = new vis.DataSet();
  for (var i = 0; i < itemCount; i++) {
    var start = now.clone().add(Math.random() * 180, 'days');
    var end = start.clone().add(Math.random() * 30, 'days');
    var group = Math.floor(Math.random() * groupCount);
    items.add({
      id: i,
      type: types[Math.floor(Math.random() * types.length)],
      group: group,
      content: '' + i,
      start: start,
      end: end
    });
  }

  // create visualization
  var container = document.getElementById('visualization');
  var options = {
    width: '100%',
    showCurrentTime: false,
    stack: true,
    selectable: true,
    editable: true,
  };

  var timeline = new vis.Timeline(container);
  timeline.setOptions(options);
  timeline.setGroups(groups);
  timeline.setItems(items);
</script>

</html>