<!DOCTYPE HTML>
<html>
<head>
    <title>Timeline | Dataset example</title>

    <style>
        body, html {
            font-family: arial, sans-serif;
            font-size: 11pt;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #visualization {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }
    </style>

    <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
    <script src="https://rawgithub.com/moment/moment/2.2.1/min/moment.min.js"></script>

    <script src="../../vis.js"></script>
</head>
<body>
<div id="visualization"></div>

<script>
    var now = moment().minutes(0).seconds(0).milliseconds(0);

    // create a dataset with items
    var items = new vis.DataSet({
        convert: {
            start: 'Date',
            end: 'Date'
        }
    });
    items.add([
        {id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4)},
        {id: 2, content: 'item 2', start: now.clone().add('days', -2)},
        {id: 3, content: 'item 3', start: now.clone().add('days', 2)},
        {id: 4, content: 'item 4', start: now.clone().add('days', 0), end: now.clone().add('days', 3).toDate()},
        {id: 5, content: 'item 5', start: now.clone().add('days', 9), type:'point'},
        {id: 6, content: 'item 6', start: now.clone().add('days', 11)}
    ]);

    var container = document.getElementById('visualization');
    var options = {
        start: now.clone().add('days', -3),
        end: now.clone().add('days', 7),
        orientation: 'top',
        height: '100%'
    };

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

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