vis.js timeline, don't stack items with no time overlap

Question

I'm using vis.js to display a timeline.

I have the following items:

var items = new vis.DataSet([
  {id: 1, content: '1) Next To 2', start: '2014-04-20 00:00:00', end : '2014-04-20 00:59:59'},
  {id: 2, content: '2) Next To 1', start: '2014-04-20 01:00:00', end : '2014-04-20 02:59:59'},
  {id: 3, content: 'Underneath   ', start: '2014-04-20 00:00:00', end : '2014-04-20 05:59:59'}
]);

id 1 and id 2 start/end do not overlap each other (timewise). So I always want them to appear on the same line within the timeline regardless of the zoom level.

However I can't set stack : false, as I want id : 3 to be underneath both 1 and 2.

Here is a JSFiddle: http://jsfiddle.net/uqn6q4jd/17/

1) and 2) should always be on the same line, 3) always underneath

Can I accomplish this anyway?

I have had a look at the Vis JS source, and feel I could probably achieve what I need via alterations to:

exports.stack = function...
exports.nostack = function...

If there's a setting or feature I am missing that would be the preferred route than me making changes...

Answer 1

I am currently working with vis and have faced a similar problem. If the ranges don't overlap and aren't too small, removing the horizontal item margin should do just fine:

var options = {
    margin: {
        item : {
            horizontal : 0
        }
    }
};

If you zoom out too far, they will still start stacking, though. A per-group stacking option is a requested feature and might also do what you want once it gets implemented.

Answer 2

You should (now) be able to achieve this with sub-groups.

When stacking is off, sub-groups can still effectively stack (but don't collapse back when you zoom out etc., so they are just "separated into rows" rather than actually managed via the dynamic stacking feature).

You'd need to pre-calculate your subgroups via an overlap check, which might get complex depending on your data.

Specifically to your example 1 & 2 would be in subgroup 1 while item 3 in subgroup 2. Subgroup ordering would ensure sg2 was below sg1.

var items = new vis.DataSet([
  {id: 1, subgroup:1, content: '1) Next To 2', start: '2014-04-20 00:00:00', end : '2014-04-20 00:59:59'},
  {id: 2, subgroup:1, content: '2) Next To 1', start: '2014-04-20 01:00:00', end : '2014-04-20 02:59:59'},
  {id: 3, subgroup:2, content: 'Underneath   ', start: '2014-04-20 00:00:00', end : '2014-04-20 05:59:59'}
]);

Subgroups are documented here

Subgroup ordering is documented here

I've just used this approach as a workaround to achieve per-group stacking/or not which is, as @Kazua helpfully points out, still a requested feature.