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.

88 lines
2.4 KiB

  1. <html>
  2. <head>
  3. <title>Timeline | Past and future</title>
  4. <style type="text/css">
  5. body {
  6. font: 11pt verdana;
  7. }
  8. .vis.timeline .item.past {
  9. filter: alpha(opacity=50);
  10. opacity: 0.5;
  11. }
  12. </style>
  13. <script src="../../dist/vis.js"></script>
  14. <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  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 style="width: 600px;">
  18. When the custom time bar is shown, the user can drag this bar to a specific
  19. time. The Timeline sends an event that the custom time is changed, after
  20. which the contents of the timeline can be changed according to the specified
  21. time in past or future.
  22. </p>
  23. <div id="customTime">&nbsp;</div>
  24. <p></p>
  25. <div id="mytimeline"></div>
  26. <script>
  27. // create a data set
  28. var data = new vis.DataSet([
  29. {
  30. id: 1,
  31. start: new Date((new Date()).getTime() - 60 * 1000),
  32. end: new Date(),
  33. content: 'Dynamic event'
  34. }
  35. ]);
  36. // specify options
  37. var options = {
  38. showCurrentTime: true,
  39. showCustomTime: true
  40. };
  41. // create a timeline
  42. var container = document.getElementById('mytimeline');
  43. timeline = new vis.Timeline(container, data, options);
  44. // add event listener
  45. timeline.on('timechange', function (event) {
  46. document.getElementById("customTime").innerHTML = "Custom Time: " + event.time;
  47. var item = data.get(1);
  48. if (event.time > item.start) {
  49. item.end = new Date(event.time);
  50. var now = new Date();
  51. if (event.time < now) {
  52. item.content = "Dynamic event (past)";
  53. item.className = 'past';
  54. }
  55. else if (event.time > now) {
  56. item.content = "Dynamic event (future)";
  57. item.className = 'future';
  58. }
  59. else {
  60. item.content = "Dynamic event (now)";
  61. item.className = 'now';
  62. }
  63. data.update(item);
  64. }
  65. });
  66. // set a custom range from -2 minute to +3 minutes current time
  67. var start = new Date((new Date()).getTime() - 2 * 60 * 1000);
  68. var end = new Date((new Date()).getTime() + 3 * 60 * 1000);
  69. timeline.setWindow(start, end, {animate: false});
  70. </script>
  71. </body>
  72. </html>