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.

183 lines
4.8 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. <script src="../dist/vis.js"></script>
  16. <link href="../dist/vis.css" rel="stylesheet" type="text/css" />
  17. <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
  18. <body>
  19. <div>
  20. <label for="orientation">Orientation</label>
  21. <select id="orientation">
  22. <option value="top">top</option>
  23. <option value="bottom" selected>bottom</option>
  24. </select>
  25. </div>
  26. <script>
  27. var o = document.getElementById('orientation');
  28. o.onchange = function () {
  29. timeline.setOptions({
  30. orientation: o.value
  31. });
  32. };
  33. </script>
  34. <br>
  35. <div id="visualization"></div>
  36. <script>
  37. var moment = vis.moment;
  38. var now = moment().minutes(0).seconds(0).milliseconds(0);
  39. var groupCount = 3;
  40. var itemCount = 20;
  41. // create a data set with groups
  42. var names = ['John (0)', 'Alston (1)', 'Lee (2)', 'Grant (3)'];
  43. var groups = new vis.DataSet();
  44. for (var g = 0; g < groupCount; g++) {
  45. groups.add({id: g, content: names[g], title: 'Title of group ' + g, 'className': 'myGroup'});
  46. }
  47. // create a dataset with items
  48. var items = new vis.DataSet();
  49. for (var i = 0; i < itemCount; i++) {
  50. var start = now.clone().add(Math.random() * 200, 'hours');
  51. var group = Math.floor(Math.random() * groupCount);
  52. items.add({
  53. id: i,
  54. group: group,
  55. content: 'item ' + i +
  56. ' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
  57. start: start,
  58. title: 'Title for item ' + i,
  59. type: 'box',
  60. className: 'myItem'
  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. onAdd: function (item, callback) {
  74. item.content = prompt('Enter text content for new item:', item.content);
  75. if (item.content != null) {
  76. callback(item); // send back adjusted new item
  77. }
  78. else {
  79. callback(null); // cancel item creation
  80. }
  81. },
  82. onMove: function (item, callback) {
  83. if (confirm('Do you really want to move the item to\n' +
  84. 'start: ' + item.start + '\n' +
  85. 'end: ' + item.end + '?')) {
  86. callback(item); // send back item as confirmation (can be changed)
  87. }
  88. else {
  89. callback(null); // cancel editing item
  90. }
  91. },
  92. onMoving: function (item, callback) {
  93. var min = moment().minutes(0).seconds(0).milliseconds(0).add(2, 'day').toDate();
  94. if (item.start < min) {
  95. item.start = min;
  96. }
  97. callback(item); // send back item as confirmation (can be changed)
  98. },
  99. onUpdate: function (item, callback) {
  100. item.content = prompt('Edit items text:', item.content);
  101. if (item.content != null) {
  102. callback(item); // send back adjusted item
  103. }
  104. else {
  105. callback(null); // cancel updating the item
  106. }
  107. },
  108. onRemove: function (item, callback) {
  109. if (confirm('Remove item ' + item.content + '?')) {
  110. callback(item); // confirm deletion
  111. }
  112. else {
  113. callback(null); // cancel deletion
  114. }
  115. },
  116. //stack: false,
  117. //height: 200,
  118. groupOrder: 'content'
  119. };
  120. console.time('create timeline');
  121. var timeline = new vis.Timeline(container);
  122. console.timeEnd('create timeline');
  123. console.time('set options');
  124. timeline.setOptions(options);
  125. console.timeEnd('set options');
  126. console.time('set groups');
  127. timeline.setGroups(groups);
  128. console.timeEnd('set groups');
  129. console.time('set items');
  130. timeline.setItems(items);
  131. console.timeEnd('set items');
  132. timeline.on('select', function (selection) {
  133. console.log('select', selection);
  134. });
  135. /*
  136. timeline.on('rangechange', function (range) {
  137. console.log('rangechange', range);
  138. });
  139. timeline.on('rangechanged', function (range) {
  140. console.log('rangechanged', range);
  141. });
  142. */
  143. items.on('add', console.log.bind(console));
  144. items.on('update', console.log.bind(console));
  145. items.on('remove', console.log.bind(console));
  146. groups.on('add', console.log.bind(console));
  147. groups.on('update', console.log.bind(console));
  148. groups.on('remove', console.log.bind(console));
  149. function log (msg) {
  150. var logs = document.getElementById('logs');
  151. logs.innerHTML = msg + '<br>' + logs.innerHTML;
  152. }
  153. </script>
  154. <div id="logs"></div>
  155. </body>
  156. </html>