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.

126 lines
3.0 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]});
  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. type: 'box'
  60. });
  61. }
  62. // create visualization
  63. var container = document.getElementById('visualization');
  64. var options = {
  65. //orientation: 'top',
  66. editable: {
  67. add: true,
  68. remove: true,
  69. updateTime: true,
  70. updateGroup: true
  71. },
  72. autoResize: false,
  73. //stack: false,
  74. //height: 200,
  75. groupOrder: 'content'
  76. };
  77. console.time('create timeline');
  78. var timeline = new vis.Timeline(container);
  79. console.timeEnd('create timeline');
  80. console.time('set options');
  81. timeline.setOptions(options);
  82. console.timeEnd('set options');
  83. console.time('set groups');
  84. timeline.setGroups(groups);
  85. console.timeEnd('set groups');
  86. console.time('set items');
  87. timeline.setItems(items);
  88. console.timeEnd('set items');
  89. timeline.on('select', function (selection) {
  90. console.log('select', selection);
  91. });
  92. /*
  93. timeline.on('rangechange', function (range) {
  94. console.log('rangechange', range);
  95. });
  96. timeline.on('rangechanged', function (range) {
  97. console.log('rangechanged', range);
  98. });
  99. */
  100. items.on('add', console.log.bind(console));
  101. items.on('update', console.log.bind(console));
  102. items.on('remove', console.log.bind(console));
  103. groups.on('add', console.log.bind(console));
  104. groups.on('update', console.log.bind(console));
  105. groups.on('remove', console.log.bind(console));
  106. </script>
  107. </body>
  108. </html>