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.

90 lines
2.7 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Timeline | Edit items</title>
  5. <style type="text/css">
  6. body, html {
  7. font-family: sans-serif;
  8. }
  9. </style>
  10. <script src="../../dist/vis.js"></script>
  11. <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  12. </head>
  13. <body>
  14. <div id="visualization"></div>
  15. <p></p>
  16. <div id="log"></div>
  17. <script type="text/javascript">
  18. var items = new vis.DataSet();
  19. items.add([
  20. {id: 1, content: 'item 1', start: new Date(2013, 3, 20)},
  21. {id: 2, content: 'item 2', start: new Date(2013, 3, 14)},
  22. {id: 3, content: 'item 3', start: new Date(2013, 3, 18)},
  23. {id: 4, content: 'item 4', start: new Date(2013, 3, 16), end: new Date(2013, 3, 19)},
  24. {id: 5, content: 'item 5', start: new Date(2013, 3, 25)},
  25. {id: 6, content: 'item 6', start: new Date(2013, 3, 27)}
  26. ]);
  27. var container = document.getElementById('visualization');
  28. var options = {
  29. editable: true,
  30. onAdd: function (item, callback) {
  31. item.content = prompt('Enter text content for new item:', item.content);
  32. if (item.content != null) {
  33. callback(item); // send back adjusted new item
  34. }
  35. else {
  36. callback(null); // cancel item creation
  37. }
  38. },
  39. onMove: function (item, callback) {
  40. if (confirm('Do you really want to move the item to\n' +
  41. 'start: ' + item.start + '\n' +
  42. 'end: ' + item.end + '?')) {
  43. callback(item); // send back item as confirmation (can be changed
  44. }
  45. else {
  46. callback(null); // cancel editing item
  47. }
  48. },
  49. onUpdate: function (item, callback) {
  50. item.content = prompt('Edit items text:', item.content);
  51. if (item.content != null) {
  52. callback(item); // send back adjusted item
  53. }
  54. else {
  55. callback(null); // cancel updating the item
  56. }
  57. },
  58. onRemove: function (item, callback) {
  59. if (confirm('Remove item ' + item.content + '?')) {
  60. callback(item); // confirm deletion
  61. }
  62. else {
  63. callback(null); // cancel deletion
  64. }
  65. }
  66. };
  67. var timeline = new vis.Timeline(container, items, options);
  68. items.on('*', function (event, properties) {
  69. logEvent(event, properties);
  70. });
  71. function logEvent(event, properties) {
  72. var log = document.getElementById('log');
  73. var msg = document.createElement('div');
  74. msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
  75. 'properties=' + JSON.stringify(properties);
  76. log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
  77. }
  78. </script>
  79. </body>
  80. </html>