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.

222 lines
6.5 KiB

11 years ago
11 years ago
11 years ago
9 years ago
9 years ago
9 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/locale/nl.js"></script>
  7. <script>
  8. moment.locale('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. .vis-timeline .vis-item.vis-range .vis-drag-left,
  21. .vis-timeline .vis-item.vis-range .vis-drag-right {
  22. /*width: 40px;*/
  23. background: rgba(255,0,0,0.5);
  24. }
  25. #visualization .vis-grid.vis-vertical.vis-odd {
  26. background: #f5f5f5;
  27. }
  28. #visualization .vis-grid.vis-vertical.vis-saturday,
  29. #visualization .vis-grid.vis-vertical.vis-sunday {
  30. background: gray;
  31. }
  32. #visualization .vis-text.vis-saturday,
  33. #visualization .vis-text.vis-sunday {
  34. color: white;
  35. }
  36. </style>
  37. <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>
  38. <body>
  39. <p>
  40. <label for="orientation">Orientation</label>
  41. <select id="orientation">
  42. <option value="both" selected>both</option>
  43. <option value="bottom">bottom</option>
  44. <option value="none">none</option>
  45. <option value="top">top</option>
  46. </select>
  47. </p>
  48. <p>
  49. <label for="align">Content alignment</label>
  50. <select id="align">
  51. <option value="auto" selected>auto</option>
  52. <option value="center">center</option>
  53. <option value="left">left</option>
  54. <option value="right">right</option>
  55. </select>
  56. </p>
  57. <script>
  58. var o = document.getElementById('orientation');
  59. o.onchange = function () {
  60. timeline.setOptions({
  61. orientation: o.value
  62. });
  63. };
  64. var a = document.getElementById('align');
  65. a.onchange = function () {
  66. timeline.setOptions({
  67. align: a.value
  68. });
  69. };
  70. </script>
  71. <p>
  72. <label for="currenttime"><input id="currenttime" type="checkbox" checked="true"> Show current time</label>
  73. </p>
  74. <script>
  75. var currenttime = document.getElementById('currenttime');
  76. currenttime.onchange = function () {
  77. timeline.setOptions({
  78. showCurrentTime: currenttime.checked
  79. });
  80. };
  81. </script>
  82. <br>
  83. <div id="visualization"></div>
  84. <div style="height: 1000px;"></div><!-- for testing vertical scroll on touch devices-->
  85. <script>
  86. console.time('create dataset');
  87. // create a dataset with items
  88. var now = moment().minutes(0).seconds(0).milliseconds(0);
  89. var items = new vis.DataSet({
  90. type: {
  91. start: 'ISODate',
  92. end: 'ISODate'
  93. },
  94. fieldId: '_id'
  95. });
  96. var someHtml = document.createElement('div');
  97. someHtml.innerHTML = 'Click <a href="javascript: alert(\'you clicked an anchor\');">here <span style="color: green;">or here</span></a><br><button onclick="alert(\'click\')">Click me</button>';
  98. items.add([
  99. {_id: 0, content: someHtml, start: now.clone().add(3, 'days').toDate(), title: 'hello title!'},
  100. {_id: '1', content: 'item 1<br>start', start: now.clone().add(4, 'days').toDate()},
  101. {_id: 2, content: '<a href="javascript: alert(\'you clicked an anchor\');">Click here! (anchor)</a><br><br>' +
  102. '<div onclick="alert(\'you clicked a div\'); ">Click here! (div)</div>', start: now.clone().add(-2, 'days').toDate() },
  103. {_id: 3, content: 'item 3', start: now.clone().add(2, 'days').toDate(), style: 'color: red;'},
  104. {
  105. _id: 4, content: 'item 4 foo bar foo bar foo bar foo bar foo bar',
  106. start: now.clone().add(0, 'days').toDate(),
  107. end: now.clone().add(7, 'days').toDate(),
  108. title: 'hello title!'
  109. },
  110. {
  111. _id: 4.1, content: 'item 4.1 test overflow foo bar foo bar foo bar',
  112. start: now.clone().add(0, 'days').toDate(),
  113. end: now.clone().add(1, 'days').toDate(),
  114. title: 'hello title!'
  115. },
  116. {
  117. _id: 4.2, content: 'item 4.2 test overflow foo bar foo bar foo bar',
  118. start: now.clone().add(1, 'days').toDate(),
  119. end: now.clone().add(1, 'days').add(1, 'minutes').toDate(),
  120. title: 'hello title!'
  121. },
  122. {_id: 5, content: 'item 5', start: now.clone().add(9, 'days').toDate(), type:'point', title: 'hello title!', className: 'special'},
  123. {_id: 6, content: 'item 6 very long test bla bla bla', start: now.clone().add(11, 'days').toDate()}
  124. ]);
  125. var container = document.getElementById('visualization');
  126. var options = {
  127. configure: true,
  128. multiselect: true,
  129. editable: true,
  130. //orientation: 'top',
  131. orientation: 'both',
  132. // start: now.clone().add(-7, 'days'),
  133. // end: now.clone().add(7, 'days'),
  134. //maxHeight: 200,
  135. //height: 200,
  136. showCurrentTime: true,
  137. format: {
  138. minorLabels: {
  139. 'weekday': 'dddd D',
  140. 'month': 'MMMM'
  141. },
  142. majorLabels: {
  143. 'minute': 'dddd D MMMM',
  144. 'hour': 'dddd D MMMM'
  145. }
  146. },
  147. snap: null,
  148. // timeAxis: {
  149. // scale: 'hour',
  150. // step: 2
  151. // }
  152. //clickToUse: true,
  153. //min: moment('2013-01-01'),
  154. //max: moment('2013-12-31'),
  155. //zoomMin: 1000 * 60 * 60 * 24, // 1 day
  156. // zoomMax: 1000 * 60 * 60 * 24 * 30 * 6 // 6 months
  157. };
  158. console.timeEnd('create dataset');
  159. console.time('create timeline');
  160. var timeline = new vis.Timeline(container, items, options);
  161. console.timeEnd('create timeline');
  162. timeline.addCustomTime(moment().add(1, 'day'));
  163. timeline.on('select', function (selection) {
  164. console.log('select', selection);
  165. });
  166. timeline.on('click', function (props) {
  167. console.log('click', props);
  168. });
  169. timeline.on('contextmenu', function (props) {
  170. console.log('contextmenu', props);
  171. });
  172. // timeline.on('touch', function (event) {
  173. // console.log('touch', event, Object.keys(event));
  174. // });
  175. //
  176. // timeline.on('release', function (event) {
  177. // console.log('release', event, Object.keys(event));
  178. // });
  179. /*
  180. timeline.on('rangechange', function (range) {
  181. console.log('rangechange', range);
  182. });
  183. timeline.on('rangechanged', function (range) {
  184. console.log('rangechanged', range);
  185. });
  186. */
  187. items.on('add', console.log.bind(console));
  188. items.on('update', console.log.bind(console));
  189. items.on('remove', console.log.bind(console));
  190. // timeline.setOptions({timeAxis:{scale: 'minute', step: 5}})
  191. </script>
  192. </body>
  193. </html>