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.

107 lines
3.6 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Timeline | Manipulation callbacks</title>
  5. <style type="text/css">
  6. body, html {
  7. font-family: sans-serif;
  8. font-size: 11pt;
  9. }
  10. </style>
  11. <script src="../../../dist/vis.js"></script>
  12. <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  13. <script src="../../googleAnalytics.js"></script>
  14. </head>
  15. <body>
  16. <p style="max-width: 800px;">
  17. This example shows how to use callback functions <code>onAdd</code>, <code>onMove</code>, <code>onMoving</code>, <code>onUpdate</code>, and <code>onRemove</code>. The <code>onMoving</code> function updates an item while dragging, and can be used to prevent the item from being drawn at disallowed or infeasible timeslots. In this example, the items cannot be moved outside of the month April 2013. The other callback functions are called after an add, move, update, or remove action has taken place, and can be used to cancel these actions.
  18. </p>
  19. <div id="visualization"></div>
  20. <p></p>
  21. <div id="log"></div>
  22. <script type="text/javascript">
  23. // note that months are zero-based in the JavaScript Date object, so month 3 is April
  24. var items = new vis.DataSet([
  25. {id: 1, content: 'item 1', start: new Date(2013, 3, 20)},
  26. {id: 2, content: 'item 2', start: new Date(2013, 3, 14)},
  27. {id: 3, content: 'item 3', start: new Date(2013, 3, 18)},
  28. {id: 4, content: 'item 4', start: new Date(2013, 3, 16), end: new Date(2013, 3, 19)},
  29. {id: 5, content: 'item 5', start: new Date(2013, 3, 25)},
  30. {id: 6, content: 'item 6', start: new Date(2013, 3, 27)}
  31. ]);
  32. var min = new Date(2013, 3, 1); // 1 april
  33. var max = new Date(2013, 3, 30, 23, 59, 59); // 30 april
  34. var container = document.getElementById('visualization');
  35. var options = {
  36. editable: true,
  37. onAdd: function (item, callback) {
  38. item.content = prompt('Enter text content for new item:', item.content);
  39. if (item.content != null) {
  40. callback(item); // send back adjusted new item
  41. }
  42. else {
  43. callback(null); // cancel item creation
  44. }
  45. },
  46. onMove: function (item, callback) {
  47. if (confirm('Do you really want to move the item to\n' +
  48. 'start: ' + item.start + '\n' +
  49. 'end: ' + item.end + '?')) {
  50. callback(item); // send back item as confirmation (can be changed)
  51. }
  52. else {
  53. callback(null); // cancel editing item
  54. }
  55. },
  56. onMoving: function (item, callback) {
  57. if (item.start < min) item.start = min;
  58. if (item.start > max) item.start = max;
  59. if (item.end > max) item.end = max;
  60. callback(item); // send back the (possibly) changed item
  61. },
  62. onUpdate: function (item, callback) {
  63. item.content = prompt('Edit items text:', item.content);
  64. if (item.content != null) {
  65. callback(item); // send back adjusted item
  66. }
  67. else {
  68. callback(null); // cancel updating the item
  69. }
  70. },
  71. onRemove: function (item, callback) {
  72. if (confirm('Remove item ' + item.content + '?')) {
  73. callback(item); // confirm deletion
  74. }
  75. else {
  76. callback(null); // cancel deletion
  77. }
  78. }
  79. };
  80. var timeline = new vis.Timeline(container, items, options);
  81. items.on('*', function (event, properties) {
  82. logEvent(event, properties);
  83. });
  84. function logEvent(event, properties) {
  85. var log = document.getElementById('log');
  86. var msg = document.createElement('div');
  87. msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
  88. 'properties=' + JSON.stringify(properties);
  89. log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
  90. }
  91. </script>
  92. </body>
  93. </html>