vis.js is a dynamic, browser-based visualization library

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