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.

81 lines
2.1 KiB

11 years ago
11 years ago
11 years ago
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="../node_modules/moment/moment.js"></script>
  6. <script src="../vis.js"></script>
  7. <style type="text/css">
  8. body, html {
  9. font-family: sans-serif;
  10. font-size: 11pt;
  11. }
  12. #visualization .itemset {
  13. /*background: rgba(255, 255, 0, 0.5);*/
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div>
  19. <label for="orientation">Orientation</label>
  20. <select id="orientation">
  21. <option value="top">top</option>
  22. <option value="bottom" selected>bottom</option>
  23. </select>
  24. </div>
  25. <script>
  26. var orientation = document.getElementById('orientation');
  27. orientation.onchange = function () {
  28. timeline.setOptions({
  29. orientation: orientation.value
  30. });
  31. };
  32. </script>
  33. <br>
  34. <div id="visualization"></div>
  35. <script>
  36. // create a dataset with items
  37. var now = moment().minutes(0).seconds(0).milliseconds(0);
  38. var items = new vis.DataSet({
  39. convert: {
  40. start: 'Date',
  41. end: 'Date'
  42. },
  43. fieldId: '_id'
  44. });
  45. items.add([
  46. {_id: 0, content: 'item 0', start: now.clone().add('days', 3).toDate()},
  47. {_id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4).toDate()},
  48. {_id: 2, content: 'item 2', start: now.clone().add('days', -2).toDate() },
  49. {_id: 3, content: 'item 3', start: now.clone().add('days', 2).toDate()},
  50. {_id: 4, content: 'item 4',
  51. start: now.clone().add('days', 0).toDate(),
  52. end: now.clone().add('days', 7).toDate()},
  53. {_id: 5, content: 'item 5', start: now.clone().add('days', 9).toDate(), type:'point'},
  54. {_id: 6, content: 'item 6', start: now.clone().add('days', 11).toDate()}
  55. ]);
  56. var container = document.getElementById('visualization');
  57. var options = {
  58. //orientation: 'top',
  59. start: now.clone().add('days', -7),
  60. end: now.clone().add('days', 7),
  61. //maxHeight: 200,
  62. height: 200,
  63. //start: moment('2013-01-01'),
  64. //end: moment('2013-12-31'),
  65. min: moment('2013-01-01'),
  66. max: moment('2013-12-31'),
  67. zoomMin: 1000 * 60 * 60 * 24, // 1 day
  68. zoomMax: 1000 * 60 * 60 * 24 * 30 * 6 // 6 months
  69. };
  70. var timeline = new vis.Timeline(container, items, options);
  71. </script>
  72. </body>
  73. </html>