<!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>