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.

161 lines
6.8 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Timeline | Subgroups</title>
  5. <script src="../../../dist/vis.js"></script>
  6. <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  7. <style>
  8. body, html {
  9. font-family: arial, sans-serif;
  10. font-size: 11pt;
  11. }
  12. .vis-item.vis-background.negative {
  13. background-color: rgba(255, 0, 0, 0.2);
  14. }
  15. .vis-item.vis-background.positive {
  16. background-color: rgba(105, 255, 98, 0.20);
  17. }
  18. .vis-item.vis-background.marker {
  19. border-left: 2px solid green;
  20. }
  21. table {
  22. border: 1px solid gray;
  23. }
  24. td {
  25. text-align: center
  26. }
  27. code {
  28. padding: 2px 4px;
  29. font-size: 90%;
  30. color: #c7254e;
  31. background-color: #f9f2f4;
  32. border-radius: 4px;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <p>This example shows the workings of the subgroups. Subgroups can be stacked on each other, and the items within each subgroup can be stacked.</p>
  38. <p>When stacking is on for the whole timeline, all items in the timeline will be stacked with respect to each other <em>unless</em> the <code>stackSubgroups</code> option is set to <code>true</code>
  39. and at least one subgroup has stacking enabled. In that case the subgroups will be stacked with respect to each other and the elements in each subgroup will be stacked based on the individual
  40. stacking settings for each subgroup.
  41. </p>
  42. <table>
  43. <thead>
  44. <tr>
  45. <th>Option</th>
  46. <th>Status</th>
  47. <th>Toggle</th>
  48. </tr>
  49. </thead>
  50. <tbody>
  51. <tr >
  52. <td>Stacking</td>
  53. <td id="stackingStatus">false</td>
  54. <td><button onclick="toggleStacking()">Toggle</button></td>
  55. </tr>
  56. <tr>
  57. <td>stackSubgroups</td>
  58. <td id="stackSubgroupsStatus">true</td>
  59. <td><button onclick="toggleStackSubgroups()">Toggle</button></td>
  60. </tr>
  61. <tr>
  62. <td>Stack Subgroup 0</td>
  63. <td id="stacksg_1">false</td>
  64. <td><button onclick="toggleSubgroupStack('sg_1')">Toggle</button></td>
  65. </tr>
  66. <tr>
  67. <td>Stack Subgroup 1</td>
  68. <td id="stacksg_2">false</td>
  69. <td><button onclick="toggleSubgroupStack('sg_2')">Toggle</button></td>
  70. </tr>
  71. <tr>
  72. <td>Stack Subgroup 2</td>
  73. <td id="stacksg_3">false</td>
  74. <td><button onclick="toggleSubgroupStack('sg_3')">Toggle</button></td>
  75. </tr>
  76. </tbody>
  77. </table>
  78. <br/>
  79. <div id="visualization"></div>
  80. <script>
  81. // create a dataset with items
  82. // we specify the type of the fields `start` and `end` here to be strings
  83. // containing an ISO date. The fields will be outputted as ISO dates
  84. // automatically getting data from the DataSet via items.get().
  85. var items = new vis.DataSet({
  86. type: { start: 'ISODate', end: 'ISODate' }
  87. });
  88. var groups = new vis.DataSet([{
  89. id: 'bar', content:'bar', subgroupOrder: function (a,b) {return a.subgroupOrder - b.subgroupOrder;}, subgroupStack: {'sg_1': false, 'sg_2': false, 'sg_3': false }
  90. },{
  91. id: 'foo', content:'foo', subgroupOrder: 'subgroupOrder' // this group has no subgroups but this would be the other method to do the sorting.
  92. }]);
  93. // add items to the DataSet
  94. items.add([
  95. {id: 'A',start: '2014-01-20', end: '2014-01-22', type: 'background', group:'foo'},
  96. {id: 'B',start: '2014-01-22', end: '2014-01-23', type: 'background', group:'foo', className: 'negative'},
  97. {id: 0, content: 'no subgroup', start: '2014-01-20', end: '2014-01-22',group:'foo'},
  98. {id: 'SG_1_1',start: '2014-01-25', end: '2014-01-27', type: 'background', group:'bar', subgroup:'sg_1', subgroupOrder:0},
  99. {id: 'SG_1_2', start: '2014-01-26', end: '2014-01-27', type: 'background', className: 'positive',group:'bar', subgroup:'sg_1', subgroupOrder:0},
  100. {id: 1, content: 'subgroup0_1', start: '2014-01-23T12:00:00', end: '2014-01-26T12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0},
  101. {id: 2, content: 'subgroup0_2', start: '2014-01-22T12:00:01', end: '2014-01-25T12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0},
  102. {id: 'SG_2_1', start: '2014-02-01', end: '2014-02-02', type: 'background', group:'bar', subgroup:'sg_2', subgroupOrder:1},
  103. {id: 'SG_2_2', start: '2014-02-2', end: '2014-02-03', type: 'background', className: 'negative',group:'bar', subgroup:'sg_2', subgroupOrder:1},
  104. {id: 3, content: 'subgroup1_1', start: '2014-01-27T02:00:00', end: '2014-01-29',group:'bar', subgroup:'sg_2', subgroupOrder:1},
  105. {id: 4, content: 'subgroup1_2', start: '2014-01-28', end: '2014-02-02',group:'bar', subgroup:'sg_2', subgroupOrder:1},
  106. {id: 'SG_3_1',start: '2014-01-23', end: '2014-01-25', type: 'background', group:'bar', subgroup:'sg_3', subgroupOrder:2, content:"a"},
  107. {id: 'SG_3_2', start: '2014-01-26', end: '2014-01-28', type: 'background', className: 'positive',group:'bar', subgroup:'sg_3', subgroupOrder:2, content:"b"},
  108. {id: 5, content: 'subgroup2_1', start: '2014-01-23T12:00:00', end: '2014-01-26T12:00:00',group:'bar', subgroup:'sg_3', subgroupOrder:2},
  109. {id: 6, content: 'subgroup2_2', start: '2014-01-26T12:00:01', end: '2014-01-29T12:00:00',group:'bar', subgroup:'sg_3', subgroupOrder:2},
  110. {id: 'background', start: '2014-01-29', end: '2014-01-30', type: 'background', className: 'negative',group:'bar'},
  111. {id: 'background_all', start: '2014-01-31', end: '2014-02-02', type: 'background', className: 'positive'},
  112. ]);
  113. var container = document.getElementById('visualization');
  114. var stackingStatus = document.getElementById('stackingStatus');
  115. var stackSubgroupsStatus = document.getElementById('stackSubgroupsStatus');
  116. var options = {
  117. // orientation:'top'
  118. start: '2014-01-10',
  119. end: '2014-02-10',
  120. editable: true,
  121. stack: false,
  122. stackSubgroups: true
  123. };
  124. var timeline = new vis.Timeline(container, items, groups, options);
  125. function toggleStacking() {
  126. options.stack = !options.stack;
  127. stackingStatus.innerHTML = options.stack.toString();
  128. timeline.setOptions(options);
  129. }
  130. function toggleStackSubgroups() {
  131. options.stackSubgroups = !options.stackSubgroups;
  132. stackSubgroupsStatus.innerHTML = options.stackSubgroups.toString();
  133. timeline.setOptions(options);
  134. }
  135. function toggleSubgroupStack(subgroup) {
  136. groups.get("bar").subgroupStack[subgroup] = !groups.get("bar").subgroupStack[subgroup];
  137. document.getElementById('stack' + subgroup).innerHTML = groups.get("bar").subgroupStack[subgroup].toString();
  138. timeline.setGroups(groups);
  139. }
  140. </script>
  141. </body>
  142. </html>