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