vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

65 lines
1.6 KiB

  1. <!DOCTYPE HTML>
  2. <!--
  3. This example is used mainly for developers to test performance issues by controlling number of groups,
  4. number of items and their types.
  5. -->
  6. <html>
  7. <head>
  8. <title>Timeline | Stress Performance example</title>
  9. <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
  10. <script src="../../../dist/vis.js"></script>
  11. <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
  12. </head>
  13. <body>
  14. <div id="visualization"></div>
  15. </body>
  16. <script>
  17. var now = moment();
  18. var groupCount = 20;
  19. var itemCount = 400;
  20. // create a data set with groups
  21. var groups = new vis.DataSet();
  22. for (var g = 0; g < groupCount; g++) {
  23. groups.add({
  24. id: g,
  25. content: "group " + g
  26. });
  27. }
  28. var types = ['point', 'range', 'box', 'background']
  29. // create a dataset with items
  30. var items = new vis.DataSet();
  31. for (var i = 0; i < itemCount; i++) {
  32. var start = now.clone().add(Math.random() * 180, 'days');
  33. var end = start.clone().add(Math.random() * 30, 'days');
  34. var group = Math.floor(Math.random() * groupCount);
  35. items.add({
  36. id: i,
  37. type: types[Math.floor(Math.random() * types.length)],
  38. group: group,
  39. content: '' + i,
  40. start: start,
  41. end: end
  42. });
  43. }
  44. // create visualization
  45. var container = document.getElementById('visualization');
  46. var options = {
  47. width: '100%',
  48. showCurrentTime: false,
  49. stack: true,
  50. selectable: true,
  51. editable: true,
  52. };
  53. var timeline = new vis.Timeline(container);
  54. timeline.setOptions(options);
  55. timeline.setGroups(groups);
  56. timeline.setItems(items);
  57. </script>
  58. </html>