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.

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