Documentation v1.0.4
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 |
|---|---|---|
|
|
|
|
0
0
25
27
29
1
3
5
7
July 2014
9
11
13
15
June 2014
// 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>
2022©
Keenthemes
