Preview

Documentation v1.1.5

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)
Item 0
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Task 0
Task 1
Task 2
Task 3
Task 4
Task 5
Task 6
Task 7
Task 8
Task 9
Task 10
Task 11
Task 12
Task 13
Task 14
Task 15
Task 16
Task 17
Task 18
Task 19
Task 20
Task 21
Task 22
Task 23
Task 24
Task 25
Task 26
Task 27
Task 28
Task 29
Task 30
Task 31
Task 32
Task 33
Task 34
Task 35
Task 36
Task 37
Task 38
Task 39
Task 40
Task 41
Task 42
Task 43
Task 44
Task 45
Task 46
Task 47
Task 48
Task 49
Task 50
Task 51
Task 52
Task 53
Task 54
Task 55
Task 56
Task 57
Task 58
Task 59
Task 60
Task 61
Task 62
Task 63
Task 64
Task 65
Task 66
Task 67
Task 68
Task 69
Task 70
Task 71
Task 72
Task 73
Task 74
Task 75
Task 76
Task 77
Task 78
Task 79
Task 80
Task 81
Task 82
Task 83
Task 84
Task 85
Task 86
Task 87
Task 88
Task 89
Task 90
Task 91
Task 92
Task 93
Task 94
Task 95
Task 96
Task 97
Task 98
Task 99
Task 100
Task 101
Task 102
Task 103
Task 104
Task 105
Task 106
Task 107
Task 108
Task 109
Task 110
Task 111
Task 112
Task 113
Task 114
Task 115
Task 116
Task 117
Task 118
Task 119
Task 120
Task 121
Task 122
Task 123
Task 124
Task 125
Task 126
Task 127
Task 128
Task 129
Task 130
Task 131
Task 132
Task 133
Task 134
Task 135
Task 136
Task 137
Task 138
Task 139
Task 140
Task 141
Task 142
Task 143
Task 144
Task 145
Task 146
Task 147
Task 148
Task 149
Task 150
Task 151
Task 152
Task 153
Task 154
Task 155
Task 156
Task 157
Task 158
Task 159
Task 160
Task 161
Task 162
Task 163
Task 164
Task 165
Task 166
Task 167
Task 168
Task 169
Task 170
Task 171
Task 172
Task 173
Task 174
Task 175
Task 176
Task 177
Task 178
Task 179
Task 180
Task 181
Task 182
Task 183
Task 184
Task 185
Task 186
Task 187
Task 188
Task 189
Task 190
Task 191
Task 192
Task 193
Task 194
Task 195
Task 196
Task 197
Task 198
Task 199
Task 200
Task 201
Task 202
Task 203
Task 204
Task 205
Task 206
Task 207
Task 208
Task 209
Task 210
Task 211
Task 212
Task 213
Task 214
Task 215
Task 216
Task 217
Task 218
Task 219
Task 220
Task 221
Task 222
Task 223
Task 224
Task 225
Task 226
Task 227
Task 228
Task 229
Task 230
Task 231
Task 232
Task 233
Task 234
Task 235
Task 236
Task 237
Task 238
Task 239
Task 240
Task 241
Task 242
Task 243
Task 244
Task 245
Task 246
Task 247
Task 248
Task 249
Task 250
Task 251
Task 252
Task 253
Task 254
Task 255
Task 256
Task 257
Task 258
Task 259
Task 260
Task 261
Task 262
Task 263
Task 264
Task 265
Task 266
Task 267
Task 268
Task 269
Task 270
Task 271
Task 272
Task 273
Task 274
Task 275
Task 276
Task 277
Task 278
Task 279
Task 280
Task 281
Task 282
Task 283
Task 284
Task 285
Task 286
Task 287
Task 288
Task 289
Task 290
Task 291
Task 292
Task 293
Task 294
Task 295
Task 296
Task 297
Task 298
Task 299
0
0
3
5
7
9
11
13
15
17
19
21
23
25
27
January 2025
0
0
3
5
7
9
11
13
15
17
19
21
23
25
27
January 2025
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-bold 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>
Preview Get Help Buy Now