vis-timeline
Version:
Create a fully customizable, interactive timeline with items and ranges.
1,193 lines (1,112 loc) • 836 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Vis Timeline Examples</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
margin: 50px auto 200px;
min-width: calc(200px + 2em);
width: calc(100vw - 200px);
}
a {
color: #2b7ce9;
}
a:visited {
color: #46417a;
}
.example-link {
position: relative;
margin: 1em;
width: 200px;
display: inline-block;
text-align: center;
}
.example-link .example-image {
position: relative;
margin-top: 1ex;
width: 200px;
height: 200px;
}
.example-link .example-image > img {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
border: 1px solid #2b7ce9;
transition: transform 0.5s ease 0s, z-index 0.5s linear 0s;
z-index: 1;
}
.example-link:hover .example-image > img {
transform: translate(0px, 95px) scale(2, 2);
z-index: 100;
}
.playgrounds {
margin-left: 1em;
white-space: nowrap;
}
.playgrounds form {
display: inline-block;
margin: 0px;
}
.icon {
width: 2em;
height: 2em;
background: none;
border: none;
cursor: pointer;
}
.icon.jsfiddle {
background-size: contain;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%232b7ce9' d='M16.45,17.5C17.45,17.5 18.3,17.15 19,16.5C19.67,15.8 20,15 20,14C20,13.05 19.66,12.22 18.96,11.53C18.26,10.84 17.41,10.5 16.41,10.5C15.47,10.5 14.64,10.83 13.92,11.5L9.14,15.56C8.7,16 8.17,16.22 7.55,16.22C6.92,16.22 6.39,16 5.95,15.56C5.5,15.13 5.3,14.61 5.3,14C5.3,13.42 5.5,12.91 5.95,12.47C6.39,12.03 6.92,11.81 7.55,11.81C8.14,11.81 8.69,12.03 9.19,12.47L9.94,13.13L10.92,12.23L10.08,11.53C9.39,10.84 8.55,10.5 7.55,10.5C6.58,10.5 5.74,10.84 5.04,11.53C4.34,12.22 4,13.05 4,14C4,15 4.34,15.8 5.04,16.5C5.74,17.15 6.59,17.5 7.59,17.5C8.53,17.5 9.36,17.16 10.08,16.5L14.86,12.42C15.27,12 15.8,11.81 16.45,11.81C17.08,11.81 17.61,12.03 18.05,12.47C18.5,12.91 18.7,13.42 18.7,14C18.7,14.61 18.5,15.13 18.05,15.56C17.61,16 17.08,16.22 16.45,16.22C15.89,16.22 15.34,16 14.81,15.5L14.06,14.86L13.08,15.75L13.92,16.45C14.61,17.14 15.45,17.5 16.45,17.5M19.36,10.03C20.64,10.13 21.73,10.65 22.64,11.6C23.55,12.55 24,13.69 24,15C24,16.38 23.5,17.55 22.5,18.54C21.54,19.5 20.36,20 19,20H6C4.34,20 2.93,19.43 1.76,18.26C0.59,17.09 0,15.67 0,14C0,12.55 0.5,11.23 1.57,10.05C2.62,8.88 3.88,8.22 5.34,8.06C6,6.84 6.92,5.86 8.11,5.11C9.3,4.36 10.59,4 12,4C13.69,4 15.26,4.58 16.71,5.77C18.16,6.95 19.05,8.38 19.36,10.03Z' /%3E%3C/svg%3E");
}
.icon.codepen {
background-size: contain;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%232b7ce9' d='M15.09,12L12,14.08V14.09L8.91,12L12,9.92V9.92L15.09,12M12,2C11.84,2 11.68,2.06 11.53,2.15L2.5,8.11C2.27,8.22 2.09,8.43 2,8.67V14.92C2,15.33 2,15.33 2.15,15.53L11.53,21.86C11.67,21.96 11.84,22 12,22C12.16,22 12.33,21.95 12.47,21.85L21.85,15.5C22,15.33 22,15.33 22,14.92V8.67C21.91,8.42 21.73,8.22 21.5,8.1L12.47,2.15C12.32,2.05 12.16,2 12,2M16.58,13L19.59,15.04L12.83,19.6V15.53L16.58,13M19.69,8.9L16.58,11L12.83,8.47V4.38L19.69,8.9M20.33,10.47V13.53L18.07,12L20.33,10.47M7.42,13L11.17,15.54V19.6L4.41,15.04L7.42,13M4.31,8.9L11.17,4.39V8.5L7.42,11L4.31,8.9M3.67,10.5L5.93,12L3.67,13.54V10.5Z' /%3E%3C/svg%3E");
}
</style>
</head>
<body>
<div>
<div>
<h1>Timeline</h1>
<div>
<span class="example-link"
><div>
<a href="other/groupsPerformance.html">A lot of grouped data</a
><span class="playgrounds"
><form
action="http://jsfiddle.net/api/post/library/pure/"
method="post"
target="_blank"
>
<button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
 </button
><input
type="hidden"
name="js"
value='/**
* Get URL parameter
* https://www.netlobo.com/url_query_string_javascript.html
*/
function gup(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null) return "";
else return results[1];
}
// get selected item count from url parameter
var count = Number(gup("count")) || 1000;
// create groups
var groups = new vis.DataSet([
{ id: 1, content: "Truck&nbsp;1" },
{ id: 2, content: "Truck&nbsp;2" },
{ id: 3, content: "Truck&nbsp;3" },
{ id: 4, content: "Truck&nbsp;4" }
]);
// create items
var items = new vis.DataSet();
var order = 1;
var truck = 1;
for (var j = 0; j < 4; j++) {
var date = new Date();
for (var i = 0; i < count / 4; i++) {
date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
var start = new Date(date);
date.setHours(date.getHours() + 2 + Math.floor(Math.random() * 4));
var end = new Date(date);
items.add({
id: order,
group: truck,
start: start,
end: end,
content: "Order " + order
});
order++;
}
truck++;
}
// specify options
var options = {
stack: false,
start: new Date(),
end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),
editable: true,
margin: {
item: 10, // minimal margin between items
axis: 5 // minimal margin between items and the axis
},
orientation: "top"
};
// create a Timeline
var container = document.getElementById("visualization");
timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);
document.getElementById("count").innerHTML = count;
window.addEventListener("resize", () => {
/*timeline.checkResize();*/
});
'
/><input
type="hidden"
name="css"
value="body {
color: #4d4d4d;
font: 10pt arial;
}
"
/><input
type="hidden"
name="html"
value='<h1>Timeline grouping performance</h1>
<p>
Choose a number of items:
<a href="?count=100">100</a>, <a href="?count=1000">1000</a>,
<a href="?count=10000">10000</a>,
<a href="?count=100000">100000</a>
</p>
<p></p>
<p>Current number of items: <span id="count">100</span></p>
<div id="visualization"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Timeline | A lot of grouped data"
/>
</form>
<form
action="https://codepen.io/pen/define"
method="post"
target="_blank"
>
<button class="icon codepen" alt="CodePen" title="CodePen">
 </button
><input
type="hidden"
name="data"
value='{"css":"body {\n color: #4d4d4d;\n font: 10pt arial;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h1>Timeline grouping performance</h1>\n\n<p>\n Choose a number of items:\n <a href=\"?count=100\">100</a>, <a href=\"?count=1000\">1000</a>,\n <a href=\"?count=10000\">10000</a>,\n <a href=\"?count=100000\">100000</a>\n</p>\n<p></p>\n<p>Current number of items: <span id=\"count\">100</span></p>\n\n<div id=\"visualization\"></div>\n","js":"/**\n * Get URL parameter\n * https://www.netlobo.com/url_query_string_javascript.html\n */\nfunction gup(name) {\n name = name.replace(/[\\[]/, \"\\\\[\").replace(/[\\]]/, \"\\\\]\");\n var regexS = \"[\\\\?&]\" + name + \"=([^&#]*)\";\n var regex = new RegExp(regexS);\n var results = regex.exec(window.location.href);\n if (results == null) return \"\";\n else return results[1];\n}\n\n// get selected item count from url parameter\nvar count = Number(gup(\"count\")) || 1000;\n\n// create groups\nvar groups = new vis.DataSet([\n { id: 1, content: \"Truck&nbsp;1\" },\n { id: 2, content: \"Truck&nbsp;2\" },\n { id: 3, content: \"Truck&nbsp;3\" },\n { id: 4, content: \"Truck&nbsp;4\" }\n]);\n\n// create items\nvar items = new vis.DataSet();\n\nvar order = 1;\nvar truck = 1;\nfor (var j = 0; j < 4; j++) {\n var date = new Date();\n for (var i = 0; i < count / 4; i++) {\n date.setHours(date.getHours() + 4 * (Math.random() < 0.2));\n var start = new Date(date);\n\n date.setHours(date.getHours() + 2 + Math.floor(Math.random() * 4));\n var end = new Date(date);\n\n items.add({\n id: order,\n group: truck,\n start: start,\n end: end,\n content: \"Order \" + order\n });\n\n order++;\n }\n truck++;\n}\n\n// specify options\nvar options = {\n stack: false,\n start: new Date(),\n end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),\n editable: true,\n margin: {\n item: 10, // minimal margin between items\n axis: 5 // minimal margin between items and the axis\n },\n orientation: \"top\"\n};\n\n// create a Timeline\nvar container = document.getElementById(\"visualization\");\ntimeline = new vis.Timeline(container, null, options);\ntimeline.setGroups(groups);\ntimeline.setItems(items);\n\ndocument.getElementById(\"count\").innerHTML = count;\n\nwindow.addEventListener(\"resize\", () => {\n /*timeline.checkResize();*/\n});\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | A lot of grouped data"}'
/><input
type="hidden"
name="js"
value='/**
* Get URL parameter
* https://www.netlobo.com/url_query_string_javascript.html
*/
function gup(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null) return "";
else return results[1];
}
// get selected item count from url parameter
var count = Number(gup("count")) || 1000;
// create groups
var groups = new vis.DataSet([
{ id: 1, content: "Truck&nbsp;1" },
{ id: 2, content: "Truck&nbsp;2" },
{ id: 3, content: "Truck&nbsp;3" },
{ id: 4, content: "Truck&nbsp;4" }
]);
// create items
var items = new vis.DataSet();
var order = 1;
var truck = 1;
for (var j = 0; j < 4; j++) {
var date = new Date();
for (var i = 0; i < count / 4; i++) {
date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
var start = new Date(date);
date.setHours(date.getHours() + 2 + Math.floor(Math.random() * 4));
var end = new Date(date);
items.add({
id: order,
group: truck,
start: start,
end: end,
content: "Order " + order
});
order++;
}
truck++;
}
// specify options
var options = {
stack: false,
start: new Date(),
end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),
editable: true,
margin: {
item: 10, // minimal margin between items
axis: 5 // minimal margin between items and the axis
},
orientation: "top"
};
// create a Timeline
var container = document.getElementById("visualization");
timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);
document.getElementById("count").innerHTML = count;
window.addEventListener("resize", () => {
/*timeline.checkResize();*/
});
'
/><input
type="hidden"
name="css"
value="body {
color: #4d4d4d;
font: 10pt arial;
}
"
/><input
type="hidden"
name="html"
value='<h1>Timeline grouping performance</h1>
<p>
Choose a number of items:
<a href="?count=100">100</a>, <a href="?count=1000">1000</a>,
<a href="?count=10000">10000</a>,
<a href="?count=100000">100000</a>
</p>
<p></p>
<p>Current number of items: <span id="count">100</span></p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="other/groupsPerformance.html"
><div class="example-image">
<img
src="thumbnails/cd241505bf80e03e6b96c4b8aa197e6b07591e7162df44cd75e72362318f3e0f.png"
alt="A lot of grouped data"
/></div></a></span
><span class="example-link"
><div>
<a href="interaction/animateWindow.html">Animate window</a
><span class="playgrounds"
><form
action="http://jsfiddle.net/api/post/library/pure/"
method="post"
target="_blank"
>
<button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
 </button
><input
type="hidden"
name="js"
value='// 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: "2014-01-23" },
{ id: 2, content: "item 2", start: "2014-01-18" },
{ id: 3, content: "item 3", start: "2014-01-21" },
{ id: 4, content: "item 4", start: "2014-01-19", end: "2014-01-24" },
{ id: 5, content: "item 5", start: "2014-01-28", type: "point" },
{ id: 6, content: "item 6", start: "2014-01-26" }
]);
var container = document.getElementById("visualization");
var options = {
start: "2014-01-10",
end: "2014-02-10",
editable: true,
showCurrentTime: true
};
var timeline = new vis.Timeline(container, items, options);
document.getElementById("window1").onclick = function() {
timeline.setWindow("2014-01-01", "2014-04-01");
};
document.getElementById("window2").onclick = function() {
timeline.setWindow("2014-01-01", "2014-04-01", { animation: false });
};
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("focus2").onclick = function() {
timeline.focus([5, 6], {
animation: { duration: 3000, easingFunction: "linear" }
}); // ms
};
document.getElementById("focus3").onclick = function() {
var selection = timeline.getSelection();
timeline.focus(selection);
};
document.getElementById("moveTo").onclick = function() {
timeline.moveTo("2014-02-01");
};
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
input {
margin: 2px 0;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example demonstrates functions to programmatically adjust the visible
window of the Timeline.
</p>
<p>
<input
type="button"
id="window1"
value="Set window from 2014-01-01 to 2014-04-01"
/><br />
<input
type="button"
id="window2"
value="Set window from 2014-01-01 to 2014-04-01 without animation"
/><br />
<input type="button" id="moveTo" value="Move to 2014-02-01" /><br />
<input type="button" id="fit" value="Fit all items" /><br />
<input
type="button"
id="select"
value="Select &amp; focus items 5 and 6"
/><br />
<input type="button" id="focus1" value="Focus item 2" /><br />
<input
type="button"
id="focus2"
value="Focus items 5 and 6 (slow and linear animation)"
/><br />
<input type="button" id="focus3" value="Focus current selection" /><br />
</p>
<div id="visualization"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Timeline | Animate window"
/>
</form>
<form
action="https://codepen.io/pen/define"
method="post"
target="_blank"
>
<button class="icon codepen" alt="CodePen" title="CodePen">
 </button
><input
type="hidden"
name="data"
value='{"css":"body,\nhtml {\n font-family: arial, sans-serif;\n font-size: 11pt;\n}\ninput {\n margin: 2px 0;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n This example demonstrates functions to programmatically adjust the visible\n window of the Timeline.\n</p>\n\n<p>\n <input\n type=\"button\"\n id=\"window1\"\n value=\"Set window from 2014-01-01 to 2014-04-01\"\n /><br />\n <input\n type=\"button\"\n id=\"window2\"\n value=\"Set window from 2014-01-01 to 2014-04-01 without animation\"\n /><br />\n <input type=\"button\" id=\"moveTo\" value=\"Move to 2014-02-01\" /><br />\n <input type=\"button\" id=\"fit\" value=\"Fit all items\" /><br />\n <input\n type=\"button\"\n id=\"select\"\n value=\"Select &amp; focus items 5 and 6\"\n /><br />\n <input type=\"button\" id=\"focus1\" value=\"Focus item 2\" /><br />\n <input\n type=\"button\"\n id=\"focus2\"\n value=\"Focus items 5 and 6 (slow and linear animation)\"\n /><br />\n <input type=\"button\" id=\"focus3\" value=\"Focus current selection\" /><br />\n</p>\n\n<div id=\"visualization\"></div>\n","js":"// create a dataset with items\n// we specify the type of the fields `start` and `end` here to be strings\n// containing an ISO date. The fields will be outputted as ISO dates\n// automatically getting data from the DataSet via items.get().\nvar items = new vis.DataSet({\n type: { start: \"ISODate\", end: \"ISODate\" }\n});\n\n// add items to the DataSet\nitems.add([\n { id: 1, content: \"item 1<br>start\", start: \"2014-01-23\" },\n { id: 2, content: \"item 2\", start: \"2014-01-18\" },\n { id: 3, content: \"item 3\", start: \"2014-01-21\" },\n { id: 4, content: \"item 4\", start: \"2014-01-19\", end: \"2014-01-24\" },\n { id: 5, content: \"item 5\", start: \"2014-01-28\", type: \"point\" },\n { id: 6, content: \"item 6\", start: \"2014-01-26\" }\n]);\n\nvar container = document.getElementById(\"visualization\");\nvar options = {\n start: \"2014-01-10\",\n end: \"2014-02-10\",\n editable: true,\n showCurrentTime: true\n};\n\nvar timeline = new vis.Timeline(container, items, options);\n\ndocument.getElementById(\"window1\").onclick = function() {\n timeline.setWindow(\"2014-01-01\", \"2014-04-01\");\n};\ndocument.getElementById(\"window2\").onclick = function() {\n timeline.setWindow(\"2014-01-01\", \"2014-04-01\", { animation: false });\n};\ndocument.getElementById(\"fit\").onclick = function() {\n timeline.fit();\n};\ndocument.getElementById(\"select\").onclick = function() {\n timeline.setSelection([5, 6], {\n focus: true\n });\n};\ndocument.getElementById(\"focus1\").onclick = function() {\n timeline.focus(2);\n};\ndocument.getElementById(\"focus2\").onclick = function() {\n timeline.focus([5, 6], {\n animation: { duration: 3000, easingFunction: \"linear\" }\n }); // ms\n};\ndocument.getElementById(\"focus3\").onclick = function() {\n var selection = timeline.getSelection();\n timeline.focus(selection);\n};\ndocument.getElementById(\"moveTo\").onclick = function() {\n timeline.moveTo(\"2014-02-01\");\n};\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Animate window"}'
/><input
type="hidden"
name="js"
value='// 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: "2014-01-23" },
{ id: 2, content: "item 2", start: "2014-01-18" },
{ id: 3, content: "item 3", start: "2014-01-21" },
{ id: 4, content: "item 4", start: "2014-01-19", end: "2014-01-24" },
{ id: 5, content: "item 5", start: "2014-01-28", type: "point" },
{ id: 6, content: "item 6", start: "2014-01-26" }
]);
var container = document.getElementById("visualization");
var options = {
start: "2014-01-10",
end: "2014-02-10",
editable: true,
showCurrentTime: true
};
var timeline = new vis.Timeline(container, items, options);
document.getElementById("window1").onclick = function() {
timeline.setWindow("2014-01-01", "2014-04-01");
};
document.getElementById("window2").onclick = function() {
timeline.setWindow("2014-01-01", "2014-04-01", { animation: false });
};
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("focus2").onclick = function() {
timeline.focus([5, 6], {
animation: { duration: 3000, easingFunction: "linear" }
}); // ms
};
document.getElementById("focus3").onclick = function() {
var selection = timeline.getSelection();
timeline.focus(selection);
};
document.getElementById("moveTo").onclick = function() {
timeline.moveTo("2014-02-01");
};
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
input {
margin: 2px 0;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example demonstrates functions to programmatically adjust the visible
window of the Timeline.
</p>
<p>
<input
type="button"
id="window1"
value="Set window from 2014-01-01 to 2014-04-01"
/><br />
<input
type="button"
id="window2"
value="Set window from 2014-01-01 to 2014-04-01 without animation"
/><br />
<input type="button" id="moveTo" value="Move to 2014-02-01" /><br />
<input type="button" id="fit" value="Fit all items" /><br />
<input
type="button"
id="select"
value="Select &amp; focus items 5 and 6"
/><br />
<input type="button" id="focus1" value="Focus item 2" /><br />
<input
type="button"
id="focus2"
value="Focus items 5 and 6 (slow and linear animation)"
/><br />
<input type="button" id="focus3" value="Focus current selection" /><br />
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="interaction/animateWindow.html"
><div class="example-image">
<img
src="thumbnails/9a9dc4bbb9f8f4ae9c6c55e842ce387b22f1553ed8956d5b7e22dfad25c606ef.png"
alt="Animate window"
/></div></a></span
><span class="example-link"
><div>
<a href="items/backgroundAreas.html">Background areas</a
><span class="playgrounds"
><form
action="http://jsfiddle.net/api/post/library/pure/"
method="post"
target="_blank"
>
<button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
 </button
><input
type="hidden"
name="js"
value='var items = new vis.DataSet([
{
id: "A",
content: "Period A",
start: "2014-01-16",
end: "2014-01-22",
type: "background"
},
{
id: "B",
content: "Period B",
start: "2014-01-25",
end: "2014-01-30",
type: "background",
className: "negative"
},
{ id: 1, content: "item 1<br>start", start: "2014-01-23" },
{ id: 2, content: "item 2", start: "2014-01-18" },
{ id: 3, content: "item 3", start: "2014-01-21" },
{ id: 4, content: "item 4", start: "2014-01-19", end: "2014-01-24" },
{ id: 5, content: "item 5", start: "2014-01-28", type: "point" },
{ id: 6, content: "item 6", start: "2014-01-26" }
]);
var container = document.getElementById("visualization");
var options = {
start: "2014-01-10",
end: "2014-02-10",
editable: true
};
var timeline = new vis.Timeline(container, items, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
.vis-item.vis-background.negative {
background-color: rgba(255, 0, 0, 0.2);
}
"
/><input
type="hidden"
name="html"
value='<p>
This example demonstrates the item type &quot;background&quot;, see
&quot;Period A&quot; and &quot;Period B&quot;. The background areas can be
styled with css.
</p>
<div id="visualization"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Timeline | Background areas"
/>
</form>
<form
action="https://codepen.io/pen/define"
method="post"
target="_blank"
>
<button class="icon codepen" alt="CodePen" title="CodePen">
 </button
><input
type="hidden"
name="data"
value='{"css":"body,\nhtml {\n font-family: arial, sans-serif;\n font-size: 11pt;\n}\n\n.vis-item.vis-background.negative {\n background-color: rgba(255, 0, 0, 0.2);\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n This example demonstrates the item type &quot;background&quot;, see\n &quot;Period A&quot; and &quot;Period B&quot;. The background areas can be\n styled with css.\n</p>\n\n<div id=\"visualization\"></div>\n","js":"var items = new vis.DataSet([\n {\n id: \"A\",\n content: \"Period A\",\n start: \"2014-01-16\",\n end: \"2014-01-22\",\n type: \"background\"\n },\n {\n id: \"B\",\n content: \"Period B\",\n start: \"2014-01-25\",\n end: \"2014-01-30\",\n type: \"background\",\n className: \"negative\"\n },\n { id: 1, content: \"item 1<br>start\", start: \"2014-01-23\" },\n { id: 2, content: \"item 2\", start: \"2014-01-18\" },\n { id: 3, content: \"item 3\", start: \"2014-01-21\" },\n { id: 4, content: \"item 4\", start: \"2014-01-19\", end: \"2014-01-24\" },\n { id: 5, content: \"item 5\", start: \"2014-01-28\", type: \"point\" },\n { id: 6, content: \"item 6\", start: \"2014-01-26\" }\n]);\n\nvar container = document.getElementById(\"visualization\");\nvar options = {\n start: \"2014-01-10\",\n end: \"2014-02-10\",\n editable: true\n};\n\nvar timeline = new vis.Timeline(container, items, options);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Background areas"}'
/><input
type="hidden"
name="js"
value='var items = new vis.DataSet([
{
id: "A",
content: "Period A",
start: "2014-01-16",
end: "2014-01-22",
type: "background"
},
{
id: "B",
content: "Period B",
start: "2014-01-25",
end: "2014-01-30",
type: "background",
className: "negative"
},
{ id: 1, content: "item 1<br>start", start: "2014-01-23" },
{ id: 2, content: "item 2", start: "2014-01-18" },
{ id: 3, content: "item 3", start: "2014-01-21" },
{ id: 4, content: "item 4", start: "2014-01-19", end: "2014-01-24" },
{ id: 5, content: "item 5", start: "2014-01-28", type: "point" },
{ id: 6, content: "item 6", start: "2014-01-26" }
]);
var container = document.getElementById("visualization");
var options = {
start: "2014-01-10",
end: "2014-02-10",
editable: true
};
var timeline = new vis.Timeline(container, items, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
.vis-item.vis-background.negative {
background-color: rgba(255, 0, 0, 0.2);
}
"
/><input
type="hidden"
name="html"
value='<p>
This example demonstrates the item type &quot;background&quot;, see
&quot;Period A&quot; and &quot;Period B&quot;. The background areas can be
styled with css.
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="items/backgroundAreas.html"
><div class="example-image">
<img
src="thumbnails/d6236f596df7bb9f873bbbaead82a43e9d20b4186002e4004c875362fc0899e7.png"
alt="Background areas"
/></div></a></span
><span class="example-link"
><div>
<a href="items/backgroundAreasWithGroups.html"
>Background areas with groups</a
><span class="playgrounds"
><form
action="http://jsfiddle.net/api/post/library/pure/"
method="post"
target="_blank"
>
<button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
 </button
><input
type="hidden"
name="js"
value='var items = new vis.DataSet([
{
id: "A",
content: "Period A",
start: "2014-01-16",
end: "2014-01-22",
type: "background",
group: 1
},
{
id: "B",
content: "Period B",
start: "2014-01-23",
end: "2014-01-26",
type: "background",
group: 2
},
{
id: "C",
content: "Period C",
start: "2014-01-27",
end: "2014-02-03",
type: "background"
}, // no group
{
id: "D",
content: "Period D",
start: "2014-01-14",
end: "2014-01-20",
type: "background",
group: "non-existing"
},
{ id: 1, content: "item 1<br>start", start: "2014-01-30", group: 1 },
{ id: 2, content: "item 2", start: "2014-01-18", group: 1 },
{ id: 3, content: "item 3", start: "2014-01-21", group: 2 },
{
id: 4,
content: "item 4",
start: "2014-01-17",
end: "2014-01-21",
group: 2
},
{ id: 5, content: "item 5", start: "2014-01-28", type: "point", group: 2 },
{ id: 6, content: "item 6", start: "2014-01-25", group: 2 }
]);
var groups = new vis.DataSet([
{ id: 1, content: "Group 1" },
{ id: 2, content: "Group 2" }
]);
var container = document.getElementById("visualization");
var options = {
start: "2014-01-10",
end: "2014-02-10",
editable: true
};
var timeline = new vis.Timeline(container, items, groups, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example demonstrates the item type &quot;background&quot; when using
groups.
</p>
<ul>
<li>Background items having a group are displayed in that group</li>
<li>Background items without a group are spread over the whole timeline</li>
<li>Background items with a non-existing group are not displayed</li>
</ul>
<div id="visualization"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Timeline | Background areas with groups"
/>
</form>
<form
action="https://codepen.io/pen/define"
method="post"
target="_blank"
>
<button class="icon codepen" alt="CodePen" title="CodePen">
 </button
><input
type="hidden"
name="data"
value='{"css":"body,\nhtml {\n font-family: arial, sans-serif;\n font-size: 11pt;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n This example demonstrates the item type &quot;background&quot; when using\n groups.\n</p>\n<ul>\n <li>Background items having a group are displayed in that group</li>\n <li>Background items without a group are spread over the whole timeline</li>\n <li>Background items with a non-existing group are not displayed</li>\n</ul>\n<div id=\"visualization\"></div>\n","js":"var items = new vis.DataSet([\n {\n id: \"A\",\n content: \"Period A\",\n start: \"2014-01-16\",\n end: \"2014-01-22\",\n type: \"background\",\n group: 1\n },\n {\n id: \"B\",\n content: \"Period B\",\n start: \"2014-01-23\",\n end: \"2014-01-26\",\n type: \"background\",\n group: 2\n },\n {\n id: \"C\",\n content: \"Period C\",\n start: \"2014-01-27\",\n end: \"2014-02-03\",\n type: \"background\"\n }, // no group\n {\n id: \"D\",\n content: \"Period D\",\n start: \"2014-01-14\",\n end: \"2014-01-20\",\n type: \"background\",\n group: \"non-existing\"\n },\n { id: 1, content: \"item 1<br>start\", start: \"2014-01-30\", group: 1 },\n { id: 2, content: \"item 2\", start: \"2014-01-18\", group: 1 },\n { id: 3, content: \"item 3\", start: \"2014-01-21\", group: 2 },\n {\n id: 4,\n content: \"item 4\",\n start: \"2014-01-17\",\n end: \"2014-01-21\",\n group: 2\n },\n { id: 5, content: \"item 5\", start: \"2014-01-28\", type: \"point\", group: 2 },\n { id: 6, content: \"item 6\", start: \"2014-01-25\", group: 2 }\n]);\n\nvar groups = new vis.DataSet([\n { id: 1, content: \"Group 1\" },\n { id: 2, content: \"Group 2\" }\n]);\n\nvar container = document.getElementById(\"visualization\");\nvar options = {\n start: \"2014-01-10\",\n end: \"2014-02-10\",\n editable: true\n};\n\nvar timeline = new vis.Timeline(container, items, groups, options);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Background areas with groups"}'
/><input
type="hidden"
name="js"
value='var items = new vis.DataSet([
{
id: "A",
content: "Period A",
start: "2014-01-16",
end: "2014-01-22",
type: "background",
group: 1
},
{
id: "B",
content: "Period B",
start: "2014-01-23",
end: "2014-01-26",
type: "background",
group: 2
},
{
id: "C",
content: "Period C",
start: "2014-01-27",
end: "2014-02-03",
type: "background"
}, // no group
{
id: "D",
content: "Period D",
start: "2014-01-14",
end: "2014-01-20",
type: "background",
group: "non-existing"
},
{ id: 1, content: "item 1<br>start", start: "2014-01-30", group: 1 },
{ id: 2, content: "item 2", start: "2014-01-18", group: 1 },
{ id: 3, content: "item 3", start: "2014-01-21", group: 2 },
{
id: 4,
content: "item 4",
start: "2014-01-17",
end: "2014-01-21",
group: 2
},
{ id: 5, content: "item 5", start: "2014-01-28", type: "point", group: 2 },
{ id: 6, content: "item 6", start: "2014-01-25", group: 2 }
]);
var groups = new vis.DataSet([
{ id: 1, content: "Group 1" },
{ id: 2, content: "Group 2" }
]);
var container = document.getElementById("visualization");
var options = {
start: "2014-01-10",
end: "2014-02-10",
editable: true
};
var timeline = new vis.Timeline(container, items, groups, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example demonstrates the item type &quot;background&quot; when using
groups.
</p>
<ul>
<li>Background items having a group are displayed in that group</li>
<li>Background items without a group are spread over the whole timeline</li>
<li>Background items with a non-existing group are not displayed</li>
</ul>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="items/backgroundAreasWithGroups.html"
><div class="example-image">
<img
src="thumbnails/28ad7846288bcdc13afcd7598e5a857faa2dcb180d0a2d306543fe3fdcd75087.png"
alt="Background areas with groups"
/></div></a></span
><span class="example-link"
><div>
<a href="basicUsage.html">Basic demo</a
><span class="playgrounds"
><form
action="http://jsfiddle.net/api/post/library/pure/"
method="post"
target="_blank"
>
<button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
 </button
><input
type="hidden"
name="js"
value='// DOM element where the Timeline will be attached
var container = document.getElementById("visualization");
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{ id: 1, content: "item 1", start: "2014-04-20" },
{ id: 2, content: "item 2", start: "2014-04-14" },
{ id: 3, content: "item 3", start: "2014-04-18" },
{ id: 4, content: "item 4", start: "2014-04-16", end: "2014-04-19" },
{ id: 5, content: "item 5", start: "2014-04-25" },
{ id: 6, content: "item 6", start: "2014-04-27", type: "point" }
]);
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<p>
A basic timeline. You can move and zoom the timeline, and select items.
</p>
<div id="visualization"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Timeline | Basic demo"
/>
</form>
<form
action="https://codepen.io/pen/define"
method="post"
target="_blank"
>
<button class="icon codepen" alt="CodePen" title="CodePen">
 </button
><input
type="hidden"
name="data"
value='{"css":"body,\nhtml {\n font-family: sans-serif;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n A basic timeline. You can move and zoom the timeline, and select items.\n</p>\n\n<div id=\"visualization\"></div>\n","js":"// DOM element where the Timeline will be attached\nvar container = document.getElementById(\"visualization\");\n\n// Create a DataSet (allows two way data-binding)\nvar items = new vis.DataSet([\n { id: 1, content: \"item 1\", start: \"2014-04-20\" },\n { id: 2, content: \"item 2\", start: \"2014-04-14\" },\n { id: 3, content: \"item 3\", start: \"2014-04-18\" },\n { id: 4, content: \"item 4\", start: \"2014-04-16\", end: \"2014-04-19\" },\n { id: 5, content: \"item 5\", start: \"2014-04-25\" },\n { id: 6, content: \"item 6\", start: \"2014-04-27\", type: \"point\" }\n]);\n\n// Configuration for the Timeline\nvar options = {};\n\n// Create a Timeline\nvar timeline = new vis.Timeline(container, items, options);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Basic demo"}'
/><input
type="hidden"
name="js"
value='// DOM element where the Timeline will be attached
var container = document.getElementById("visualization");
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{ id: 1, content: "item 1", start: "2014-04-20" },
{ id: 2, content: "item 2", start: "2014-04-14" },
{ id: 3, content: "item 3", start: "2014-04-18" },
{ id: 4, content: "item 4", start: "2014-04-16", end: "2014-04-19" },
{ id: 5, content: "item 5", start: "2014-04-25" },
{ id: 6, content: "item 6", start: "2014-04-27", type: "point" }
]);
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<p>
A basic timeline. You can move and zoom the timeline, and select items.
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="basicUsage.html"
><div class="example-image">
<img
src="thumbnails/4c5f38476e6541b41f9bd226a8e48be08934cfe82f23cc0cc11be3bda36606e7.png"
alt="Basic demo"
/></div></a></span
><span class="example-link"
><div>
<a href="interaction/clickToUse.html">Click to use</a
><span class="playgrounds"
><form
action="http://jsfiddle.net/api/post/library/pure/"
method="post"
target="_blank"
>
<button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
 </button
><input
type="hidden"
name="js"
value='// 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: "2014-01-23" },
{ id: 2, content: "item 2", start: "2014-01-18" },
{ id: 3, content: "item 3", start: "2014-01-21" },
{ id: 4, content: "item 4", start: "2014-01-19", end: "2014-01-24" },
{ id: 5, content: "item 5", start: "2014-01-28", type: "point" },
{ id: 6, content: "item 6", start: "2014-01-26" }
]);
function createTimeline(main) {
var main = document.getElementById("main");
var container = document.createElement("div");
container.className = "container";
main.appendChild(container);
var options = {
editable: true,
clickToUse: true
};
return new vis.Timeline(container, items, options);
}
var timelines = [];
for (var i = 0; i < 10; i++) {
timelines.push(createTimeline());
}
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#main {
width: 728px;
margin: 0 auto;
}
.container {
margin: 10px;
}
"
/><input
type="hidden"
name="html"
value='<div id="main">
<h1>Timeline click to use</h1>
<p>
This example demonstrates how to use the <code>clickToUse</code> option:
before you can scroll and drag in the timeline, you first have to click in
the timeline to activate.
</p>
</div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Timeline | Click to use"
/>
</form>
<form
action="https://codepen.io/pen/define"
method="post"
target="_blank"
>
<button class="icon codepen" alt="CodePen" title="CodePen">
 </button
><input
type="hidden"
name="data"
value='{"css":"body,\nhtml {\n font-family: arial, sans-serif;\n font-size: 11pt;\n}\n#main {\n width: 728px;\n margin: 0 auto;\n}\n.container {\n margin: 10px;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<div id=\"main\">\n <h1>Timeline click to use</h1>\n <p>\n This example demonstrates how to use the <code>clickToUse</code> option:\n before you can