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.

115 lines
3.5 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. <script src="../../googleAnalytics.js"></script>
  24. </head>
  25. <body>
  26. <p>
  27. Create your own navigation menu by creating an overlay with buttons to zoom and move.
  28. </p>
  29. <div id="visualization">
  30. <div class="menu">
  31. <input type="button" id="zoomIn" value="Zoom in"/>
  32. <input type="button" id="zoomOut" value="Zoom out"/>
  33. <input type="button" id="moveLeft" value="Move left"/>
  34. <input type="button" id="moveRight" value="Move right"/>
  35. </div>
  36. </div>
  37. <script type="text/javascript">
  38. // create a timeline with some data
  39. var container = document.getElementById('visualization');
  40. var items = new vis.DataSet([
  41. {id: 1, content: 'item 1', start: '2014-04-20'},
  42. {id: 2, content: 'item 2', start: '2014-04-14'},
  43. {id: 3, content: 'item 3', start: '2014-04-18'},
  44. {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
  45. {id: 5, content: 'item 5', start: '2014-04-25'},
  46. {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
  47. ]);
  48. var options = {};
  49. var timeline = new vis.Timeline(container, items, options);
  50. /**
  51. * Move the timeline a given percentage to left or right
  52. * @param {Number} percentage For example 0.1 (left) or -0.1 (right)
  53. */
  54. function move (percentage) {
  55. var range = timeline.getWindow();
  56. var interval = range.end - range.start;
  57. timeline.setWindow({
  58. start: range.start.valueOf() - interval * percentage,
  59. end: range.end.valueOf() - interval * percentage
  60. });
  61. }
  62. /**
  63. * Zoom the timeline a given percentage in or out
  64. * @param {Number} percentage For example 0.1 (zoom out) or -0.1 (zoom in)
  65. */
  66. function zoomIn(percentage) {
  67. var range = timeline.getWindow();
  68. var start = range.start.valueOf();
  69. var end = range.end.valueOf();
  70. var interval = end - start;
  71. var newInterval = interval / (1 + percentage);
  72. var distance = (interval - newInterval) / 2;
  73. var newStart = start + distance;
  74. var newEnd = end - distance;
  75. timeline.setWindow({
  76. start : newStart,
  77. end : newEnd
  78. });
  79. }
  80. function zoomOut(percentage) {
  81. var range = timeline.getWindow();
  82. var start = range.start.valueOf();
  83. var end = range.end.valueOf();
  84. var interval = end - start;
  85. var newStart = start - interval * percentage / 2;
  86. var newEnd = end + interval * percentage / 2;
  87. timeline.setWindow({
  88. start : newStart,
  89. end : newEnd
  90. });
  91. }
  92. // attach events to the navigation buttons
  93. document.getElementById('zoomIn').onclick = function () { zoomIn( 0.2); };
  94. document.getElementById('zoomOut').onclick = function () { zoomOut( 0.2); };
  95. document.getElementById('moveLeft').onclick = function () { move( 0.2); };
  96. document.getElementById('moveRight').onclick = function () { move(-0.2); };
  97. </script>
  98. </body>
  99. </html>