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.

87 lines
2.8 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Timeline | navigation menu</title>
  5. <style type="text/css">
  6. body, html, input {
  7. font-family: sans-serif;
  8. font-size: 12pt;
  9. }
  10. #visualization {
  11. position: relative;
  12. }
  13. .menu {
  14. position: absolute;
  15. top: 0;
  16. right: 0;
  17. margin: 10px;
  18. z-index: 9999;
  19. }
  20. </style>
  21. <script src="../../dist/vis.js"></script>
  22. <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  23. </head>
  24. <body>
  25. <div id="visualization">
  26. <div class="menu">
  27. <input type="button" id="zoomIn" value="Zoom in"/>
  28. <input type="button" id="zoomOut" value="Zoom out"/>
  29. <input type="button" id="moveLeft" value="Move left"/>
  30. <input type="button" id="moveRight" value="Move right"/>
  31. </div>
  32. </div>
  33. <script type="text/javascript">
  34. // create a timeline with some data
  35. var container = document.getElementById('visualization');
  36. var items = [
  37. {id: 1, content: 'item 1', start: '2014-04-20'},
  38. {id: 2, content: 'item 2', start: '2014-04-14'},
  39. {id: 3, content: 'item 3', start: '2014-04-18'},
  40. {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
  41. {id: 5, content: 'item 5', start: '2014-04-25'},
  42. {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
  43. ];
  44. var options = {};
  45. var timeline = new vis.Timeline(container, items, options);
  46. /**
  47. * Move the timeline a given percentage to left or right
  48. * @param {Number} percentage For example 0.1 (left) or -0.1 (right)
  49. */
  50. function move (percentage) {
  51. var range = timeline.getWindow();
  52. var interval = range.end - range.start;
  53. timeline.setWindow({
  54. start: range.start.valueOf() - interval * percentage,
  55. end: range.end.valueOf() - interval * percentage
  56. });
  57. }
  58. /**
  59. * Zoom the timeline a given percentage in or out
  60. * @param {Number} percentage For example 0.1 (zoom out) or -0.1 (zoom in)
  61. */
  62. function zoom (percentage) {
  63. var range = timeline.getWindow();
  64. var interval = range.end - range.start;
  65. timeline.setWindow({
  66. start: range.start.valueOf() - interval * percentage,
  67. end: range.end.valueOf() + interval * percentage
  68. });
  69. }
  70. // attach events to the navigation buttons
  71. document.getElementById('zoomIn').onclick = function () { zoom(-0.2); };
  72. document.getElementById('zoomOut').onclick = function () { zoom( 0.2); };
  73. document.getElementById('moveLeft').onclick = function () { move( 0.2); };
  74. document.getElementById('moveRight').onclick = function () { move(-0.2); };
  75. </script>
  76. </body>
  77. </html>