diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index b46fcde8..9e7c4d81 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -454,6 +454,16 @@ var groups = [
By default, groups are ordered by first-come, first-show.
+
+ subgroupStack
+ Object or Boolean
+ none
+ Enables stacking within individual subgroups. Example: {'subgroup0': true, 'subgroup1': false, 'subgroup2': true}
+ For each subgroup where stacking is enabled, items will be stacked on top of each other within that subgroup such that they do no overlap.
+ If set to true
all subgroups will be stacked.
+ If a value was specified for the order
parameter in the options, that ordering will be used when stacking the items.
+
+
title
String
diff --git a/examples/timeline/groups/subgroups.html b/examples/timeline/groups/subgroups.html
index 4647d191..e17db9b3 100644
--- a/examples/timeline/groups/subgroups.html
+++ b/examples/timeline/groups/subgroups.html
@@ -21,12 +21,68 @@
.vis-item.vis-background.marker {
border-left: 2px solid green;
}
+
+ table {
+ border: 1px solid gray;
+ }
+
+ td {
+ text-align: center
+ }
+
+ code {
+ padding: 2px 4px;
+ font-size: 90%;
+ color: #c7254e;
+ background-color: #f9f2f4;
+ border-radius: 4px;
+ }
-This example shows the workings of the subgroups. Subgroups do not use stacking, and only work when stacking is disabled.
-Toggle stackSubgroups
+This example shows the workings of the subgroups. Subgroups can be stacked on each other, and the items within each subgroup can be stacked.
+When stacking is on for the whole timeline, all items in the timeline will be stacked with respect to each other unless the stackSubgroups
option is set to true
+ 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
+ stacking settings for each subgroup.
+
+
+
+
+ Option
+ Status
+ Toggle
+
+
+
+
+ Stacking
+ false
+ Toggle
+
+
+ stackSubgroups
+ true
+ Toggle
+
+
+ Stack Subgroup 0
+ false
+ Toggle
+
+
+ Stack Subgroup 1
+ false
+ Toggle
+
+
+ Stack Subgroup 2
+ false
+ Toggle
+
+
+
+
@@ -39,7 +95,7 @@
type: { start: 'ISODate', end: 'ISODate' }
});
var groups = new vis.DataSet([{
- id: 'bar', content:'bar', subgroupOrder: function (a,b) {return a.subgroupOrder - b.subgroupOrder;}
+ id: 'bar', content:'bar', subgroupOrder: function (a,b) {return a.subgroupOrder - b.subgroupOrder;}, subgroupStack: {'sg_1': false, 'sg_2': false, 'sg_3': false }
},{
id: 'foo', content:'foo', subgroupOrder: 'subgroupOrder' // this group has no subgroups but this would be the other method to do the sorting.
}]);
@@ -51,16 +107,26 @@
{id: 'SG_1_1',start: '2014-01-25', end: '2014-01-27', type: 'background', group:'bar', subgroup:'sg_1', subgroupOrder:0},
{id: 'SG_1_2', start: '2014-01-26', end: '2014-01-27', type: 'background', className: 'positive',group:'bar', subgroup:'sg_1', subgroupOrder:0},
- {id: 1, content: 'subgroup0', start: '2014-01-23T12:00:00', end: '2014-01-26T12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0},
- {id: 'SG_2_1', start: '2014-01-27', end: '2014-01-29', type: 'background', group:'bar', subgroup:'sg_2', subgroupOrder:1},
- {id: 'SG_2_2', start: '2014-01-27', end: '2014-01-28', type: 'background', className: 'negative',group:'bar', subgroup:'sg_2', subgroupOrder:1},
- {id: 2, content: 'subgroup1', start: '2014-01-27', end: '2014-01-29',group:'bar', subgroup:'sg_2', subgroupOrder:1},
+ {id: 1, content: 'subgroup0_1', start: '2014-01-23T12:00:00', end: '2014-01-26T12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0},
+ {id: 2, content: 'subgroup0_2', start: '2014-01-22T12:00:01', end: '2014-01-25T12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0},
+
+ {id: 'SG_2_1', start: '2014-02-01', end: '2014-02-02', type: 'background', group:'bar', subgroup:'sg_2', subgroupOrder:1},
+ {id: 'SG_2_2', start: '2014-02-2', end: '2014-02-03', type: 'background', className: 'negative',group:'bar', subgroup:'sg_2', subgroupOrder:1},
+ {id: 3, content: 'subgroup1_1', start: '2014-01-27T02:00:00', end: '2014-01-29',group:'bar', subgroup:'sg_2', subgroupOrder:1},
+ {id: 4, content: 'subgroup1_2', start: '2014-01-28', end: '2014-02-02',group:'bar', subgroup:'sg_2', subgroupOrder:1},
+
+ {id: 'SG_3_1',start: '2014-01-23', end: '2014-01-25', type: 'background', group:'bar', subgroup:'sg_3', subgroupOrder:2, content:"a"},
+ {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"},
+ {id: 5, content: 'subgroup2_1', start: '2014-01-23T12:00:00', end: '2014-01-26T12:00:00',group:'bar', subgroup:'sg_3', subgroupOrder:2},
+ {id: 6, content: 'subgroup2_2', start: '2014-01-26T12:00:01', end: '2014-01-29T12:00:00',group:'bar', subgroup:'sg_3', subgroupOrder:2},
{id: 'background', start: '2014-01-29', end: '2014-01-30', type: 'background', className: 'negative',group:'bar'},
{id: 'background_all', start: '2014-01-31', end: '2014-02-02', type: 'background', className: 'positive'},
]);
var container = document.getElementById('visualization');
+ var stackingStatus = document.getElementById('stackingStatus');
+ var stackSubgroupsStatus = document.getElementById('stackSubgroupsStatus');
var options = {
// orientation:'top'
start: '2014-01-10',
@@ -72,10 +138,24 @@
var timeline = new vis.Timeline(container, items, groups, options);
+ function toggleStacking() {
+ options.stack = !options.stack;
+ stackingStatus.innerHTML = options.stack.toString();
+ timeline.setOptions(options);
+ }
+
function toggleStackSubgroups() {
options.stackSubgroups = !options.stackSubgroups;
+ stackSubgroupsStatus.innerHTML = options.stackSubgroups.toString();
timeline.setOptions(options);
}
+
+ function toggleSubgroupStack(subgroup) {
+ groups.get("bar").subgroupStack[subgroup] = !groups.get("bar").subgroupStack[subgroup];
+ document.getElementById('stack' + subgroup).innerHTML = groups.get("bar").subgroupStack[subgroup].toString();
+ timeline.setGroups(groups);
+ }
+