Documentation v8.0.25

Preview Purchase

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

Template Item Example

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

Handlebarsis used as the template engine in this example.

round of 16
Brazil	1 (3) - 1 (2)	Chile

round of 16
Colombia	2 - 0	Uruguay

round of 16
Netherlands	2 - 1	Mexico

round of 16
Costa Rica	1 (5) - 1 (3)	Greece

round of 16
France	2 - 0	Nigeria

round of 16
Germany	2 - 1	Algeria

round of 16
Argentina	1 - 0	Switzerland

round of 16
Belgium	2 - 1	USA

quarter-finals
France	0 - 1	Germany

quarter-finals
Brazil	2 - 1	Colombia

quarter-finals
Argentina	1 - 0	Belgium

quarter-finals
Netherlands	0 (4) - 0 (3)	Costa Rica

semi-finals
Brazil	1 - 7	Germany

semi-finals
Netherlands	0 (2) - 0 (4)	Argentina

final
Germany	1 - 0	Argentina

July 2014

June 2014

														JAVASCRIPT
													

														HTML
													

															// Template data --- handlebars is used as the template for this demo. For more info: https://handlebarsjs.com/
    const data = `<table class="score">
        <tr>
            <td colspan="3" class="description">
                {{ description }}
            </td>
        </tr>
        <tr>
            <td>{{ player1 }}</td>
        <th>
            {{ score1 }} - {{ score2 }}
        </th>
            <td>{{ player2 }}</td>
        </tr>
        <tr>
            <td>
                <img
                src="https://flagpedia.net/data/flags/mini/{{abbr1}}.png"
                width="31"
                height="20"
                alt="{{abbr1}}"
                />
            </td>
        <th></th>
            <td>
                <img
                src="https://flagpedia.net/data/flags/mini/{{abbr2}}.png"
                width="31"
                height="20"
                alt="{{abbr2}}"
                />
            </td>
        </tr>
    </table>`;

    // Private functions
    var exampleTemplate = function () {
        // create a handlebars template --- For more info: https://handlebarsjs.com/
        var template = Handlebars.compile(data);

        // DOM element where the Timeline will be attached
        var container = document.getElementById("kt_docs_vistimeline_template");

        // Create a DataSet (allows two way data-binding)
        var items = new vis.DataSet([
            // round of 16
            {
                player1: "Brazil",
                abbr1: "br",
                score1: "1 (3)",
                player2: "Chile",
                abbr2: "cl",
                score2: "1 (2)",
                description: "round of 16",
                start: "2014-06-28T13:00:00",
            },
            {
                player1: "Colombia",
                abbr1: "co",
                score1: 2,
                player2: "Uruguay",
                abbr2: "uy",
                score2: 0,
                description: "round of 16",
                start: "2014-06-28T17:00:00",
            },
            {
                player1: "Netherlands",
                abbr1: "nl",
                score1: 2,
                player2: "Mexico",
                abbr2: "mx",
                score2: 1,
                description: "round of 16",
                start: "2014-06-29T13:00:00",
            }
        ]);

        // Configuration for the Timeline
        var options = {
            // specify a template for the items
            template: template,
        };

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

															<div id="kt_docs_vistimeline_template"></div>
														