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.

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