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