Timeline plus subgroup falling off the group
The subgroup falls into the next group at certain zoom levels or timeline pan.
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.js"></script>
<div id="visualization"></div>
JavaScript
var items = new vis.DataSet({
type: {
start: 'ISODate',
end: 'ISODate'
}
});
var groups = new vis.DataSet([{
id: 'all',
content: 'bar',
subgroupStack: {
'sg_2': true,
'sg_3': true
}
}, {
id: 'second',
content: 'foo',
subgroupStack: {
'sg_2': true,
'sg_3': true
}
}]);
// add items to the DataSet
items.add([{
id: 0,
content: 'subgroup1_1',
start: '2014-01-23T12:00:00',
end: '2014-01-26T12:00:00',
group: 'second',
subgroup: 'sg_3'
},
{
id: 1,
content: 'subgroup2',
start: '2014-01-26T12:00:01',
end: '2014-01-29T12:00:00',
group: 'all',
subgroup: 'sg_2'
},
{
id: 3,
content: 'subgroup1_2',
start: '2014-01-23T12:00:00',
end: '2014-01-26T12:00:00',
group: 'second',
subgroup: 'sg_3'
},
{
id: 4,
content: 'subgroup1_3',
start: '2014-01-26T12:00:01',
end: '2014-01-29T12:00:00',
group: 'second',
subgroup: 'sg_3'
},
{
id: 5,
content: 'sg_3',
start: '2014-01-23T12:00:00',
type: 'background',
end: '2014-01-29T12:00:00',
group: 'second',
subgroup: 'sg_3'
},
{
id: 6,
content: 'sg_2',
start: '2014-01-25T12:00:00',
end: '2014-01-29T12:00:00',
type: 'background',
group: 'all',
subgroup: 'sg_2'
},
]);
var container = document.getElementById('visualization');
var options = {
start: '2014-01-10',
end: '2014-02-10',
editable: true,
stack: true,
stackSubgroups: true
};
var timeline = new vis.Timeline(container, items, groups, options);