Search code examples
javascriptvis.jsvis.js-timeline

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


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


Solution

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