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...

Malposition

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.

Myopic

Use -1 instead of 0 in order to zoom out without the items stacking. – Durban

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.

Report

Answer 3

var options = {
    margin: {
        item : {
            horizontal : -1
        }
    }
};

i used -1 so you dont have to zoom in to see it stacked

Bitters

Answer 4

For anyone that runs into this issue in the future.

If the items do not overlap and start at the same time or almost at the same time, I just left the stacking on and set a -25 on the horizontal margin option.

margin: {
        item: 0,
        axis: 0,
        item : {
          horizontal : -25
        }
    },

This in turn puts all the items on the same line that do not overlap and stacks if items overlap.

I am also using vis.js - Timeline Version:4.19.1.

Therewithal