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.

85 lines
3.1 KiB

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title></title>
  5. <script src="../lib/moment.min.js"></script>
  6. <script src="../src/util.js"></script>
  7. <script src="../src/events.js"></script>
  8. <script src="../src/timestep.js"></script>
  9. <script src="../src/dataset.js"></script>
  10. <script src="../src/stack.js"></script>
  11. <script src="../src/controller.js"></script>
  12. <script src="../src/range.js"></script>
  13. <script src="../src/component/component.js"></script>
  14. <script src="../src/component/panel.js"></script>
  15. <script src="../src/component/rootpanel.js"></script>
  16. <script src="../src/component/timeaxis.js"></script>
  17. <script src="../src/component/itemset.js"></script>
  18. <script src="../src/component/item/item.js"></script>
  19. <script src="../src/component/item/itembox.js"></script>
  20. <script src="../src/component/item/itemrange.js"></script>
  21. <script src="../src/component/item/itempoint.js"></script>
  22. <script src="../src/visualization/timeline.js"></script>
  23. <link href="../src/component/css/panel.css" rel="stylesheet" type="text/css" />
  24. <link href="../src/component/css/timeaxis.css" rel="stylesheet" type="text/css" />
  25. <link href="../src/component/css/item.css" rel="stylesheet" type="text/css" />
  26. <style type="text/css">
  27. body, html {
  28. width: 100%;
  29. height: 100%;
  30. padding: 0;
  31. margin: 0;
  32. font-family: arial, sans-serif;
  33. font-size: 12pt;
  34. }
  35. #visualization {
  36. box-sizing: border-box;
  37. padding: 10px;
  38. width: 100%;
  39. height: 300px;
  40. }
  41. #visualization .itemset {
  42. /*background: rgba(255, 255, 0, 0.5);*/
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <div id="visualization"></div>
  48. <script>
  49. // create a dataset with items
  50. var now = moment().minutes(0).seconds(0).milliseconds(0);
  51. var data = new DataSet({
  52. fieldTypes: {
  53. start: 'Date',
  54. end: 'Date'
  55. }
  56. });
  57. data.add([
  58. {id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4).toDate()},
  59. {id: 2, content: 'item 2', start: now.clone().add('days', -2).toDate() },
  60. {id: 3, content: 'item 3', start: now.clone().add('days', 2).toDate()},
  61. {id: 4, content: 'item 4', start: now.clone().add('days', 0).toDate(), end: now.clone().add('days', 7).toDate()},
  62. {id: 5, content: 'item 5', start: now.clone().add('days', 9).toDate(), type:'point'},
  63. {id: 6, content: 'item 6', start: now.clone().add('days', 11).toDate()}
  64. ]);
  65. var container = document.getElementById('visualization');
  66. var options = {
  67. //start: now.clone().add('days', -7).valueOf(),
  68. //end: now.clone().add('days', 7).valueOf(),
  69. min: moment('2013-01-01').valueOf(),
  70. max: moment('2013-12-31').valueOf(),
  71. zoomMin: 1000 * 60 * 60 * 24, // 1 day
  72. zoomMax: 1000 * 60 * 60 * 24 * 30 * 6 // 6 months
  73. };
  74. var timeline = new Timeline(container, data, options);
  75. </script>
  76. </body>
  77. </html>