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

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