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.

52 lines
1.7 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Timeline | Limit move and zoom</title>
  5. <style>
  6. body, html {
  7. font-family: arial, 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>
  17. The visible range is limited in this demo:
  18. </p>
  19. <ul>
  20. <li>minimum visible date is limited to 2012-01-01 using option <code>min</code></li>
  21. <li>maximum visible date is limited to 2013-01-01 (excluded) using option <code>max</code></li>
  22. <li>visible zoom interval is limited to a minimum of 24 hours using option <code>zoomMin</code></li>
  23. <li>visible zoom interval is limited to a maximum of about 3 months using option <code>zoomMax</code></li>
  24. </ul>
  25. <div id="visualization"></div>
  26. <script>
  27. // create some items
  28. // note that months are zero-based in the JavaScript Date object, so month 4 is May
  29. var items = new vis.DataSet([
  30. {'start': new Date(2012, 4, 25), 'content': 'First'},
  31. {'start': new Date(2012, 4, 26), 'content': 'Last'}
  32. ]);
  33. // create visualization
  34. var container = document.getElementById('visualization');
  35. var options = {
  36. height: '300px',
  37. min: new Date(2012, 0, 1), // lower limit of visible range
  38. max: new Date(2013, 0, 1), // upper limit of visible range
  39. zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
  40. zoomMax: 1000 * 60 * 60 * 24 * 31 * 3 // about three months in milliseconds
  41. };
  42. // create the timeline
  43. var timeline = new vis.Timeline(container);
  44. timeline.setOptions(options);
  45. timeline.setItems(items);
  46. </script>
  47. </body>
  48. </html>