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.

200 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. </head>
  18. <body>
  19. <div>
  20. <label for="orientation">Orientation</label>
  21. <select id="orientation">
  22. <option value="both">both</option>
  23. <option value="bottom" selected>bottom</option>
  24. <option value="top">top</option>
  25. </select>
  26. </div>
  27. <script>
  28. var o = document.getElementById('orientation');
  29. o.onchange = function () {
  30. timeline.setOptions({
  31. orientation: o.value
  32. });
  33. };
  34. </script>
  35. <br>
  36. <div id="visualization"></div>
  37. <script>
  38. var moment = vis.moment;
  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, 'className': 'myGroup'});
  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(Math.random() * 200, 'hours');
  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. className: 'myItem'
  62. });
  63. }
  64. // create visualization
  65. var container = document.getElementById('visualization');
  66. var options = {
  67. //orientation: 'top',
  68. editable: {
  69. add: true,
  70. remove: true,
  71. updateTime: true,
  72. updateGroup: true
  73. },
  74. // orientation: {
  75. // item: 'top',
  76. // axis: 'both'
  77. // },
  78. onAdd: function (item, callback) {
  79. item.content = prompt('Enter text content for new item:', item.content);
  80. if (item.content != null) {
  81. callback(item); // send back adjusted new item
  82. }
  83. else {
  84. callback(null); // cancel item creation
  85. }
  86. },
  87. onMove: function (item, callback) {
  88. if (confirm('Do you really want to move the item to\n' +
  89. 'start: ' + item.start + '\n' +
  90. 'end: ' + item.end + '?')) {
  91. callback(item); // send back item as confirmation (can be changed)
  92. }
  93. else {
  94. callback(null); // cancel editing item
  95. }
  96. },
  97. onMoving: function (item, callback) {
  98. var min = moment().minutes(0).seconds(0).milliseconds(0).add(2, 'day').toDate();
  99. if (item.start < min) {
  100. item.start = min;
  101. }
  102. callback(item); // send back item as confirmation (can be changed)
  103. },
  104. onUpdate: function (item, callback) {
  105. item.content = prompt('Edit items text:', item.content);
  106. if (item.content != null) {
  107. callback(item); // send back adjusted item
  108. }
  109. else {
  110. callback(null); // cancel updating the item
  111. }
  112. },
  113. onRemove: function (item, callback) {
  114. if (confirm('Remove item ' + item.content + '?')) {
  115. callback(item); // confirm deletion
  116. }
  117. else {
  118. callback(null); // cancel deletion
  119. }
  120. },
  121. //stack: false,
  122. //height: 200,
  123. groupOrder: 'content'
  124. };
  125. console.time('create timeline');
  126. var timeline = new vis.Timeline(container);
  127. console.timeEnd('create timeline');
  128. console.time('set options');
  129. timeline.setOptions(options);
  130. console.timeEnd('set options');
  131. console.time('set groups');
  132. timeline.setGroups(groups);
  133. console.timeEnd('set groups');
  134. console.time('set items');
  135. timeline.setItems(items);
  136. console.timeEnd('set items');
  137. timeline.on('select', function (selection) {
  138. console.log('select', selection);
  139. });
  140. /*
  141. timeline.on('rangechange', function (range) {
  142. console.log('rangechange', range);
  143. });
  144. timeline.on('rangechanged', function (range) {
  145. console.log('rangechanged', range);
  146. });
  147. */
  148. timeline.on('click', function (props) {
  149. console.log('click', props);
  150. });
  151. timeline.on('doubleClick', function (props) {
  152. console.log('doubleClick', props);
  153. });
  154. timeline.on('contextmenu', function (props) {
  155. console.log('contextmenu', props);
  156. });
  157. items.on('add', console.log.bind(console));
  158. items.on('update', console.log.bind(console));
  159. items.on('remove', console.log.bind(console));
  160. groups.on('add', console.log.bind(console));
  161. groups.on('update', console.log.bind(console));
  162. groups.on('remove', console.log.bind(console));
  163. function log (msg) {
  164. var logs = document.getElementById('logs');
  165. logs.innerHTML = msg + '<br>' + logs.innerHTML;
  166. }
  167. </script>
  168. <div id="logs"></div>
  169. </body>
  170. </html>