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
2.0 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Timeline | Range overflow</title>
  5. <script src="../../dist/vis.js"></script>
  6. <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  7. <style type="text/css">
  8. body, html {
  9. font-family: sans-serif;
  10. }
  11. .vis-item.vis-range {
  12. overflow: visible;
  13. }
  14. </style>
  15. <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
  16. <body>
  17. <p>
  18. In case of ranges being spread over a wide range of time, it can be interesting to have the text contents of the ranges overflow the box. This can be achieved by changing the overflow property of the contents to visible with css:
  19. </p>
  20. <pre>
  21. .vis.timeline .item.range {
  22. overflow: visible;
  23. }
  24. </pre>
  25. <div id="visualization"></div>
  26. <script type="text/javascript">
  27. // DOM element where the Timeline will be attached
  28. var container = document.getElementById('visualization');
  29. // Create a DataSet (allows two way data-binding)
  30. var items = new vis.DataSet([
  31. {id: 1, content: 'item 1 with overflowing text content', start: '2014-04-20', end: '2014-04-26'},
  32. {id: 2, content: 'item 2 with overflowing text content', start: '2014-05-14', end: '2014-05-18'},
  33. {id: 3, content: 'item 3 with overflowing text content', start: '2014-06-18', end: '2014-06-22'},
  34. {id: 4, content: 'item 4 with overflowing text content', start: '2014-06-16', end: '2014-06-17'},
  35. {id: 5, content: 'item 5 with overflowing text content', start: '2014-06-25', end: '2014-06-27'},
  36. {id: 6, content: 'item 6 with overflowing text content', start: '2014-09-27', end: '2014-09-28'}
  37. ]);
  38. // Configuration for the Timeline
  39. var options = {};
  40. // Create a Timeline
  41. var timeline = new vis.Timeline(container, items, options);
  42. </script>
  43. </body>
  44. </html>