Logo Logo

Documentation v1.1.5

  • Home
  • Vis-Timeline
  • Interactions
Preview
Light
Dark
System
Vis-timeline is an interactive visualization chart to visualize data in time. For more info visit the Github repository.

Interactions Example

Here's an example of Vis-timeline with interactive buttons to navigate Vis-timeline items with animation. For more info, please visit the official website. 
// create a dataset with items
// we specify the type of the fields `start` and `end` here to be strings
// containing an ISO date. The fields will be outputted as ISO dates
// automatically getting data from the DataSet via items.get().
var items = new vis.DataSet({
    type: { start: "ISODate", end: "ISODate" },
});

// add items to the DataSet
items.add([
    { id: 1, content: "item 1<br>start", start: "2021-01-23" },
    { id: 2, content: "item 2", start: "2021-01-18" },
    { id: 3, content: "item 3", start: "2021-01-21" },
    { id: 4, content: "item 4", start: "2021-01-19", end: "2021-01-24" },
    { id: 5, content: "item 5", start: "2021-01-28", type: "point" },
    { id: 6, content: "item 6", start: "2021-01-26" },
]);

var container = document.getElementById("kt_docs_vistimeline_interaction");
var options = {
    start: "2021-01-10",
    end: "2021-02-10",
    editable: true,
    showCurrentTime: true,
};

var timeline = new vis.Timeline(container, items, options);

// Handle buttons
document.getElementById("window1").onclick = function () {
    timeline.setWindow("2021-01-01", "2021-04-01");
};
document.getElementById("fit").onclick = function () {
    timeline.fit();
};
document.getElementById("select").onclick = function () {
    timeline.setSelection([5, 6], {
        focus: true,
    });
};
document.getElementById("focus1").onclick = function () {
    timeline.focus(2);
};
document.getElementById("moveTo").onclick = function () {
    timeline.moveTo("2021-02-01");
};
<div class="d-flex mb-5 btn-group">
    <input type="button" id="window1" class="btn btn-light-primary" value="Set window from 2014-01-01 to 2014-04-01" />
    <input type="button" id="moveTo" class="btn btn-light-primary" value="Move to 2014-02-01" />
    <input type="button" id="fit" class="btn btn-light-primary" value="Fit all items" />
    <input type="button" id="select" class="btn btn-light-primary" value="Select &amp; focus items 5 and 6" />
    <input type="button" id="focus1" class="btn btn-light-primary" value="Focus item 2" />
</div>

<div id="kt_docs_vistimeline_interaction"></div>
try metronic buy mega bundle
Preview Get Help Buy Now