Documentation v8.0.36

Preview Downloads Purchase

Vis-timeline is an interactive visualization chart to visualize data in time. For more info visit the Github repository.

Groups Example

Here's an example of Vis-timeline with groupped items. Click on the icon arrows to toggle sub-items.

For more info, please visit the official website.

Visible groups:

(Scroll with the mouse and see the items being focus automatically on the timeline)

JAVASCRIPT
HTML

var now = Date.now();

var options = {
    stack: true,
    maxHeight: 640,
    horizontalScroll: false,
    verticalScroll: true,
    zoomKey: "ctrlKey",
    start: Date.now() - 1000 * 60 * 60 * 24 * 3, // minus 3 days
    end: Date.now() + 1000 * 60 * 60 * 24 * 21, // plus 1 months aprox.
    orientation: {
        axis: "both",
        item: "top",
    },
};
var groups = new vis.DataSet();
var items = new vis.DataSet();

var count = 300;

for (var i = 0; i < count; i++) {
    var start = now + 1000 * 60 * 60 * 24 * (i + Math.floor(Math.random() * 7));
    var end = start + 1000 * 60 * 60 * 24 * (1 + Math.floor(Math.random() * 5));

    groups.add({
        id: i,
        content: "Task " + i,
        order: i,
    });

    items.add({
        id: i,
        group: i,
        start: start,
        end: end,
        type: "range",
        content: "Item " + i,
    });
}

// create a Timeline
var container = document.getElementById("kt_docs_vistimeline_group");
var timeline = new vis.Timeline(container, items, groups, options);
//timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);

function debounce(func, wait = 100) {
    let timeout;
    return function (...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            func.apply(this, args);
        }, wait);
    };
}

let groupFocus = (e) => {
    let vGroups = timeline.getVisibleGroups();
    let vItems = vGroups.reduce((res, groupId) => {
        let group = timeline.itemSet.groups[groupId];
        if (group.items) {
            res = res.concat(Object.keys(group.items));
        }
        return res;
    }, []);
    timeline.focus(vItems);
};
timeline.on("scroll", debounce(groupFocus, 200));
// Enabling the next line leads to a continuous since calling focus might scroll vertically even if it shouldn't
// this.timeline.on("scrollSide", debounce(groupFocus, 200))        

// Handle button click
const button = document.getElementById('kt_docs_vistimeline_group_button');
button.addEventListener('click', e => {
    e.preventDefault();

    var a = timeline.getVisibleGroups();
    document.getElementById("visibleGroupsContainer").innerHTML = "";
    document.getElementById("visibleGroupsContainer").innerHTML += a;
});

<button type="button" class="btn btn-primary mb-5" id="kt_docs_vistimeline_group_button">Show current visible items</button>
<div class="mb-5">
    <div class="fw-bolder mb-5">Visible groups: <span id="visibleGroupsContainer" class="fw-normal"></span></div>
    
    (Scroll with the mouse and see the items being focus automatically on the timeline)
</div>

<div id="kt_docs_vistimeline_group"></div>