Documentation v8.1.1

Preview Downloads Purchase

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

Custom Styling Example

Here's an example of Vis-timeline with custom styling. For more info, please visit the official website.

JAVASCRIPT
HTML

var container = document.getElementById("kt_docs_vistimeline_style");

// Generate HTML content
const getContent = (title, img) => {
    const item = document.createElement('div');
    const name = document.createElement('div');
    const nameClasses = ['fw-bolder', 'mb-2'];
    name.classList.add(...nameClasses);
    name.innerHTML = title;

    const image = document.createElement('img');
    image.setAttribute('src', img);

    const symbol = document.createElement('div');
    const symbolClasses = ['symbol', 'symbol-circle', 'symbol-30'];
    symbol.classList.add(...symbolClasses);
    symbol.appendChild(image);

    item.appendChild(name);
    item.appendChild(symbol);

    return item;
}

// note that months are zero-based in the JavaScript Date object
var items = new vis.DataSet([
    {
        start: new Date(2010, 7, 23),
        content: getContent('Conversation', './assets/media/avatars/300-6.jpg')
    },
    {
        start: new Date(2010, 7, 23, 23, 0, 0),
        content: getContent('Mail from boss', './assets/media/avatars/300-1.jpg')
    },
    { start: new Date(2010, 7, 24, 16, 0, 0), content: "Report" },
    {
        start: new Date(2010, 7, 26),
        end: new Date(2010, 8, 2),
        content: "Traject A",
    },
    {
        start: new Date(2010, 7, 28),
        content: getContent('Memo', './assets/media/avatars/300-2.jpg')
    },
    {
        start: new Date(2010, 7, 29),
        content: getContent('Phone call', './assets/media/avatars/300-5.jpg')
    },
    {
        start: new Date(2010, 7, 31),
        end: new Date(2010, 8, 3),
        content: "Traject B",
    },
    {
        start: new Date(2010, 8, 4, 12, 0, 0),
        content: getContent('Report', './assets/media/avatars/300-20.jpg')
    },
]);

var options = {
    editable: true,
    margin: {
        item: 20,
        axis: 40,
    },
};

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

<div id="kt_docs_vistimeline_style"></div>

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.1.1

Custom Styling Example

Demos

Metronic Licenses

Metronic Demos

Learn & Get Inspired

Support at devs.keenthemes.com

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.1.1

No result found

Custom Styling Example

Demos

Metronic Licenses

Metronic Demos

Learn & Get Inspired

Support at devs.keenthemes.com