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.

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