<!DOCTYPE HTML>
<html>
<head>
    <title>Timeline | a lot of data</title>

    <style>
        body, html {
            font-family: arial, sans-serif;
            font-size: 11pt;
        }
    </style>

    <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>

  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>
    Test with a lot of data
</h1>
<p>
    <label for="count">Number of items</label>
    <input id="count" value="100">
    <input id="draw" type="button" value="draw">
</p>
<div id="visualization"></div>

<script>
    // create a dataset with items
    var now = moment().minutes(0).seconds(0).milliseconds(0);
    var items = new vis.DataSet({
        convert: {
            start: 'Date',
            end: 'Date'
        }
    });

    // create data
    function createData() {
        var count = parseInt(document.getElementById('count').value) || 100;
        var newData = [];
        for (var i = 0; i < count; i++) {
            newData.push({id: i, content: 'item ' + i, start: now.clone().add('days', i)});
        }
        items.clear();
        items.add(newData);
    }
    createData();

    document.getElementById('draw').onclick = createData;

    var container = document.getElementById('visualization');
    var options = {
        start: now.clone().add('days', -3),
        end: now.clone().add('days', 11),
        zoomMin: 1000 * 60 * 60 * 24,          // a day
        zoomMax: 1000 * 60 * 60 * 24 * 30 * 3  // three months
        //maxHeight: 300,
        //height: '300px',
        //orientation: 'top'
    };

    var timeline = new vis.Timeline(container, items, options);

</script>
</body>
</html>