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.

127 lines
3.3 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="../node_modules/moment/lang/nl.js"></script>
  7. <script>
  8. moment.lang('nl');
  9. </script>
  10. <script src="../dist/vis.js"></script>
  11. <link href="../dist/vis.css" rel="stylesheet" type="text/css" />
  12. <style type="text/css">
  13. body, html {
  14. font-family: sans-serif;
  15. font-size: 11pt;
  16. }
  17. #visualization .itemset {
  18. /*background: rgba(255, 255, 0, 0.5);*/
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div>
  24. <label for="orientation">Orientation</label>
  25. <select id="orientation">
  26. <option value="top">top</option>
  27. <option value="bottom" selected>bottom</option>
  28. </select>
  29. </div>
  30. <script>
  31. var o = document.getElementById('orientation');
  32. o.onchange = function () {
  33. timeline.setOptions({
  34. orientation: o.value
  35. });
  36. };
  37. </script>
  38. <div>
  39. <label for="currenttime"><input id="currenttime" type="checkbox" checked="true"> Show current time</label>
  40. </div>
  41. <script>
  42. var currenttime = document.getElementById('currenttime');
  43. currenttime.onchange = function () {
  44. timeline.setOptions({
  45. showCurrentTime: currenttime.checked
  46. });
  47. };
  48. </script>
  49. <br>
  50. <div id="visualization"></div>
  51. <script>
  52. console.time('create dataset');
  53. // create a dataset with items
  54. var now = moment().minutes(0).seconds(0).milliseconds(0);
  55. var items = new vis.DataSet({
  56. type: {
  57. start: 'ISODate',
  58. end: 'ISODate'
  59. },
  60. fieldId: '_id'
  61. });
  62. items.add([
  63. {_id: 0, content: 'item 0', start: now.clone().add('days', 3).toDate(), title: 'hello title!'},
  64. {_id: '1', content: 'item 1<br>start', start: now.clone().add('days', 4).toDate()},
  65. {_id: 2, content: 'item 2', start: now.clone().add('days', -2).toDate() },
  66. {_id: 3, content: 'item 3', start: now.clone().add('days', 2).toDate()},
  67. {
  68. _id: 4, content: 'item 4 ',
  69. start: now.clone().add('days', 0).toDate(),
  70. end: now.clone().add('days', 7).toDate(),
  71. title: 'hello title!'
  72. },
  73. {_id: 5, content: 'item 5', start: now.clone().add('days', 9).toDate(), type:'point', title: 'hello title!'},
  74. {_id: 6, content: 'item 6', start: now.clone().add('days', 11).toDate()}
  75. ]);
  76. var container = document.getElementById('visualization');
  77. var options = {
  78. editable: true,
  79. //orientation: 'top',
  80. start: now.clone().add('days', -7),
  81. end: now.clone().add('days', 7),
  82. //maxHeight: 200,
  83. //height: 200,
  84. showCurrentTime: true,
  85. showCustomTime: true,
  86. //min: moment('2013-01-01'),
  87. //max: moment('2013-12-31'),
  88. //zoomMin: 1000 * 60 * 60 * 24, // 1 day
  89. zoomMax: 1000 * 60 * 60 * 24 * 30 * 6, // 6 months
  90. clickToUse: true
  91. };
  92. console.timeEnd('create dataset');
  93. console.time('create timeline');
  94. var timeline = new vis.Timeline(container, items, options);
  95. console.timeEnd('create timeline');
  96. timeline.on('select', function (selection) {
  97. console.log('select', selection);
  98. });
  99. /*
  100. timeline.on('rangechange', function (range) {
  101. console.log('rangechange', range);
  102. });
  103. timeline.on('rangechanged', function (range) {
  104. console.log('rangechanged', range);
  105. });
  106. */
  107. items.on('add', console.log.bind(console));
  108. items.on('update', console.log.bind(console));
  109. items.on('remove', console.log.bind(console));
  110. </script>
  111. </body>
  112. </html>