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.

127 lines
3.1 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Timeline | Group example</title>
  5. <style>
  6. body, html {
  7. font-family: arial, sans-serif;
  8. font-size: 11pt;
  9. }
  10. #visualization {
  11. box-sizing: border-box;
  12. width: 100%;
  13. }
  14. </style>
  15. <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
  16. <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
  17. <script src="../dist/vis.js"></script>
  18. <link href="../dist/vis.css" rel="stylesheet" type="text/css" />
  19. </head>
  20. <body>
  21. <div>
  22. <label for="orientation">Orientation</label>
  23. <select id="orientation">
  24. <option value="top">top</option>
  25. <option value="bottom" selected>bottom</option>
  26. </select>
  27. </div>
  28. <script>
  29. var o = document.getElementById('orientation');
  30. o.onchange = function () {
  31. timeline.setOptions({
  32. orientation: o.value
  33. });
  34. };
  35. </script>
  36. <br>
  37. <div id="visualization"></div>
  38. <script>
  39. var now = moment().minutes(0).seconds(0).milliseconds(0);
  40. var groupCount = 3;
  41. var itemCount = 20;
  42. // create a data set with groups
  43. var names = ['John (0)', 'Alston (1)', 'Lee (2)', 'Grant (3)'];
  44. var groups = new vis.DataSet();
  45. for (var g = 0; g < groupCount; g++) {
  46. groups.add({id: g, content: names[g], title: 'Title of group ' + g});
  47. }
  48. // create a dataset with items
  49. var items = new vis.DataSet();
  50. for (var i = 0; i < itemCount; i++) {
  51. var start = now.clone().add('hours', Math.random() * 200);
  52. var group = Math.floor(Math.random() * groupCount);
  53. items.add({
  54. id: i,
  55. group: group,
  56. content: 'item ' + i +
  57. ' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
  58. start: start,
  59. title: 'Title for item ' + i,
  60. type: 'box'
  61. });
  62. }
  63. // create visualization
  64. var container = document.getElementById('visualization');
  65. var options = {
  66. //orientation: 'top',
  67. editable: {
  68. add: true,
  69. remove: true,
  70. updateTime: true,
  71. updateGroup: true
  72. },
  73. autoResize: false,
  74. //stack: false,
  75. //height: 200,
  76. groupOrder: 'content'
  77. };
  78. console.time('create timeline');
  79. var timeline = new vis.Timeline(container);
  80. console.timeEnd('create timeline');
  81. console.time('set options');
  82. timeline.setOptions(options);
  83. console.timeEnd('set options');
  84. console.time('set groups');
  85. timeline.setGroups(groups);
  86. console.timeEnd('set groups');
  87. console.time('set items');
  88. timeline.setItems(items);
  89. console.timeEnd('set items');
  90. timeline.on('select', function (selection) {
  91. console.log('select', selection);
  92. });
  93. /*
  94. timeline.on('rangechange', function (range) {
  95. console.log('rangechange', range);
  96. });
  97. timeline.on('rangechanged', function (range) {
  98. console.log('rangechanged', range);
  99. });
  100. */
  101. items.on('add', console.log.bind(console));
  102. items.on('update', console.log.bind(console));
  103. items.on('remove', console.log.bind(console));
  104. groups.on('add', console.log.bind(console));
  105. groups.on('update', console.log.bind(console));
  106. groups.on('remove', console.log.bind(console));
  107. </script>
  108. </body>
  109. </html>