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.

140 lines
4.5 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="http://t4t5.github.io/sweetalert/dist/sweetalert.min.js"></script>
  12. <link href="http://t4t5.github.io/sweetalert/dist/sweetalert.css" rel="stylesheet" type="text/css"/>
  13. <script src="../../../dist/vis.js"></script>
  14. <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
  15. </head>
  16. <body>
  17. <p style="max-width: 800px;">
  18. 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.
  19. </p>
  20. <div id="visualization"></div>
  21. <p></p>
  22. <div id="log"></div>
  23. <script type="text/javascript">
  24. // note that months are zero-based in the JavaScript Date object, so month 3 is April
  25. var items = new vis.DataSet([
  26. {id: 1, content: 'item 1', start: new Date(2013, 3, 20)},
  27. {id: 2, content: 'item 2', start: new Date(2013, 3, 14)},
  28. {id: 3, content: 'item 3', start: new Date(2013, 3, 18)},
  29. {id: 4, content: 'item 4', start: new Date(2013, 3, 16), end: new Date(2013, 3, 19)},
  30. {id: 5, content: 'item 5', start: new Date(2013, 3, 25)},
  31. {id: 6, content: 'item 6', start: new Date(2013, 3, 27)}
  32. ]);
  33. var min = new Date(2013, 3, 1); // 1 april
  34. var max = new Date(2013, 3, 30, 23, 59, 59); // 30 april
  35. var container = document.getElementById('visualization');
  36. var options = {
  37. editable: true,
  38. onAdd: function (item, callback) {
  39. prettyPrompt('Add item', 'Enter text content for new item:', item.content, function (value) {
  40. if (value) {
  41. item.content = value;
  42. callback(item); // send back adjusted new item
  43. }
  44. else {
  45. callback(null); // cancel item creation
  46. }
  47. });
  48. },
  49. onMove: function (item, callback) {
  50. var title = 'Do you really want to move the item to\n' +
  51. 'start: ' + item.start + '\n' +
  52. 'end: ' + item.end + '?';
  53. prettyConfirm('Move item', title, function (ok) {
  54. if (ok) {
  55. callback(item); // send back item as confirmation (can be changed)
  56. }
  57. else {
  58. callback(null); // cancel editing item
  59. }
  60. });
  61. },
  62. onMoving: function (item, callback) {
  63. if (item.start < min) item.start = min;
  64. if (item.start > max) item.start = max;
  65. if (item.end > max) item.end = max;
  66. callback(item); // send back the (possibly) changed item
  67. },
  68. onUpdate: function (item, callback) {
  69. prettyPrompt('Update item', 'Edit items text:', item.content, function (value) {
  70. if (value) {
  71. item.content = value;
  72. callback(item); // send back adjusted item
  73. }
  74. else {
  75. callback(null); // cancel updating the item
  76. }
  77. });
  78. },
  79. onRemove: function (item, callback) {
  80. prettyConfirm('Remove item', 'Do you really want to remove item ' + item.content + '?', function (ok) {
  81. if (ok) {
  82. callback(item); // confirm deletion
  83. }
  84. else {
  85. callback(null); // cancel deletion
  86. }
  87. });
  88. }
  89. };
  90. var timeline = new vis.Timeline(container, items, options);
  91. items.on('*', function (event, properties) {
  92. logEvent(event, properties);
  93. });
  94. function logEvent(event, properties) {
  95. var log = document.getElementById('log');
  96. var msg = document.createElement('div');
  97. msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
  98. 'properties=' + JSON.stringify(properties);
  99. log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
  100. }
  101. function prettyConfirm(title, text, callback) {
  102. swal({
  103. title: title,
  104. text: text,
  105. type: 'warning',
  106. showCancelButton: true,
  107. confirmButtonColor: "#DD6B55"
  108. }, callback);
  109. }
  110. function prettyPrompt(title, text, inputValue, callback) {
  111. swal({
  112. title: title,
  113. text: text,
  114. type: 'input',
  115. showCancelButton: true,
  116. inputValue: inputValue
  117. }, callback);
  118. }
  119. </script>
  120. </body>
  121. </html>