|
|
- <!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 | onTimeout 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 itemCount = 300;
-
- var types = ['point', 'range', 'box']
- // 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');
- items.add({
- id: i,
- type: types[Math.floor(Math.random() * types.length)],
- content: '' + i,
- start: start,
- end: end
- });
- }
-
- // create visualization
- var container = document.getElementById('visualization');
- var options = {
- stack: true,
- onTimeout: {
- timeoutMs: 1000,
- callback: function(callback) {
- var didUserCancel;
- var didUserCancel = confirm("Too many items loaded! Would you like to continue rendering (this might take a while)?");
- callback(didUserCancel)
- },
- }
- };
-
- var timeline = new vis.Timeline(container, items, options);
- </script>
-
- </html>
|
