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.

220 lines
5.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. }
  14. .vis.timeline .item.red,
  15. .vis.timeline .item.red.selected {
  16. background-color: red;
  17. color: white;
  18. }
  19. .vis.timeline .item.green,
  20. .vis.timeline .item.green.selected {
  21. background-color: green;
  22. color: white;
  23. }
  24. </style>
  25. <script src="../dist/vis.js"></script>
  26. <link href="../dist/vis.css" rel="stylesheet" type="text/css" />
  27. <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>
  28. <body>
  29. <div>
  30. <label for="orientation">Orientation</label>
  31. <select id="orientation">
  32. <option value="both">both</option>
  33. <option value="bottom" selected>bottom</option>
  34. <option value="top">top</option>
  35. </select>
  36. </div>
  37. <script>
  38. var o = document.getElementById('orientation');
  39. o.onchange = function () {
  40. timeline.setOptions({
  41. orientation: o.value
  42. });
  43. };
  44. </script>
  45. <br>
  46. <div id="visualization"></div>
  47. <script>
  48. var moment = vis.moment;
  49. var now = moment().minutes(0).seconds(0).milliseconds(0);
  50. var groupCount = 3;
  51. var itemCount = 20;
  52. // create a data set with groups
  53. var names = ['John (0)', 'Alston (1)', 'Lee (2)', 'Grant (3)'];
  54. var groups = new vis.DataSet();
  55. for (var g = 0; g < groupCount; g++) {
  56. groups.add({id: g, content: '<a href="http://google.com"><span style="color:#97B0F8;">' + names[g] + '</a>', title: 'Title of group ' + g, 'className': 'myGroup'});
  57. }
  58. // create a dataset with items
  59. var items = new vis.DataSet();
  60. for (var i = 0; i < itemCount; i++) {
  61. var start = now.clone().add(Math.random() * 200, 'hours');
  62. var end = Math.random() > 0.5 ? start.clone().add(24, 'hours') : undefined;
  63. var group = Math.floor(Math.random() * groupCount);
  64. items.add({
  65. id: i,
  66. group: group,
  67. content: 'item ' + i +
  68. ' <a href="http://google.com"><span style="color:#97B0F8;">(' + names[group] + ')</span></a> ',
  69. start: start,
  70. end: end,
  71. title: 'Title for item ' + i,
  72. //type: 'box',
  73. className: 'myItem'
  74. });
  75. }
  76. // create visualization
  77. var container = document.getElementById('visualization');
  78. var options = {
  79. //orientation: 'top',
  80. multiselect: true,
  81. editable: {
  82. add: true,
  83. remove: true,
  84. updateTime: true,
  85. updateGroup: true
  86. },
  87. // orientation: {
  88. // item: 'top',
  89. // axis: 'both'
  90. // },
  91. onAdd: function (item, callback) {
  92. item.content = prompt('Enter text content for new item:', item.content);
  93. if (item.content != null) {
  94. callback(item); // send back adjusted new item
  95. }
  96. else {
  97. callback(null); // cancel item creation
  98. }
  99. },
  100. onMove: function (item, callback) {
  101. if (confirm('Do you really want to move the item to\n' +
  102. 'start: ' + item.start + '\n' +
  103. 'end: ' + item.end + '?')) {
  104. callback(item); // send back item as confirmation (can be changed)
  105. }
  106. else {
  107. callback(null); // cancel editing item
  108. }
  109. },
  110. onMoving: function (item, callback) {
  111. var min = moment().minutes(0).seconds(0).milliseconds(0).add(-2, 'day').toDate();
  112. if (item.start < min) {
  113. item.start = min;
  114. }
  115. //item.className = item.id > 3 ? 'red' : 'green';
  116. //item.group = Math.random() > 0.5 ? 2 : 1;
  117. //item.hasMoved = true;
  118. //item.content = Math.round(Math.random() * 4);
  119. callback(item); // send back item as confirmation (can be changed)
  120. },
  121. onUpdate: function (item, callback) {
  122. item.content = prompt('Edit items text:', item.content);
  123. if (item.content != null) {
  124. callback(item); // send back adjusted item
  125. }
  126. else {
  127. callback(null); // cancel updating the item
  128. }
  129. },
  130. onRemove: function (item, callback) {
  131. if (confirm('Remove item ' + item.content + '?')) {
  132. callback(item); // confirm deletion
  133. }
  134. else {
  135. callback(null); // cancel deletion
  136. }
  137. },
  138. //stack: false,
  139. //height: 200,
  140. groupOrder: 'content'
  141. };
  142. console.time('create timeline');
  143. var timeline = new vis.Timeline(container);
  144. console.timeEnd('create timeline');
  145. console.time('set options');
  146. timeline.setOptions(options);
  147. console.timeEnd('set options');
  148. console.time('set groups');
  149. timeline.setGroups(groups);
  150. console.timeEnd('set groups');
  151. console.time('set items');
  152. timeline.setItems(items);
  153. console.timeEnd('set items');
  154. timeline.on('select', function (selection) {
  155. console.log('select', selection);
  156. });
  157. /*
  158. timeline.on('rangechange', function (range) {
  159. console.log('rangechange', range);
  160. });
  161. timeline.on('rangechanged', function (range) {
  162. console.log('rangechanged', range);
  163. });
  164. */
  165. timeline.on('click', function (props) {
  166. console.log('click', props);
  167. });
  168. timeline.on('doubleClick', function (props) {
  169. console.log('doubleClick', props);
  170. });
  171. timeline.on('contextmenu', function (props) {
  172. console.log('contextmenu', props);
  173. });
  174. items.on('add', console.log.bind(console));
  175. items.on('update', console.log.bind(console));
  176. items.on('remove', console.log.bind(console));
  177. groups.on('add', console.log.bind(console));
  178. groups.on('update', console.log.bind(console));
  179. groups.on('remove', console.log.bind(console));
  180. function log (msg) {
  181. var logs = document.getElementById('logs');
  182. logs.innerHTML = msg + '<br>' + logs.innerHTML;
  183. }
  184. </script>
  185. <div id="logs"></div>
  186. </body>
  187. </html>