vis-timeline
Version:
Create a fully customizable, interactive timeline with items and ranges.
21,522 lines • 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 scroll and drag in the timeline, you first have to click in\n the timeline to activate.\n </p>\n</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\nfunction createTimeline(main) {\n var main = document.getElementById(\"main\");\n var container = document.createElement(\"div\");\n container.className = \"container\";\n main.appendChild(container);\n\n var options = {\n editable: true,\n clickToUse: true\n };\n\n return new vis.Timeline(container, items, options);\n}\n\nvar timelines = [];\nfor (var i = 0; i < 10; i++) {\n timelines.push(createTimeline());\n}\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Click to use"}'
/><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>
'
/></form
></span>
</div>
<a href="interaction/clickToUse.html"
><div class="example-image">
<img
src="thumbnails/ca7957624c215695249504dde8b5a65c888a23f34f731abbef1425ee0b81dcfa.png"
alt="Click to use"
/></div></a></span
><span class="example-link"
><div>
<a href="other/clustering.html">Clustering example</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='function getRandomArbitrary(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
function getRandomSignum() {
return Math.round(Math.random()) ? 1 : -1;
}
var names = ["Group 1", "Group 2", "Group 3", "Group 4"];
var groups = new vis.DataSet();
var groupsCount = 0;
for (var i in names) {
var name = names[i];
groups.add({ id: name, content: name });
}
function getTimelineData() {
const offsets = [];
const totalDaysCount = $("#total-days-slider").slider("value");
const itemsInClusterCount = $("#orders-per-day-slider").slider("value");
const before = [
Array.from(new Array(Math.round(totalDaysCount / 2)), function(val, index) {
return index - totalDaysCount + 1;
})
];
const after = [
Array.from(new Array(Math.round(totalDaysCount / 2)), function(val, index) {
return index + 1;
})
];
for (var i in before) {
var offset = before[i];
offsets.push(...offset);
}
for (var i in after) {
var offset = after[i];
offsets.push(...offset);
}
const clusterCenters = [];
for (let offset of offsets) {
const date = moment().add("days", offset);
clusterCenters.push(date);
}
const timeLineData = [];
let nodeIndex = 0;
for (var i in clusterCenters) {
let clusterCenter = clusterCenters[i];
for (
let clusterNodeIdx = 0;
clusterNodeIdx < itemsInClusterCount;
++clusterNodeIdx
) {
const minutesShift = getRandomArbitrary(1, 60) * getRandomSignum();
const hoursShift = getRandomArbitrary(1, 5) * getRandomSignum();
const secondsShift = getRandomArbitrary(1, 60) * getRandomSignum();
const start = clusterCenter
.clone()
.add(+minutesShift, "m")
.add(+hoursShift, "h")
.add(+secondsShift, "s");
const end = start.clone().add(60, "m");
++nodeIndex;
const currentGroup = names[getRandomArbitrary(0, names.length - 1)];
timeLineData.push({
id: nodeIndex,
content: "Order: " + nodeIndex,
start: start.format("YYYY/MM/DD HH:mm:ss"),
end: end.format("YYYY/MM/DD HH:mm:ss"),
width: 50,
group: currentGroup
});
}
}
return timeLineData;
}
$("#groupItemsCheckBox").change(function() {
if (this.checked) {
timeline.setGroups(groups);
} else {
timeline.setGroups(null);
}
});
$("#orders-per-day-slider").slider({
value: 10,
min: 1,
max: 1000,
slide: function(event, ui) {
setTimeout(() => {
$("#orders-per-day-number").val(ui.value);
timeLineData = getTimelineData();
$("#total-orders-count").val(timeLineData.length);
timeline.setItems(timeLineData);
});
}
});
$("#total-days-slider").slider({
value: 1,
min: 2,
max: 10,
step: 2,
slide: function(event, ui) {
setTimeout(() => {
$("#total-days-number").val(ui.value);
timeLineData = getTimelineData();
$("#total-orders-count").val(timeLineData.length);
timeline.setItems(timeLineData);
});
}
});
$("#total-days-number").val($("#total-days-slider").slider("value"));
$("#orders-per-day-number").val($("#orders-per-day-slider").slider("value"));
// create visualization
var container = document.getElementById("visualization");
var defaultOptions = {
stack: true,
maxHeight: 800,
height: 600,
groupOrder: "content", // groupOrder can be a property name or a sorting function,
template: (itemData, element, data) => {
if (data.isCluster) {
return `<span class="cluster-header">Cluster</span><div>containg ${data.items.length} items </div>`;
} else {
return `<div>${data.content}</div>`;
}
}
};
var timeline = new vis.Timeline(container);
timeline.setOptions(defaultOptions);
var timeLineData = getTimelineData();
$("#total-orders-count").val(timeLineData.length);
timeline.setItems(timeLineData);
timeline.fit();
$(".zoom").on("click", function() {
var dir = $(this).data("dir");
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * dir * 0.2,
end: range.end.valueOf() + interval * dir * 0.2
});
});
$("#clusterCheckbox").change(function() {
var options = {};
if (this.checked) {
var clusterOpts = {
cluster: {
titleTemplate:
"Cluster containing {count} events. Zoom in to see the individual events.",
showStipes: true
}
};
Object.assign(options, defaultOptions, clusterOpts);
} else {
Object.assign(options, defaultOptions);
}
timeline.setOptions(options);
});
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
.vis-cluster {
min-width: 145px;
}
.cluster-header {
display: block;
font-weight: 600;
}
.slider-value {
border: 0;
background: transparent;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example demonstrate using clustering.
</p>
<button class="zoom" data-dir="1">Zoom in</button>
<button class="zoom" data-dir="-1">Zoom out</button>
<br />
<input type="checkbox" id="clusterCheckbox" />Enable clustering
<br />
<input type="checkbox" id="groupItemsCheckBox" />Enable grouping
<br />
<br />
<div>
<label for="total-days-number">Days number:</label>
<input class="slider-value" type="text" id="total-days-number" readonly />
<div class="slider" id="total-days-slider"></div>
</div>
<div>
<label for="orders-per-day-number">Orders per day number:</label>
<input class="slider-value" type="text" id="orders-per-day-number" readonly />
<div class="slider" id="orders-per-day-slider"></div>
</div>
<br />
<div>
<label for="total-orders-count">Total orders:</label>
<input class="slider-value" type="text" id="total-orders-count" readonly />
</div>
<br />
<div id="visualization"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css,https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js,https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js,https://code.jquery.com/jquery-1.12.4.js,https://code.jquery.com/ui/1.12.1/jquery-ui.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Timeline | Clustering example"
/>
</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#visualization {\n box-sizing: border-box;\n width: 100%;\n height: 300px;\n}\n\n.vis-cluster {\n min-width: 145px;\n}\n\n.cluster-header {\n display: block;\n font-weight: 600;\n}\n\n.slider-value {\n border: 0;\n background: transparent;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css;https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css","html":"<p>\n This example demonstrate using clustering.\n</p>\n<button class=\"zoom\" data-dir=\"1\">Zoom in</button>\n<button class=\"zoom\" data-dir=\"-1\">Zoom out</button>\n<br />\n<input type=\"checkbox\" id=\"clusterCheckbox\" />Enable clustering\n<br />\n<input type=\"checkbox\" id=\"groupItemsCheckBox\" />Enable grouping\n<br />\n<br />\n\n<div>\n <label for=\"total-days-number\">Days number:</label>\n <input class=\"slider-value\" type=\"text\" id=\"total-days-number\" readonly />\n <div class=\"slider\" id=\"total-days-slider\"></div>\n</div>\n\n<div>\n <label for=\"orders-per-day-number\">Orders per day number:</label>\n <input class=\"slider-value\" type=\"text\" id=\"orders-per-day-number\" readonly />\n <div class=\"slider\" id=\"orders-per-day-slider\"></div>\n</div>\n<br />\n<div>\n <label for=\"total-orders-count\">Total orders:</label>\n <input class=\"slider-value\" type=\"text\" id=\"total-orders-count\" readonly />\n</div>\n\n<br />\n<div id=\"visualization\"></div>\n","js":"function getRandomArbitrary(min, max) {\n return Math.round(Math.random() * (max - min) + min);\n}\n\nfunction getRandomSignum() {\n return Math.round(Math.random()) ? 1 : -1;\n}\n\nvar names = [\"Group 1\", \"Group 2\", \"Group 3\", \"Group 4\"];\nvar groups = new vis.DataSet();\nvar groupsCount = 0;\nfor (var i in names) {\n var name = names[i];\n groups.add({ id: name, content: name });\n}\n\nfunction getTimelineData() {\n const offsets = [];\n const totalDaysCount = $(\"#total-days-slider\").slider(\"value\");\n const itemsInClusterCount = $(\"#orders-per-day-slider\").slider(\"value\");\n\n const before = [\n Array.from(new Array(Math.round(totalDaysCount / 2)), function(val, index) {\n return index - totalDaysCount + 1;\n })\n ];\n const after = [\n Array.from(new Array(Math.round(totalDaysCount / 2)), function(val, index) {\n return index + 1;\n })\n ];\n\n for (var i in before) {\n var offset = before[i];\n offsets.push(...offset);\n }\n\n for (var i in after) {\n var offset = after[i];\n offsets.push(...offset);\n }\n\n const clusterCenters = [];\n for (let offset of offsets) {\n const date = moment().add(\"days\", offset);\n clusterCenters.push(date);\n }\n\n const timeLineData = [];\n let nodeIndex = 0;\n for (var i in clusterCenters) {\n let clusterCenter = clusterCenters[i];\n for (\n let clusterNodeIdx = 0;\n clusterNodeIdx < itemsInClusterCount;\n ++clusterNodeIdx\n ) {\n const minutesShift = getRandomArbitrary(1, 60) * getRandomSignum();\n const hoursShift = getRandomArbitrary(1, 5) * getRandomSignum();\n const secondsShift = getRandomArbitrary(1, 60) * getRandomSignum();\n\n const start = clusterCenter\n .clone()\n .add(+minutesShift, \"m\")\n .add(+hoursShift, \"h\")\n .add(+secondsShift, \"s\");\n\n const end = start.clone().add(60, \"m\");\n\n ++nodeIndex;\n\n const currentGroup = names[getRandomArbitrary(0, names.length - 1)];\n\n timeLineData.push({\n id: nodeIndex,\n content: \"Order: \" + nodeIndex,\n start: start.format(\"YYYY/MM/DD HH:mm:ss\"),\n end: end.format(\"YYYY/MM/DD HH:mm:ss\"),\n width: 50,\n group: currentGroup\n });\n }\n }\n return timeLineData;\n}\n\n$(\"#groupItemsCheckBox\").change(function() {\n if (this.checked) {\n timeline.setGroups(groups);\n } else {\n timeline.setGroups(null);\n }\n});\n\n$(\"#orders-per-day-slider\").slider({\n value: 10,\n min: 1,\n max: 1000,\n slide: function(event, ui) {\n setTimeout(() => {\n $(\"#orders-per-day-number\").val(ui.value);\n timeLineData = getTimelineData();\n $(\"#total-orders-count\").val(timeLineData.length);\n timeline.setItems(timeLineData);\n });\n }\n});\n\n$(\"#total-days-slider\").slider({\n value: 1,\n min: 2,\n max: 10,\n step: 2,\n slide: function(event, ui) {\n setTimeout(() => {\n $(\"#total-days-number\").val(ui.value);\n timeLineData = getTimelineData();\n $(\"#total-orders-count\").val(timeLineData.length);\n timeline.setItems(timeLineData);\n });\n }\n});\n\n$(\"#total-days-number\").val($(\"#total-days-slider\").slider(\"value\"));\n\n$(\"#orders-per-day-number\").val($(\"#orders-per-day-slider\").slider(\"value\"));\n\n// create visualization\nvar container = document.getElementById(\"visualization\");\nvar defaultOptions = {\n stack: true,\n maxHeight: 800,\n height: 600,\n groupOrder: \"content\", // groupOrder can be a property name or a sorting function,\n template: (itemData, element, data) => {\n if (data.isCluster) {\n return `<span class=\"cluster-header\">Cluster</span><div>containg ${data.items.length} items </div>`;\n } else {\n return `<div>${data.content}</div>`;\n }\n }\n};\n\nvar timeline = new vis.Timeline(container);\ntimeline.setOptions(defaultOptions);\n\nvar timeLineData = getTimelineData();\n$(\"#total-orders-count\").val(timeLineData.length);\ntimeline.setItems(timeLineData);\n\ntimeline.fit();\n\n$(\".zoom\").on(\"click\", function() {\n var dir = $(this).data(\"dir\");\n var range = timeline.getWindow();\n var interval = range.end - range.start;\n\n timeline.setWindow({\n start: range.start.valueOf() - interval * dir * 0.2,\n end: range.end.valueOf() + interval * dir * 0.2\n });\n});\n\n$(\"#clusterCheckbox\").change(function() {\n var options = {};\n if (this.checked) {\n var clusterOpts = {\n cluster: {\n titleTemplate:\n \"Cluster containing {count} events. Zoom in to see the individual events.\",\n showStipes: true\n }\n };\n Object.assign(options, defaultOptions, clusterOpts);\n } else {\n Object.assign(options, defaultOptions);\n }\n timeline.setOptions(options);\n});\n","js_external":"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js;https://code.jquery.com/jquery-1.12.4.js;https://code.jquery.com/ui/1.12.1/jquery-ui.js","title":"Timeline | Clustering example"}'
/><input
type="hidden"
name="js"
value='function getRandomArbitrary(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
function getRandomSignum() {
return Math.round(Math.random()) ? 1 : -1;
}
var names = ["Group 1", "Group 2", "Group 3", "Group 4"];
var groups = new vis.DataSet();
var groupsCount = 0;
for (var i in names) {
var name = names[i];
groups.add({ id: name, content: name });
}
function getTimelineData() {
const offsets = [];
const totalDaysCount = $("#total-days-slider").slider("value");
const itemsInClusterCount = $("#orders-per-day-slider").slider("value");
const before = [
Array.from(new Array(Math.round(totalDaysCount / 2)), function(val, index) {
return index - totalDaysCount + 1;
})
];
const after = [
Array.from(new Array(Math.round(totalDaysCount / 2)), function(val, index) {
return index + 1;
})
];
for (var i in before) {
var offset = before[i];
offsets.push(...offset);
}
for (var i in after) {
var offset = after[i];
offsets.push(...offset);
}
const clusterCenters = [];
for (let offset of offsets) {
const date = moment().add("days", offset);
clusterCenters.push(date);
}
const timeLineData = [];
let nodeIndex = 0;
for (var i in clusterCenters) {
let clusterCenter = clusterCenters[i];
for (
let clusterNodeIdx = 0;
clusterNodeIdx < itemsInClusterCount;
++clusterNodeIdx
) {
const minutesShift = getRandomArbitrary(1, 60) * getRandomSignum();
const hoursShift = getRandomArbitrary(1, 5) * getRandomSignum();
const secondsShift = getRandomArbitrary(1, 60) * getRandomSignum();
const start = clusterCenter
.clone()
.add(+minutesShift, "m")
.add(+hoursShift, "h")
.add(+secondsShift, "s");
const end = start.clone().add(60, "m");
++nodeIndex;
const currentGroup = names[getRandomArbitrary(0, names.length - 1)];
timeLineData.push({
id: nodeIndex,
content: "Order: " + nodeIndex,
start: start.format("YYYY/MM/DD HH:mm:ss"),
end: end.format("YYYY/MM/DD HH:mm:ss"),
width: 50,
group: currentGroup
});
}
}
return timeLineData;
}
$("#groupItemsCheckBox").change(function() {
if (this.checked) {
timeline.setGroups(groups);
} else {
timeline.setGroups(null);
}
});
$("#orders-per-day-slider").slider({
value: 10,
min: 1,
max: 1000,
slide: function(event, ui) {
setTimeout(() => {
$("#orders-per-day-number").val(ui.value);
timeLineData = getTimelineData();
$("#total-orders-count").val(timeLineData.length);
timeline.setItems(timeLineData);
});
}
});
$("#total-days-slider").slider({
value: 1,
min: 2,
max: 10,
step: 2,
slide: function(event, ui) {
setTimeout(() => {
$("#total-days-number").val(ui.value);
timeLineData = getTimelineData();
$("#total-orders-count").val(timeLineData.length);
timeline.setItems(timeLineData);
});
}
});
$("#total-days-number").val($("#total-days-slider").slider("value"));
$("#orders-per-day-number").val($("#orders-per-day-slider").slider("value"));
// create visualization
var container = document.getElementById("visualization");
var defaultOptions = {
stack: true,
maxHeight: 800,
height: 600,
groupOrder: "content", // groupOrder can be a property name or a sorting function,
template: (itemData, element, data) => {
if (data.isCluster) {
return `<span class="cluster-header">Cluster</span><div>containg ${data.items.length} items </div>`;
} else {
return `<div>${data.content}</div>`;
}
}
};
var timeline = new vis.Timeline(container);
timeline.setOptions(defaultOptions);
var timeLineData = getTimelineData();
$("#total-orders-count").val(timeLineData.length);
timeline.setItems(timeLineData);
timeline.fit();
$(".zoom").on("click", function() {
var dir = $(this).data("dir");
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * dir * 0.2,
end: range.end.valueOf() + interval * dir * 0.2
});
});
$("#clusterCheckbox").change(function() {
var options = {};
if (this.checked) {
var clusterOpts = {
cluster: {
titleTemplate:
"Cluster containing {count} events. Zoom in to see the individual events.",
showStipes: true
}
};
Object.assign(options, defaultOptions, clusterOpts);
} else {
Object.assign(options, defaultOptions);
}
timeline.setOptions(options);
});
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
.vis-cluster {
min-width: 145px;
}
.cluster-header {
display: block;
font-weight: 600;
}
.slider-value {
border: 0;
background: transparent;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example demonstrate using clustering.
</p>
<button class="zoom" data-dir="1">Zoom in</button>
<button class="zoom" data-dir="-1">Zoom out</button>
<br />
<input type="checkbox" id="clusterCheckbox" />Enable clustering
<br />
<input type="checkbox" id="groupItemsCheckBox" />Enable grouping
<br />
<br />
<div>
<label for="total-days-number">Days number:</label>
<input class="slider-value" type="text" id="total-days-number" readonly />
<div class="slider" id="total-days-slider"></div>
</div>
<div>
<label for="orders-per-day-number">Orders per day number:</label>
<input class="slider-value" type="text" id="orders-per-day-number" readonly />
<div class="slider" id="orders-per-day-slider"></div>
</div>
<br />
<div>
<label for="total-orders-count">Total orders:</label>
<input class="slider-value" type="text" id="total-orders-count" readonly />
</div>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="other/clustering.html"
><div class="example-image">
<img
src="thumbnails/ce286fe55e2339167e3b80d19a730940e8f8d538d79f97d1bed3707701185335.png"
alt="Clustering example"
/></div></a></span
><span class="example-link"
><div>
<a href="other/functionLabelFormats.html"
>Custom function label format example</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 now = moment()
.minutes(0)
.seconds(0)
.milliseconds(0);
var groupCount = 3;
var itemCount = 20;
// create a data set with groups
var names = ["John", "Alston", "Lee", "Grant"];
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({ id: g, content: names[g] });
}
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 200, "hours");
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,
group: group,
content:
"item " +
i +
' <span style="color:#97B0F8;">(' +
names[group] +
")</span>",
start: start,
type: "box"
});
}
// create visualization
var container = document.getElementById("visualization");
var options = {
format: {
minorLabels: function(date, scale, step) {
var now = new Date();
var ago = now - date;
var divider;
switch (scale) {
case "millisecond":
divider = 1;
break;
case "second":
divider = 1000;
break;
case "minute":
divider = 1000 * 60;
break;
case "hour":
divider = 1000 * 60 * 60;
break;
case "day":
divider = 1000 * 60 * 60 * 24;
break;
case "weekday":
divider = 1000 * 60 * 60 * 24 * 7;
break;
case "month":
divider = 1000 * 60 * 60 * 24 * 30;
break;
case "year":
divider = 1000 * 60 * 60 * 24 * 365;
break;
default:
return new Date(date);
}
return Math.round((ago * step) / divider) + " " + scale + "s ago";
},
majorLabels: function(date, scale, step) {
var now = new Date();
var ago = now - date;
var divider;
switch (scale) {
case "millisecond":
divider = 1;
break;
case "second":
divider = 1000;
break;
case "minute":
divider = 1000 * 60;
break;
case "hour":
divider = 1000 * 60 * 60;
break;
case "day":
divider = 1000 * 60 * 60 * 24;
break;
case "weekday":
divider = 1000 * 60 * 60 * 24 * 7;
break;
case "month":
divider = 1000 * 60 * 60 * 24 * 30;
break;
case "year":
divider = 1000 * 60 * 60 * 24 * 365;
break;
default:
return new Date(date);
}
return Math.round((ago * step) / divider) + " " + scale + "s ago";
}
}
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example demonstrate using custom function label formats.
</p>
<div id="visualization"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js,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 | Custom function label format example"
/>
</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#visualization {\n box-sizing: border-box;\n width: 100%;\n height: 300px;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n This example demonstrate using custom function label formats.\n</p>\n<div id=\"visualization\"></div>\n","js":"var now = moment()\n .minutes(0)\n .seconds(0)\n .milliseconds(0);\nvar groupCount = 3;\nvar itemCount = 20;\n\n// create a data set with groups\nvar names = [\"John\", \"Alston\", \"Lee\", \"Grant\"];\nvar groups = new vis.DataSet();\nfor (var g = 0; g < groupCount; g++) {\n groups.add({ id: g, content: names[g] });\n}\n\n// create a dataset with items\nvar items = new vis.DataSet();\nfor (var i = 0; i < itemCount; i++) {\n var start = now.clone().add(Math.random() * 200, \"hours\");\n var group = Math.floor(Math.random() * groupCount);\n items.add({\n id: i,\n group: group,\n content:\n \"item \" +\n i +\n ' <span style=\"color:#97B0F8;\">(' +\n names[group] +\n \")</span>\",\n start: start,\n type: \"box\"\n });\n}\n\n// create visualization\nvar container = document.getElementById(\"visualization\");\nvar options = {\n format: {\n minorLabels: function(date, scale, step) {\n var now = new Date();\n var ago = now - date;\n var divider;\n switch (scale) {\n case \"millisecond\":\n divider = 1;\n break;\n case \"second\":\n divider = 1000;\n break;\n case \"minute\":\n divider = 1000 * 60;\n break;\n case \"hour\":\n divider = 1000 * 60 * 60;\n break;\n case \"day\":\n divider = 1000 * 60 * 60 * 24;\n break;\n case \"weekday\":\n divider = 1000 * 60 * 60 * 24 * 7;\n break;\n case \"month\":\n divider = 1000 * 60 * 60 * 24 * 30;\n break;\n case \"year\":\n divider = 1000 * 60 * 60 * 24 * 365;\n break;\n default:\n return new Date(date);\n }\n return Math.round((ago * step) / divider) + \" \" + scale + \"s ago\";\n },\n majorLabels: function(date, scale, step) {\n var now = new Date();\n var ago = now - date;\n var divider;\n switch (scale) {\n case \"millisecond\":\n divider = 1;\n break;\n case \"second\":\n divider = 1000;\n break;\n case \"minute\":\n divider = 1000 * 60;\n break;\n case \"hour\":\n divider = 1000 * 60 * 60;\n break;\n case \"day\":\n divider = 1000 * 60 * 60 * 24;\n break;\n case \"weekday\":\n divider = 1000 * 60 * 60 * 24 * 7;\n break;\n case \"month\":\n divider = 1000 * 60 * 60 * 24 * 30;\n break;\n case \"year\":\n divider = 1000 * 60 * 60 * 24 * 365;\n break;\n default:\n return new Date(date);\n }\n return Math.round((ago * step) / divider) + \" \" + scale + \"s ago\";\n }\n }\n};\n\nvar timeline = new vis.Timeline(container);\ntimeline.setOptions(options);\ntimeline.setGroups(groups);\ntimeline.setItems(items);\n","js_external":"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Custom function label format example"}'
/><input
type="hidden"
name="js"
value='var now = moment()
.minutes(0)
.seconds(0)
.milliseconds(0);
var groupCount = 3;
var itemCount = 20;
// create a data set with groups
var names = ["John", "Alston", "Lee", "Grant"];
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({ id: g, content: names[g] });
}
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 200, "hours");
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,
group: group,
content:
"item " +
i +
' <span style="color:#97B0F8;">(' +
names[group] +
")</span>",
start: start,
type: "box"
});
}
// create visualization
var container = document.getElementById("visualization");
var options = {
format: {
minorLabels: function(date, scale, step) {
var now = new Date();
var ago = now - date;
var divider;
switch (scale) {
case "millisecond":
divider = 1;
break;
case "second":
divider = 1000;
break;
case "minute":
divider = 1000 * 60;
break;
case "hour":
divider = 1000 * 60 * 60;
break;
case "day":
divider = 1000 * 60 * 60 * 24;
break;
case "weekday":
divider = 1000 * 60 * 60 * 24 * 7;
break;
case "month":
divider = 1000 * 60 * 60 * 24 * 30;
break;
case "year":
divider = 1000 * 60 * 60 * 24 * 365;
break;
default:
return new Date(date);
}
return Math.round((ago * step) / divider) + " " + scale + "s ago";
},
majorLabels: function(date, scale, step) {
var now = new Date();
var ago = now - date;
var divider;
switch (scale) {
case "millisecond":
divider = 1;
break;
case "second":
divider = 1000;
break;
case "minute":
divider = 1000 * 60;
break;
case "hour":
divider = 1000 * 60 * 60;
break;
case "day":
divider = 1000 * 60 * 60 * 24;
break;
case "weekday":
divider = 1000 * 60 * 60 * 24 * 7;
break;
case "month":
divider = 1000 * 60 * 60 * 24 * 30;
break;
case "year":
divider = 1000 * 60 * 60 * 24 * 365;
break;
default:
return new Date(date);
}
return Math.round((ago * step) / divider) + " " + scale + "s ago";
}
}
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example demonstrate using custom function label formats.
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="other/functionLabelFormats.html"
><div class="example-image">
<img
src="thumbnails/bf19baafd7de9f2d8b4e75a55026659fbe20a42c2bee7428df5a94467ddd9727.png"
alt="Custom function label format example"
/></div></a></span
><span class="example-link"
><div>
<a href="other/localizationCustom.html">Custom Localization</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 DAY = 24 * 60 * 60 * 1000;
// 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: new Date(new Date().valueOf() - DAY) },
{ id: 2, content: "item 2", start: new Date(new Date().valueOf() + 2 * DAY) }
]);
// Configuration for the Timeline
var options = {
showCurrentTime: true,
locale: "tr",
locales: {
tr: {
current: "geçerli",
time: "kere"
},
sq: {
current: "ընթացիկ",
time: "ժամ"
},
ar: {
current: "حالي",
time: "وقت"
}
}
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
timeline.addCustomTime(new Date());
timeline.setCustomTime(new Date(new Date().valueOf() + DAY));
// update the locale when changing the select box value
var select = document.getElementById("locale");
select.onchange = function() {
timeline.setOptions({
locale: this.value
});
};
select.onchange();
'
/><input
type="hidden"
name="css"
value="body,
html,
select {
font-family: sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p>
<label for="locale">Select a locale:</label>
<select id="locale">
<option value="tr" selected>tr</option>
<option value="sq">hy</option>
<option value="ar">ar</option>
</select>
</p>
<div id="visualization"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js,https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/tr.js,https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/sq.js,https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/ar.js,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 | Custom Localization"
/>
</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,\nselect {\n font-family: 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 <label for=\"locale\">Select a locale:</label>\n <select id=\"locale\">\n <option value=\"tr\" selected>tr</option>\n <option value=\"sq\">hy</option>\n <option value=\"ar\">ar</option>\n </select>\n</p>\n\n<div id=\"visualization\"></div>\n","js":"var DAY = 24 * 60 * 60 * 1000;\n\n// 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: new Date(new Date().valueOf() - DAY) },\n { id: 2, content: \"item 2\", start: new Date(new Date().valueOf() + 2 * DAY) }\n]);\n\n// Configuration for the Timeline\nvar options = {\n showCurrentTime: true,\n locale: \"tr\",\n locales: {\n tr: {\n current: \"geçerli\",\n time: \"kere\"\n },\n sq: {\n current: \"ընթացիկ\",\n time: \"ժամ\"\n },\n ar: {\n current: \"حالي\",\n time: \"وقت\"\n }\n }\n};\n\n// Create a Timeline\nvar timeline = new vis.Timeline(container, items, options);\ntimeline.addCustomTime(new Date());\n\ntimeline.setCustomTime(new Date(new Date().valueOf() + DAY));\n\n// update the locale when changing the select box value\nvar select = document.getElementById(\"locale\");\nselect.onchange = function() {\n timeline.setOptions({\n locale: this.value\n });\n};\nselect.onchange();\n","js_external":"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js;https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/tr.js;https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/sq.js;https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/ar.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Custom Localization"}'
/><input
type="hidden"
name="js"
value='var DAY = 24 * 60 * 60 * 1000;
// 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: new Date(new Date().valueOf() - DAY) },
{ id: 2, content: "item 2", start: new Date(new Date().valueOf() + 2 * DAY) }
]);
// Configuration for the Timeline
var options = {
showCurrentTime: true,
locale: "tr",
locales: {
tr: {
current: "geçerli",
time: "kere"
},
sq: {
current: "ընթացիկ",
time: "ժամ"
},
ar: {
current: "حالي",
time: "وقت"
}
}
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
timeline.addCustomTime(new Date());
timeline.setCustomTime(new Date(new Date().valueOf() + DAY));
// update the locale when changing the select box value
var select = document.getElementById("locale");
select.onchange = function() {
timeline.setOptions({
locale: this.value
});
};
select.onchange();
'
/><input
type="hidden"
name="css"
value="body,
html,
select {
font-family: sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p>
<label for="locale">Select a locale:</label>
<select id="locale">
<option value="tr" selected>tr</option>
<option value="sq">hy</option>
<option value="ar">ar</option>
</select>
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="other/localizationCustom.html"
><div class="example-image">
<img
src="thumbnails/41f1656e3df4d6a5bdb765cbed3c52292fc886052b4033323364b477d09d9e14.png"
alt="Custom Localization"
/></div></a></span
><span class="example-link"
><div>
<a href="editing/customSnappingOfItems.html">Custom snapping</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: "A", start: "2015-02-09T04:00:00" },
{ id: 2, content: "B", start: "2015-02-09T14:00:00" },
{ id: 3, content: "C", start: "2015-02-09T16:00:00" },
{ id: 4, content: "D", start: "2015-02-09T17:00:00" },
{ id: 5, content: "E", start: "2015-02-10T03:00:00" }
]);
// Configuration for the Timeline
var options = {
editable: true,
// always snap to full hours, independent of the scale
snap: function(date, scale, step) {
var hour = 60 * 60 * 1000;
return Math.round(date / hour) * hour;
}
// to configure no snapping at all:
//
// snap: null
//
// or let the snap function return the date unchanged:
//
// snap: function (date, scale, step) {
// return date;
// }
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<p>
When moving the items in on the Timeline below, they will snap to full hours,
independent of being zoomed in or out.
</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 | Custom snapping"
/>
</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":"","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n When moving the items in on the Timeline below, they will snap to full hours,\n independent of being zoomed in or out.\n</p>\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: \"A\", start: \"2015-02-09T04:00:00\" },\n { id: 2, content: \"B\", start: \"2015-02-09T14:00:00\" },\n { id: 3, content: \"C\", start: \"2015-02-09T16:00:00\" },\n { id: 4, content: \"D\", start: \"2015-02-09T17:00:00\" },\n { id: 5, content: \"E\", start: \"2015-02-10T03:00:00\" }\n]);\n\n// Configuration for the Timeline\nvar options = {\n editable: true,\n\n // always snap to full hours, independent of the scale\n snap: function(date, scale, step) {\n var hour = 60 * 60 * 1000;\n return Math.round(date / hour) * hour;\n }\n\n // to configure no snapping at all:\n //\n // snap: null\n //\n // or let the snap function return the date unchanged:\n //\n // snap: function (date, scale, step) {\n // return date;\n // }\n};\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 | Custom snapping"}'
/><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: "A", start: "2015-02-09T04:00:00" },
{ id: 2, content: "B", start: "2015-02-09T14:00:00" },
{ id: 3, content: "C", start: "2015-02-09T16:00:00" },
{ id: 4, content: "D", start: "2015-02-09T17:00:00" },
{ id: 5, content: "E", start: "2015-02-10T03:00:00" }
]);
// Configuration for the Timeline
var options = {
editable: true,
// always snap to full hours, independent of the scale
snap: function(date, scale, step) {
var hour = 60 * 60 * 1000;
return Math.round(date / hour) * hour;
}
// to configure no snapping at all:
//
// snap: null
//
// or let the snap function return the date unchanged:
//
// snap: function (date, scale, step) {
// return date;
// }
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<p>
When moving the items in on the Timeline below, they will snap to full hours,
independent of being zoomed in or out.
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="editing/customSnappingOfItems.html"
><div class="example-image">
<img
src="thumbnails/e3327cf9c02b1e7e4f9f22bd683c98a4295d0b9dff4ee307db365eec8e558e8e.png"
alt="Custom snapping"
/></div></a></span
><span class="example-link"
><div>
<a href="styling/customCss.html">Custom styling</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 container = document.getElementById("visualization");
// note that months are zero-based in the JavaScript Date object
var items = new vis.DataSet([
{
start: new Date(2010, 7, 23),
content:
'<div>Conversation</div><img src="../resources/img/community-users-icon.png" style="width:32px; height:32px;">'
},
{
start: new Date(2010, 7, 23, 23, 0, 0),
content:
'<div>Mail from boss</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'
},
{ 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:
'<div>Memo</div><img src="../resources/img/notes-edit-icon.png" style="width:48px; height:48px;">'
},
{
start: new Date(2010, 7, 29),
content:
'<div>Phone call</div><img src="../resources/img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'
},
{
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:
'<div>Report</div><img src="../resources/img/attachment-icon.png" style="width:32px; height:32px;">'
}
]);
var options = {
editable: true,
margin: {
item: 20,
axis: 40
}
};
var timeline = new vis.Timeline(container, items, options);
'
/><input
type="hidden"
name="css"
value='body {
font-family: purisa, "comic sans", cursive;
}
.vis-timeline {
border: 2px solid purple;
font-family: purisa, "comic sans", cursive;
font-size: 12pt;
background: #ffecea;
}
.vis-item {
border-color: #f991a3;
background-color: pink;
font-size: 15pt;
color: purple;
box-shadow: 5px 5px 20px rgba(128, 128, 128, 0.5);
}
.vis-item,
.vis-item.vis-line {
border-width: 3px;
}
.vis-item.vis-dot {
border-width: 10px;
border-radius: 10px;
}
.vis-item.vis-selected {
border-color: green;
background-color: lightgreen;
}
.vis-time-axis .vis-text {
color: purple;
padding-top: 10px;
padding-left: 10px;
}
.vis-time-axis .vis-text.vis-major {
font-weight: bold;
}
.vis-time-axis .vis-grid.vis-minor {
border-width: 2px;
border-color: pink;
}
.vis-time-axis .vis-grid.vis-major {
border-width: 2px;
border-color: #f991a3;
}
'
/><input
type="hidden"
name="html"
value='<p>
The style of the Timeline can be fully customized via 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 | Custom styling"
/>
</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 font-family: purisa, \"comic sans\", cursive;\n}\n\n.vis-timeline {\n border: 2px solid purple;\n font-family: purisa, \"comic sans\", cursive;\n font-size: 12pt;\n background: #ffecea;\n}\n\n.vis-item {\n border-color: #f991a3;\n background-color: pink;\n font-size: 15pt;\n color: purple;\n box-shadow: 5px 5px 20px rgba(128, 128, 128, 0.5);\n}\n\n.vis-item,\n.vis-item.vis-line {\n border-width: 3px;\n}\n\n.vis-item.vis-dot {\n border-width: 10px;\n border-radius: 10px;\n}\n\n.vis-item.vis-selected {\n border-color: green;\n background-color: lightgreen;\n}\n\n.vis-time-axis .vis-text {\n color: purple;\n padding-top: 10px;\n padding-left: 10px;\n}\n\n.vis-time-axis .vis-text.vis-major {\n font-weight: bold;\n}\n\n.vis-time-axis .vis-grid.vis-minor {\n border-width: 2px;\n border-color: pink;\n}\n\n.vis-time-axis .vis-grid.vis-major {\n border-width: 2px;\n border-color: #f991a3;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n The style of the Timeline can be fully customized via CSS:\n</p>\n<div id=\"visualization\"></div>\n","js":"var container = document.getElementById(\"visualization\");\n\n// note that months are zero-based in the JavaScript Date object\nvar items = new vis.DataSet([\n {\n start: new Date(2010, 7, 23),\n content:\n '<div>Conversation</div><img src=\"../resources/img/community-users-icon.png\" style=\"width:32px; height:32px;\">'\n },\n {\n start: new Date(2010, 7, 23, 23, 0, 0),\n content:\n '<div>Mail from boss</div><img src=\"../resources/img/mail-icon.png\" style=\"width:32px; height:32px;\">'\n },\n { start: new Date(2010, 7, 24, 16, 0, 0), content: \"Report\" },\n {\n start: new Date(2010, 7, 26),\n end: new Date(2010, 8, 2),\n content: \"Traject A\"\n },\n {\n start: new Date(2010, 7, 28),\n content:\n '<div>Memo</div><img src=\"../resources/img/notes-edit-icon.png\" style=\"width:48px; height:48px;\">'\n },\n {\n start: new Date(2010, 7, 29),\n content:\n '<div>Phone call</div><img src=\"../resources/img/Hardware-Mobile-Phone-icon.png\" style=\"width:32px; height:32px;\">'\n },\n {\n start: new Date(2010, 7, 31),\n end: new Date(2010, 8, 3),\n content: \"Traject B\"\n },\n {\n start: new Date(2010, 8, 4, 12, 0, 0),\n content:\n '<div>Report</div><img src=\"../resources/img/attachment-icon.png\" style=\"width:32px; height:32px;\">'\n }\n]);\n\nvar options = {\n editable: true,\n margin: {\n item: 20,\n axis: 40\n }\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 | Custom styling"}'
/><input
type="hidden"
name="js"
value='var container = document.getElementById("visualization");
// note that months are zero-based in the JavaScript Date object
var items = new vis.DataSet([
{
start: new Date(2010, 7, 23),
content:
'<div>Conversation</div><img src="../resources/img/community-users-icon.png" style="width:32px; height:32px;">'
},
{
start: new Date(2010, 7, 23, 23, 0, 0),
content:
'<div>Mail from boss</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'
},
{ 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:
'<div>Memo</div><img src="../resources/img/notes-edit-icon.png" style="width:48px; height:48px;">'
},
{
start: new Date(2010, 7, 29),
content:
'<div>Phone call</div><img src="../resources/img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'
},
{
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:
'<div>Report</div><img src="../resources/img/attachment-icon.png" style="width:32px; height:32px;">'
}
]);
var options = {
editable: true,
margin: {
item: 20,
axis: 40
}
};
var timeline = new vis.Timeline(container, items, options);
'
/><input
type="hidden"
name="css"
value='body {
font-family: purisa, "comic sans", cursive;
}
.vis-timeline {
border: 2px solid purple;
font-family: purisa, "comic sans", cursive;
font-size: 12pt;
background: #ffecea;
}
.vis-item {
border-color: #f991a3;
background-color: pink;
font-size: 15pt;
color: purple;
box-shadow: 5px 5px 20px rgba(128, 128, 128, 0.5);
}
.vis-item,
.vis-item.vis-line {
border-width: 3px;
}
.vis-item.vis-dot {
border-width: 10px;
border-radius: 10px;
}
.vis-item.vis-selected {
border-color: green;
background-color: lightgreen;
}
.vis-time-axis .vis-text {
color: purple;
padding-top: 10px;
padding-left: 10px;
}
.vis-time-axis .vis-text.vis-major {
font-weight: bold;
}
.vis-time-axis .vis-grid.vis-minor {
border-width: 2px;
border-color: pink;
}
.vis-time-axis .vis-grid.vis-major {
border-width: 2px;
border-color: #f991a3;
}
'
/><input
type="hidden"
name="html"
value='<p>
The style of the Timeline can be fully customized via CSS:
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="styling/customCss.html"
><div class="example-image">
<img
src="thumbnails/4411a94296a3994eacfd8fce2f31574473fa354b104fb2325a6ea4fb98d7121b.png"
alt="Custom styling"
/></div></a></span
><span class="example-link"
><div>
<a href="other/dataAttributes.html">Data Attributes</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", tooltip: "This is item 1" },
{ 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",
tooltip: "This is item 6"
}
]);
// Configuration for the Timeline
var options = { dataAttributes: ["tooltip", "id"] };
// 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>
In this example all items get an HTML attribute attached: each item gets an
attribute <code>data-id</code>, and items 1 and 6 have an additional attribute
<code>data-tooltip</code>.
</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 | Data Attributes"
/>
</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 In this example all items get an HTML attribute attached: each item gets an\n attribute <code>data-id</code>, and items 1 and 6 have an additional attribute\n <code>data-tooltip</code>.\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\", tooltip: \"This is item 1\" },\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 {\n id: 6,\n content: \"item 6\",\n start: \"2014-04-27\",\n type: \"point\",\n tooltip: \"This is item 6\"\n }\n]);\n\n// Configuration for the Timeline\nvar options = { dataAttributes: [\"tooltip\", \"id\"] };\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 | Data Attributes"}'
/><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", tooltip: "This is item 1" },
{ 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",
tooltip: "This is item 6"
}
]);
// Configuration for the Timeline
var options = { dataAttributes: ["tooltip", "id"] };
// 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>
In this example all items get an HTML attribute attached: each item gets an
attribute <code>data-id</code>, and items 1 and 6 have an additional attribute
<code>data-tooltip</code>.
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="other/dataAttributes.html"
><div class="example-image">
<img
src="thumbnails/eda297abb71eee616fb72b4a012a4d6e094b3727c4295a0caeb3eaa8559496ce.png"
alt="Data Attributes"
/></div></a></span
><span class="example-link"
><div>
<a href="other/dataAttributesAll.html">Data Attributes All</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", tooltip: "This is item 1" },
{ 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",
tooltip: "This is item 6"
}
]);
// Configuration for the Timeline
var options = { dataAttributes: "all" };
// 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>
In this example all items get HTML attributes attached: each item gets
<code>data-?</code> attributes for each field defined on the JS object.
</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 | Data Attributes All"
/>
</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 In this example all items get HTML attributes attached: each item gets\n <code>data-?</code> attributes for each field defined on the JS object.\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\", tooltip: \"This is item 1\" },\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 {\n id: 6,\n content: \"item 6\",\n start: \"2014-04-27\",\n type: \"point\",\n tooltip: \"This is item 6\"\n }\n]);\n\n// Configuration for the Timeline\nvar options = { dataAttributes: \"all\" };\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 | Data Attributes All"}'
/><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", tooltip: "This is item 1" },
{ 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",
tooltip: "This is item 6"
}
]);
// Configuration for the Timeline
var options = { dataAttributes: "all" };
// 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>
In this example all items get HTML attributes attached: each item gets
<code>data-?</code> attributes for each field defined on the JS object.
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="other/dataAttributesAll.html"
><div class="example-image">
<img
src="thumbnails/119a4a8ac207f10dd4304bb9b03ac7838aab241bb6014bf2b516f3fea3771ec1.png"
alt="Data Attributes All"
/></div></a></span
><span class="example-link"
><div>
<a href="dataHandling/dataSerialization.html"
>Data serialization</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 txtData = document.getElementById("data");
var btnLoad = document.getElementById("load");
var btnSave = document.getElementById("save");
// Create an empty DataSet.
// This DataSet is used for two way data binding with the Timeline.
var items = new vis.DataSet();
// create a timeline
var container = document.getElementById("visualization");
var options = {
editable: true
};
var timeline = new vis.Timeline(container, items, options);
function loadData() {
// get and deserialize the data
var data = JSON.parse(txtData.value);
// update the data in the DataSet
//
// Note: when retrieving updated data from a server instead of a complete
// new set of data, one can simply update the existing data like:
//
// items.update(data);
//
// Existing items will then be updated, and new items will be added.
items.clear();
items.add(data);
// adjust the timeline window such that we see the loaded data
timeline.fit();
}
btnLoad.onclick = loadData;
function saveData() {
// get the data from the DataSet
//
// Note that we specify the output type of the fields start and end
// as "ISODate", which is safely serializable. Other serializable types
// are "Number" (unix timestamp), "ASPDate" or "String" (without timezone!).
//
// Alternatively, it is possible to configure the DataSet to convert
// the output automatically to ISODates like:
//
// var options = {
// type: {start: 'ISODate', end: 'ISODate'}
// };
// var items = new vis.DataSet(options);
// // now items.get() will automatically convert start and end to ISO dates.
//
var data = items.get({
type: {
start: "ISODate",
end: "ISODate"
}
});
// serialize the data and put it in the textarea
txtData.value = JSON.stringify(data, null, 2);
}
btnSave.onclick = saveData;
// load the initial data
loadData();
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
textarea {
width: 800px;
height: 200px;
}
.buttons {
margin: 20px 0;
}
.buttons input {
padding: 10px;
}
"
/><input
type="hidden"
name="html"
value='<h1>Serialization and deserialization</h1>
<p>
This example shows how to serialize and deserialize JSON data, and load this
in the Timeline via a DataSet. Serialization and deserialization is needed
when loading or saving data from a server.
</p>
<textarea id="data">
[
{
&quot;id&quot;: 1,
&quot;content&quot;: &quot;item 1&quot;,
&quot;start&quot;: &quot;2014-01-01T01:00:00&quot;
},
{
&quot;id&quot;: 2,
&quot;content&quot;: &quot;item 2&quot;,
&quot;start&quot;: &quot;2014-01-01T02:00:00&quot;
},
{
&quot;id&quot;: 3,
&quot;content&quot;: &quot;item 3&quot;,
&quot;start&quot;: &quot;2014-01-01T03:00:00&quot;
},
{
&quot;id&quot;: 4,
&quot;content&quot;: &quot;item 4&quot;,
&quot;start&quot;: &quot;2014-01-01T04:00:00&quot;,
&quot;end&quot;: &quot;2014-01-01T04:30:00&quot;
},
{
&quot;id&quot;: 5,
&quot;content&quot;: &quot;item 5&quot;,
&quot;start&quot;: &quot;2014-01-01T05:00:00&quot;,
&quot;type&quot;: &quot;point&quot;
},
{
&quot;id&quot;: 6,
&quot;content&quot;: &quot;item 6&quot;,
&quot;start&quot;: &quot;2014-01-01T06:00:00&quot;
}
]
</textarea>
<div class="buttons">
<input
type="button"
id="load"
value="&#x2193; Load"
title="Load data from textarea into the Timeline"
/>
<input
type="button"
id="save"
value="&#x2191; Save"
title="Save data from the Timeline into the textarea"
/>
</div>
<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 | Data serialization"
/>
</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\ntextarea {\n width: 800px;\n height: 200px;\n}\n\n.buttons {\n margin: 20px 0;\n}\n\n.buttons input {\n padding: 10px;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h1>Serialization and deserialization</h1>\n\n<p>\n This example shows how to serialize and deserialize JSON data, and load this\n in the Timeline via a DataSet. Serialization and deserialization is needed\n when loading or saving data from a server.\n</p>\n\n<textarea id=\"data\">\n[\n {\n &quot;id&quot;: 1,\n &quot;content&quot;: &quot;item 1&quot;,\n &quot;start&quot;: &quot;2014-01-01T01:00:00&quot;\n },\n {\n &quot;id&quot;: 2,\n &quot;content&quot;: &quot;item 2&quot;,\n &quot;start&quot;: &quot;2014-01-01T02:00:00&quot;\n },\n {\n &quot;id&quot;: 3,\n &quot;content&quot;: &quot;item 3&quot;,\n &quot;start&quot;: &quot;2014-01-01T03:00:00&quot;\n },\n {\n &quot;id&quot;: 4,\n &quot;content&quot;: &quot;item 4&quot;,\n &quot;start&quot;: &quot;2014-01-01T04:00:00&quot;,\n &quot;end&quot;: &quot;2014-01-01T04:30:00&quot;\n },\n {\n &quot;id&quot;: 5,\n &quot;content&quot;: &quot;item 5&quot;,\n &quot;start&quot;: &quot;2014-01-01T05:00:00&quot;,\n &quot;type&quot;: &quot;point&quot;\n },\n {\n &quot;id&quot;: 6,\n &quot;content&quot;: &quot;item 6&quot;,\n &quot;start&quot;: &quot;2014-01-01T06:00:00&quot;\n }\n]\n</textarea>\n\n<div class=\"buttons\">\n <input\n type=\"button\"\n id=\"load\"\n value=\"&#x2193; Load\"\n title=\"Load data from textarea into the Timeline\"\n />\n <input\n type=\"button\"\n id=\"save\"\n value=\"&#x2191; Save\"\n title=\"Save data from the Timeline into the textarea\"\n />\n</div>\n\n<div id=\"visualization\"></div>\n","js":"var txtData = document.getElementById(\"data\");\nvar btnLoad = document.getElementById(\"load\");\nvar btnSave = document.getElementById(\"save\");\n\n// Create an empty DataSet.\n// This DataSet is used for two way data binding with the Timeline.\nvar items = new vis.DataSet();\n\n// create a timeline\nvar container = document.getElementById(\"visualization\");\nvar options = {\n editable: true\n};\nvar timeline = new vis.Timeline(container, items, options);\n\nfunction loadData() {\n // get and deserialize the data\n var data = JSON.parse(txtData.value);\n\n // update the data in the DataSet\n //\n // Note: when retrieving updated data from a server instead of a complete\n // new set of data, one can simply update the existing data like:\n //\n // items.update(data);\n //\n // Existing items will then be updated, and new items will be added.\n items.clear();\n items.add(data);\n\n // adjust the timeline window such that we see the loaded data\n timeline.fit();\n}\nbtnLoad.onclick = loadData;\n\nfunction saveData() {\n // get the data from the DataSet\n //\n // Note that we specify the output type of the fields start and end\n // as \"ISODate\", which is safely serializable. Other serializable types\n // are \"Number\" (unix timestamp), \"ASPDate\" or \"String\" (without timezone!).\n //\n // Alternatively, it is possible to configure the DataSet to convert\n // the output automatically to ISODates like:\n //\n // var options = {\n // type: {start: 'ISODate', end: 'ISODate'}\n // };\n // var items = new vis.DataSet(options);\n // // now items.get() will automatically convert start and end to ISO dates.\n //\n var data = items.get({\n type: {\n start: \"ISODate\",\n end: \"ISODate\"\n }\n });\n\n // serialize the data and put it in the textarea\n txtData.value = JSON.stringify(data, null, 2);\n}\nbtnSave.onclick = saveData;\n\n// load the initial data\nloadData();\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Data serialization"}'
/><input
type="hidden"
name="js"
value='var txtData = document.getElementById("data");
var btnLoad = document.getElementById("load");
var btnSave = document.getElementById("save");
// Create an empty DataSet.
// This DataSet is used for two way data binding with the Timeline.
var items = new vis.DataSet();
// create a timeline
var container = document.getElementById("visualization");
var options = {
editable: true
};
var timeline = new vis.Timeline(container, items, options);
function loadData() {
// get and deserialize the data
var data = JSON.parse(txtData.value);
// update the data in the DataSet
//
// Note: when retrieving updated data from a server instead of a complete
// new set of data, one can simply update the existing data like:
//
// items.update(data);
//
// Existing items will then be updated, and new items will be added.
items.clear();
items.add(data);
// adjust the timeline window such that we see the loaded data
timeline.fit();
}
btnLoad.onclick = loadData;
function saveData() {
// get the data from the DataSet
//
// Note that we specify the output type of the fields start and end
// as "ISODate", which is safely serializable. Other serializable types
// are "Number" (unix timestamp), "ASPDate" or "String" (without timezone!).
//
// Alternatively, it is possible to configure the DataSet to convert
// the output automatically to ISODates like:
//
// var options = {
// type: {start: 'ISODate', end: 'ISODate'}
// };
// var items = new vis.DataSet(options);
// // now items.get() will automatically convert start and end to ISO dates.
//
var data = items.get({
type: {
start: "ISODate",
end: "ISODate"
}
});
// serialize the data and put it in the textarea
txtData.value = JSON.stringify(data, null, 2);
}
btnSave.onclick = saveData;
// load the initial data
loadData();
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
textarea {
width: 800px;
height: 200px;
}
.buttons {
margin: 20px 0;
}
.buttons input {
padding: 10px;
}
"
/><input
type="hidden"
name="html"
value='<h1>Serialization and deserialization</h1>
<p>
This example shows how to serialize and deserialize JSON data, and load this
in the Timeline via a DataSet. Serialization and deserialization is needed
when loading or saving data from a server.
</p>
<textarea id="data">
[
{
&quot;id&quot;: 1,
&quot;content&quot;: &quot;item 1&quot;,
&quot;start&quot;: &quot;2014-01-01T01:00:00&quot;
},
{
&quot;id&quot;: 2,
&quot;content&quot;: &quot;item 2&quot;,
&quot;start&quot;: &quot;2014-01-01T02:00:00&quot;
},
{
&quot;id&quot;: 3,
&quot;content&quot;: &quot;item 3&quot;,
&quot;start&quot;: &quot;2014-01-01T03:00:00&quot;
},
{
&quot;id&quot;: 4,
&quot;content&quot;: &quot;item 4&quot;,
&quot;start&quot;: &quot;2014-01-01T04:00:00&quot;,
&quot;end&quot;: &quot;2014-01-01T04:30:00&quot;
},
{
&quot;id&quot;: 5,
&quot;content&quot;: &quot;item 5&quot;,
&quot;start&quot;: &quot;2014-01-01T05:00:00&quot;,
&quot;type&quot;: &quot;point&quot;
},
{
&quot;id&quot;: 6,
&quot;content&quot;: &quot;item 6&quot;,
&quot;start&quot;: &quot;2014-01-01T06:00:00&quot;
}
]
</textarea>
<div class="buttons">
<input
type="button"
id="load"
value="&#x2193; Load"
title="Load data from textarea into the Timeline"
/>
<input
type="button"
id="save"
value="&#x2191; Save"
title="Save data from the Timeline into the textarea"
/>
</div>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="dataHandling/dataSerialization.html"
><div class="example-image">
<img
src="thumbnails/c9ff15a31837ae29242533379d7f9e213f73b949285dd783a52b3650b901d9e6.png"
alt="Data serialization"
/></div></a></span
><span class="example-link"
><div>
<a href="other/drag_drop.html">Drag & Drop</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 groups
var numberOfGroups = 3;
var groups = new vis.DataSet();
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: "Truck&nbsp;" + i
});
}
// create items
var numberOfItems = 10;
var items = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems / numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
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 + itemsPerGroup * truck,
group: truck,
start: start,
end: end,
content: "Order " + order
});
}
}
// specify options
var options = {
stack: true,
start: new Date(),
end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),
editable: true,
orientation: "top",
onDropObjectOnItem: function(objectData, item, callback) {
if (!item) {
return;
}
alert(
'dropped object with content: "' +
objectData.content +
'" to item: "' +
item.content +
'"'
);
}
};
// create a Timeline
var container = document.getElementById("visualization");
timeline1 = new vis.Timeline(container, items, groups, options);
function handleDragStart(event) {
var dragSrcEl = event.target;
event.dataTransfer.effectAllowed = "move";
var itemType = event.target.innerHTML.split("-")[1].trim();
var item = {
id: new Date(),
type: itemType,
content: event.target.innerHTML.split("-")[0].trim()
};
var isFixedTimes =
event.target.innerHTML.split("-")[2] &&
event.target.innerHTML.split("-")[2].trim() == "fixed times";
if (isFixedTimes) {
item.start = new Date();
item.end = new Date(1000 * 60 * 10 + new Date().valueOf());
}
event.dataTransfer.setData("text", JSON.stringify(item));
}
function handleObjectItemDragStart(event) {
var dragSrcEl = event.target;
event.dataTransfer.effectAllowed = "move";
var objectItem = {
content: "objectItemData",
target: "item"
};
event.dataTransfer.setData("text", JSON.stringify(objectItem));
}
var items = document.querySelectorAll(".items .item");
var objectItems = document.querySelectorAll(".object-item");
for (var i = items.length - 1; i >= 0; i--) {
var item = items[i];
item.addEventListener("dragstart", handleDragStart.bind(this), false);
}
for (var i = objectItems.length - 1; i >= 0; i--) {
var objectItem = objectItems[i];
objectItem.addEventListener(
"dragstart",
handleObjectItemDragStart.bind(this),
false
);
}
'
/><input
type="hidden"
name="css"
value='li.item {
list-style: none;
width: 150px;
color: #1a1a1a;
background-color: #d5ddf6;
border: 1px solid #97b0f8;
border-radius: 2px;
margin-bottom: 5px;
padding: 5px 12px;
}
li.item:before {
content: "≣";
font-family: Arial, sans-serif;
display: inline-block;
font-size: inherit;
cursor: move;
}
li.object-item {
list-style: none;
width: 150px;
color: #1a1a1a;
background-color: #d5ddf6;
border: 1px solid #97b0f8;
border-radius: 2px;
margin-bottom: 5px;
padding: 5px 12px;
}
li.object-item:before {
content: "≣";
font-family: Arial, sans-serif;
display: inline-block;
font-size: inherit;
cursor: move;
}
.items-panel {
display: flex;
justify-content: space-around;
}
'
/><input
type="hidden"
name="html"
value='<h1>Timeline Drag &amp; Drop Example</h1>
<p>
For this to work, you will have to define your own
<code>&apos;dragstart&apos;</code> eventListener on each item in your list of
items (make sure that any new item added to the list is attached to this
eventListener &apos;dragstart&apos; handler). This &apos;dragstart&apos;
handler must set <code>dataTransfer</code> - notice you can set the
item&apos;s information as you want this way.
</p>
<div id="visualization"></div>
<div class="items-panel">
<div class="side">
<h3>Items:</h3>
<ul class="items">
<li draggable="true" class="item">
item 1 - box
</li>
<li draggable="true" class="item">
item 2 - point
</li>
<li draggable="true" class="item">
item 3 - range
</li>
<li draggable="true" class="item">
item 3 - range - fixed times - <br />
(start: now, end: now + 10 min)
</li>
</ul>
</div>
<div class="side">
<h3>Object with &quot;target:&apos;item&apos;&quot;:</h3>
<li draggable="true" class="object-item">
object with target:&apos;item&apos;
</li>
</div>
</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 | Drag & Drop"
/>
</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":"li.item {\n list-style: none;\n width: 150px;\n color: #1a1a1a;\n background-color: #d5ddf6;\n border: 1px solid #97b0f8;\n border-radius: 2px;\n margin-bottom: 5px;\n padding: 5px 12px;\n}\nli.item:before {\n content: \"≣\";\n font-family: Arial, sans-serif;\n display: inline-block;\n font-size: inherit;\n cursor: move;\n}\nli.object-item {\n list-style: none;\n width: 150px;\n color: #1a1a1a;\n background-color: #d5ddf6;\n border: 1px solid #97b0f8;\n border-radius: 2px;\n margin-bottom: 5px;\n padding: 5px 12px;\n}\nli.object-item:before {\n content: \"≣\";\n font-family: Arial, sans-serif;\n display: inline-block;\n font-size: inherit;\n cursor: move;\n}\n.items-panel {\n display: flex;\n justify-content: space-around;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h1>Timeline Drag &amp; Drop Example</h1>\n\n<p>\n For this to work, you will have to define your own\n <code>&apos;dragstart&apos;</code> eventListener on each item in your list of\n items (make sure that any new item added to the list is attached to this\n eventListener &apos;dragstart&apos; handler). This &apos;dragstart&apos;\n handler must set <code>dataTransfer</code> - notice you can set the\n item&apos;s information as you want this way.\n</p>\n\n<div id=\"visualization\"></div>\n\n<div class=\"items-panel\">\n <div class=\"side\">\n <h3>Items:</h3>\n <ul class=\"items\">\n <li draggable=\"true\" class=\"item\">\n item 1 - box\n </li>\n <li draggable=\"true\" class=\"item\">\n item 2 - point\n </li>\n <li draggable=\"true\" class=\"item\">\n item 3 - range\n </li>\n <li draggable=\"true\" class=\"item\">\n item 3 - range - fixed times - <br />\n (start: now, end: now + 10 min)\n </li>\n </ul>\n </div>\n\n <div class=\"side\">\n <h3>Object with &quot;target:&apos;item&apos;&quot;:</h3>\n <li draggable=\"true\" class=\"object-item\">\n object with target:&apos;item&apos;\n </li>\n </div>\n</div>\n","js":"// create groups\nvar numberOfGroups = 3;\nvar groups = new vis.DataSet();\nfor (var i = 0; i < numberOfGroups; i++) {\n groups.add({\n id: i,\n content: \"Truck&nbsp;\" + i\n });\n}\n\n// create items\nvar numberOfItems = 10;\nvar items = new vis.DataSet();\n\nvar itemsPerGroup = Math.round(numberOfItems / numberOfGroups);\n\nfor (var truck = 0; truck < numberOfGroups; truck++) {\n var date = new Date();\n for (var order = 0; order < itemsPerGroup; order++) {\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 + itemsPerGroup * truck,\n group: truck,\n start: start,\n end: end,\n content: \"Order \" + order\n });\n }\n}\n\n// specify options\nvar options = {\n stack: true,\n start: new Date(),\n end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),\n editable: true,\n orientation: \"top\",\n onDropObjectOnItem: function(objectData, item, callback) {\n if (!item) {\n return;\n }\n alert(\n 'dropped object with content: \"' +\n objectData.content +\n '\" to item: \"' +\n item.content +\n '\"'\n );\n }\n};\n\n// create a Timeline\nvar container = document.getElementById(\"visualization\");\ntimeline1 = new vis.Timeline(container, items, groups, options);\n\nfunction handleDragStart(event) {\n var dragSrcEl = event.target;\n\n event.dataTransfer.effectAllowed = \"move\";\n var itemType = event.target.innerHTML.split(\"-\")[1].trim();\n var item = {\n id: new Date(),\n type: itemType,\n content: event.target.innerHTML.split(\"-\")[0].trim()\n };\n\n var isFixedTimes =\n event.target.innerHTML.split(\"-\")[2] &&\n event.target.innerHTML.split(\"-\")[2].trim() == \"fixed times\";\n if (isFixedTimes) {\n item.start = new Date();\n item.end = new Date(1000 * 60 * 10 + new Date().valueOf());\n }\n event.dataTransfer.setData(\"text\", JSON.stringify(item));\n}\n\nfunction handleObjectItemDragStart(event) {\n var dragSrcEl = event.target;\n\n event.dataTransfer.effectAllowed = \"move\";\n var objectItem = {\n content: \"objectItemData\",\n target: \"item\"\n };\n event.dataTransfer.setData(\"text\", JSON.stringify(objectItem));\n}\n\nvar items = document.querySelectorAll(\".items .item\");\n\nvar objectItems = document.querySelectorAll(\".object-item\");\n\nfor (var i = items.length - 1; i >= 0; i--) {\n var item = items[i];\n item.addEventListener(\"dragstart\", handleDragStart.bind(this), false);\n}\n\nfor (var i = objectItems.length - 1; i >= 0; i--) {\n var objectItem = objectItems[i];\n objectItem.addEventListener(\n \"dragstart\",\n handleObjectItemDragStart.bind(this),\n false\n );\n}\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Drag & Drop"}'
/><input
type="hidden"
name="js"
value='// create groups
var numberOfGroups = 3;
var groups = new vis.DataSet();
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: "Truck&nbsp;" + i
});
}
// create items
var numberOfItems = 10;
var items = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems / numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
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 + itemsPerGroup * truck,
group: truck,
start: start,
end: end,
content: "Order " + order
});
}
}
// specify options
var options = {
stack: true,
start: new Date(),
end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),
editable: true,
orientation: "top",
onDropObjectOnItem: function(objectData, item, callback) {
if (!item) {
return;
}
alert(
'dropped object with content: "' +
objectData.content +
'" to item: "' +
item.content +
'"'
);
}
};
// create a Timeline
var container = document.getElementById("visualization");
timeline1 = new vis.Timeline(container, items, groups, options);
function handleDragStart(event) {
var dragSrcEl = event.target;
event.dataTransfer.effectAllowed = "move";
var itemType = event.target.innerHTML.split("-")[1].trim();
var item = {
id: new Date(),
type: itemType,
content: event.target.innerHTML.split("-")[0].trim()
};
var isFixedTimes =
event.target.innerHTML.split("-")[2] &&
event.target.innerHTML.split("-")[2].trim() == "fixed times";
if (isFixedTimes) {
item.start = new Date();
item.end = new Date(1000 * 60 * 10 + new Date().valueOf());
}
event.dataTransfer.setData("text", JSON.stringify(item));
}
function handleObjectItemDragStart(event) {
var dragSrcEl = event.target;
event.dataTransfer.effectAllowed = "move";
var objectItem = {
content: "objectItemData",
target: "item"
};
event.dataTransfer.setData("text", JSON.stringify(objectItem));
}
var items = document.querySelectorAll(".items .item");
var objectItems = document.querySelectorAll(".object-item");
for (var i = items.length - 1; i >= 0; i--) {
var item = items[i];
item.addEventListener("dragstart", handleDragStart.bind(this), false);
}
for (var i = objectItems.length - 1; i >= 0; i--) {
var objectItem = objectItems[i];
objectItem.addEventListener(
"dragstart",
handleObjectItemDragStart.bind(this),
false
);
}
'
/><input
type="hidden"
name="css"
value='li.item {
list-style: none;
width: 150px;
color: #1a1a1a;
background-color: #d5ddf6;
border: 1px solid #97b0f8;
border-radius: 2px;
margin-bottom: 5px;
padding: 5px 12px;
}
li.item:before {
content: "≣";
font-family: Arial, sans-serif;
display: inline-block;
font-size: inherit;
cursor: move;
}
li.object-item {
list-style: none;
width: 150px;
color: #1a1a1a;
background-color: #d5ddf6;
border: 1px solid #97b0f8;
border-radius: 2px;
margin-bottom: 5px;
padding: 5px 12px;
}
li.object-item:before {
content: "≣";
font-family: Arial, sans-serif;
display: inline-block;
font-size: inherit;
cursor: move;
}
.items-panel {
display: flex;
justify-content: space-around;
}
'
/><input
type="hidden"
name="html"
value='<h1>Timeline Drag &amp; Drop Example</h1>
<p>
For this to work, you will have to define your own
<code>&apos;dragstart&apos;</code> eventListener on each item in your list of
items (make sure that any new item added to the list is attached to this
eventListener &apos;dragstart&apos; handler). This &apos;dragstart&apos;
handler must set <code>dataTransfer</code> - notice you can set the
item&apos;s information as you want this way.
</p>
<div id="visualization"></div>
<div class="items-panel">
<div class="side">
<h3>Items:</h3>
<ul class="items">
<li draggable="true" class="item">
item 1 - box
</li>
<li draggable="true" class="item">
item 2 - point
</li>
<li draggable="true" class="item">
item 3 - range
</li>
<li draggable="true" class="item">
item 3 - range - fixed times - <br />
(start: now, end: now + 10 min)
</li>
</ul>
</div>
<div class="side">
<h3>Object with &quot;target:&apos;item&apos;&quot;:</h3>
<li draggable="true" class="object-item">
object with target:&apos;item&apos;
</li>
</div>
</div>
'
/></form
></span>
</div>
<a href="other/drag_drop.html"
><div class="example-image">
<img
src="thumbnails/f1c1f41165f6fa5069038e25e3a25126257271d2e408fd9918353af0fe99ea38.png"
alt="Drag & Drop"
/></div></a></span
><span class="example-link"
><div>
<a href="items/visibleFrameTemplateContent.html"
>Dynamic Content</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,
value: 0.2,
content: "item 1",
start: "2014-04-20",
end: "2014-04-26"
},
{
id: 2,
value: 0.6,
content: "item 2",
start: "2014-05-14",
end: "2014-05-18"
},
{
id: 3,
type: "point",
content: "item 3",
start: "2014-04-15",
end: "2014-05-18"
},
{
id: 4,
content: "item 4 with visibleFrameTemplate in item",
start: "2014-04-16",
end: "2014-04-26",
visibleFrameTemplate:
'<div class="progress-wrapper"><div class="progress" style="width:80%"></div><label class="progress-label">80%<label></div>'
}
]);
// Configuration for the Timeline
var options = {
visibleFrameTemplate: function(item) {
if (item.visibleFrameTemplate) {
return item.visibleFrameTemplate;
}
var percentage = item.value * 100 + "%";
return (
'<div class="progress-wrapper"><div class="progress" style="width:' +
percentage +
'"></div><label class="progress-label">' +
percentage +
"<label></div>"
);
}
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
'
/><input
type="hidden"
name="css"
value=".progress-wrapper {
background: white;
width: 100%;
height: 18px;
text-align: center;
position: relative;
overflow: hidden;
}
.progress {
height: 100%;
width: 60%;
position: absolute;
left: 0px;
top: 0px;
background: #63ed63;
}
.progress-label {
position: absolute;
z-index: 1;
}
"
/><input
type="hidden"
name="html"
value='<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 | Dynamic Content"
/>
</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":".progress-wrapper {\n background: white;\n width: 100%;\n height: 18px;\n text-align: center;\n position: relative;\n overflow: hidden;\n}\n\n.progress {\n height: 100%;\n width: 60%;\n position: absolute;\n left: 0px;\n top: 0px;\n background: #63ed63;\n}\n\n.progress-label {\n position: absolute;\n z-index: 1;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<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 {\n id: 1,\n value: 0.2,\n content: \"item 1\",\n start: \"2014-04-20\",\n end: \"2014-04-26\"\n },\n {\n id: 2,\n value: 0.6,\n content: \"item 2\",\n start: \"2014-05-14\",\n end: \"2014-05-18\"\n },\n {\n id: 3,\n type: \"point\",\n content: \"item 3\",\n start: \"2014-04-15\",\n end: \"2014-05-18\"\n },\n {\n id: 4,\n content: \"item 4 with visibleFrameTemplate in item\",\n start: \"2014-04-16\",\n end: \"2014-04-26\",\n visibleFrameTemplate:\n '<div class=\"progress-wrapper\"><div class=\"progress\" style=\"width:80%\"></div><label class=\"progress-label\">80%<label></div>'\n }\n]);\n\n// Configuration for the Timeline\nvar options = {\n visibleFrameTemplate: function(item) {\n if (item.visibleFrameTemplate) {\n return item.visibleFrameTemplate;\n }\n var percentage = item.value * 100 + \"%\";\n return (\n '<div class=\"progress-wrapper\"><div class=\"progress\" style=\"width:' +\n percentage +\n '\"></div><label class=\"progress-label\">' +\n percentage +\n \"<label></div>\"\n );\n }\n};\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 | Dynamic Content"}'
/><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,
value: 0.2,
content: "item 1",
start: "2014-04-20",
end: "2014-04-26"
},
{
id: 2,
value: 0.6,
content: "item 2",
start: "2014-05-14",
end: "2014-05-18"
},
{
id: 3,
type: "point",
content: "item 3",
start: "2014-04-15",
end: "2014-05-18"
},
{
id: 4,
content: "item 4 with visibleFrameTemplate in item",
start: "2014-04-16",
end: "2014-04-26",
visibleFrameTemplate:
'<div class="progress-wrapper"><div class="progress" style="width:80%"></div><label class="progress-label">80%<label></div>'
}
]);
// Configuration for the Timeline
var options = {
visibleFrameTemplate: function(item) {
if (item.visibleFrameTemplate) {
return item.visibleFrameTemplate;
}
var percentage = item.value * 100 + "%";
return (
'<div class="progress-wrapper"><div class="progress" style="width:' +
percentage +
'"></div><label class="progress-label">' +
percentage +
"<label></div>"
);
}
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
'
/><input
type="hidden"
name="css"
value=".progress-wrapper {
background: white;
width: 100%;
height: 18px;
text-align: center;
position: relative;
overflow: hidden;
}
.progress {
height: 100%;
width: 60%;
position: absolute;
left: 0px;
top: 0px;
background: #63ed63;
}
.progress-label {
position: absolute;
z-index: 1;
}
"
/><input
type="hidden"
name="html"
value='<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="items/visibleFrameTemplateContent.html"
><div class="example-image">
<img
src="thumbnails/1a7cf8622f6cbc049ead415c8ef3afa3efd9524f7637b72ea6a915cdf6a37cff.png"
alt="Dynamic Content"
/></div></a></span
><span class="example-link"
><div>
<a href="groups/groupsEditable.html">Editable 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='// https://motocal.com/
var groups = new vis.DataSet([
{ content: "Formula E", id: "Formula E", value: 1, className: "openwheel" },
{ content: "WRC", id: "WRC", value: 2, className: "rally" },
{ content: "MotoGP", id: "MotoGP", value: 3, className: "motorcycle" },
{ content: "V8SC", id: "V8SC", value: 4, className: "touringcars" },
{ content: "WTCC", id: "WTCC", value: 5, className: "touringcars" },
{ content: "F1", id: "F1", value: 6, className: "openwheel" },
{ content: "SBK", id: "SBK", value: 7, className: "motorcycle" },
{ content: "IndyCar", id: "IndyCar", value: 8, className: "openwheel" },
{
content: "MotoAmerica",
id: "MotoAmerica",
value: 9,
className: "motorcycle"
},
{ content: "SGP", id: "SGP", value: 10, className: "rally" },
{ content: "EWC", id: "EWC", value: 11, className: "endurance" },
{ content: "BSB", id: "BSB", value: 12, className: "motorcycle" },
{ content: "DTM", id: "DTM", value: 13, className: "touringcars" },
{ content: "BTCC", id: "BTCC", value: 14, className: "touringcars" },
{ content: "WorldRX", id: "WorldRX", value: 15, className: "rally" },
{ content: "WSR", id: "WSR", value: 16, className: "openwheel" },
{ content: "Roads", id: "Roads", value: 17, className: "motorcycle" },
{ content: "WEC", id: "WEC", value: 18, className: "endurance" },
{ content: "GP2", id: "GP2", value: 19, className: "openwheel" }
]);
// function to make all groups visible again
function showAllGroups() {
groups.forEach(function(group) {
groups.update({ id: group.id, visible: true });
});
}
// create a dataset with items
// note that months are zero-based in the JavaScript Date object, so month 3 is April
var items = new vis.DataSet([
{
start: new Date(2015, 0, 10),
end: new Date(2015, 0, 11),
group: "Formula E",
className: "openwheel",
content: "Argentina",
id: "531@motocal.net"
},
{
start: new Date(2015, 0, 22),
end: new Date(2015, 0, 26),
group: "WRC",
className: "rally",
content: "Rallye Monte-Carlo",
id: "591@motocal.net"
},
{
start: new Date(2015, 1, 4),
end: new Date(2015, 1, 8),
group: "MotoGP",
className: "motorcycle",
content: "Sepang MotoGP Test 1",
id: "578@motocal.net"
},
{
start: new Date(2015, 1, 12),
end: new Date(2015, 1, 16),
group: "WRC",
className: "rally",
content: "Rally Sweden",
id: "592@motocal.net"
},
{
start: new Date(2015, 1, 20),
end: new Date(2015, 1, 23),
group: "SBK",
className: "motorcycle",
content: "Australia",
id: "616@motocal.net"
},
{
start: new Date(2015, 1, 23),
end: new Date(2015, 1, 27),
group: "MotoGP",
className: "motorcycle",
content: "Sepang MotoGP Test 2",
id: "579@motocal.net"
},
{
start: new Date(2015, 1, 26),
end: new Date(2015, 2, 2),
group: "V8SC",
className: "touringcar",
content: "Clipsal 500 Adelaide",
id: "659@motocal.net"
},
{
start: new Date(2015, 2, 5),
end: new Date(2015, 2, 9),
group: "WRC",
className: "rally",
content: "Rally Guanajuato Mexico",
id: "593@motocal.net"
},
{
start: new Date(2015, 2, 6),
end: new Date(2015, 2, 9),
group: "WTCC",
className: "touringcar",
content: "Argentina",
id: "717@motocal.net"
},
{
start: new Date(2015, 2, 12),
end: new Date(2015, 2, 16),
group: "V8SC",
className: "touringcar",
content: "Australian Grand Prix",
id: "660@motocal.net"
},
{
start: new Date(2015, 2, 13),
end: new Date(2015, 2, 16),
group: "F1",
className: "openwheel",
content: "Australia",
id: "630@motocal.net"
},
{
start: new Date(2015, 2, 14),
end: new Date(2015, 2, 15),
group: "Formula E",
className: "openwheel",
content: "Miami, USA",
id: "534@motocal.net"
},
{
start: new Date(2015, 2, 14),
end: new Date(2015, 2, 17),
group: "MotoGP",
className: "motorcycle",
content: "Qatar MotoGP Test",
id: "577@motocal.net"
},
{
start: new Date(2015, 2, 20),
end: new Date(2015, 2, 23),
group: "SBK",
className: "motorcycle",
content: "Thailand",
id: "617@motocal.net"
},
{
start: new Date(2015, 2, 27),
end: new Date(2015, 2, 30),
group: "F1",
className: "openwheel",
content: "Malaysia",
id: "631@motocal.net"
},
{
start: new Date(2015, 2, 27),
end: new Date(2015, 2, 30),
group: "V8SC",
className: "touringcar",
content: "Tasmania SuperSprint",
id: "661@motocal.net"
},
{
start: new Date(2015, 2, 27),
end: new Date(2015, 2, 30),
group: "IndyCar",
className: "openwheel",
content: "Grand Prix of St. Petersburg",
id: "752@motocal.net"
},
{
start: new Date(2015, 3, 4),
end: new Date(2015, 3, 7),
group: "BSB",
className: "motorcycle",
content: "Round 1",
id: "604@motocal.net"
},
{
start: new Date(2015, 3, 4),
end: new Date(2015, 3, 6),
group: "BTCC",
className: "touringcar",
content: "Rounds 1, 2 & 3",
id: "581@motocal.net"
},
{
start: new Date(2015, 3, 4),
end: new Date(2015, 3, 5),
group: "Formula E",
className: "openwheel",
content: "Long Beach, USA",
id: "535@motocal.net"
},
{
start: new Date(2015, 3, 10),
end: new Date(2015, 3, 13),
group: "IndyCar",
className: "openwheel",
content: "Indy Grand Prix of Louisiana",
id: "753@motocal.net"
},
{
start: new Date(2015, 3, 10),
end: new Date(2015, 3, 13),
group: "MotoAmerica",
className: "motorcycle",
content: "COTA",
id: "705@motocal.net"
},
{
start: new Date(2015, 3, 10),
end: new Date(2015, 3, 13),
group: "SBK",
className: "motorcycle",
content: "Aragon",
id: "618@motocal.net"
},
{
start: new Date(2015, 3, 10),
end: new Date(2015, 3, 13),
group: "MotoGP",
className: "motorcycle",
content: "Americas",
id: "540@motocal.net"
},
{
start: new Date(2015, 3, 10),
end: new Date(2015, 3, 13),
group: "F1",
className: "openwheel",
content: "China",
id: "632@motocal.net"
},
{
start: new Date(2015, 3, 12),
end: new Date(2015, 3, 13),
group: "WEC",
className: "endurance",
content: "6 Hours of Silverstone",
id: "674@motocal.net"
},
{
start: new Date(2015, 3, 17),
end: new Date(2015, 3, 20),
group: "BSB",
className: "motorcycle",
content: "Round 2",
id: "605@motocal.net"
},
{
start: new Date(2015, 3, 17),
end: new Date(2015, 3, 20),
group: "F1",
className: "openwheel",
content: "Bahrain",
id: "633@motocal.net"
},
{
start: new Date(2015, 3, 17),
end: new Date(2015, 3, 20),
group: "IndyCar",
className: "openwheel",
content: "Grand Prix of Long Beach",
id: "754@motocal.net"
},
{
start: new Date(2015, 3, 17),
end: new Date(2015, 3, 20),
group: "MotoAmerica",
className: "motorcycle",
content: "Road Atlanta",
id: "706@motocal.net"
},
{
start: new Date(2015, 3, 17),
end: new Date(2015, 3, 20),
group: "SBK",
className: "motorcycle",
content: "Netherlands",
id: "619@motocal.net"
},
{
start: new Date(2015, 3, 17),
end: new Date(2015, 3, 20),
group: "WTCC",
className: "touringcar",
content: "Morocco",
id: "718@motocal.net"
},
{
start: new Date(2015, 3, 17),
end: new Date(2015, 3, 20),
group: "MotoGP",
className: "motorcycle",
content: "Argentina",
id: "559@motocal.net"
},
{
start: new Date(2015, 3, 18),
end: new Date(2015, 3, 19),
group: "SGP",
className: "rally",
content: "Warsaw",
id: "729@motocal.net"
},
{
start: new Date(2015, 3, 18),
end: new Date(2015, 3, 20),
group: "EWC",
className: "endurance",
content: "24 Heures Moto Le Mans",
id: "701@motocal.net"
},
{
start: new Date(2015, 3, 18),
end: new Date(2015, 3, 20),
group: "BTCC",
className: "touringcar",
content: "Rounds 4, 5 & 6",
id: "582@motocal.net"
},
{
start: new Date(2015, 3, 23),
end: new Date(2015, 3, 27),
group: "WRC",
className: "rally",
content: "Rally Argentina",
id: "595@motocal.net"
},
{
start: new Date(2015, 3, 24),
end: new Date(2015, 3, 27),
group: "WorldRX",
className: "rally",
content: "Portugal",
id: "686@motocal.net"
},
{
start: new Date(2015, 3, 24),
end: new Date(2015, 3, 27),
group: "IndyCar",
className: "openwheel",
content: "Indy Grand Prix of Alabama",
id: "755@motocal.net"
},
{
start: new Date(2015, 3, 25),
end: new Date(2015, 3, 27),
group: "WSR",
className: "openwheel",
content: "Spain",
id: "742@motocal.net"
},
{
start: new Date(2015, 4, 1),
end: new Date(2015, 4, 4),
group: "MotoGP",
className: "motorcycle",
content: "Spain",
id: "542@motocal.net"
},
{
start: new Date(2015, 4, 1),
end: new Date(2015, 4, 4),
group: "WorldRX",
className: "rally",
content: "Hockenheim",
id: "768@motocal.net"
},
{
start: new Date(2015, 4, 1),
end: new Date(2015, 4, 4),
group: "DTM",
className: "touringcar",
content: "Hockenheim",
id: "650@motocal.net"
},
{
start: new Date(2015, 4, 1),
end: new Date(2015, 4, 4),
group: "WTCC",
className: "touringcar",
content: "Hungary",
id: "719@motocal.net"
},
{
start: new Date(2015, 4, 1),
end: new Date(2015, 4, 4),
group: "V8SC",
className: "touringcar",
content: "Perth SuperSprint",
id: "662@motocal.net"
},
{
start: new Date(2015, 4, 2),
end: new Date(2015, 4, 5),
group: "BSB",
className: "motorcycle",
content: "Round 3",
id: "606@motocal.net"
},
{
start: new Date(2015, 4, 2),
end: new Date(2015, 4, 3),
group: "WEC",
className: "endurance",
content: "6 Hours of Spa-Francorchamps",
id: "675@motocal.net"
},
{
start: new Date(2015, 4, 7),
end: new Date(2015, 4, 10),
group: "IndyCar",
className: "openwheel",
content: "Grand Prix of Indianapolis",
id: "756@motocal.net"
},
{
start: new Date(2015, 4, 8),
end: new Date(2015, 4, 11),
group: "F1",
className: "openwheel",
content: "Spain",
id: "634@motocal.net"
},
{
start: new Date(2015, 4, 8),
end: new Date(2015, 4, 11),
group: "SBK",
className: "motorcycle",
content: "Italy",
id: "620@motocal.net"
},
{
start: new Date(2015, 4, 9),
end: new Date(2015, 4, 10),
group: "Formula E",
className: "openwheel",
content: "Monaco",
id: "536@motocal.net"
},
{
start: new Date(2015, 4, 9),
end: new Date(2015, 4, 11),
group: "BTCC",
className: "touringcar",
content: "Rounds 7, 8 & 9",
id: "583@motocal.net"
},
{
start: new Date(2015, 4, 10),
end: new Date(2015, 4, 17),
group: "Roads",
className: "motorcycle",
content: "North West 200",
id: "682@motocal.net"
},
{
start: new Date(2015, 4, 15),
end: new Date(2015, 4, 17),
group: "WTCC",
className: "touringcar",
content: "Germany",
id: "720@motocal.net"
},
{
start: new Date(2015, 4, 15),
end: new Date(2015, 4, 18),
group: "WorldRX",
className: "rally",
content: "Belgium",
id: "687@motocal.net"
},
{
start: new Date(2015, 4, 15),
end: new Date(2015, 4, 18),
group: "V8SC",
className: "touringcar",
content: "Winton SuperSprint",
id: "663@motocal.net"
},
{
start: new Date(2015, 4, 15),
end: new Date(2015, 4, 18),
group: "MotoGP",
className: "motorcycle",
content: "France",
id: "543@motocal.net"
},
{
start: new Date(2015, 4, 15),
end: new Date(2015, 4, 18),
group: "MotoAmerica",
className: "motorcycle",
content: "VIR",
id: "707@motocal.net"
},
{
start: new Date(2015, 4, 16),
end: new Date(2015, 4, 17),
group: "SGP",
className: "rally",
content: "Tampere",
id: "730@motocal.net"
},
{
start: new Date(2015, 4, 21),
end: new Date(2015, 4, 25),
group: "WRC",
className: "rally",
content: "Rally de Portugal",
id: "594@motocal.net"
},
{
start: new Date(2015, 4, 21),
end: new Date(2015, 4, 25),
group: "F1",
className: "openwheel",
content: "Monaco",
id: "635@motocal.net"
},
{
start: new Date(2015, 4, 22),
end: new Date(2015, 4, 25),
group: "WorldRX",
className: "rally",
content: "Great Britain",
id: "688@motocal.net"
},
{
start: new Date(2015, 4, 22),
end: new Date(2015, 4, 25),
group: "SBK",
className: "motorcycle",
content: "UK",
id: "621@motocal.net"
},
{
start: new Date(2015, 4, 22),
end: new Date(2015, 4, 25),
group: "IndyCar",
className: "openwheel",
content: "Indianapolis 500",
id: "757@motocal.net"
},
{
start: new Date(2015, 4, 23),
end: new Date(2015, 4, 24),
group: "SGP",
className: "rally",
content: "Prague",
id: "731@motocal.net"
},
{
start: new Date(2015, 4, 23),
end: new Date(2015, 4, 24),
group: "Formula E",
className: "openwheel",
content: "Germany",
id: "537@motocal.net"
},
{
start: new Date(2015, 4, 24),
end: new Date(2015, 4, 25),
group: "WSR",
className: "openwheel",
content: "Monaco",
id: "743@motocal.net"
},
{
start: new Date(2015, 4, 29),
end: new Date(2015, 5, 1),
group: "MotoAmerica",
className: "motorcycle",
content: "Road America",
id: "708@motocal.net"
},
{
start: new Date(2015, 4, 29),
end: new Date(2015, 5, 1),
group: "IndyCar",
className: "openwheel",
content: "Dual in Detroit",
id: "758@motocal.net"
},
{
start: new Date(2015, 4, 29),
end: new Date(2015, 5, 1),
group: "MotoGP",
className: "motorcycle",
content: "Italy",
id: "562@motocal.net"
},
{
start: new Date(2015, 4, 29),
end: new Date(2015, 5, 1),
group: "DTM",
className: "touringcar",
content: "Lausitzring",
id: "651@motocal.net"
},
{
start: new Date(2015, 4, 30),
end: new Date(2015, 5, 13),
group: "Roads",
className: "motorcycle",
content: "Isle of Man TT",
id: "683@motocal.net"
},
{
start: new Date(2015, 4, 30),
end: new Date(2015, 5, 1),
group: "WSR",
className: "openwheel",
content: "Belgium",
id: "745@motocal.net"
},
{
start: new Date(2015, 5, 4),
end: new Date(2015, 5, 7),
group: "IndyCar",
className: "openwheel",
content: "Firestone 600",
id: "759@motocal.net"
},
{
start: new Date(2015, 5, 5),
end: new Date(2015, 5, 8),
group: "SBK",
className: "motorcycle",
content: "Portugal",
id: "622@motocal.net"
},
{
start: new Date(2015, 5, 5),
end: new Date(2015, 5, 8),
group: "F1",
className: "openwheel",
content: "Canada",
id: "636@motocal.net"
},
{
start: new Date(2015, 5, 5),
end: new Date(2015, 5, 8),
group: "WTCC",
className: "touringcar",
content: "Russia",
id: "721@motocal.net"
},
{
start: new Date(2015, 5, 6),
end: new Date(2015, 5, 7),
group: "Formula E",
className: "openwheel",
content: "Russia",
id: "716@motocal.net"
},
{
start: new Date(2015, 5, 6),
end: new Date(2015, 5, 8),
group: "BTCC",
className: "touringcar",
content: "Rounds 10, 11 & 12",
id: "584@motocal.net"
},
{
start: new Date(2015, 5, 11),
end: new Date(2015, 5, 15),
group: "WRC",
className: "rally",
content: "Rally d'Italia Sardegna",
id: "596@motocal.net"
},
{
start: new Date(2015, 5, 12),
end: new Date(2015, 5, 15),
group: "MotoGP",
className: "motorcycle",
content: "Catalunya",
id: "545@motocal.net"
},
{
start: new Date(2015, 5, 12),
end: new Date(2015, 5, 15),
group: "IndyCar",
className: "openwheel",
content: "Indy Toronto",
id: "760@motocal.net"
},
{
start: new Date(2015, 5, 12),
end: new Date(2015, 5, 15),
group: "MotoAmerica",
className: "motorcycle",
content: "Barber",
id: "709@motocal.net"
},
{
start: new Date(2015, 5, 13),
end: new Date(2015, 5, 15),
group: "WSR",
className: "openwheel",
content: "Hungary",
id: "746@motocal.net"
},
{
start: new Date(2015, 5, 13),
end: new Date(2015, 5, 15),
group: "WEC",
className: "endurance",
content: "24 Heures du Mans",
id: "676@motocal.net"
},
{
start: new Date(2015, 5, 19),
end: new Date(2015, 5, 22),
group: "V8SC",
className: "touringcar",
content: "Skycity Triple Crown",
id: "664@motocal.net"
},
{
start: new Date(2015, 5, 19),
end: new Date(2015, 5, 22),
group: "WTCC",
className: "touringcar",
content: "Slovakia",
id: "722@motocal.net"
},
{
start: new Date(2015, 5, 19),
end: new Date(2015, 5, 22),
group: "SBK",
className: "motorcycle",
content: "Riviera di Rimini",
id: "623@motocal.net"
},
{
start: new Date(2015, 5, 19),
end: new Date(2015, 5, 22),
group: "BSB",
className: "motorcycle",
content: "Round 4",
id: "607@motocal.net"
},
{
start: new Date(2015, 5, 19),
end: new Date(2015, 5, 22),
group: "F1",
className: "openwheel",
content: "Austria",
id: "637@motocal.net"
},
{
start: new Date(2015, 5, 19),
end: new Date(2015, 5, 22),
group: "WorldRX",
className: "rally",
content: "Germany",
id: "689@motocal.net"
},
{
start: new Date(2015, 5, 25),
end: new Date(2015, 5, 28),
group: "MotoGP",
className: "motorcycle",
content: "Netherlands",
id: "546@motocal.net"
},
{
start: new Date(2015, 5, 25),
end: new Date(2015, 5, 28),
group: "IndyCar",
className: "openwheel",
content: "MAVTV 500",
id: "761@motocal.net"
},
{
start: new Date(2015, 5, 26),
end: new Date(2015, 5, 29),
group: "WTCC",
className: "touringcar",
content: "France",
id: "723@motocal.net"
},
{
start: new Date(2015, 5, 26),
end: new Date(2015, 5, 29),
group: "DTM",
className: "touringcar",
content: "Norisring",
id: "652@motocal.net"
},
{
start: new Date(2015, 5, 26),
end: new Date(2015, 5, 29),
group: "MotoAmerica",
className: "motorcycle",
content: "Miller",
id: "710@motocal.net"
},
{
start: new Date(2015, 5, 27),
end: new Date(2015, 5, 29),
group: "BTCC",
className: "touringcar",
content: "Rounds 13, 14 & 15",
id: "585@motocal.net"
},
{
start: new Date(2015, 5, 27),
end: new Date(2015, 5, 29),
group: "Formula E",
className: "openwheel",
content: "United Kingdom",
id: "538@motocal.net"
},
{
start: new Date(2015, 6, 2),
end: new Date(2015, 6, 6),
group: "WRC",
className: "rally",
content: "Rally Poland",
id: "597@motocal.net"
},
{
start: new Date(2015, 6, 3),
end: new Date(2015, 6, 6),
group: "F1",
className: "openwheel",
content: "Britain",
id: "638@motocal.net"
},
{
start: new Date(2015, 6, 3),
end: new Date(2015, 6, 6),
group: "WorldRX",
className: "rally",
content: "Sweden",
id: "690@motocal.net"
},
{
start: new Date(2015, 6, 3),
end: new Date(2015, 6, 6),
group: "BSB",
className: "motorcycle",
content: "Round 5",
id: "608@motocal.net"
},
{
start: new Date(2015, 6, 4),
end: new Date(2015, 6, 5),
group: "SGP",
className: "rally",
content: "Cardiff",
id: "732@motocal.net"
},
{
start: new Date(2015, 6, 6),
end: new Date(2015, 6, 10),
group: "Roads",
className: "motorcycle",
content: "Southern 100",
id: "714@motocal.net"
},
{
start: new Date(2015, 6, 10),
end: new Date(2015, 6, 13),
group: "MotoGP",
className: "motorcycle",
content: "Germany",
id: "565@motocal.net"
},
{
start: new Date(2015, 6, 10),
end: new Date(2015, 6, 13),
group: "DTM",
className: "touringcar",
content: "Zandvoort",
id: "653@motocal.net"
},
{
start: new Date(2015, 6, 10),
end: new Date(2015, 6, 13),
group: "IndyCar",
className: "openwheel",
content: "Wisconsin 250",
id: "763@motocal.net"
},
{
start: new Date(2015, 6, 10),
end: new Date(2015, 6, 13),
group: "V8SC",
className: "touringcar",
content: "Townsville 400",
id: "665@motocal.net"
},
{
start: new Date(2015, 6, 10),
end: new Date(2015, 6, 13),
group: "WTCC",
className: "touringcar",
content: "Portugal",
id: "724@motocal.net"
},
{
start: new Date(2015, 6, 11),
end: new Date(2015, 6, 13),
group: "WSR",
className: "openwheel",
content: "Austria",
id: "747@motocal.net"
},
{
start: new Date(2015, 6, 16),
end: new Date(2015, 6, 19),
group: "IndyCar",
className: "openwheel",
content: "Iowa Corn Indy 300",
id: "764@motocal.net"
},
{
start: new Date(2015, 6, 17),
end: new Date(2015, 6, 20),
group: "SBK",
className: "motorcycle",
content: "USA",
id: "625@motocal.net"
},
{
start: new Date(2015, 6, 17),
end: new Date(2015, 6, 20),
group: "BSB",
className: "motorcycle",
content: "Round 6",
id: "609@motocal.net"
},
{
start: new Date(2015, 6, 17),
end: new Date(2015, 6, 20),
group: "MotoAmerica",
className: "motorcycle",
content: "Mazda Raceway",
id: "711@motocal.net"
},
{
start: new Date(2015, 6, 18),
end: new Date(2015, 6, 19),
group: "SGP",
className: "rally",
content: "Daugavpils",
id: "733@motocal.net"
},
{
start: new Date(2015, 6, 24),
end: new Date(2015, 6, 27),
group: "F1",
className: "openwheel",
content: "Hungary",
id: "640@motocal.net"
},
{
start: new Date(2015, 6, 25),
end: new Date(2015, 6, 26),
group: "SGP",
className: "rally",
content: "Målilla",
id: "734@motocal.net"
},
{
start: new Date(2015, 6, 26),
end: new Date(2015, 6, 27),
group: "EWC",
className: "endurance",
content: "Suzuka 8 Hours",
id: "702@motocal.net"
},
{
start: new Date(2015, 6, 30),
end: new Date(2015, 7, 3),
group: "WRC",
className: "rally",
content: "Rally Finland",
id: "598@motocal.net"
},
{
start: new Date(2015, 6, 31),
end: new Date(2015, 7, 3),
group: "BSB",
className: "motorcycle",
content: "Round 7",
id: "610@motocal.net"
},
{
start: new Date(2015, 6, 31),
end: new Date(2015, 7, 3),
group: "V8SC",
className: "touringcar",
content: "Ipswich SuperSprint",
id: "666@motocal.net"
},
{
start: new Date(2015, 6, 31),
end: new Date(2015, 7, 3),
group: "DTM",
className: "touringcar",
content: "Spielberg",
id: "654@motocal.net"
},
{
start: new Date(2015, 6, 31),
end: new Date(2015, 7, 3),
group: "IndyCar",
className: "openwheel",
content: "Honda Indy 200",
id: "765@motocal.net"
},
{
start: new Date(2015, 6, 31),
end: new Date(2015, 7, 3),
group: "SBK",
className: "motorcycle",
content: "Malaysia",
id: "626@motocal.net"
},
{
start: new Date(2015, 7, 3),
end: new Date(2015, 7, 9),
group: "Roads",
className: "motorcycle",
content: "Ulster Grand Prix",
id: "684@motocal.net"
},
{
start: new Date(2015, 7, 7),
end: new Date(2015, 7, 9),
group: "WorldRX",
className: "rally",
content: "Canada",
id: "691@motocal.net"
},
{
start: new Date(2015, 7, 7),
end: new Date(2015, 7, 10),
group: "MotoAmerica",
className: "motorcycle",
content: "INDY",
id: "712@motocal.net"
},
{
start: new Date(2015, 7, 7),
end: new Date(2015, 7, 10),
group: "MotoGP",
className: "motorcycle",
content: "Indianapolis",
id: "548@motocal.net"
},
{
start: new Date(2015, 7, 8),
end: new Date(2015, 7, 10),
group: "BTCC",
className: "touringcar",
content: "Rounds 16, 17 & 18",
id: "586@motocal.net"
},
{
start: new Date(2015, 7, 8),
end: new Date(2015, 7, 9),
group: "SGP",
className: "rally",
content: "Horsens",
id: "735@motocal.net"
},
{
start: new Date(2015, 7, 10),
end: new Date(2015, 7, 12),
group: "Formula E",
className: "openwheel",
content: "Pre-season test 1",
id: "769@motocal.net"
},
{
start: new Date(2015, 7, 14),
end: new Date(2015, 7, 17),
group: "MotoGP",
className: "motorcycle",
content: "Czech Republic",
id: "549@motocal.net"
},
{
start: new Date(2015, 7, 17),
end: new Date(2015, 7, 19),
group: "Formula E",
className: "openwheel",
content: "Pre-season test 2",
id: "770@motocal.net"
},
{
start: new Date(2015, 7, 20),
end: new Date(2015, 7, 24),
group: "WRC",
className: "rally",
content: "Rallye Deutschland",
id: "599@motocal.net"
},
{
start: new Date(2015, 7, 21),
end: new Date(2015, 7, 24),
group: "IndyCar",
className: "openwheel",
content: "Pocono IndyCar 500",
id: "766@motocal.net"
},
{
start: new Date(2015, 7, 21),
end: new Date(2015, 7, 24),
group: "BSB",
className: "motorcycle",
content: "Round 8",
id: "611@motocal.net"
},
{
start: new Date(2015, 7, 21),
end: new Date(2015, 7, 24),
group: "WorldRX",
className: "rally",
content: "Norway",
id: "692@motocal.net"
},
{
start: new Date(2015, 7, 21),
end: new Date(2015, 7, 24),
group: "F1",
className: "openwheel",
content: "Belgium",
id: "641@motocal.net"
},
{
start: new Date(2015, 7, 21),
end: new Date(2015, 7, 24),
group: "V8SC",
className: "touringcar",
content: "Sydney Motorsport Park SuperSprint",
id: "667@motocal.net"
},
{
start: new Date(2015, 7, 22),
end: new Date(2015, 7, 23),
group: "EWC",
className: "endurance",
content: "Oschersleben 8 Hours",
id: "703@motocal.net"
},
{
start: new Date(2015, 7, 22),
end: new Date(2015, 8, 5),
group: "Roads",
className: "motorcycle",
content: "Classic TT & Manx GP",
id: "715@motocal.net"
},
{
start: new Date(2015, 7, 22),
end: new Date(2015, 7, 24),
group: "BTCC",
className: "touringcar",
content: "Rounds 19, 20 & 21",
id: "587@motocal.net"
},
{
start: new Date(2015, 7, 24),
end: new Date(2015, 7, 26),
group: "Formula E",
className: "openwheel",
content: "Pre-season test 3",
id: "771@motocal.net"
},
{
start: new Date(2015, 7, 28),
end: new Date(2015, 7, 31),
group: "DTM",
className: "touringcar",
content: "Moscow Raceway",
id: "655@motocal.net"
},
{
start: new Date(2015, 7, 28),
end: new Date(2015, 7, 31),
group: "IndyCar",
className: "openwheel",
content: "Grand Prix of Sonoma",
id: "767@motocal.net"
},
{
start: new Date(2015, 7, 28),
end: new Date(2015, 7, 31),
group: "MotoGP",
className: "motorcycle",
content: "Great Britain",
id: "568@motocal.net"
},
{
start: new Date(2015, 7, 29),
end: new Date(2015, 7, 30),
group: "SGP",
className: "rally",
content: "Gorzów",
id: "737@motocal.net"
},
{
start: new Date(2015, 7, 30),
end: new Date(2015, 7, 31),
group: "WEC",
className: "endurance",
content: "6 Hours of N&uuml;rburgring",
id: "677@motocal.net"
},
{
start: new Date(2015, 8, 4),
end: new Date(2015, 8, 7),
group: "BSB",
className: "motorcycle",
content: "Round 9",
id: "612@motocal.net"
},
{
start: new Date(2015, 8, 4),
end: new Date(2015, 8, 7),
group: "WorldRX",
className: "rally",
content: "France",
id: "693@motocal.net"
},
{
start: new Date(2015, 8, 4),
end: new Date(2015, 8, 7),
group: "F1",
className: "openwheel",
content: "Italy",
id: "642@motocal.net"
},
{
start: new Date(2015, 8, 5),
end: new Date(2015, 8, 7),
group: "WSR",
className: "openwheel",
content: "United Kingdom",
id: "748@motocal.net"
},
{
start: new Date(2015, 8, 5),
end: new Date(2015, 8, 7),
group: "BTCC",
className: "touringcar",
content: "Rounds 22, 23 & 24",
id: "588@motocal.net"
},
{
start: new Date(2015, 8, 10),
end: new Date(2015, 8, 14),
group: "WRC",
className: "rally",
content: "Rally Australia",
id: "600@motocal.net"
},
{
start: new Date(2015, 8, 11),
end: new Date(2015, 8, 14),
group: "V8SC",
className: "touringcar",
content: "Sandown 500",
id: "668@motocal.net"
},
{
start: new Date(2015, 8, 11),
end: new Date(2015, 8, 14),
group: "MotoAmerica",
className: "motorcycle",
content: "New Jersey",
id: "713@motocal.net"
},
{
start: new Date(2015, 8, 11),
end: new Date(2015, 8, 14),
group: "MotoGP",
className: "motorcycle",
content: "San Marino",
id: "551@motocal.net"
},
{
start: new Date(2015, 8, 11),
end: new Date(2015, 8, 14),
group: "WTCC",
className: "touringcar",
content: "Japan",
id: "725@motocal.net"
},
{
start: new Date(2015, 8, 11),
end: new Date(2015, 8, 14),
group: "DTM",
className: "touringcar",
content: "Oschersleben",
id: "656@motocal.net"
},
{
start: new Date(2015, 8, 12),
end: new Date(2015, 8, 14),
group: "WSR",
className: "openwheel",
content: "Germany",
id: "749@motocal.net"
},
{
start: new Date(2015, 8, 12),
end: new Date(2015, 8, 13),
group: "SGP",
className: "rally",
content: "Krško",
id: "738@motocal.net"
},
{
start: new Date(2015, 8, 18),
end: new Date(2015, 8, 21),
group: "SBK",
className: "motorcycle",
content: "Spain",
id: "627@motocal.net"
},
{
start: new Date(2015, 8, 18),
end: new Date(2015, 8, 21),
group: "BSB",
className: "motorcycle",
content: "Round 10",
id: "613@motocal.net"
},
{
start: new Date(2015, 8, 18),
end: new Date(2015, 8, 21),
group: "F1",
className: "openwheel",
content: "Singapore",
id: "643@motocal.net"
},
{
start: new Date(2015, 8, 18),
end: new Date(2015, 8, 21),
group: "WorldRX",
className: "rally",
content: "Barcelona",
id: "694@motocal.net"
},
{
start: new Date(2015, 8, 19),
end: new Date(2015, 8, 20),
group: "WEC",
className: "endurance",
content: "6 Hours of Circuit of the Americas",
id: "678@motocal.net"
},
{
start: new Date(2015, 8, 19),
end: new Date(2015, 8, 21),
group: "EWC",
className: "endurance",
content: "Bol d’Or",
id: "704@motocal.net"
},
{
start: new Date(2015, 8, 25),
end: new Date(2015, 8, 28),
group: "MotoGP",
className: "motorcycle",
content: "Aragon",
id: "570@motocal.net"
},
{
start: new Date(2015, 8, 25),
end: new Date(2015, 8, 28),
group: "DTM",
className: "touringcar",
content: "N&uuml;rburgring",
id: "657@motocal.net"
},
{
start: new Date(2015, 8, 25),
end: new Date(2015, 8, 28),
group: "WTCC",
className: "touringcar",
content: "China",
id: "726@motocal.net"
},
{
start: new Date(2015, 8, 25),
end: new Date(2015, 8, 28),
group: "F1",
className: "openwheel",
content: "Japan",
id: "644@motocal.net"
},
{
start: new Date(2015, 8, 26),
end: new Date(2015, 8, 28),
group: "BTCC",
className: "touringcar",
content: "Rounds 25, 26 & 27",
id: "589@motocal.net"
},
{
start: new Date(2015, 8, 26),
end: new Date(2015, 8, 27),
group: "SGP",
className: "rally",
content: "Stockholm",
id: "739@motocal.net"
},
{
start: new Date(2015, 8, 26),
end: new Date(2015, 8, 28),
group: "WSR",
className: "openwheel",
content: "France",
id: "750@motocal.net"
},
{
start: new Date(2015, 9, 1),
end: new Date(2015, 9, 5),
group: "WRC",
className: "rally",
content: "Rallye de France",
id: "601@motocal.net"
},
{
start: new Date(2015, 9, 2),
end: new Date(2015, 9, 5),
group: "SBK",
className: "motorcycle",
content: "France",
id: "628@motocal.net"
},
{
start: new Date(2015, 9, 2),
end: new Date(2015, 9, 5),
group: "BSB",
className: "motorcycle",
content: "Round 11",
id: "614@motocal.net"
},
{
start: new Date(2015, 9, 2),
end: new Date(2015, 9, 5),
group: "WorldRX",
className: "rally",
content: "Turkey",
id: "695@motocal.net"
},
{
start: new Date(2015, 9, 3),
end: new Date(2015, 9, 4),
group: "SGP",
className: "rally",
content: "Toruń",
id: "740@motocal.net"
},
{
start: new Date(2015, 9, 8),
end: new Date(2015, 9, 12),
group: "V8SC",
className: "touringcar",
content: "Bathurst 1000",
id: "669@motocal.net"
},
{
start: new Date(2015, 9, 9),
end: new Date(2015, 9, 12),
group: "F1",
className: "openwheel",
content: "Russia",
id: "645@motocal.net"
},
{
start: new Date(2015, 9, 9),
end: new Date(2015, 9, 12),
group: "MotoGP",
className: "motorcycle",
content: "Japan",
id: "553@motocal.net"
},
{
start: new Date(2015, 9, 10),
end: new Date(2015, 9, 12),
group: "BTCC",
className: "touringcar",
content: "Rounds 28, 29 & 30",
id: "590@motocal.net"
},
{
start: new Date(2015, 9, 11),
end: new Date(2015, 9, 12),
group: "WEC",
className: "endurance",
content: "6 Hours of Fuji",
id: "679@motocal.net"
},
{
start: new Date(2015, 9, 16),
end: new Date(2015, 9, 19),
group: "WorldRX",
className: "rally",
content: "Italy",
id: "696@motocal.net"
},
{
start: new Date(2015, 9, 16),
end: new Date(2015, 9, 19),
group: "MotoGP",
className: "motorcycle",
content: "Australia",
id: "572@motocal.net"
},
{
start: new Date(2015, 9, 16),
end: new Date(2015, 9, 19),
group: "DTM",
className: "touringcar",
content: "Hockenheim",
id: "658@motocal.net"
},
{
start: new Date(2015, 9, 16),
end: new Date(2015, 9, 19),
group: "BSB",
className: "motorcycle",
content: "Round 12",
id: "615@motocal.net"
},
{
start: new Date(2015, 9, 16),
end: new Date(2015, 9, 19),
group: "SBK",
className: "motorcycle",
content: "Qatar",
id: "629@motocal.net"
},
{
start: new Date(2015, 9, 17),
end: new Date(2015, 9, 19),
group: "WSR",
className: "openwheel",
content: "Spain",
id: "751@motocal.net"
},
{
start: new Date(2015, 9, 22),
end: new Date(2015, 9, 26),
group: "WRC",
className: "rally",
content: "Rally de Espana",
id: "602@motocal.net"
},
{
start: new Date(2015, 9, 23),
end: new Date(2015, 9, 26),
group: "V8SC",
className: "touringcar",
content: "Gold Coast 600",
id: "670@motocal.net"
},
{
start: new Date(2015, 9, 23),
end: new Date(2015, 9, 26),
group: "MotoGP",
className: "motorcycle",
content: "Malaysia",
id: "573@motocal.net"
},
{
start: new Date(2015, 9, 23),
end: new Date(2015, 9, 26),
group: "F1",
className: "openwheel",
content: "United States",
id: "646@motocal.net"
},
{
start: new Date(2015, 9, 24),
end: new Date(2015, 9, 25),
group: "SGP",
className: "rally",
content: "Melbourne",
id: "741@motocal.net"
},
{
start: new Date(2015, 9, 30),
end: new Date(2015, 10, 2),
group: "F1",
className: "openwheel",
content: "Mexico",
id: "647@motocal.net"
},
{
start: new Date(2015, 9, 30),
end: new Date(2015, 10, 2),
group: "WTCC",
className: "touringcar",
content: "Thailand",
id: "727@motocal.net"
},
{
start: new Date(2015, 10, 1),
end: new Date(2015, 10, 2),
group: "WEC",
className: "endurance",
content: "6 Hours of Shanghai",
id: "680@motocal.net"
},
{
start: new Date(2015, 10, 6),
end: new Date(2015, 10, 9),
group: "MotoGP",
className: "motorcycle",
content: "Valencia",
id: "556@motocal.net"
},
{
start: new Date(2015, 10, 6),
end: new Date(2015, 10, 9),
group: "V8SC",
className: "touringcar",
content: "ITM 500 Auckland",
id: "671@motocal.net"
},
{
start: new Date(2015, 10, 12),
end: new Date(2015, 10, 16),
group: "WRC",
className: "rally",
content: "Wales Rally GB",
id: "603@motocal.net"
},
{
start: new Date(2015, 10, 13),
end: new Date(2015, 10, 16),
group: "F1",
className: "openwheel",
content: "Brazil",
id: "648@motocal.net"
},
{
start: new Date(2015, 10, 19),
end: new Date(2015, 10, 23),
group: "Roads",
className: "motorcycle",
content: "Macau Grand Prix",
id: "685@motocal.net"
},
{
start: new Date(2015, 10, 20),
end: new Date(2015, 10, 23),
group: "WTCC",
className: "touringcar",
content: "Qatar",
id: "728@motocal.net"
},
{
start: new Date(2015, 10, 20),
end: new Date(2015, 10, 23),
group: "V8SC",
className: "touringcar",
content: "Phillip Island SuperSprint",
id: "672@motocal.net"
},
{
start: new Date(2015, 10, 21),
end: new Date(2015, 10, 22),
group: "WEC",
className: "endurance",
content: "6 Hours of Bahrain",
id: "681@motocal.net"
},
{
start: new Date(2015, 10, 27),
end: new Date(2015, 10, 30),
group: "WorldRX",
className: "rally",
content: "Argentina",
id: "700@motocal.net"
},
{
start: new Date(2015, 10, 27),
end: new Date(2015, 10, 30),
group: "F1",
className: "openwheel",
content: "Abu Dhabi",
id: "649@motocal.net"
},
{
start: new Date(2015, 11, 4),
end: new Date(2015, 11, 7),
group: "V8SC",
className: "touringcar",
content: "Sydney 500",
id: "673@motocal.net"
},
{
start: new Date(2015, 2, 9),
end: new Date(2015, 2, 11),
group: "GP2",
className: "openwheel",
content: "Yas Marina Test",
id: "1@gp2series.com"
},
{
start: new Date(2015, 3, 1),
end: new Date(2015, 3, 3),
group: "GP2",
className: "openwheel",
content: "Sakhir Test",
id: "2@gp2series.com"
},
{
start: new Date(2015, 3, 17),
end: new Date(2015, 3, 19),
group: "GP2",
className: "openwheel",
content: "Sakhir, Bahrain",
id: "3@gp2series.com"
},
{
start: new Date(2015, 4, 8),
end: new Date(2015, 4, 10),
group: "GP2",
className: "openwheel",
content: "Barcelona, Spain",
id: "4@gp2series.com"
},
{
start: new Date(2015, 4, 21),
end: new Date(2015, 4, 23),
group: "GP2",
className: "openwheel",
content: "Monte Carlo, Monaco",
id: "5@gp2series.com"
},
{
start: new Date(2015, 5, 19),
end: new Date(2015, 5, 21),
group: "GP2",
className: "openwheel",
content: "Spielber, Austria",
id: "6@gp2series.com"
},
{
start: new Date(2015, 6, 3),
end: new Date(2015, 6, 5),
group: "GP2",
className: "openwheel",
content: "Silverstone, Great-Britain",
id: "7@gp2series.com"
},
{
start: new Date(2015, 6, 24),
end: new Date(2015, 6, 26),
group: "GP2",
className: "openwheel",
content: "Budapest, Hungary",
id: "8@gp2series.com"
},
{
start: new Date(2015, 7, 21),
end: new Date(2015, 7, 23),
group: "GP2",
className: "openwheel",
content: "Spa-Francorchamps, Belgium",
id: "9@gp2series.com"
},
{
start: new Date(2015, 8, 4),
end: new Date(2015, 8, 6),
group: "GP2",
className: "openwheel",
content: "Monza, Italy",
id: "10@gp2series.com"
},
{
start: new Date(2015, 9, 9),
end: new Date(2015, 9, 11),
group: "GP2",
className: "openwheel",
content: "Sochi, Russia",
id: "11@gp2series.com"
},
{
start: new Date(2015, 10, 27),
end: new Date(2015, 10, 29),
group: "GP2",
className: "openwheel",
content: "Yas Marina, UAE",
id: "12@gp2series.com"
}
]);
// create visualization
var container = document.getElementById("visualization");
var options = {
// option groupOrder can be a property name or a sort function
// the sort function must compare two groups and return a value
// > 0 when a > b
// < 0 when a < b
// 0 when a == b
groupOrder: function(a, b) {
return a.value - b.value;
},
groupOrderSwap: function(a, b, groups) {
var v = a.value;
a.value = b.value;
b.value = v;
},
groupTemplate: function(group) {
var container = document.createElement("div");
var label = document.createElement("span");
label.innerHTML = group.content + " ";
container.insertAdjacentElement("afterBegin", label);
var hide = document.createElement("button");
hide.innerHTML = "hide";
hide.style.fontSize = "small";
hide.addEventListener("click", function() {
groups.update({ id: group.id, visible: false });
});
container.insertAdjacentElement("beforeEnd", hide);
return container;
},
orientation: "both",
editable: true,
groupEditable: true,
start: new Date(2015, 6, 1),
end: new Date(2015, 10, 1)
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
.vis-item.openwheel {
background-color: #b0e2ff;
}
.vis-item.rally {
background-color: #eaeaea;
}
.vis-item.motorcycle {
background-color: #fa8072;
}
.vis-item.touringcar {
background-color: #b4eeb4;
}
.vis-item.endurance {
background-color: #ffffcc;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example demonstrates editable groups (reordering and hiding).
<button onclick="showAllGroups()">Restore Hidden</button>
</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 | Editable 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\n#visualization {\n box-sizing: border-box;\n width: 100%;\n height: 300px;\n}\n\n.vis-item.openwheel {\n background-color: #b0e2ff;\n}\n.vis-item.rally {\n background-color: #eaeaea;\n}\n.vis-item.motorcycle {\n background-color: #fa8072;\n}\n.vis-item.touringcar {\n background-color: #b4eeb4;\n}\n.vis-item.endurance {\n background-color: #ffffcc;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n This example demonstrates editable groups (reordering and hiding).\n <button onclick=\"showAllGroups()\">Restore Hidden</button>\n</p>\n<div id=\"visualization\"></div>\n","js":"// https://motocal.com/\nvar groups = new vis.DataSet([\n { content: \"Formula E\", id: \"Formula E\", value: 1, className: \"openwheel\" },\n { content: \"WRC\", id: \"WRC\", value: 2, className: \"rally\" },\n { content: \"MotoGP\", id: \"MotoGP\", value: 3, className: \"motorcycle\" },\n { content: \"V8SC\", id: \"V8SC\", value: 4, className: \"touringcars\" },\n { content: \"WTCC\", id: \"WTCC\", value: 5, className: \"touringcars\" },\n { content: \"F1\", id: \"F1\", value: 6, className: \"openwheel\" },\n { content: \"SBK\", id: \"SBK\", value: 7, className: \"motorcycle\" },\n { content: \"IndyCar\", id: \"IndyCar\", value: 8, className: \"openwheel\" },\n {\n content: \"MotoAmerica\",\n id: \"MotoAmerica\",\n value: 9,\n className: \"motorcycle\"\n },\n { content: \"SGP\", id: \"SGP\", value: 10, className: \"rally\" },\n { content: \"EWC\", id: \"EWC\", value: 11, className: \"endurance\" },\n { content: \"BSB\", id: \"BSB\", value: 12, className: \"motorcycle\" },\n { content: \"DTM\", id: \"DTM\", value: 13, className: \"touringcars\" },\n { content: \"BTCC\", id: \"BTCC\", value: 14, className: \"touringcars\" },\n { content: \"WorldRX\", id: \"WorldRX\", value: 15, className: \"rally\" },\n { content: \"WSR\", id: \"WSR\", value: 16, className: \"openwheel\" },\n { content: \"Roads\", id: \"Roads\", value: 17, className: \"motorcycle\" },\n { content: \"WEC\", id: \"WEC\", value: 18, className: \"endurance\" },\n { content: \"GP2\", id: \"GP2\", value: 19, className: \"openwheel\" }\n]);\n\n// function to make all groups visible again\nfunction showAllGroups() {\n groups.forEach(function(group) {\n groups.update({ id: group.id, visible: true });\n });\n}\n\n// create a dataset with items\n// note that months are zero-based in the JavaScript Date object, so month 3 is April\nvar items = new vis.DataSet([\n {\n start: new Date(2015, 0, 10),\n end: new Date(2015, 0, 11),\n group: \"Formula E\",\n className: \"openwheel\",\n content: \"Argentina\",\n id: \"531@motocal.net\"\n },\n {\n start: new Date(2015, 0, 22),\n end: new Date(2015, 0, 26),\n group: \"WRC\",\n className: \"rally\",\n content: \"Rallye Monte-Carlo\",\n id: \"591@motocal.net\"\n },\n {\n start: new Date(2015, 1, 4),\n end: new Date(2015, 1, 8),\n group: \"MotoGP\",\n className: \"motorcycle\",\n content: \"Sepang MotoGP Test 1\",\n id: \"578@motocal.net\"\n },\n {\n start: new Date(2015, 1, 12),\n end: new Date(2015, 1, 16),\n group: \"WRC\",\n className: \"rally\",\n content: \"Rally Sweden\",\n id: \"592@motocal.net\"\n },\n {\n start: new Date(2015, 1, 20),\n end: new Date(2015, 1, 23),\n group: \"SBK\",\n className: \"motorcycle\",\n content: \"Australia\",\n id: \"616@motocal.net\"\n },\n {\n start: new Date(2015, 1, 23),\n end: new Date(2015, 1, 27),\n group: \"MotoGP\",\n className: \"motorcycle\",\n content: \"Sepang MotoGP Test 2\",\n id: \"579@motocal.net\"\n },\n {\n start: new Date(2015, 1, 26),\n end: new Date(2015, 2, 2),\n group: \"V8SC\",\n className: \"touringcar\",\n content: \"Clipsal 500 Adelaide\",\n id: \"659@motocal.net\"\n },\n {\n start: new Date(2015, 2, 5),\n end: new Date(2015, 2, 9),\n group: \"WRC\",\n className: \"rally\",\n content: \"Rally Guanajuato Mexico\",\n id: \"593@motocal.net\"\n },\n {\n start: new Date(2015, 2, 6),\n end: new Date(2015, 2, 9),\n group: \"WTCC\",\n className: \"touringcar\",\n content: \"Argentina\",\n id: \"717@motocal.net\"\n },\n {\n start: new Date(2015, 2, 12),\n end: new Date(2015, 2, 16),\n group: \"V8SC\",\n className: \"touringcar\",\n content: \"Australian Grand Prix\",\n id: \"660@motocal.net\"\n },\n {\n start: new Date(2015, 2, 13),\n end: new Date(2015, 2, 16),\n group: \"F1\",\n className: \"openwheel\",\n content: \"Australia\",\n id: \"630@motocal.net\"\n },\n {\n start: new Date(2015, 2, 14),\n end: new Date(2015, 2, 15),\n group: \"Formula E\",\n className: \"openwheel\",\n content: \"Miami, USA\",\n id: \"534@motocal.net\"\n },\n {\n start: new Date(2015, 2, 14),\n end: new Date(2015, 2, 17),\n group: \"MotoGP\",\n className: \"motorcycle\",\n content: \"Qatar MotoGP Test\",\n id: \"577@motocal.net\"\n },\n {\n start: new Date(2015, 2, 20),\n end: new Date(2015, 2, 23),\n group: \"SBK\",\n className: \"motorcycle\",\n content: \"Thailand\",\n id: \"617@motocal.net\"\n },\n {\n start: new Date(2015, 2, 27),\n end: new Date(2015, 2, 30),\n group: \"F1\",\n className: \"openwheel\",\n content: \"Malaysia\",\n id: \"631@motocal.net\"\n },\n {\n start: new Date(2015, 2, 27),\n end: new Date(2015, 2, 30),\n group: \"V8SC\",\n className: \"touringcar\",\n content: \"Tasmania SuperSprint\",\n id: \"661@motocal.net\"\n },\n {\n start: new Date(2015, 2, 27),\n end: new Date(2015, 2, 30),\n group: \"IndyCar\",\n className: \"openwheel\",\n content: \"Grand Prix of St. Petersburg\",\n id: \"752@motocal.net\"\n },\n {\n start: new Date(2015, 3, 4),\n end: new Date(2015, 3, 7),\n group: \"BSB\",\n className: \"motorcycle\",\n content: \"Round 1\",\n id: \"604@motocal.net\"\n },\n {\n start: new Date(2015, 3, 4),\n end: new Date(2015, 3, 6),\n group: \"BTCC\",\n className: \"touringcar\",\n content: \"Rounds 1, 2 & 3\",\n id: \"581@motocal.net\"\n },\n {\n start: new Date(2015, 3, 4),\n end: new Date(2015, 3, 5),\n group: \"Formula E\",\n className: \"openwheel\",\n content: \"Long Beach, USA\",\n id: \"535@motocal.net\"\n },\n {\n start: new Date(2015, 3, 10),\n end: new Date(2015, 3, 13),\n group: \"IndyCar\",\n className: \"openwheel\",\n content: \"Indy Grand Prix of Louisiana\",\n id: \"753@motocal.net\"\n },\n {\n start: new Date(2015, 3, 10),\n end: new Date(2015, 3, 13),\n group: \"MotoAmerica\",\n className: \"motorcycle\",\n content: \"COTA\",\n id: \"705@motocal.net\"\n },\n {\n start: new Date(2015, 3, 10),\n end: new Date(2015, 3, 13),\n group: \"SBK\",\n className: \"motorcycle\",\n content: \"Aragon\",\n id: \"618@motocal.net\"\n },\n {\n start: new Date(2015, 3, 10),\n end: new Date(2015, 3, 13),\n group: \"MotoGP\",\n className: \"motorcycle\",\n content: \"Americas\",\n id: \"540@motocal.net\"\n },\n {\n start: new Date(2015, 3, 10),\n end: new Date(2015, 3, 13),\n group: \"F1\",\n className: \"openwheel\",\n content: \"China\",\n id: \"632@motocal.net\"\n },\n {\n start: new Date(2015, 3, 12),\n end: new Date(2015, 3, 13),\n group: \"WEC\",\n className: \"endurance\",\n content: \"6 Hours of Silverstone\",\n id: \"674@motocal.net\"\n },\n {\n start: new Date(2015, 3, 17),\n end: new Date(2015, 3, 20),\n group: \"BSB\",\n className: \"motorcycle\",\n content: \"Round 2\",\n id: \"605@motocal.net\"\n },\n {\n start: new Date(2015, 3, 17),\n end: new Date(2015, 3, 20),\n group: \"F1\",\n className: \"openwheel\",\n content: \"Bahrain\",\n id: \"633@motocal.net\"\n },\n {\n start: new Date(2015, 3, 17),\n end: new Date(2015, 3, 20),\n group: \"IndyCar\",\n className: \"openwheel\",\n content: \"Grand Prix of Long Beach\",\n id: \"754@motocal.net\"\n },\n {\n start: new Date(2015, 3, 17),\n end: new Date(2015, 3, 20),\n group: \"MotoAmerica\",\n className: \"motorcycle\",\n content: \"Road Atlanta\",\n id: \"706@motocal.net\"\n },\n {\n start: new Date(2015, 3, 17),\n end: new Date(2015, 3, 20),\n group: \"SBK\",\n className: \"motorcycle\",\n content: \"Netherlands\",\n id: \"619@motocal.net\"\n },\n {\n start: new Date(2015, 3, 17),\n end: new Date(2015, 3, 20),\n group: \"WTCC\",\n className: \"touringcar\",\n content: \"Morocco\",\n id: \"718@motocal.net\"\n },\n {\n start: new Date(2015, 3, 17),\n end: new Date(2015, 3, 20),\n group: \"MotoGP\",\n className: \"motorcycle\",\n content: \"Argentina\",\n id: \"559@motocal.net\"\n },\n {\n start: new Date(2015, 3, 18),\n end: new Date(2015, 3, 19),\n group: \"SGP\",\n className: \"rally\",\n content: \"Warsaw\",\n id: \"729@motocal.net\"\n },\n {\n start: new Date(2015, 3, 18),\n end: new Date(2015, 3, 20),\n group: \"EWC\",\n className: \"endurance\",\n content: \"24 Heures Moto Le Mans\",\n id: \"701@motocal.net\"\n },\n {\n start: new Date(2015, 3, 18),\n end: new Date(2015, 3, 20),\n group: \"BTCC\",\n className: \"touringcar\",\n content: \"Rounds 4, 5 & 6\",\n id: \"582@motocal.net\"\n },\n {\n start: new Date(2015, 3, 23),\n end: new Date(2015, 3, 27),\n group: \"WRC\",\n className: \"rally\",\n content: \"Rally Argentina\",\n id: \"595@motocal.net\"\n },\n {\n start: new Date(2015, 3, 24),\n end: new Date(2015, 3, 27),\n group: \"WorldRX\",\n className: \"rally\",\n content: \"Portugal\",\n id: \"686@motocal.net\"\n },\n {\n start: new Date(2015, 3, 24),\n end: new Date(2015, 3, 27),\n group: \"IndyCar\",\n className: \"openwheel\",\n content: \"Indy Grand Prix of Alabama\",\n id: \"755@motocal.net\"\n },\n {\n start: new Date(2015, 3, 25),\n end: new Date(2015, 3, 27),\n group: \"WSR\",\n className: \"openwheel\",\n content: \"Spain\",\n id: \"742@motocal.net\"\n },\n {\n start: new Date(2015, 4, 1),\n end: new Date(2015, 4, 4),\n group: \"MotoGP\",\n className: \"motorcycle\",\n content: \"Spain\",\n id: \"542@motocal.net\"\n },\n {\n start: new Date(2015, 4, 1),\n end: new Date(2015, 4, 4),\n group: \"WorldRX\",\n className: \"rally\",\n content: \"Hockenheim\",\n id: \"768@motocal.net\"\n },\n {\n start: new Date(2015, 4, 1),\n end: new Date(2015, 4, 4),\n group: \"DTM\",\n className: \"touringcar\",\n content: \"Hockenheim\",\n id: \"650@motocal.net\"\n },\n {\n start: new Date(2015, 4, 1),\n end: new Date(2015, 4, 4),\n group: \"WTCC\",\n className: \"touringcar\",\n content: \"Hungary\",\n id: \"719@motocal.net\"\n },\n {\n start: new Date(2015, 4, 1),\n end: new Date(2015, 4, 4),\n group: \"V8SC\",\n className: \"touringcar\",\n content: \"Perth SuperSprint\",\n id: \"662@motocal.net\"\n },\n {\n start: new Date(2015, 4, 2),\n end: new Date(2015, 4, 5),\n group: \"BSB\",\n className: \"motorcycle\",\n content: \"Round 3\",\n id: \"606@motocal.net\"\n },\n {\n start: new Date(2015, 4, 2),\n end: new Date(2015, 4, 3),\n group: \"WEC\",\n className: \"endurance\",\n content: \"6 Hours of Spa-Francorchamps\",\n id: \"675@motocal.net\"\n },\n {\n start: new Date(2015, 4, 7),\n end: new Date(2015, 4, 10),\n group: \"IndyCar\",\n className: \"openwheel\",\n content: \"Grand Prix of Indianapolis\",\n id: \"756@motocal.net\"\n },\n {\n start: new Date(2015, 4, 8),\n end: new Date(2015, 4, 11),\n group: \"F1\",\n className: \"openwheel\",\n content: \"Spain\",\n id: \"634@motocal.net\"\n },\n {\n start: new Date(2015, 4, 8),\n end: new Date(2015, 4, 11),\n group: \"SBK\",\n className: \"motorcycle\",\n content: \"Italy\",\n id: \"620@motocal.net\"\n },\n {\n start: new Date(2015, 4, 9),\n end: new Date(2015, 4, 10),\n group: \"Formula E\",\n className: \"openwheel\",\n content: \"Monaco\",\n id: \"536@motocal.net\"\n },\n {\n start: new Date(2015, 4, 9),\n end: new Date(2015, 4, 11),\n group: \"BTCC\",\n className: \"touringcar\",\n content: \"Rounds 7, 8 & 9\",\n id: \"583@motocal.net\"\n },\n {\n start: new Date(2015, 4, 10),\n end: new Date(2015, 4, 17),\n group: \"Roads\",\n className: \"motorcycle\",\n content: \"North West 200\",\n id: \"682@motocal.net\"\n },\n {\n start: new Date(2015, 4, 15),\n end: new Date(2015, 4, 17),\n group: \"WTCC\",\n className: \"touringcar\",\n content: \"Germany\",\n id: \"720@motocal.net\"\n },\n {\n start: new Date(2015, 4, 15),\n end: new Date(2015, 4, 18),\n group: \"WorldRX\",\n className: \"rally\",\n content: \"Belgium\",\n id: \"687@motocal.net\"\n },\n {\n start: new Date(2015, 4, 15),\n end: new Date(2015, 4, 18),\n group: \"V8SC\",\n className: \"touringcar\",\n content: \"Winton SuperSprint\",\n id: \"663@motocal.net\"\n },\n {\n start: new Date(2015, 4, 15),\n end: new Date(2015, 4, 18),\n group: \"MotoGP\",\n className: \"motorcycle\",\n content: \"France\",\n id: \"543@motocal.net\"\n },\n {\n start: new Date(2015, 4, 15),\n end: new Date(2015, 4, 18),\n group: \"MotoAmerica\",\n className: \"motorcycle\",\n content: \"VIR\",\n id: \"707@motocal.net\"\n },\n {\n start: new Date(2015, 4, 16),\n end: new Date(2015, 4, 17),\n group: \"SGP\",\n className: \"rally\",\n content: \"Tampere\",\n id: \"730@motocal.net\"\n },\n {\n start: new Date(2015, 4, 21),\n end: new Date(2015, 4, 25),\n group: \"WRC\",\n className: \"rally\",\n content: \"Rally de Portugal\",\n id: \"594@motocal.net\"\n },\n {\n start: new Date(2015, 4, 21),\n end: new Date(2015, 4, 25),\n group: \"F1\",\n className: \"openwheel\",\n content: \"Monaco\",\n id: \"635@motocal.net\"\n },\n {\n start: new Date(2015, 4, 22),\n end: new Date(2015, 4, 25),\n group: \"WorldRX\",\n className: \"rally\",\n content: \"Great Britain\",\n id: \"688@motocal.net\"\n },\n {\n start: new Date(2015, 4, 22),\n end: new Date(2015, 4, 25),\n group: \"SBK\",\n className: \"motorcycle\",\n content: \"UK\",\n id: \"621@motocal.net\"\n },\n {\n start: new Date(2015, 4, 22),\n end: new Date(2015, 4, 25),\n group: \"IndyCar\",\n className: \"openwheel\",\n content: \"Indianapolis 500\",\n id: \"757@motocal.net\"\n },\n {\n start: new Date(2015, 4, 23),\n end: new Date(2015, 4, 24),\n group: \"SGP\",\n className: \"rally\",\n content: \"Prague\",\n id: \"731@motocal.net\"\n },\n {\n start: new Date(2015, 4, 23),\n end: new Date(2015, 4, 24),\n group: \"Formula E\",\n className: \"openwheel\",\n content: \"Germany\",\n id: \"537@motocal.net\"\n },\n {\n start: new Date(2015, 4, 24),\n end: new Date(2015, 4, 25),\n group: \"WSR\",\n className: \"openwheel\",\n content: \"Monaco\",\n id: \"743@motocal.net\"\n },\n {\n start: new Date(2015, 4, 29),\n end: new Date(2015, 5, 1),\n group: \"MotoAmerica\",\n className: \"motorcycle\",\n content: \"Road America\",\n id: \"708@motocal.net\"\n },\n {\n start: new Date(2015, 4, 29),\n end: new Date(2015, 5, 1),\n group: \"IndyCar\",\n className: \"openwheel\",\n content: \"Dual in Detroit\",\n id: \"758@motocal.net\"\n },\n {\n start: new Date(2015, 4, 29),\n end: new Date(2015, 5, 1),\n group: \"MotoGP\",\n className: \"motorcycle\",\n content: \"Italy\",\n id: \"562@motocal.net\"\n },\n {\n start: new Date(2015, 4, 29),\n end: new Date(2015, 5, 1),\n group: \"DTM\",\n className: \"touringcar\",\n content: \"Lausitzring\",\n id: \"651@motocal.net\"\n },\n {\n start: new Date(2015, 4, 30),\n end: new Date(2015, 5, 13),\n group: \"Roads\",\n className: \"motorcycle\",\n content: \"Isle of Man TT\",\n id: \"683@motocal.net\"\n },\n {\n start: new Date(2015, 4, 30),\n end: new Date(2015, 5, 1),\n group: \"WSR\",\n className: \"openwheel\",\n content: \"Belgium\",\n id: \"745@motocal.net\"\n },\n {\n start: new Date(2015, 5, 4),\n end: new Date(2015, 5, 7),\n group: \"IndyCar\",\n className: \"openwheel\",\n content: \"Firestone 600\",\n id: \"759@motocal.net\"\n },\n {\n start: new Date(2015, 5, 5),\n end: new Date(2015, 5, 8),\n group: \"SBK\",\n className: \"motorcycle\",\n content: \"Portugal\",\n id: \"622@motocal.net\"\n },\n {\n start: new Date(2015, 5, 5),\n end: new Date(2015, 5, 8),\n group: \"F1\",\n className: \"openwheel\",\n content: \"Canada\",\n id: \"636@motocal.net\"\n },\n {\n start: new Date(2015, 5, 5),\n end: new Date(2015, 5, 8),\n group: \"WTCC\",\n className: \"touringcar\",\n content: \"Russia\",\n id: \"721@motocal.net\"\n },\n {\n start: new Date(2015, 5, 6),\n end: new Date(2015, 5, 7),\n group: \"Formula E\",\n className: \"openwheel\",\n content: \"Russia\",\n id: \"716@motocal.net\"\n },\n {\n start: new Date(2015, 5, 6),\n end: new Date(2015, 5, 8),\n group: \"BTCC\",\n className: \"touringcar\",\n content: \"Rounds 10, 11 & 12\",\n id: \"584@motocal.net\"\n },\n {\n start: new Date(2015, 5, 11),\n end: new Date(2015, 5, 15),\n group: \"WRC\",\n className: \"rally\",\n content: \"Rally d'Italia Sardegna\",\n id: \"596@motocal.net\"\n },\n {\n start: new Date(2015, 5, 12),\n end: new Date(2015, 5, 15),\n group: \"MotoGP\",\n className: \"motorcycle\",\n content: \"Catalunya\",\n id: \"545@motocal.net\"\n },\n {\n start: new Date(2015, 5, 12),\n end: new Date(2015, 5, 15),\n group: \"IndyCar\",\n className: \"openwheel\",\n content: \"Indy Toronto\",\n id: \"760@motocal.net\"\n },\n {\n start: new Date(2015, 5, 12),\n end: new Date(2015, 5, 15),\n group: \"MotoAmerica\",\n className: \"motorcycle\",\n content: \"Barber\",\n id: \"709@motocal.net\"\n },\n {\n start: new Date(2015, 5, 13),\n end: new Date(2015, 5, 15),\n group: \"WSR\",\n className: \"openwheel\",\n content: \"Hungary\",\n id: \"746@motocal.net\"\n },\n {\n start: new Date(2015, 5, 13),\n end: new Date(2015, 5, 15),\n group: \"WEC\",\n className: \"endurance\",\n content: \"24 Heures du Mans\",\n id: \"676@motocal.net\"\n },\n {\n start: new Date(2015, 5, 19),\n end: new Date(2015, 5, 22),\n group: \"V8SC\",\n className: \"touringcar\",\n content: \"Skycity Triple Crown\",\n id: \"664@motocal.net\"\n },\n {\n start: new Date(2015, 5, 19),\n end: new Date(2015, 5, 22),\n group: \"WTCC\",\n className: \"touringcar\",\n content: \"Slovakia\",\n id: \"722@motocal.net\"\n },\n {\n start: new Date(2015, 5, 19),\n end: new Date(2015, 5, 22),\n group: \"SBK\",\n className: \"motorcycle\",\n content: \"Riviera di Rimini\",\n id: \"623@motocal.net\"\n },\n {\n start: new Date(2015, 5, 19),\n end: new Date(2015, 5, 22),\n group: \"BSB\",\n className: \"motorcycle\",\n content: \"Round 4\",\n id: \"607@motocal.net\"\n },\n {\n start: new Date(2015, 5, 19),\n end: new Date(2015, 5, 22),\n group: \"F1\",\n className: \"openwheel\",\n content: \"Austria\",\n id: \"637@motocal.net\"\n },\n {\n start: new Date(2015, 5, 19),\n end: new Date(2015, 5, 22),\n group: \"WorldRX\",\n className: \"rally\",\n content: \"Germany\",\n id: \"689@motocal.net\"\n },\n {\n start: new Date(2015, 5, 25),\n end: new Date(2015, 5, 28),\n group: \"MotoGP\",\n className: \"motorcycle\",\n content: \"Netherlands\",\n id: \"546@motocal.net\"\n },\n {\n start: new Date(2015, 5, 25),\n end: new Date(2015, 5, 28),\n group: \"IndyCar\",\n className: \"openwheel\",\n content: \"MAVTV 500\",\n id: \"761@motocal.net\"\n },\n {\n start: new Date(2015, 5, 26),\n end: new Date(2015, 5, 29),\n group: \"WTCC\",\n className: \"touringcar\",\n content: \"France\",\n id: \"723@motocal.net\"\n },\n {\n start: new Date(2015, 5, 26),\n end: new Date(2015, 5, 29),\n group: \"DTM\",\n className: \"touringcar\",\n content: \"Norisring\",\n id: \"652@motocal.net\"\n },\n {\n start: new Date(2015, 5, 26),\n end: new Date(2015, 5, 29),\n group: \"MotoAmerica\",\n className: \"motorcycle\",\n content: \"Miller\",\n id: \"710@motocal.net\"\n },\n {\n start: new Date(2015, 5, 27),\n end: new Date(2015, 5, 29),\n group: \"BTCC\",\n className: \"touringcar\",\n content: \"Rounds 13, 14 & 15\",\n id: \"585@motocal.net\"\n },\n {\n start: new Date(2015, 5, 27),\n end: new Date(2015, 5, 29),\n group: \"Formula E\",\n className: \"openwheel\",\n content: \"United Kingdom\",\n id: \"538@motocal.net\"\n },\n {\n start: new Date(2015, 6, 2),\n end: new Date(2015, 6, 6),\n group: \"WRC\",\n className: \"rally\",\n content: \"Rally Poland\",\n id: \"597@motocal.net\"\n },\n {\n start: new Date(2015, 6, 3),\n end: new Date(2015, 6, 6),\n group: \"F1\",\n className: \"openwheel\",\n content: \"Britain\",\n id: \"638@motocal.net\"\n },\n {\n start: new Date(2015, 6, 3),\n end: new Date(2015, 6, 6),\n group: \"WorldRX\",\n className: \"rally\",\n content: \"Sweden\",\n id: \"690@motocal.net\"\n },\n {\n start: new Date(2015, 6, 3),\n end: new Date(2015, 6, 6),\n group: \"BSB\",\n className: \"motorcycle\",\n content: \"Round 5\",\n id: \"608@motocal.net\"\n },\n {\n start: new Date(2015, 6, 4),\n end: new Date(2015, 6, 5),\n group: \"SGP\",\n className: \"rally\",\n content: \"Cardiff\",\n id: \"732@motocal.net\"\n },\n {\n start: new Date(2015, 6, 6),\n end: new Date(2015, 6, 10),\n group: \"Roads\",\n className: \"motorcycle\",\n content: \"Southern 100\",\n id: \"714@motocal.net\"\n },\n {\n start: new Date(2015, 6, 10),\n end: new Date(2015, 6, 13),\n group: \"MotoGP\",\n className: \"motorcycle\",\n content: \"Germany\",\n id: \"565@motocal.net\"\n },\n {\n start: new Date(2015, 6, 10),\n end: new Date(2015, 6, 13),\n group: \"DTM\",\n className: \"touringcar\",\n content: \"Zandvoort\",\n id: \"653@motocal.net\"\n },\n {\n start: new Date(2015, 6, 10),\n end: new Date(2015, 6, 13),\n group: \"IndyCar\",\n className: \"openwheel\",\n content: \"Wisconsin 250\",\n id: \"763@motocal.net\"\n },\n {\n start: new Date(2015, 6, 10),\n end: new Date(2015, 6, 13),\n group: \"V8SC\",\n className: \"touringcar\",\n content: \"Townsville 400\",\n id: \"665@motocal.net\"\n },\n {\n start: new Date(2015, 6, 10),\n end: new Date(2015, 6, 13),\n group: \"WTCC\",\n className: \"touringcar\",\n content: \"Portugal\",\n id: \"724@motocal.net\"\n },\n {\n start: new Date(2015, 6, 11),\n end: new Date(2015, 6, 13),\n group: \"WSR\",\n className: \"openwheel\",\n content: \"Austria\",\n id: \"747@motocal.net\"\n },\n {\n start: new Date(2015, 6, 16),\n end: new Date(2015, 6, 19),\n group: \"IndyCar\",\n className: \"openwheel\",\n content: \"Iowa Corn Indy 300\",\n id: \"764@motocal.net\"\n },\n {\n start: new Date(2015, 6, 17),\n end: new Date(2015, 6, 20),\n group: \"SBK\",\n className: \"motorcycle\",\n content: \"USA\",\n id: \"625@motocal.net\"\n },\n {\n start: new Date(2015, 6, 17),\n end: new Date(2015, 6, 20),\n group: \"BSB\",\n className: \"motorcycle\",\n content: \"Round 6\",\n id: \"609@motocal.net\"\n },\n {\n start: new Date(2015, 6, 17),\n end: new Date(2015, 6, 20),\n group: \"MotoAmerica\",\n className: \"motorcycle\",\n content: \"Mazda Raceway\",\n id: \"711@motocal.net\"\n },\n {\n start: new Date(2015, 6, 18),\n end: new Date(2015, 6, 19),\n group: \"SGP\",\n className: \"rally\",\n content: \"Daugavpils\",\n id: \"733@motocal.net\"\n },\n {\n start: new Date(2015, 6, 24),\n end: new Date(2015, 6, 27),\n group: \"F1\",\n className: \"openwheel\",\n content: \"Hungary\",\n id: \"640@motocal.net\"\n },\n {\n start: new Date(2015, 6, 25),\n end: new Date(2015, 6, 26),\n group: \"SGP\",\n className: \"rally\",\n content: \"Målilla\",\n id: \"734@motocal.net\"\n },\n {\n start: new Date(2015, 6, 26),\n end: new Date(2015, 6, 27),\n group: \"EWC\",\n className: \"endurance\",\n content: \"Suzuka 8 Hours\",\n id: \"702@motocal.net\"\n },\n {\n start: new Date(2015, 6, 30),\n end: new Date(2015, 7, 3),\n group: \"WRC\",\n className: \"rally\",\n content: \"Rally Finland\",\n id: \"598@motocal.net\"\n },\n {\n start: new Date(2015, 6, 31),\n end: new Date(2015, 7, 3),\n group: \"BSB\",\n className: \"motorcycle\",\n content: \"Round 7\",\n id: \"610@motocal.net\"\n },\n {\n start: new Date(2015, 6, 31),\n end: new Date(2015, 7, 3),\n group: \"V8SC\",\n className: \"touringcar\",\n content: \"Ipswich SuperSprint\",\n id: \"666@motocal.net\"\n },\n {\n start: new Date(2015, 6, 31),\n end: new Date(2015, 7, 3),\n group: \"DTM\",\n className: \"touringcar\",\n content: \"Spielberg\",\n id: \"654@motocal.net\"\n },\n {\n start: new Date(2015, 6, 31),\n end: new Date(2015, 7, 3),\n group: \"IndyCar\",\n className: \"openwheel\",\n content: \"Honda Indy 200\",\n id: \"765@motocal.net\"\n },\n {\n start: new Date(2015, 6, 31),\n end: new Date(2015, 7, 3),\n group: \"SBK\",\n className: \"motorcycle\",\n content: \"Malaysia\",\n id: \"626@motocal.net\"\n },\n {\n start: new Date(2015, 7, 3),\n end: new Date(2015, 7, 9),\n group: \"Roads\",\n className: \"motorcycle\",\n content: \"Ulster Grand Prix\",\n id: \"684@motocal.net\"\n },\n {\n start: new Date(2015, 7, 7),\n end: new Date(2015, 7, 9),\n group: \"WorldRX\",\n className: \"rally\",\n content: \"Canada\",\n id: \"691@motocal.net\"\n },\n {\n start: new Date(2015, 7, 7),\n end: new Date(2015, 7, 10),\n group: \"MotoAmerica\",\n className: \"motorcycle\",\n content: \"INDY\",\n id: \"712@motocal.net\"\n },\n {\n start: new Date(2015, 7, 7),\n end: new Date(2015, 7, 10),\n group: \"MotoGP\",\n className: \"motorcycle\",\n content: \"Indianapolis\",\n id: \"548@motocal.net\"\n },\n {\n start: new Date(2015, 7, 8),\n end: new Date(2015, 7, 10),\n group: \"BTCC\",\n className: \"touringcar\",\n content: \"Rounds 16, 17 & 18\",\n id: \"586@motocal.net\"\n },\n {\n start: new Date(2015, 7, 8),\n end: new Date(2015, 7, 9),\n group: \"SGP\",\n className: \"rally\",\n content: \"Horsens\",\n id: \"735@motocal.net\"\n },\n {\n start: new Date(2015, 7, 10),\n end: new Date(2015, 7, 12),\n group: \"Formula E\",\n className: \"openwheel\",\n content: \"Pre-season test 1\",\n id: \"769@motocal.net\"\n },\n {\n start: new Date(2015, 7, 14),\n end: new Date(2015, 7, 17),\n group: \"MotoGP\",\n className: \"motorcycle\",\n content: \"Czech Republic\",\n id: \"549@motocal.net\"\n },\n {\n start: new Date(2015, 7, 17),\n end: new Date(2015, 7, 19),\n group: \"Formula E\",\n className: \"openwheel\",\n content: \"Pre-season test 2\",\n id: \"770@motocal.net\"\n },\n {\n start: new Date(2015, 7, 20),\n end: new Date(2015, 7, 24),\n group: \"WRC\",\n className: \"rally\",\n content: \"Rallye Deutschland\",\n id: \"599@motocal.net\"\n },\n {\n start: new Date(2015, 7, 21),\n end: new Date(2015, 7, 24),\n group: \"IndyCar\",\n className: \"openwheel\",\n content: \"Pocono IndyCar 500\",\n id: \"766@motocal.net\"\n },\n {\n start: new Date(2015, 7, 21),\n end: new Date(2015, 7, 24),\n group: \"BSB\",\n className: \"motorcycle\",\n content: \"Round 8\",\n id: \"611@motocal.net\"\n },\n {\n start: new Date(2015, 7, 21),\n end: new Date(2015, 7, 24),\n group: \"WorldRX\",\n className: \"rally\",\n content: \"Norway\",\n id: \"692@motocal.net\"\n },\n {\n start: new Date(2015, 7, 21),\n end: new Date(2015, 7, 24),\n group: \"F1\",\n className: \"openwheel\",\n content: \"Belgium\",\n id: \"641@motocal.net\"\n },\n {\n start: new Date(2015, 7, 21),\n end: new Date(2015, 7, 24),\n group: \"V8SC\",\n className: \"touringcar\",\n content: \"Sydney Motorsport Park SuperSprint\",\n id: \"667@motocal.net\"\n },\n {\n start: new Date(2015, 7, 22),\n end: new Date(2015, 7, 23),\n group: \"EWC\",\n className: \"endurance\",\n content: \"Oschersleben 8 Hours\",\n id: \"703@motocal.net\"\n },\n {\n start: new Date(2015, 7, 22),\n end: new Date(2015, 8, 5),\n group: \"Roads\",\n className: \"motorcycle\",\n content: \"Classic TT & Manx GP\",\n id: \"715@motocal.net\"\n },\n {\n start: new Date(2015, 7, 22),\n end: new Date(2015, 7, 24),\n group: \"BTCC\",\n className: \"touringcar\",\n content: \"Rounds 19, 20 & 21\",\n id: \"587@motocal.net\"\n },\n {\n start: new Date(2015, 7, 24),\n end: new Date(2015, 7, 26),\n group: \"Formula E\",\n className: \"openwheel\",\n content: \"Pre-season test 3\",\n id: \"771@motocal.net\"\n },\n {\n start: new Date(2015, 7, 28),\n end: new Date(2015, 7, 31),\n group: \"DTM\",\n className: \"touringcar\",\n content: \"Moscow Raceway\",\n id: \"655@motocal.net\"\n },\n {\n start: new Date(2015, 7, 28),\n end: new Date(2015, 7, 31),\n group: \"IndyCar\",\n className: \"openwheel\",\n content: \"Grand Prix of Sonoma\",\n id: \"767@motocal.net\"\n },\n {\n start: new Date(2015, 7, 28),\n end: new Date(2015, 7, 31),\n group: \"MotoGP\",\n className: \"motorcycle\",\n content: \"Great Britain\",\n id: \"568@motocal.net\"\n },\n {\n start: new Date(2015, 7, 29),\n end: new Date(2015, 7, 30),\n group: \"SGP\",\n className: \"rally\",\n content: \"Gorzów\",\n id: \"737@motocal.net\"\n },\n {\n start: new Date(2015, 7, 30),\n end: new Date(2015, 7, 31),\n group: \"WEC\",\n className: \"endurance\",\n content: \"6 Hours of N&uuml;rburgring\",\n id: \"677@motocal.net\"\n },\n {\n start: new Date(2015, 8, 4),\n end: new Date(2015, 8, 7),\n group: \"BSB\",\n className: \"motorcycle\",\n content: \"Round 9\",\n id: \"612@motocal.net\"\n },\n {\n start: new Date(2015, 8, 4),\n end: new Date(2015, 8, 7),\n group: \"WorldRX\",\n className: \"rally\",\n content: \"France\",\n id: \"693@motocal.net\"\n },\n {\n start: new Date(2015, 8, 4),\n end: new Date(2015, 8, 7),\n group: \"F1\",\n className: \"openwheel\",\n content: \"Italy\",\n id: \"642@motocal.net\"\n },\n {\n start: new Date(2015, 8, 5),\n end: new Date(2015, 8, 7),\n group: \"WSR\",\n className: \"openwheel\",\n content: \"United Kingdom\",\n id: \"748@motocal.net\"\n },\n {\n start: new Date(2015, 8, 5),\n end: new Date(2015, 8, 7),\n group: \"BTCC\",\n className: \"touringcar\",\n content: \"Rounds 22, 23 & 24\",\n id: \"588@motocal.net\"\n },\n {\n start: new Date(2015, 8, 10),\n end: new Date(2015, 8, 14),\n group: \"WRC\",\n className: \"rally\",\n content: \"Rally Australia\",\n id: \"600@motocal.net\"\n },\n {\n start: new Date(2015, 8, 11),\n end: new Date(2015, 8, 14),\n group: \"V8SC\",\n className: \"touringcar\",\n content: \"Sandown 500\",\n id: \"668@motocal.net\"\n },\n {\n start: new Date(2015, 8, 11),\n end: new Date(2015, 8, 14),\n group: \"MotoAmerica\",\n className: \"motorcycle\",\n content: \"New Jersey\",\n id: \"713@motocal.net\"\n },\n {\n start: new Date(2015, 8, 11),\n end: new Date(2015, 8, 14),\n group: \"MotoGP\",\n className: \"motorcycle\",\n content: \"San Marino\",\n id: \"551@motocal.net\"\n },\n {\n start: new Date(2015, 8, 11),\n end: new Date(2015, 8, 14),\n group: \"WTCC\",\n className: \"touringcar\",\n content: \"Japan\",\n id: \"725@motocal.net\"\n },\n {\n start: new Date(2015, 8, 11),\n end: new Date(2015, 8, 14),\n group: \"DTM\",\n className: \"touringcar\",\n content: \"Oschersleben\",\n id: \"656@motocal.net\"\n },\n {\n start: new Date(2015, 8, 12),\n end: new Date(2015, 8, 14),\n group: \"WSR\",\n className: \"openwheel\",\n content: \"Germany\",\n id: \"749@motocal.net\"\n },\n {\n start: new Date(2015, 8, 12),\n end: new Date(2015, 8, 13),\n group: \"SGP\",\n className: \"rally\",\n content: \"Krško\",\n id: \"738@motocal.net\"\n },\n {\n start: new Date(2015, 8, 18),\n end: new Date(2015, 8, 21),\n group: \"SBK\",\n className: \"motorcycle\",\n content: \"Spain\",\n id: \"627@motocal.net\"\n },\n {\n start: new Date(2015, 8, 18),\n end: new Date(2015, 8, 21),\n group: \"BSB\",\n className: \"motorcycle\",\n content: \"Round 10\",\n id: \"613@motocal.net\"\n },\n {\n start: new Date(2015, 8, 18),\n end: new Date(2015, 8, 21),\n group: \"F1\",\n className: \"openwheel\",\n content: \"Singapore\",\n id: \"643@motocal.net\"\n },\n {\n start: new Date(2015, 8, 18),\n end: new Date(2015, 8, 21),\n group: \"WorldRX\",\n className: \"rally\",\n content: \"Barcelona\",\n id: \"694@motocal.net\"\n },\n {\n start: new Date(2015, 8, 19),\n end: new Date(2015, 8, 20),\n group: \"WEC\",\n className: \"endurance\",\n content: \"6 Hours of Circuit of the Americas\",\n id: \"678@motocal.net\"\n },\n {\n start: new Date(2015, 8, 19),\n end: new Date(2015, 8, 21),\n group: \"EWC\",\n className: \"endurance\",\n content: \"Bol d’Or\",\n id: \"704@motocal.net\"\n },\n {\n start: new Date(2015, 8, 25),\n end: new Date(2015, 8, 28),\n group: \"MotoGP\",\n className: \"motorcycle\",\n content: \"Aragon\",\n id: \"570@motocal.net\"\n },\n {\n start: new Date(2015, 8, 25),\n end: new Date(2015, 8, 28),\n group: \"DTM\",\n className: \"touringcar\",\n content: \"N&uuml;rburgring\",\n id: \"657@motocal.net\"\n },\n {\n start: new Date(2015, 8, 25),\n end: new Date(2015, 8, 28),\n group: \"WTCC\",\n className: \"touringcar\",\n content: \"China\",\n id: \"726@motocal.net\"\n },\n {\n start: new Date(2015, 8, 25),\n end: new Date(2015, 8, 28),\n group: \"F1\",\n className: \"openwheel\",\n content: \"Japan\",\n id: \"644@motocal.net\"\n },\n {\n start: new Date(2015, 8, 26),\n end: new Date(2015, 8, 28),\n group: \"BTCC\",\n className: \"touringcar\",\n content: \"Rounds 25, 26 & 27\",\n id: \"589@motocal.net\"\n },\n {\n start: new Date(2015, 8, 26),\n end: new Date(2015, 8, 27),\n group: \"SGP\",\n className: \"rally\",\n content: \"Stockholm\",\n id: \"739@motocal.net\"\n },\n {\n start: new Date(2015, 8, 26),\n end: new Date(2015, 8, 28),\n group: \"WSR\",\n className: \"openwheel\",\n content: \"France\",\n id: \"750@motocal.net\"\n },\n {\n start: new Date(2015, 9, 1),\n end: new Date(2015, 9, 5),\n group: \"WRC\",\n className: \"rally\",\n content: \"Rallye de France\",\n id: \"601@motocal.net\"\n },\n {\n start: new Date(2015, 9, 2),\n end: new Date(2015, 9, 5),\n group: \"SBK\",\n className: \"motorcycle\",\n content: \"France\",\n id: \"628@motocal.net\"\n },\n {\n start: new Date(2015, 9, 2),\n end: new Date(2015, 9, 5),\n group: \"BSB\",\n className: \"motorcycle\",\n content: \"Round 11\",\n id: \"614@motocal.net\"\n },\n {\n start: new Date(2015, 9, 2),\n end: new Date(2015, 9, 5),\n group: \"WorldRX\",\n className: \"rally\",\n content: \"Turkey\",\n id: \"695@motocal.net\"\n },\n {\n start: new Date(2015, 9, 3),\n end: new Date(2015, 9, 4),\n group: \"SGP\",\n className: \"rally\",\n content: \"Toruń\",\n id: \"740@motocal.net\"\n },\n {\n start: new Date(2015, 9, 8),\n end: new Date(2015, 9, 12),\n group: \"V8SC\",\n className: \"touringcar\",\n content: \"Bathurst 1000\",\n id: \"669@motocal.net\"\n },\n {\n start: new Date(2015, 9, 9),\n end: new Date(2015, 9, 12),\n group: \"F1\",\n className: \"openwheel\",\n content: \"Russia\",\n id: \"645@motocal.net\"\n },\n {\n start: new Date(2015, 9, 9),\n end: new Date(2015, 9, 12),\n group: \"MotoGP\",\n className: \"motorcycle\",\n content: \"Japan\",\n id: \"553@motocal.net\"\n },\n {\n start: new Date(2015, 9, 10),\n end: new Date(2015, 9, 12),\n group: \"BTCC\",\n className: \"touringcar\",\n content: \"Rounds 28, 29 & 30\",\n id: \"590@motocal.net\"\n },\n {\n start: new Date(2015, 9, 11),\n end: new Date(2015, 9, 12),\n group: \"WEC\",\n className: \"endurance\",\n content: \"6 Hours of Fuji\",\n id: \"679@motocal.net\"\n },\n {\n start: new Date(2015, 9, 16),\n end: new Date(2015, 9, 19),\n group: \"WorldRX\",\n className: \"rally\",\n content: \"Italy\",\n id: \"696@motocal.net\"\n },\n {\n start: new Date(2015, 9, 16),\n end: new Date(2015, 9, 19),\n group: \"MotoGP\",\n className: \"motorcycle\",\n content: \"Australia\",\n id: \"572@motocal.net\"\n },\n {\n start: new Date(2015, 9, 16),\n end: new Date(2015, 9, 19),\n group: \"DTM\",\n className: \"touringcar\",\n content: \"Hockenheim\",\n id: \"658@motocal.net\"\n },\n {\n start: new Date(2015, 9, 16),\n end: new Date(2015, 9, 19),\n group: \"BSB\",\n className: \"motorcycle\",\n content: \"Round 12\",\n id: \"615@motocal.net\"\n },\n {\n start: new Date(2015, 9, 16),\n end: new Date(2015, 9, 19),\n group: \"SBK\",\n className: \"motorcycle\",\n content: \"Qatar\",\n id: \"629@motocal.net\"\n },\n {\n start: new Date(2015, 9, 17),\n end: new Date(2015, 9, 19),\n group: \"WSR\",\n className: \"openwheel\",\n content: \"Spain\",\n id: \"751@motocal.net\"\n },\n {\n start: new Date(2015, 9, 22),\n end: new Date(2015, 9, 26),\n group: \"WRC\",\n className: \"rally\",\n content: \"Rally de Espana\",\n id: \"602@motocal.net\"\n },\n {\n start: new Date(2015, 9, 23),\n end: new Date(2015, 9, 26),\n group: \"V8SC\",\n className: \"touringcar\",\n content: \"Gold Coast 600\",\n id: \"670@motocal.net\"\n },\n {\n start: new Date(2015, 9, 23),\n end: new Date(2015, 9, 26),\n group: \"MotoGP\",\n className: \"motorcycle\",\n content: \"Malaysia\",\n id: \"573@motocal.net\"\n },\n {\n start: new Date(2015, 9, 23),\n end: new Date(2015, 9, 26),\n group: \"F1\",\n className: \"openwheel\",\n content: \"United States\",\n id: \"646@motocal.net\"\n },\n {\n start: new Date(2015, 9, 24),\n end: new Date(2015, 9, 25),\n group: \"SGP\",\n className: \"rally\",\n content: \"Melbourne\",\n id: \"741@motocal.net\"\n },\n {\n start: new Date(2015, 9, 30),\n end: new Date(2015, 10, 2),\n group: \"F1\",\n className: \"openwheel\",\n content: \"Mexico\",\n id: \"647@motocal.net\"\n },\n {\n start: new Date(2015, 9, 30),\n end: new Date(2015, 10, 2),\n group: \"WTCC\",\n className: \"touringcar\",\n content: \"Thailand\",\n id: \"727@motocal.net\"\n },\n {\n start: new Date(2015, 10, 1),\n end: new Date(2015, 10, 2),\n group: \"WEC\",\n className: \"endurance\",\n content: \"6 Hours of Shanghai\",\n id: \"680@motocal.net\"\n },\n {\n start: new Date(2015, 10, 6),\n end: new Date(2015, 10, 9),\n group: \"MotoGP\",\n className: \"motorcycle\",\n content: \"Valencia\",\n id: \"556@motocal.net\"\n },\n {\n start: new Date(2015, 10, 6),\n end: new Date(2015, 10, 9),\n group: \"V8SC\",\n className: \"touringcar\",\n content: \"ITM 500 Auckland\",\n id: \"671@motocal.net\"\n },\n {\n start: new Date(2015, 10, 12),\n end: new Date(2015, 10, 16),\n group: \"WRC\",\n className: \"rally\",\n content: \"Wales Rally GB\",\n id: \"603@motocal.net\"\n },\n {\n start: new Date(2015, 10, 13),\n end: new Date(2015, 10, 16),\n group: \"F1\",\n className: \"openwheel\",\n content: \"Brazil\",\n id: \"648@motocal.net\"\n },\n {\n start: new Date(2015, 10, 19),\n end: new Date(2015, 10, 23),\n group: \"Roads\",\n className: \"motorcycle\",\n content: \"Macau Grand Prix\",\n id: \"685@motocal.net\"\n },\n {\n start: new Date(2015, 10, 20),\n end: new Date(2015, 10, 23),\n group: \"WTCC\",\n className: \"touringcar\",\n content: \"Qatar\",\n id: \"728@motocal.net\"\n },\n {\n start: new Date(2015, 10, 20),\n end: new Date(2015, 10, 23),\n group: \"V8SC\",\n className: \"touringcar\",\n content: \"Phillip Island SuperSprint\",\n id: \"672@motocal.net\"\n },\n {\n start: new Date(2015, 10, 21),\n end: new Date(2015, 10, 22),\n group: \"WEC\",\n className: \"endurance\",\n content: \"6 Hours of Bahrain\",\n id: \"681@motocal.net\"\n },\n {\n start: new Date(2015, 10, 27),\n end: new Date(2015, 10, 30),\n group: \"WorldRX\",\n className: \"rally\",\n content: \"Argentina\",\n id: \"700@motocal.net\"\n },\n {\n start: new Date(2015, 10, 27),\n end: new Date(2015, 10, 30),\n group: \"F1\",\n className: \"openwheel\",\n content: \"Abu Dhabi\",\n id: \"649@motocal.net\"\n },\n {\n start: new Date(2015, 11, 4),\n end: new Date(2015, 11, 7),\n group: \"V8SC\",\n className: \"touringcar\",\n content: \"Sydney 500\",\n id: \"673@motocal.net\"\n },\n {\n start: new Date(2015, 2, 9),\n end: new Date(2015, 2, 11),\n group: \"GP2\",\n className: \"openwheel\",\n content: \"Yas Marina Test\",\n id: \"1@gp2series.com\"\n },\n {\n start: new Date(2015, 3, 1),\n end: new Date(2015, 3, 3),\n group: \"GP2\",\n className: \"openwheel\",\n content: \"Sakhir Test\",\n id: \"2@gp2series.com\"\n },\n {\n start: new Date(2015, 3, 17),\n end: new Date(2015, 3, 19),\n group: \"GP2\",\n className: \"openwheel\",\n content: \"Sakhir, Bahrain\",\n id: \"3@gp2series.com\"\n },\n {\n start: new Date(2015, 4, 8),\n end: new Date(2015, 4, 10),\n group: \"GP2\",\n className: \"openwheel\",\n content: \"Barcelona, Spain\",\n id: \"4@gp2series.com\"\n },\n {\n start: new Date(2015, 4, 21),\n end: new Date(2015, 4, 23),\n group: \"GP2\",\n className: \"openwheel\",\n content: \"Monte Carlo, Monaco\",\n id: \"5@gp2series.com\"\n },\n {\n start: new Date(2015, 5, 19),\n end: new Date(2015, 5, 21),\n group: \"GP2\",\n className: \"openwheel\",\n content: \"Spielber, Austria\",\n id: \"6@gp2series.com\"\n },\n {\n start: new Date(2015, 6, 3),\n end: new Date(2015, 6, 5),\n group: \"GP2\",\n className: \"openwheel\",\n content: \"Silverstone, Great-Britain\",\n id: \"7@gp2series.com\"\n },\n {\n start: new Date(2015, 6, 24),\n end: new Date(2015, 6, 26),\n group: \"GP2\",\n className: \"openwheel\",\n content: \"Budapest, Hungary\",\n id: \"8@gp2series.com\"\n },\n {\n start: new Date(2015, 7, 21),\n end: new Date(2015, 7, 23),\n group: \"GP2\",\n className: \"openwheel\",\n content: \"Spa-Francorchamps, Belgium\",\n id: \"9@gp2series.com\"\n },\n {\n start: new Date(2015, 8, 4),\n end: new Date(2015, 8, 6),\n group: \"GP2\",\n className: \"openwheel\",\n content: \"Monza, Italy\",\n id: \"10@gp2series.com\"\n },\n {\n start: new Date(2015, 9, 9),\n end: new Date(2015, 9, 11),\n group: \"GP2\",\n className: \"openwheel\",\n content: \"Sochi, Russia\",\n id: \"11@gp2series.com\"\n },\n {\n start: new Date(2015, 10, 27),\n end: new Date(2015, 10, 29),\n group: \"GP2\",\n className: \"openwheel\",\n content: \"Yas Marina, UAE\",\n id: \"12@gp2series.com\"\n }\n]);\n\n// create visualization\nvar container = document.getElementById(\"visualization\");\nvar options = {\n // option groupOrder can be a property name or a sort function\n // the sort function must compare two groups and return a value\n // > 0 when a > b\n // < 0 when a < b\n // 0 when a == b\n groupOrder: function(a, b) {\n return a.value - b.value;\n },\n groupOrderSwap: function(a, b, groups) {\n var v = a.value;\n a.value = b.value;\n b.value = v;\n },\n groupTemplate: function(group) {\n var container = document.createElement(\"div\");\n var label = document.createElement(\"span\");\n label.innerHTML = group.content + \" \";\n container.insertAdjacentElement(\"afterBegin\", label);\n var hide = document.createElement(\"button\");\n hide.innerHTML = \"hide\";\n hide.style.fontSize = \"small\";\n hide.addEventListener(\"click\", function() {\n groups.update({ id: group.id, visible: false });\n });\n container.insertAdjacentElement(\"beforeEnd\", hide);\n return container;\n },\n orientation: \"both\",\n editable: true,\n groupEditable: true,\n start: new Date(2015, 6, 1),\n end: new Date(2015, 10, 1)\n};\n\nvar timeline = new vis.Timeline(container);\ntimeline.setOptions(options);\ntimeline.setGroups(groups);\ntimeline.setItems(items);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Editable Groups"}'
/><input
type="hidden"
name="js"
value='// https://motocal.com/
var groups = new vis.DataSet([
{ content: "Formula E", id: "Formula E", value: 1, className: "openwheel" },
{ content: "WRC", id: "WRC", value: 2, className: "rally" },
{ content: "MotoGP", id: "MotoGP", value: 3, className: "motorcycle" },
{ content: "V8SC", id: "V8SC", value: 4, className: "touringcars" },
{ content: "WTCC", id: "WTCC", value: 5, className: "touringcars" },
{ content: "F1", id: "F1", value: 6, className: "openwheel" },
{ content: "SBK", id: "SBK", value: 7, className: "motorcycle" },
{ content: "IndyCar", id: "IndyCar", value: 8, className: "openwheel" },
{
content: "MotoAmerica",
id: "MotoAmerica",
value: 9,
className: "motorcycle"
},
{ content: "SGP", id: "SGP", value: 10, className: "rally" },
{ content: "EWC", id: "EWC", value: 11, className: "endurance" },
{ content: "BSB", id: "BSB", value: 12, className: "motorcycle" },
{ content: "DTM", id: "DTM", value: 13, className: "touringcars" },
{ content: "BTCC", id: "BTCC", value: 14, className: "touringcars" },
{ content: "WorldRX", id: "WorldRX", value: 15, className: "rally" },
{ content: "WSR", id: "WSR", value: 16, className: "openwheel" },
{ content: "Roads", id: "Roads", value: 17, className: "motorcycle" },
{ content: "WEC", id: "WEC", value: 18, className: "endurance" },
{ content: "GP2", id: "GP2", value: 19, className: "openwheel" }
]);
// function to make all groups visible again
function showAllGroups() {
groups.forEach(function(group) {
groups.update({ id: group.id, visible: true });
});
}
// create a dataset with items
// note that months are zero-based in the JavaScript Date object, so month 3 is April
var items = new vis.DataSet([
{
start: new Date(2015, 0, 10),
end: new Date(2015, 0, 11),
group: "Formula E",
className: "openwheel",
content: "Argentina",
id: "531@motocal.net"
},
{
start: new Date(2015, 0, 22),
end: new Date(2015, 0, 26),
group: "WRC",
className: "rally",
content: "Rallye Monte-Carlo",
id: "591@motocal.net"
},
{
start: new Date(2015, 1, 4),
end: new Date(2015, 1, 8),
group: "MotoGP",
className: "motorcycle",
content: "Sepang MotoGP Test 1",
id: "578@motocal.net"
},
{
start: new Date(2015, 1, 12),
end: new Date(2015, 1, 16),
group: "WRC",
className: "rally",
content: "Rally Sweden",
id: "592@motocal.net"
},
{
start: new Date(2015, 1, 20),
end: new Date(2015, 1, 23),
group: "SBK",
className: "motorcycle",
content: "Australia",
id: "616@motocal.net"
},
{
start: new Date(2015, 1, 23),
end: new Date(2015, 1, 27),
group: "MotoGP",
className: "motorcycle",
content: "Sepang MotoGP Test 2",
id: "579@motocal.net"
},
{
start: new Date(2015, 1, 26),
end: new Date(2015, 2, 2),
group: "V8SC",
className: "touringcar",
content: "Clipsal 500 Adelaide",
id: "659@motocal.net"
},
{
start: new Date(2015, 2, 5),
end: new Date(2015, 2, 9),
group: "WRC",
className: "rally",
content: "Rally Guanajuato Mexico",
id: "593@motocal.net"
},
{
start: new Date(2015, 2, 6),
end: new Date(2015, 2, 9),
group: "WTCC",
className: "touringcar",
content: "Argentina",
id: "717@motocal.net"
},
{
start: new Date(2015, 2, 12),
end: new Date(2015, 2, 16),
group: "V8SC",
className: "touringcar",
content: "Australian Grand Prix",
id: "660@motocal.net"
},
{
start: new Date(2015, 2, 13),
end: new Date(2015, 2, 16),
group: "F1",
className: "openwheel",
content: "Australia",
id: "630@motocal.net"
},
{
start: new Date(2015, 2, 14),
end: new Date(2015, 2, 15),
group: "Formula E",
className: "openwheel",
content: "Miami, USA",
id: "534@motocal.net"
},
{
start: new Date(2015, 2, 14),
end: new Date(2015, 2, 17),
group: "MotoGP",
className: "motorcycle",
content: "Qatar MotoGP Test",
id: "577@motocal.net"
},
{
start: new Date(2015, 2, 20),
end: new Date(2015, 2, 23),
group: "SBK",
className: "motorcycle",
content: "Thailand",
id: "617@motocal.net"
},
{
start: new Date(2015, 2, 27),
end: new Date(2015, 2, 30),
group: "F1",
className: "openwheel",
content: "Malaysia",
id: "631@motocal.net"
},
{
start: new Date(2015, 2, 27),
end: new Date(2015, 2, 30),
group: "V8SC",
className: "touringcar",
content: "Tasmania SuperSprint",
id: "661@motocal.net"
},
{
start: new Date(2015, 2, 27),
end: new Date(2015, 2, 30),
group: "IndyCar",
className: "openwheel",
content: "Grand Prix of St. Petersburg",
id: "752@motocal.net"
},
{
start: new Date(2015, 3, 4),
end: new Date(2015, 3, 7),
group: "BSB",
className: "motorcycle",
content: "Round 1",
id: "604@motocal.net"
},
{
start: new Date(2015, 3, 4),
end: new Date(2015, 3, 6),
group: "BTCC",
className: "touringcar",
content: "Rounds 1, 2 & 3",
id: "581@motocal.net"
},
{
start: new Date(2015, 3, 4),
end: new Date(2015, 3, 5),
group: "Formula E",
className: "openwheel",
content: "Long Beach, USA",
id: "535@motocal.net"
},
{
start: new Date(2015, 3, 10),
end: new Date(2015, 3, 13),
group: "IndyCar",
className: "openwheel",
content: "Indy Grand Prix of Louisiana",
id: "753@motocal.net"
},
{
start: new Date(2015, 3, 10),
end: new Date(2015, 3, 13),
group: "MotoAmerica",
className: "motorcycle",
content: "COTA",
id: "705@motocal.net"
},
{
start: new Date(2015, 3, 10),
end: new Date(2015, 3, 13),
group: "SBK",
className: "motorcycle",
content: "Aragon",
id: "618@motocal.net"
},
{
start: new Date(2015, 3, 10),
end: new Date(2015, 3, 13),
group: "MotoGP",
className: "motorcycle",
content: "Americas",
id: "540@motocal.net"
},
{
start: new Date(2015, 3, 10),
end: new Date(2015, 3, 13),
group: "F1",
className: "openwheel",
content: "China",
id: "632@motocal.net"
},
{
start: new Date(2015, 3, 12),
end: new Date(2015, 3, 13),
group: "WEC",
className: "endurance",
content: "6 Hours of Silverstone",
id: "674@motocal.net"
},
{
start: new Date(2015, 3, 17),
end: new Date(2015, 3, 20),
group: "BSB",
className: "motorcycle",
content: "Round 2",
id: "605@motocal.net"
},
{
start: new Date(2015, 3, 17),
end: new Date(2015, 3, 20),
group: "F1",
className: "openwheel",
content: "Bahrain",
id: "633@motocal.net"
},
{
start: new Date(2015, 3, 17),
end: new Date(2015, 3, 20),
group: "IndyCar",
className: "openwheel",
content: "Grand Prix of Long Beach",
id: "754@motocal.net"
},
{
start: new Date(2015, 3, 17),
end: new Date(2015, 3, 20),
group: "MotoAmerica",
className: "motorcycle",
content: "Road Atlanta",
id: "706@motocal.net"
},
{
start: new Date(2015, 3, 17),
end: new Date(2015, 3, 20),
group: "SBK",
className: "motorcycle",
content: "Netherlands",
id: "619@motocal.net"
},
{
start: new Date(2015, 3, 17),
end: new Date(2015, 3, 20),
group: "WTCC",
className: "touringcar",
content: "Morocco",
id: "718@motocal.net"
},
{
start: new Date(2015, 3, 17),
end: new Date(2015, 3, 20),
group: "MotoGP",
className: "motorcycle",
content: "Argentina",
id: "559@motocal.net"
},
{
start: new Date(2015, 3, 18),
end: new Date(2015, 3, 19),
group: "SGP",
className: "rally",
content: "Warsaw",
id: "729@motocal.net"
},
{
start: new Date(2015, 3, 18),
end: new Date(2015, 3, 20),
group: "EWC",
className: "endurance",
content: "24 Heures Moto Le Mans",
id: "701@motocal.net"
},
{
start: new Date(2015, 3, 18),
end: new Date(2015, 3, 20),
group: "BTCC",
className: "touringcar",
content: "Rounds 4, 5 & 6",
id: "582@motocal.net"
},
{
start: new Date(2015, 3, 23),
end: new Date(2015, 3, 27),
group: "WRC",
className: "rally",
content: "Rally Argentina",
id: "595@motocal.net"
},
{
start: new Date(2015, 3, 24),
end: new Date(2015, 3, 27),
group: "WorldRX",
className: "rally",
content: "Portugal",
id: "686@motocal.net"
},
{
start: new Date(2015, 3, 24),
end: new Date(2015, 3, 27),
group: "IndyCar",
className: "openwheel",
content: "Indy Grand Prix of Alabama",
id: "755@motocal.net"
},
{
start: new Date(2015, 3, 25),
end: new Date(2015, 3, 27),
group: "WSR",
className: "openwheel",
content: "Spain",
id: "742@motocal.net"
},
{
start: new Date(2015, 4, 1),
end: new Date(2015, 4, 4),
group: "MotoGP",
className: "motorcycle",
content: "Spain",
id: "542@motocal.net"
},
{
start: new Date(2015, 4, 1),
end: new Date(2015, 4, 4),
group: "WorldRX",
className: "rally",
content: "Hockenheim",
id: "768@motocal.net"
},
{
start: new Date(2015, 4, 1),
end: new Date(2015, 4, 4),
group: "DTM",
className: "touringcar",
content: "Hockenheim",
id: "650@motocal.net"
},
{
start: new Date(2015, 4, 1),
end: new Date(2015, 4, 4),
group: "WTCC",
className: "touringcar",
content: "Hungary",
id: "719@motocal.net"
},
{
start: new Date(2015, 4, 1),
end: new Date(2015, 4, 4),
group: "V8SC",
className: "touringcar",
content: "Perth SuperSprint",
id: "662@motocal.net"
},
{
start: new Date(2015, 4, 2),
end: new Date(2015, 4, 5),
group: "BSB",
className: "motorcycle",
content: "Round 3",
id: "606@motocal.net"
},
{
start: new Date(2015, 4, 2),
end: new Date(2015, 4, 3),
group: "WEC",
className: "endurance",
content: "6 Hours of Spa-Francorchamps",
id: "675@motocal.net"
},
{
start: new Date(2015, 4, 7),
end: new Date(2015, 4, 10),
group: "IndyCar",
className: "openwheel",
content: "Grand Prix of Indianapolis",
id: "756@motocal.net"
},
{
start: new Date(2015, 4, 8),
end: new Date(2015, 4, 11),
group: "F1",
className: "openwheel",
content: "Spain",
id: "634@motocal.net"
},
{
start: new Date(2015, 4, 8),
end: new Date(2015, 4, 11),
group: "SBK",
className: "motorcycle",
content: "Italy",
id: "620@motocal.net"
},
{
start: new Date(2015, 4, 9),
end: new Date(2015, 4, 10),
group: "Formula E",
className: "openwheel",
content: "Monaco",
id: "536@motocal.net"
},
{
start: new Date(2015, 4, 9),
end: new Date(2015, 4, 11),
group: "BTCC",
className: "touringcar",
content: "Rounds 7, 8 & 9",
id: "583@motocal.net"
},
{
start: new Date(2015, 4, 10),
end: new Date(2015, 4, 17),
group: "Roads",
className: "motorcycle",
content: "North West 200",
id: "682@motocal.net"
},
{
start: new Date(2015, 4, 15),
end: new Date(2015, 4, 17),
group: "WTCC",
className: "touringcar",
content: "Germany",
id: "720@motocal.net"
},
{
start: new Date(2015, 4, 15),
end: new Date(2015, 4, 18),
group: "WorldRX",
className: "rally",
content: "Belgium",
id: "687@motocal.net"
},
{
start: new Date(2015, 4, 15),
end: new Date(2015, 4, 18),
group: "V8SC",
className: "touringcar",
content: "Winton SuperSprint",
id: "663@motocal.net"
},
{
start: new Date(2015, 4, 15),
end: new Date(2015, 4, 18),
group: "MotoGP",
className: "motorcycle",
content: "France",
id: "543@motocal.net"
},
{
start: new Date(2015, 4, 15),
end: new Date(2015, 4, 18),
group: "MotoAmerica",
className: "motorcycle",
content: "VIR",
id: "707@motocal.net"
},
{
start: new Date(2015, 4, 16),
end: new Date(2015, 4, 17),
group: "SGP",
className: "rally",
content: "Tampere",
id: "730@motocal.net"
},
{
start: new Date(2015, 4, 21),
end: new Date(2015, 4, 25),
group: "WRC",
className: "rally",
content: "Rally de Portugal",
id: "594@motocal.net"
},
{
start: new Date(2015, 4, 21),
end: new Date(2015, 4, 25),
group: "F1",
className: "openwheel",
content: "Monaco",
id: "635@motocal.net"
},
{
start: new Date(2015, 4, 22),
end: new Date(2015, 4, 25),
group: "WorldRX",
className: "rally",
content: "Great Britain",
id: "688@motocal.net"
},
{
start: new Date(2015, 4, 22),
end: new Date(2015, 4, 25),
group: "SBK",
className: "motorcycle",
content: "UK",
id: "621@motocal.net"
},
{
start: new Date(2015, 4, 22),
end: new Date(2015, 4, 25),
group: "IndyCar",
className: "openwheel",
content: "Indianapolis 500",
id: "757@motocal.net"
},
{
start: new Date(2015, 4, 23),
end: new Date(2015, 4, 24),
group: "SGP",
className: "rally",
content: "Prague",
id: "731@motocal.net"
},
{
start: new Date(2015, 4, 23),
end: new Date(2015, 4, 24),
group: "Formula E",
className: "openwheel",
content: "Germany",
id: "537@motocal.net"
},
{
start: new Date(2015, 4, 24),
end: new Date(2015, 4, 25),
group: "WSR",
className: "openwheel",
content: "Monaco",
id: "743@motocal.net"
},
{
start: new Date(2015, 4, 29),
end: new Date(2015, 5, 1),
group: "MotoAmerica",
className: "motorcycle",
content: "Road America",
id: "708@motocal.net"
},
{
start: new Date(2015, 4, 29),
end: new Date(2015, 5, 1),
group: "IndyCar",
className: "openwheel",
content: "Dual in Detroit",
id: "758@motocal.net"
},
{
start: new Date(2015, 4, 29),
end: new Date(2015, 5, 1),
group: "MotoGP",
className: "motorcycle",
content: "Italy",
id: "562@motocal.net"
},
{
start: new Date(2015, 4, 29),
end: new Date(2015, 5, 1),
group: "DTM",
className: "touringcar",
content: "Lausitzring",
id: "651@motocal.net"
},
{
start: new Date(2015, 4, 30),
end: new Date(2015, 5, 13),
group: "Roads",
className: "motorcycle",
content: "Isle of Man TT",
id: "683@motocal.net"
},
{
start: new Date(2015, 4, 30),
end: new Date(2015, 5, 1),
group: "WSR",
className: "openwheel",
content: "Belgium",
id: "745@motocal.net"
},
{
start: new Date(2015, 5, 4),
end: new Date(2015, 5, 7),
group: "IndyCar",
className: "openwheel",
content: "Firestone 600",
id: "759@motocal.net"
},
{
start: new Date(2015, 5, 5),
end: new Date(2015, 5, 8),
group: "SBK",
className: "motorcycle",
content: "Portugal",
id: "622@motocal.net"
},
{
start: new Date(2015, 5, 5),
end: new Date(2015, 5, 8),
group: "F1",
className: "openwheel",
content: "Canada",
id: "636@motocal.net"
},
{
start: new Date(2015, 5, 5),
end: new Date(2015, 5, 8),
group: "WTCC",
className: "touringcar",
content: "Russia",
id: "721@motocal.net"
},
{
start: new Date(2015, 5, 6),
end: new Date(2015, 5, 7),
group: "Formula E",
className: "openwheel",
content: "Russia",
id: "716@motocal.net"
},
{
start: new Date(2015, 5, 6),
end: new Date(2015, 5, 8),
group: "BTCC",
className: "touringcar",
content: "Rounds 10, 11 & 12",
id: "584@motocal.net"
},
{
start: new Date(2015, 5, 11),
end: new Date(2015, 5, 15),
group: "WRC",
className: "rally",
content: "Rally d'Italia Sardegna",
id: "596@motocal.net"
},
{
start: new Date(2015, 5, 12),
end: new Date(2015, 5, 15),
group: "MotoGP",
className: "motorcycle",
content: "Catalunya",
id: "545@motocal.net"
},
{
start: new Date(2015, 5, 12),
end: new Date(2015, 5, 15),
group: "IndyCar",
className: "openwheel",
content: "Indy Toronto",
id: "760@motocal.net"
},
{
start: new Date(2015, 5, 12),
end: new Date(2015, 5, 15),
group: "MotoAmerica",
className: "motorcycle",
content: "Barber",
id: "709@motocal.net"
},
{
start: new Date(2015, 5, 13),
end: new Date(2015, 5, 15),
group: "WSR",
className: "openwheel",
content: "Hungary",
id: "746@motocal.net"
},
{
start: new Date(2015, 5, 13),
end: new Date(2015, 5, 15),
group: "WEC",
className: "endurance",
content: "24 Heures du Mans",
id: "676@motocal.net"
},
{
start: new Date(2015, 5, 19),
end: new Date(2015, 5, 22),
group: "V8SC",
className: "touringcar",
content: "Skycity Triple Crown",
id: "664@motocal.net"
},
{
start: new Date(2015, 5, 19),
end: new Date(2015, 5, 22),
group: "WTCC",
className: "touringcar",
content: "Slovakia",
id: "722@motocal.net"
},
{
start: new Date(2015, 5, 19),
end: new Date(2015, 5, 22),
group: "SBK",
className: "motorcycle",
content: "Riviera di Rimini",
id: "623@motocal.net"
},
{
start: new Date(2015, 5, 19),
end: new Date(2015, 5, 22),
group: "BSB",
className: "motorcycle",
content: "Round 4",
id: "607@motocal.net"
},
{
start: new Date(2015, 5, 19),
end: new Date(2015, 5, 22),
group: "F1",
className: "openwheel",
content: "Austria",
id: "637@motocal.net"
},
{
start: new Date(2015, 5, 19),
end: new Date(2015, 5, 22),
group: "WorldRX",
className: "rally",
content: "Germany",
id: "689@motocal.net"
},
{
start: new Date(2015, 5, 25),
end: new Date(2015, 5, 28),
group: "MotoGP",
className: "motorcycle",
content: "Netherlands",
id: "546@motocal.net"
},
{
start: new Date(2015, 5, 25),
end: new Date(2015, 5, 28),
group: "IndyCar",
className: "openwheel",
content: "MAVTV 500",
id: "761@motocal.net"
},
{
start: new Date(2015, 5, 26),
end: new Date(2015, 5, 29),
group: "WTCC",
className: "touringcar",
content: "France",
id: "723@motocal.net"
},
{
start: new Date(2015, 5, 26),
end: new Date(2015, 5, 29),
group: "DTM",
className: "touringcar",
content: "Norisring",
id: "652@motocal.net"
},
{
start: new Date(2015, 5, 26),
end: new Date(2015, 5, 29),
group: "MotoAmerica",
className: "motorcycle",
content: "Miller",
id: "710@motocal.net"
},
{
start: new Date(2015, 5, 27),
end: new Date(2015, 5, 29),
group: "BTCC",
className: "touringcar",
content: "Rounds 13, 14 & 15",
id: "585@motocal.net"
},
{
start: new Date(2015, 5, 27),
end: new Date(2015, 5, 29),
group: "Formula E",
className: "openwheel",
content: "United Kingdom",
id: "538@motocal.net"
},
{
start: new Date(2015, 6, 2),
end: new Date(2015, 6, 6),
group: "WRC",
className: "rally",
content: "Rally Poland",
id: "597@motocal.net"
},
{
start: new Date(2015, 6, 3),
end: new Date(2015, 6, 6),
group: "F1",
className: "openwheel",
content: "Britain",
id: "638@motocal.net"
},
{
start: new Date(2015, 6, 3),
end: new Date(2015, 6, 6),
group: "WorldRX",
className: "rally",
content: "Sweden",
id: "690@motocal.net"
},
{
start: new Date(2015, 6, 3),
end: new Date(2015, 6, 6),
group: "BSB",
className: "motorcycle",
content: "Round 5",
id: "608@motocal.net"
},
{
start: new Date(2015, 6, 4),
end: new Date(2015, 6, 5),
group: "SGP",
className: "rally",
content: "Cardiff",
id: "732@motocal.net"
},
{
start: new Date(2015, 6, 6),
end: new Date(2015, 6, 10),
group: "Roads",
className: "motorcycle",
content: "Southern 100",
id: "714@motocal.net"
},
{
start: new Date(2015, 6, 10),
end: new Date(2015, 6, 13),
group: "MotoGP",
className: "motorcycle",
content: "Germany",
id: "565@motocal.net"
},
{
start: new Date(2015, 6, 10),
end: new Date(2015, 6, 13),
group: "DTM",
className: "touringcar",
content: "Zandvoort",
id: "653@motocal.net"
},
{
start: new Date(2015, 6, 10),
end: new Date(2015, 6, 13),
group: "IndyCar",
className: "openwheel",
content: "Wisconsin 250",
id: "763@motocal.net"
},
{
start: new Date(2015, 6, 10),
end: new Date(2015, 6, 13),
group: "V8SC",
className: "touringcar",
content: "Townsville 400",
id: "665@motocal.net"
},
{
start: new Date(2015, 6, 10),
end: new Date(2015, 6, 13),
group: "WTCC",
className: "touringcar",
content: "Portugal",
id: "724@motocal.net"
},
{
start: new Date(2015, 6, 11),
end: new Date(2015, 6, 13),
group: "WSR",
className: "openwheel",
content: "Austria",
id: "747@motocal.net"
},
{
start: new Date(2015, 6, 16),
end: new Date(2015, 6, 19),
group: "IndyCar",
className: "openwheel",
content: "Iowa Corn Indy 300",
id: "764@motocal.net"
},
{
start: new Date(2015, 6, 17),
end: new Date(2015, 6, 20),
group: "SBK",
className: "motorcycle",
content: "USA",
id: "625@motocal.net"
},
{
start: new Date(2015, 6, 17),
end: new Date(2015, 6, 20),
group: "BSB",
className: "motorcycle",
content: "Round 6",
id: "609@motocal.net"
},
{
start: new Date(2015, 6, 17),
end: new Date(2015, 6, 20),
group: "MotoAmerica",
className: "motorcycle",
content: "Mazda Raceway",
id: "711@motocal.net"
},
{
start: new Date(2015, 6, 18),
end: new Date(2015, 6, 19),
group: "SGP",
className: "rally",
content: "Daugavpils",
id: "733@motocal.net"
},
{
start: new Date(2015, 6, 24),
end: new Date(2015, 6, 27),
group: "F1",
className: "openwheel",
content: "Hungary",
id: "640@motocal.net"
},
{
start: new Date(2015, 6, 25),
end: new Date(2015, 6, 26),
group: "SGP",
className: "rally",
content: "Målilla",
id: "734@motocal.net"
},
{
start: new Date(2015, 6, 26),
end: new Date(2015, 6, 27),
group: "EWC",
className: "endurance",
content: "Suzuka 8 Hours",
id: "702@motocal.net"
},
{
start: new Date(2015, 6, 30),
end: new Date(2015, 7, 3),
group: "WRC",
className: "rally",
content: "Rally Finland",
id: "598@motocal.net"
},
{
start: new Date(2015, 6, 31),
end: new Date(2015, 7, 3),
group: "BSB",
className: "motorcycle",
content: "Round 7",
id: "610@motocal.net"
},
{
start: new Date(2015, 6, 31),
end: new Date(2015, 7, 3),
group: "V8SC",
className: "touringcar",
content: "Ipswich SuperSprint",
id: "666@motocal.net"
},
{
start: new Date(2015, 6, 31),
end: new Date(2015, 7, 3),
group: "DTM",
className: "touringcar",
content: "Spielberg",
id: "654@motocal.net"
},
{
start: new Date(2015, 6, 31),
end: new Date(2015, 7, 3),
group: "IndyCar",
className: "openwheel",
content: "Honda Indy 200",
id: "765@motocal.net"
},
{
start: new Date(2015, 6, 31),
end: new Date(2015, 7, 3),
group: "SBK",
className: "motorcycle",
content: "Malaysia",
id: "626@motocal.net"
},
{
start: new Date(2015, 7, 3),
end: new Date(2015, 7, 9),
group: "Roads",
className: "motorcycle",
content: "Ulster Grand Prix",
id: "684@motocal.net"
},
{
start: new Date(2015, 7, 7),
end: new Date(2015, 7, 9),
group: "WorldRX",
className: "rally",
content: "Canada",
id: "691@motocal.net"
},
{
start: new Date(2015, 7, 7),
end: new Date(2015, 7, 10),
group: "MotoAmerica",
className: "motorcycle",
content: "INDY",
id: "712@motocal.net"
},
{
start: new Date(2015, 7, 7),
end: new Date(2015, 7, 10),
group: "MotoGP",
className: "motorcycle",
content: "Indianapolis",
id: "548@motocal.net"
},
{
start: new Date(2015, 7, 8),
end: new Date(2015, 7, 10),
group: "BTCC",
className: "touringcar",
content: "Rounds 16, 17 & 18",
id: "586@motocal.net"
},
{
start: new Date(2015, 7, 8),
end: new Date(2015, 7, 9),
group: "SGP",
className: "rally",
content: "Horsens",
id: "735@motocal.net"
},
{
start: new Date(2015, 7, 10),
end: new Date(2015, 7, 12),
group: "Formula E",
className: "openwheel",
content: "Pre-season test 1",
id: "769@motocal.net"
},
{
start: new Date(2015, 7, 14),
end: new Date(2015, 7, 17),
group: "MotoGP",
className: "motorcycle",
content: "Czech Republic",
id: "549@motocal.net"
},
{
start: new Date(2015, 7, 17),
end: new Date(2015, 7, 19),
group: "Formula E",
className: "openwheel",
content: "Pre-season test 2",
id: "770@motocal.net"
},
{
start: new Date(2015, 7, 20),
end: new Date(2015, 7, 24),
group: "WRC",
className: "rally",
content: "Rallye Deutschland",
id: "599@motocal.net"
},
{
start: new Date(2015, 7, 21),
end: new Date(2015, 7, 24),
group: "IndyCar",
className: "openwheel",
content: "Pocono IndyCar 500",
id: "766@motocal.net"
},
{
start: new Date(2015, 7, 21),
end: new Date(2015, 7, 24),
group: "BSB",
className: "motorcycle",
content: "Round 8",
id: "611@motocal.net"
},
{
start: new Date(2015, 7, 21),
end: new Date(2015, 7, 24),
group: "WorldRX",
className: "rally",
content: "Norway",
id: "692@motocal.net"
},
{
start: new Date(2015, 7, 21),
end: new Date(2015, 7, 24),
group: "F1",
className: "openwheel",
content: "Belgium",
id: "641@motocal.net"
},
{
start: new Date(2015, 7, 21),
end: new Date(2015, 7, 24),
group: "V8SC",
className: "touringcar",
content: "Sydney Motorsport Park SuperSprint",
id: "667@motocal.net"
},
{
start: new Date(2015, 7, 22),
end: new Date(2015, 7, 23),
group: "EWC",
className: "endurance",
content: "Oschersleben 8 Hours",
id: "703@motocal.net"
},
{
start: new Date(2015, 7, 22),
end: new Date(2015, 8, 5),
group: "Roads",
className: "motorcycle",
content: "Classic TT & Manx GP",
id: "715@motocal.net"
},
{
start: new Date(2015, 7, 22),
end: new Date(2015, 7, 24),
group: "BTCC",
className: "touringcar",
content: "Rounds 19, 20 & 21",
id: "587@motocal.net"
},
{
start: new Date(2015, 7, 24),
end: new Date(2015, 7, 26),
group: "Formula E",
className: "openwheel",
content: "Pre-season test 3",
id: "771@motocal.net"
},
{
start: new Date(2015, 7, 28),
end: new Date(2015, 7, 31),
group: "DTM",
className: "touringcar",
content: "Moscow Raceway",
id: "655@motocal.net"
},
{
start: new Date(2015, 7, 28),
end: new Date(2015, 7, 31),
group: "IndyCar",
className: "openwheel",
content: "Grand Prix of Sonoma",
id: "767@motocal.net"
},
{
start: new Date(2015, 7, 28),
end: new Date(2015, 7, 31),
group: "MotoGP",
className: "motorcycle",
content: "Great Britain",
id: "568@motocal.net"
},
{
start: new Date(2015, 7, 29),
end: new Date(2015, 7, 30),
group: "SGP",
className: "rally",
content: "Gorzów",
id: "737@motocal.net"
},
{
start: new Date(2015, 7, 30),
end: new Date(2015, 7, 31),
group: "WEC",
className: "endurance",
content: "6 Hours of N&uuml;rburgring",
id: "677@motocal.net"
},
{
start: new Date(2015, 8, 4),
end: new Date(2015, 8, 7),
group: "BSB",
className: "motorcycle",
content: "Round 9",
id: "612@motocal.net"
},
{
start: new Date(2015, 8, 4),
end: new Date(2015, 8, 7),
group: "WorldRX",
className: "rally",
content: "France",
id: "693@motocal.net"
},
{
start: new Date(2015, 8, 4),
end: new Date(2015, 8, 7),
group: "F1",
className: "openwheel",
content: "Italy",
id: "642@motocal.net"
},
{
start: new Date(2015, 8, 5),
end: new Date(2015, 8, 7),
group: "WSR",
className: "openwheel",
content: "United Kingdom",
id: "748@motocal.net"
},
{
start: new Date(2015, 8, 5),
end: new Date(2015, 8, 7),
group: "BTCC",
className: "touringcar",
content: "Rounds 22, 23 & 24",
id: "588@motocal.net"
},
{
start: new Date(2015, 8, 10),
end: new Date(2015, 8, 14),
group: "WRC",
className: "rally",
content: "Rally Australia",
id: "600@motocal.net"
},
{
start: new Date(2015, 8, 11),
end: new Date(2015, 8, 14),
group: "V8SC",
className: "touringcar",
content: "Sandown 500",
id: "668@motocal.net"
},
{
start: new Date(2015, 8, 11),
end: new Date(2015, 8, 14),
group: "MotoAmerica",
className: "motorcycle",
content: "New Jersey",
id: "713@motocal.net"
},
{
start: new Date(2015, 8, 11),
end: new Date(2015, 8, 14),
group: "MotoGP",
className: "motorcycle",
content: "San Marino",
id: "551@motocal.net"
},
{
start: new Date(2015, 8, 11),
end: new Date(2015, 8, 14),
group: "WTCC",
className: "touringcar",
content: "Japan",
id: "725@motocal.net"
},
{
start: new Date(2015, 8, 11),
end: new Date(2015, 8, 14),
group: "DTM",
className: "touringcar",
content: "Oschersleben",
id: "656@motocal.net"
},
{
start: new Date(2015, 8, 12),
end: new Date(2015, 8, 14),
group: "WSR",
className: "openwheel",
content: "Germany",
id: "749@motocal.net"
},
{
start: new Date(2015, 8, 12),
end: new Date(2015, 8, 13),
group: "SGP",
className: "rally",
content: "Krško",
id: "738@motocal.net"
},
{
start: new Date(2015, 8, 18),
end: new Date(2015, 8, 21),
group: "SBK",
className: "motorcycle",
content: "Spain",
id: "627@motocal.net"
},
{
start: new Date(2015, 8, 18),
end: new Date(2015, 8, 21),
group: "BSB",
className: "motorcycle",
content: "Round 10",
id: "613@motocal.net"
},
{
start: new Date(2015, 8, 18),
end: new Date(2015, 8, 21),
group: "F1",
className: "openwheel",
content: "Singapore",
id: "643@motocal.net"
},
{
start: new Date(2015, 8, 18),
end: new Date(2015, 8, 21),
group: "WorldRX",
className: "rally",
content: "Barcelona",
id: "694@motocal.net"
},
{
start: new Date(2015, 8, 19),
end: new Date(2015, 8, 20),
group: "WEC",
className: "endurance",
content: "6 Hours of Circuit of the Americas",
id: "678@motocal.net"
},
{
start: new Date(2015, 8, 19),
end: new Date(2015, 8, 21),
group: "EWC",
className: "endurance",
content: "Bol d’Or",
id: "704@motocal.net"
},
{
start: new Date(2015, 8, 25),
end: new Date(2015, 8, 28),
group: "MotoGP",
className: "motorcycle",
content: "Aragon",
id: "570@motocal.net"
},
{
start: new Date(2015, 8, 25),
end: new Date(2015, 8, 28),
group: "DTM",
className: "touringcar",
content: "N&uuml;rburgring",
id: "657@motocal.net"
},
{
start: new Date(2015, 8, 25),
end: new Date(2015, 8, 28),
group: "WTCC",
className: "touringcar",
content: "China",
id: "726@motocal.net"
},
{
start: new Date(2015, 8, 25),
end: new Date(2015, 8, 28),
group: "F1",
className: "openwheel",
content: "Japan",
id: "644@motocal.net"
},
{
start: new Date(2015, 8, 26),
end: new Date(2015, 8, 28),
group: "BTCC",
className: "touringcar",
content: "Rounds 25, 26 & 27",
id: "589@motocal.net"
},
{
start: new Date(2015, 8, 26),
end: new Date(2015, 8, 27),
group: "SGP",
className: "rally",
content: "Stockholm",
id: "739@motocal.net"
},
{
start: new Date(2015, 8, 26),
end: new Date(2015, 8, 28),
group: "WSR",
className: "openwheel",
content: "France",
id: "750@motocal.net"
},
{
start: new Date(2015, 9, 1),
end: new Date(2015, 9, 5),
group: "WRC",
className: "rally",
content: "Rallye de France",
id: "601@motocal.net"
},
{
start: new Date(2015, 9, 2),
end: new Date(2015, 9, 5),
group: "SBK",
className: "motorcycle",
content: "France",
id: "628@motocal.net"
},
{
start: new Date(2015, 9, 2),
end: new Date(2015, 9, 5),
group: "BSB",
className: "motorcycle",
content: "Round 11",
id: "614@motocal.net"
},
{
start: new Date(2015, 9, 2),
end: new Date(2015, 9, 5),
group: "WorldRX",
className: "rally",
content: "Turkey",
id: "695@motocal.net"
},
{
start: new Date(2015, 9, 3),
end: new Date(2015, 9, 4),
group: "SGP",
className: "rally",
content: "Toruń",
id: "740@motocal.net"
},
{
start: new Date(2015, 9, 8),
end: new Date(2015, 9, 12),
group: "V8SC",
className: "touringcar",
content: "Bathurst 1000",
id: "669@motocal.net"
},
{
start: new Date(2015, 9, 9),
end: new Date(2015, 9, 12),
group: "F1",
className: "openwheel",
content: "Russia",
id: "645@motocal.net"
},
{
start: new Date(2015, 9, 9),
end: new Date(2015, 9, 12),
group: "MotoGP",
className: "motorcycle",
content: "Japan",
id: "553@motocal.net"
},
{
start: new Date(2015, 9, 10),
end: new Date(2015, 9, 12),
group: "BTCC",
className: "touringcar",
content: "Rounds 28, 29 & 30",
id: "590@motocal.net"
},
{
start: new Date(2015, 9, 11),
end: new Date(2015, 9, 12),
group: "WEC",
className: "endurance",
content: "6 Hours of Fuji",
id: "679@motocal.net"
},
{
start: new Date(2015, 9, 16),
end: new Date(2015, 9, 19),
group: "WorldRX",
className: "rally",
content: "Italy",
id: "696@motocal.net"
},
{
start: new Date(2015, 9, 16),
end: new Date(2015, 9, 19),
group: "MotoGP",
className: "motorcycle",
content: "Australia",
id: "572@motocal.net"
},
{
start: new Date(2015, 9, 16),
end: new Date(2015, 9, 19),
group: "DTM",
className: "touringcar",
content: "Hockenheim",
id: "658@motocal.net"
},
{
start: new Date(2015, 9, 16),
end: new Date(2015, 9, 19),
group: "BSB",
className: "motorcycle",
content: "Round 12",
id: "615@motocal.net"
},
{
start: new Date(2015, 9, 16),
end: new Date(2015, 9, 19),
group: "SBK",
className: "motorcycle",
content: "Qatar",
id: "629@motocal.net"
},
{
start: new Date(2015, 9, 17),
end: new Date(2015, 9, 19),
group: "WSR",
className: "openwheel",
content: "Spain",
id: "751@motocal.net"
},
{
start: new Date(2015, 9, 22),
end: new Date(2015, 9, 26),
group: "WRC",
className: "rally",
content: "Rally de Espana",
id: "602@motocal.net"
},
{
start: new Date(2015, 9, 23),
end: new Date(2015, 9, 26),
group: "V8SC",
className: "touringcar",
content: "Gold Coast 600",
id: "670@motocal.net"
},
{
start: new Date(2015, 9, 23),
end: new Date(2015, 9, 26),
group: "MotoGP",
className: "motorcycle",
content: "Malaysia",
id: "573@motocal.net"
},
{
start: new Date(2015, 9, 23),
end: new Date(2015, 9, 26),
group: "F1",
className: "openwheel",
content: "United States",
id: "646@motocal.net"
},
{
start: new Date(2015, 9, 24),
end: new Date(2015, 9, 25),
group: "SGP",
className: "rally",
content: "Melbourne",
id: "741@motocal.net"
},
{
start: new Date(2015, 9, 30),
end: new Date(2015, 10, 2),
group: "F1",
className: "openwheel",
content: "Mexico",
id: "647@motocal.net"
},
{
start: new Date(2015, 9, 30),
end: new Date(2015, 10, 2),
group: "WTCC",
className: "touringcar",
content: "Thailand",
id: "727@motocal.net"
},
{
start: new Date(2015, 10, 1),
end: new Date(2015, 10, 2),
group: "WEC",
className: "endurance",
content: "6 Hours of Shanghai",
id: "680@motocal.net"
},
{
start: new Date(2015, 10, 6),
end: new Date(2015, 10, 9),
group: "MotoGP",
className: "motorcycle",
content: "Valencia",
id: "556@motocal.net"
},
{
start: new Date(2015, 10, 6),
end: new Date(2015, 10, 9),
group: "V8SC",
className: "touringcar",
content: "ITM 500 Auckland",
id: "671@motocal.net"
},
{
start: new Date(2015, 10, 12),
end: new Date(2015, 10, 16),
group: "WRC",
className: "rally",
content: "Wales Rally GB",
id: "603@motocal.net"
},
{
start: new Date(2015, 10, 13),
end: new Date(2015, 10, 16),
group: "F1",
className: "openwheel",
content: "Brazil",
id: "648@motocal.net"
},
{
start: new Date(2015, 10, 19),
end: new Date(2015, 10, 23),
group: "Roads",
className: "motorcycle",
content: "Macau Grand Prix",
id: "685@motocal.net"
},
{
start: new Date(2015, 10, 20),
end: new Date(2015, 10, 23),
group: "WTCC",
className: "touringcar",
content: "Qatar",
id: "728@motocal.net"
},
{
start: new Date(2015, 10, 20),
end: new Date(2015, 10, 23),
group: "V8SC",
className: "touringcar",
content: "Phillip Island SuperSprint",
id: "672@motocal.net"
},
{
start: new Date(2015, 10, 21),
end: new Date(2015, 10, 22),
group: "WEC",
className: "endurance",
content: "6 Hours of Bahrain",
id: "681@motocal.net"
},
{
start: new Date(2015, 10, 27),
end: new Date(2015, 10, 30),
group: "WorldRX",
className: "rally",
content: "Argentina",
id: "700@motocal.net"
},
{
start: new Date(2015, 10, 27),
end: new Date(2015, 10, 30),
group: "F1",
className: "openwheel",
content: "Abu Dhabi",
id: "649@motocal.net"
},
{
start: new Date(2015, 11, 4),
end: new Date(2015, 11, 7),
group: "V8SC",
className: "touringcar",
content: "Sydney 500",
id: "673@motocal.net"
},
{
start: new Date(2015, 2, 9),
end: new Date(2015, 2, 11),
group: "GP2",
className: "openwheel",
content: "Yas Marina Test",
id: "1@gp2series.com"
},
{
start: new Date(2015, 3, 1),
end: new Date(2015, 3, 3),
group: "GP2",
className: "openwheel",
content: "Sakhir Test",
id: "2@gp2series.com"
},
{
start: new Date(2015, 3, 17),
end: new Date(2015, 3, 19),
group: "GP2",
className: "openwheel",
content: "Sakhir, Bahrain",
id: "3@gp2series.com"
},
{
start: new Date(2015, 4, 8),
end: new Date(2015, 4, 10),
group: "GP2",
className: "openwheel",
content: "Barcelona, Spain",
id: "4@gp2series.com"
},
{
start: new Date(2015, 4, 21),
end: new Date(2015, 4, 23),
group: "GP2",
className: "openwheel",
content: "Monte Carlo, Monaco",
id: "5@gp2series.com"
},
{
start: new Date(2015, 5, 19),
end: new Date(2015, 5, 21),
group: "GP2",
className: "openwheel",
content: "Spielber, Austria",
id: "6@gp2series.com"
},
{
start: new Date(2015, 6, 3),
end: new Date(2015, 6, 5),
group: "GP2",
className: "openwheel",
content: "Silverstone, Great-Britain",
id: "7@gp2series.com"
},
{
start: new Date(2015, 6, 24),
end: new Date(2015, 6, 26),
group: "GP2",
className: "openwheel",
content: "Budapest, Hungary",
id: "8@gp2series.com"
},
{
start: new Date(2015, 7, 21),
end: new Date(2015, 7, 23),
group: "GP2",
className: "openwheel",
content: "Spa-Francorchamps, Belgium",
id: "9@gp2series.com"
},
{
start: new Date(2015, 8, 4),
end: new Date(2015, 8, 6),
group: "GP2",
className: "openwheel",
content: "Monza, Italy",
id: "10@gp2series.com"
},
{
start: new Date(2015, 9, 9),
end: new Date(2015, 9, 11),
group: "GP2",
className: "openwheel",
content: "Sochi, Russia",
id: "11@gp2series.com"
},
{
start: new Date(2015, 10, 27),
end: new Date(2015, 10, 29),
group: "GP2",
className: "openwheel",
content: "Yas Marina, UAE",
id: "12@gp2series.com"
}
]);
// create visualization
var container = document.getElementById("visualization");
var options = {
// option groupOrder can be a property name or a sort function
// the sort function must compare two groups and return a value
// > 0 when a > b
// < 0 when a < b
// 0 when a == b
groupOrder: function(a, b) {
return a.value - b.value;
},
groupOrderSwap: function(a, b, groups) {
var v = a.value;
a.value = b.value;
b.value = v;
},
groupTemplate: function(group) {
var container = document.createElement("div");
var label = document.createElement("span");
label.innerHTML = group.content + " ";
container.insertAdjacentElement("afterBegin", label);
var hide = document.createElement("button");
hide.innerHTML = "hide";
hide.style.fontSize = "small";
hide.addEventListener("click", function() {
groups.update({ id: group.id, visible: false });
});
container.insertAdjacentElement("beforeEnd", hide);
return container;
},
orientation: "both",
editable: true,
groupEditable: true,
start: new Date(2015, 6, 1),
end: new Date(2015, 10, 1)
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
.vis-item.openwheel {
background-color: #b0e2ff;
}
.vis-item.rally {
background-color: #eaeaea;
}
.vis-item.motorcycle {
background-color: #fa8072;
}
.vis-item.touringcar {
background-color: #b4eeb4;
}
.vis-item.endurance {
background-color: #ffffcc;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example demonstrates editable groups (reordering and hiding).
<button onclick="showAllGroups()">Restore Hidden</button>
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="groups/groupsEditable.html"
><div class="example-image">
<img
src="thumbnails/6ff81f9de2813722b4b46ba09295c2f821f8f4d77bf74ab89e1d141c87be98be.png"
alt="Editable Groups"
/></div></a></span
><span class="example-link"
><div>
<a href="markers/customTimeMarkersEditable.html"
>Editable markers</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 container = document.getElementById("visualization");
var items = new vis.DataSet();
var customDate = new Date();
var options = {
start: new Date(Date.now() - 1000 * 60 * 60 * 24),
end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
};
var timeline = new vis.Timeline(container, items, options);
var id1 = "id1";
var id2 = "id2";
timeline.addCustomTime(
new Date(
customDate.getFullYear(),
customDate.getMonth(),
customDate.getDate() + 2
),
id1
);
timeline.setCustomTimeMarker("This is editable", id1, true);
timeline.addCustomTime(
new Date(
customDate.getFullYear(),
customDate.getMonth(),
customDate.getDate() + 3
),
id2
);
timeline.setCustomTimeMarker("This is not editable", id2, false);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p>Custom time markers have an option to make the title editable.</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 | Editable markers"
/>
</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 font-size: 11pt;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>Custom time markers have an option to make the title editable.</p>\n\n<div id=\"visualization\"></div>\n","js":"var container = document.getElementById(\"visualization\");\nvar items = new vis.DataSet();\nvar customDate = new Date();\nvar options = {\n start: new Date(Date.now() - 1000 * 60 * 60 * 24),\n end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)\n};\nvar timeline = new vis.Timeline(container, items, options);\n\nvar id1 = \"id1\";\nvar id2 = \"id2\";\ntimeline.addCustomTime(\n new Date(\n customDate.getFullYear(),\n customDate.getMonth(),\n customDate.getDate() + 2\n ),\n id1\n);\ntimeline.setCustomTimeMarker(\"This is editable\", id1, true);\ntimeline.addCustomTime(\n new Date(\n customDate.getFullYear(),\n customDate.getMonth(),\n customDate.getDate() + 3\n ),\n id2\n);\ntimeline.setCustomTimeMarker(\"This is not editable\", id2, false);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Editable markers"}'
/><input
type="hidden"
name="js"
value='var container = document.getElementById("visualization");
var items = new vis.DataSet();
var customDate = new Date();
var options = {
start: new Date(Date.now() - 1000 * 60 * 60 * 24),
end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
};
var timeline = new vis.Timeline(container, items, options);
var id1 = "id1";
var id2 = "id2";
timeline.addCustomTime(
new Date(
customDate.getFullYear(),
customDate.getMonth(),
customDate.getDate() + 2
),
id1
);
timeline.setCustomTimeMarker("This is editable", id1, true);
timeline.addCustomTime(
new Date(
customDate.getFullYear(),
customDate.getMonth(),
customDate.getDate() + 3
),
id2
);
timeline.setCustomTimeMarker("This is not editable", id2, false);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p>Custom time markers have an option to make the title editable.</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="markers/customTimeMarkersEditable.html"
><div class="example-image">
<img
src="thumbnails/bc8599e9b62ce58beed98c74a807de63a387f4c97a285940dd6e93f3072cba02.png"
alt="Editable markers"
/></div></a></span
><span class="example-link"
><div>
<a href="interaction/eventListeners.html">Event listeners</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: 1, content: "item 1", start: "2013-04-20" },
{ id: 2, content: "item 2", start: "2013-04-14" },
{ id: 3, content: "item 3", start: "2013-04-18" },
{ id: 4, content: "item 4", start: "2013-04-16", end: "2013-04-19" },
{ id: 5, content: "item 5", start: "2013-04-25" },
{ id: 6, content: "item 6", start: "2013-04-27" }
]);
var container = document.getElementById("visualization");
var options = {
editable: true,
onInitialDrawComplete: function() {
logEvent("Timeline initial draw completed", {});
}
};
var timeline = new vis.Timeline(container, items, options);
timeline.on("rangechange", function(properties) {
logEvent("rangechange", properties);
});
timeline.on("rangechanged", function(properties) {
logEvent("rangechanged", properties);
});
timeline.on("select", function(properties) {
logEvent("select", properties);
});
timeline.on("itemover", function(properties) {
logEvent("itemover", properties);
setHoveredItem(properties.item);
});
timeline.on("itemout", function(properties) {
logEvent("itemout", properties);
setHoveredItem("none");
});
timeline.on("click", function(properties) {
logEvent("click", properties);
});
timeline.on("doubleClick", function(properties) {
logEvent("doubleClick", properties);
});
timeline.on("contextmenu", function(properties) {
logEvent("contextmenu", properties);
});
timeline.on("mouseDown", function(properties) {
logEvent("mouseDown", properties);
});
timeline.on("mouseUp", function(properties) {
logEvent("mouseUp", properties);
});
// other possible events:
// timeline.on('mouseOver', function (properties) {
// logEvent('mouseOver', properties);
// });
// timeline.on("mouseMove", function(properties) {
// logEvent('mouseMove', properties);
// });
items.on("*", function(event, properties) {
logEvent(event, properties);
});
function stringifyObject(object) {
if (!object) return;
var replacer = function(key, value) {
if (value && value.tagName) {
return "DOM Element";
} else {
return value;
}
};
return JSON.stringify(object, replacer);
}
function logEvent(event, properties) {
var log = document.getElementById("log");
var msg = document.createElement("div");
msg.innerHTML =
"event=" +
JSON.stringify(event) +
", " +
"properties=" +
stringifyObject(properties);
log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
}
function setHoveredItem(id) {
var hoveredItem = document.getElementById("hoveredItem");
hoveredItem.innerHTML = "hoveredItem=" + id;
}
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example listens for events <code>select</code>, <code>click</code>,
<code>doubleClick</code>, <code>rangechange</code>, and
<code>rangechanged</code> of the Timeline (other possible events:
<code>mouseDown</code>, <code>mouseUp</code>, <code>mouseOver</code>,
<code>mouseMove</code>), and listens for changes in the DataSet
(<code>add</code>, <code>update</code>, or <code>remove</code> items).
</p>
<div id="visualization"></div>
<p></p>
<div id="hoveredItem"></div>
<div id="log"></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 | Event listeners"
/>
</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 This example listens for events <code>select</code>, <code>click</code>,\n <code>doubleClick</code>, <code>rangechange</code>, and\n <code>rangechanged</code> of the Timeline (other possible events:\n <code>mouseDown</code>, <code>mouseUp</code>, <code>mouseOver</code>,\n <code>mouseMove</code>), and listens for changes in the DataSet\n (<code>add</code>, <code>update</code>, or <code>remove</code> items).\n</p>\n<div id=\"visualization\"></div>\n<p></p>\n<div id=\"hoveredItem\"></div>\n<div id=\"log\"></div>\n","js":"var items = new vis.DataSet([\n { id: 1, content: \"item 1\", start: \"2013-04-20\" },\n { id: 2, content: \"item 2\", start: \"2013-04-14\" },\n { id: 3, content: \"item 3\", start: \"2013-04-18\" },\n { id: 4, content: \"item 4\", start: \"2013-04-16\", end: \"2013-04-19\" },\n { id: 5, content: \"item 5\", start: \"2013-04-25\" },\n { id: 6, content: \"item 6\", start: \"2013-04-27\" }\n]);\n\nvar container = document.getElementById(\"visualization\");\nvar options = {\n editable: true,\n onInitialDrawComplete: function() {\n logEvent(\"Timeline initial draw completed\", {});\n }\n};\nvar timeline = new vis.Timeline(container, items, options);\n\ntimeline.on(\"rangechange\", function(properties) {\n logEvent(\"rangechange\", properties);\n});\n\ntimeline.on(\"rangechanged\", function(properties) {\n logEvent(\"rangechanged\", properties);\n});\n\ntimeline.on(\"select\", function(properties) {\n logEvent(\"select\", properties);\n});\n\ntimeline.on(\"itemover\", function(properties) {\n logEvent(\"itemover\", properties);\n setHoveredItem(properties.item);\n});\n\ntimeline.on(\"itemout\", function(properties) {\n logEvent(\"itemout\", properties);\n setHoveredItem(\"none\");\n});\n\ntimeline.on(\"click\", function(properties) {\n logEvent(\"click\", properties);\n});\n\ntimeline.on(\"doubleClick\", function(properties) {\n logEvent(\"doubleClick\", properties);\n});\n\ntimeline.on(\"contextmenu\", function(properties) {\n logEvent(\"contextmenu\", properties);\n});\n\ntimeline.on(\"mouseDown\", function(properties) {\n logEvent(\"mouseDown\", properties);\n});\n\ntimeline.on(\"mouseUp\", function(properties) {\n logEvent(\"mouseUp\", properties);\n});\n\n// other possible events:\n\n// timeline.on('mouseOver', function (properties) {\n// logEvent('mouseOver', properties);\n// });\n\n// timeline.on(\"mouseMove\", function(properties) {\n// logEvent('mouseMove', properties);\n// });\n\nitems.on(\"*\", function(event, properties) {\n logEvent(event, properties);\n});\n\nfunction stringifyObject(object) {\n if (!object) return;\n var replacer = function(key, value) {\n if (value && value.tagName) {\n return \"DOM Element\";\n } else {\n return value;\n }\n };\n return JSON.stringify(object, replacer);\n}\n\nfunction logEvent(event, properties) {\n var log = document.getElementById(\"log\");\n var msg = document.createElement(\"div\");\n msg.innerHTML =\n \"event=\" +\n JSON.stringify(event) +\n \", \" +\n \"properties=\" +\n stringifyObject(properties);\n log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);\n}\n\nfunction setHoveredItem(id) {\n var hoveredItem = document.getElementById(\"hoveredItem\");\n hoveredItem.innerHTML = \"hoveredItem=\" + id;\n}\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Event listeners"}'
/><input
type="hidden"
name="js"
value='var items = new vis.DataSet([
{ id: 1, content: "item 1", start: "2013-04-20" },
{ id: 2, content: "item 2", start: "2013-04-14" },
{ id: 3, content: "item 3", start: "2013-04-18" },
{ id: 4, content: "item 4", start: "2013-04-16", end: "2013-04-19" },
{ id: 5, content: "item 5", start: "2013-04-25" },
{ id: 6, content: "item 6", start: "2013-04-27" }
]);
var container = document.getElementById("visualization");
var options = {
editable: true,
onInitialDrawComplete: function() {
logEvent("Timeline initial draw completed", {});
}
};
var timeline = new vis.Timeline(container, items, options);
timeline.on("rangechange", function(properties) {
logEvent("rangechange", properties);
});
timeline.on("rangechanged", function(properties) {
logEvent("rangechanged", properties);
});
timeline.on("select", function(properties) {
logEvent("select", properties);
});
timeline.on("itemover", function(properties) {
logEvent("itemover", properties);
setHoveredItem(properties.item);
});
timeline.on("itemout", function(properties) {
logEvent("itemout", properties);
setHoveredItem("none");
});
timeline.on("click", function(properties) {
logEvent("click", properties);
});
timeline.on("doubleClick", function(properties) {
logEvent("doubleClick", properties);
});
timeline.on("contextmenu", function(properties) {
logEvent("contextmenu", properties);
});
timeline.on("mouseDown", function(properties) {
logEvent("mouseDown", properties);
});
timeline.on("mouseUp", function(properties) {
logEvent("mouseUp", properties);
});
// other possible events:
// timeline.on('mouseOver', function (properties) {
// logEvent('mouseOver', properties);
// });
// timeline.on("mouseMove", function(properties) {
// logEvent('mouseMove', properties);
// });
items.on("*", function(event, properties) {
logEvent(event, properties);
});
function stringifyObject(object) {
if (!object) return;
var replacer = function(key, value) {
if (value && value.tagName) {
return "DOM Element";
} else {
return value;
}
};
return JSON.stringify(object, replacer);
}
function logEvent(event, properties) {
var log = document.getElementById("log");
var msg = document.createElement("div");
msg.innerHTML =
"event=" +
JSON.stringify(event) +
", " +
"properties=" +
stringifyObject(properties);
log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
}
function setHoveredItem(id) {
var hoveredItem = document.getElementById("hoveredItem");
hoveredItem.innerHTML = "hoveredItem=" + id;
}
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example listens for events <code>select</code>, <code>click</code>,
<code>doubleClick</code>, <code>rangechange</code>, and
<code>rangechanged</code> of the Timeline (other possible events:
<code>mouseDown</code>, <code>mouseUp</code>, <code>mouseOver</code>,
<code>mouseMove</code>), and listens for changes in the DataSet
(<code>add</code>, <code>update</code>, or <code>remove</code> items).
</p>
<div id="visualization"></div>
<p></p>
<div id="hoveredItem"></div>
<div id="log"></div>
'
/></form
></span>
</div>
<a href="interaction/eventListeners.html"
><div class="example-image">
<img
src="thumbnails/2bc110c1868f2bd82728b552fc1b7a05a791bd43142b9af7f37b5654f4569b8a.png"
alt="Event listeners"
/></div></a></span
><span class="example-link"
><div>
<a href="items/expectedVsActualTimesItems.html"
>expected vs actual times items</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" }
});
var groups = new vis.DataSet([
{
id: "group1",
content: "group1"
}
]);
// add items to the DataSet
items.add([
// group 1
{
id: "background1",
start: "2014-01-21",
end: "2014-01-22",
type: "background",
group: "group1"
},
// subgroup 1
{
id: 1,
content: "item 1 (expected time)",
className: "expected",
start: "2014-01-23T12:00:00",
end: "2014-01-26T12:00:00",
group: "group1",
subgroup: "sg_1"
},
{
id: 2,
content: "item 1 (actual time)",
start: "2014-01-24T12:00:00",
end: "2014-01-27T12:00:00",
group: "group1",
subgroup: "sg_1"
},
// subgroup 2
{
id: 3,
content: "item 2 (expected time)",
className: "expected",
start: "2014-01-13T12:00:00",
end: "2014-01-16T12:00:00",
group: "group1",
subgroup: "sg_2"
},
{
id: 4,
content: "item 2 (actual time)",
start: "2014-01-14T12:00:00",
end: "2014-01-17T12:00:00",
group: "group1",
subgroup: "sg_2"
},
// subgroup 3
{
id: 5,
content: "item 3 (expected time)",
className: "expected",
start: "2014-01-17T12:00:00",
end: "2014-01-19T12:00:00",
group: "group1",
subgroup: "sg_3"
},
{
id: 6,
content: "item 3 (actual time)",
start: "2014-01-17T12:00:00",
end: "2014-01-18T12:00:00",
group: "group1",
subgroup: "sg_3"
}
]);
var container = document.getElementById("visualization");
var options = {
start: "2014-01-10",
end: "2014-02-10",
editable: true,
stack: false,
stackSubgroups: false
};
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;
}
.vis-item.expected {
background-color: transparent;
border-style: dashed !important;
z-index: 0;
}
.vis-item.vis-selected {
opacity: 0.6;
}
.vis-item.vis-background.marker {
border-left: 2px solid green;
}
"
/><input
type="hidden"
name="html"
value='<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 | expected vs actual times items"
/>
</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.vis-item.expected {\n background-color: transparent;\n border-style: dashed !important;\n z-index: 0;\n}\n.vis-item.vis-selected {\n opacity: 0.6;\n}\n.vis-item.vis-background.marker {\n border-left: 2px solid green;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<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\nvar groups = new vis.DataSet([\n {\n id: \"group1\",\n content: \"group1\"\n }\n]);\n\n// add items to the DataSet\nitems.add([\n // group 1\n {\n id: \"background1\",\n start: \"2014-01-21\",\n end: \"2014-01-22\",\n type: \"background\",\n group: \"group1\"\n },\n\n // subgroup 1\n {\n id: 1,\n content: \"item 1 (expected time)\",\n className: \"expected\",\n start: \"2014-01-23T12:00:00\",\n end: \"2014-01-26T12:00:00\",\n group: \"group1\",\n subgroup: \"sg_1\"\n },\n {\n id: 2,\n content: \"item 1 (actual time)\",\n start: \"2014-01-24T12:00:00\",\n end: \"2014-01-27T12:00:00\",\n group: \"group1\",\n subgroup: \"sg_1\"\n },\n\n // subgroup 2\n {\n id: 3,\n content: \"item 2 (expected time)\",\n className: \"expected\",\n start: \"2014-01-13T12:00:00\",\n end: \"2014-01-16T12:00:00\",\n group: \"group1\",\n subgroup: \"sg_2\"\n },\n {\n id: 4,\n content: \"item 2 (actual time)\",\n start: \"2014-01-14T12:00:00\",\n end: \"2014-01-17T12:00:00\",\n group: \"group1\",\n subgroup: \"sg_2\"\n },\n\n // subgroup 3\n {\n id: 5,\n content: \"item 3 (expected time)\",\n className: \"expected\",\n start: \"2014-01-17T12:00:00\",\n end: \"2014-01-19T12:00:00\",\n group: \"group1\",\n subgroup: \"sg_3\"\n },\n {\n id: 6,\n content: \"item 3 (actual time)\",\n start: \"2014-01-17T12:00:00\",\n end: \"2014-01-18T12:00:00\",\n group: \"group1\",\n subgroup: \"sg_3\"\n }\n]);\n\nvar container = document.getElementById(\"visualization\");\nvar options = {\n start: \"2014-01-10\",\n end: \"2014-02-10\",\n editable: true,\n stack: false,\n stackSubgroups: false\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 | expected vs actual times items"}'
/><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" }
});
var groups = new vis.DataSet([
{
id: "group1",
content: "group1"
}
]);
// add items to the DataSet
items.add([
// group 1
{
id: "background1",
start: "2014-01-21",
end: "2014-01-22",
type: "background",
group: "group1"
},
// subgroup 1
{
id: 1,
content: "item 1 (expected time)",
className: "expected",
start: "2014-01-23T12:00:00",
end: "2014-01-26T12:00:00",
group: "group1",
subgroup: "sg_1"
},
{
id: 2,
content: "item 1 (actual time)",
start: "2014-01-24T12:00:00",
end: "2014-01-27T12:00:00",
group: "group1",
subgroup: "sg_1"
},
// subgroup 2
{
id: 3,
content: "item 2 (expected time)",
className: "expected",
start: "2014-01-13T12:00:00",
end: "2014-01-16T12:00:00",
group: "group1",
subgroup: "sg_2"
},
{
id: 4,
content: "item 2 (actual time)",
start: "2014-01-14T12:00:00",
end: "2014-01-17T12:00:00",
group: "group1",
subgroup: "sg_2"
},
// subgroup 3
{
id: 5,
content: "item 3 (expected time)",
className: "expected",
start: "2014-01-17T12:00:00",
end: "2014-01-19T12:00:00",
group: "group1",
subgroup: "sg_3"
},
{
id: 6,
content: "item 3 (actual time)",
start: "2014-01-17T12:00:00",
end: "2014-01-18T12:00:00",
group: "group1",
subgroup: "sg_3"
}
]);
var container = document.getElementById("visualization");
var options = {
start: "2014-01-10",
end: "2014-02-10",
editable: true,
stack: false,
stackSubgroups: false
};
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;
}
.vis-item.expected {
background-color: transparent;
border-style: dashed !important;
z-index: 0;
}
.vis-item.vis-selected {
opacity: 0.6;
}
.vis-item.vis-background.marker {
border-left: 2px solid green;
}
"
/><input
type="hidden"
name="html"
value='<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="items/expectedVsActualTimesItems.html"
><div class="example-image">
<img
src="thumbnails/a882a27a662916edca7e547bcf500604370c2141c146acfd4dba3565b9ccb690.png"
alt="expected vs actual times items"
/></div></a></span
><span class="example-link"
><div>
<a href="dataHandling/loadExternalData.html">External 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='// load data via an ajax request. When the data is in, load the timeline
$.ajax({
url: "../resources/data/basic.json",
success: function(data) {
// hide the "loading..." message
document.getElementById("loading").style.display = "none";
// 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(data);
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
},
error: function(err) {
console.log("Error", err);
if (err.status === 0) {
alert(
"Failed to load data/basic.json.\nPlease run this example on a server."
);
} else {
alert("Failed to load data/basic.json.");
}
}
});
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<p>
This demo shows how to load external data via an ajax call.
</p>
<div id="visualization"></div>
<div id="loading">loading...</div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js,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 | External 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,\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 This demo shows how to load external data via an ajax call.\n</p>\n<div id=\"visualization\"></div>\n<div id=\"loading\">loading...</div>\n","js":"// load data via an ajax request. When the data is in, load the timeline\n$.ajax({\n url: \"../resources/data/basic.json\",\n success: function(data) {\n // hide the \"loading...\" message\n document.getElementById(\"loading\").style.display = \"none\";\n\n // DOM element where the Timeline will be attached\n var container = document.getElementById(\"visualization\");\n\n // Create a DataSet (allows two way data-binding)\n var items = new vis.DataSet(data);\n\n // Configuration for the Timeline\n var options = {};\n\n // Create a Timeline\n var timeline = new vis.Timeline(container, items, options);\n },\n error: function(err) {\n console.log(\"Error\", err);\n if (err.status === 0) {\n alert(\n \"Failed to load data/basic.json.\\nPlease run this example on a server.\"\n );\n } else {\n alert(\"Failed to load data/basic.json.\");\n }\n }\n});\n","js_external":"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | External data"}'
/><input
type="hidden"
name="js"
value='// load data via an ajax request. When the data is in, load the timeline
$.ajax({
url: "../resources/data/basic.json",
success: function(data) {
// hide the "loading..." message
document.getElementById("loading").style.display = "none";
// 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(data);
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
},
error: function(err) {
console.log("Error", err);
if (err.status === 0) {
alert(
"Failed to load data/basic.json.\nPlease run this example on a server."
);
} else {
alert("Failed to load data/basic.json.");
}
}
});
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<p>
This demo shows how to load external data via an ajax call.
</p>
<div id="visualization"></div>
<div id="loading">loading...</div>
'
/></form
></span>
</div>
<a href="dataHandling/loadExternalData.html"
><div class="example-image">
<img
src="thumbnails/400506c65325aecddd99bf69eaf496755ac4f423cd071677ee7c891f021d2601.png"
alt="External data"
/></div></a></span
><span class="example-link"
><div>
<a href="styling/gridStyling.html">Grid styling</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: "custom", start: "2015-01-01" },
{ id: 2, content: "styling", start: "2016-01-01" },
{ id: 3, content: "of", start: "2017-01-01" },
{ id: 4, content: "background", start: "2018-01-01" },
{ id: 5, content: "grid", start: "2019-01-01" }
]);
// 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;
}
/* alternating column backgrounds */
.vis-time-axis .vis-grid.vis-odd {
background: #f5f5f5;
}
/* gray background in weekends, white text color */
.vis-time-axis .vis-grid.vis-saturday,
.vis-time-axis .vis-grid.vis-sunday {
background: gray;
}
.vis-time-axis .vis-text.vis-saturday,
.vis-time-axis .vis-text.vis-sunday {
color: white;
}
"
/><input
type="hidden"
name="html"
value='<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 | Grid styling"
/>
</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\n/* alternating column backgrounds */\n.vis-time-axis .vis-grid.vis-odd {\n background: #f5f5f5;\n}\n\n/* gray background in weekends, white text color */\n.vis-time-axis .vis-grid.vis-saturday,\n.vis-time-axis .vis-grid.vis-sunday {\n background: gray;\n}\n.vis-time-axis .vis-text.vis-saturday,\n.vis-time-axis .vis-text.vis-sunday {\n color: white;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<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: \"custom\", start: \"2015-01-01\" },\n { id: 2, content: \"styling\", start: \"2016-01-01\" },\n { id: 3, content: \"of\", start: \"2017-01-01\" },\n { id: 4, content: \"background\", start: \"2018-01-01\" },\n { id: 5, content: \"grid\", start: \"2019-01-01\" }\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 | Grid styling"}'
/><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: "custom", start: "2015-01-01" },
{ id: 2, content: "styling", start: "2016-01-01" },
{ id: 3, content: "of", start: "2017-01-01" },
{ id: 4, content: "background", start: "2018-01-01" },
{ id: 5, content: "grid", start: "2019-01-01" }
]);
// 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;
}
/* alternating column backgrounds */
.vis-time-axis .vis-grid.vis-odd {
background: #f5f5f5;
}
/* gray background in weekends, white text color */
.vis-time-axis .vis-grid.vis-saturday,
.vis-time-axis .vis-grid.vis-sunday {
background: gray;
}
.vis-time-axis .vis-text.vis-saturday,
.vis-time-axis .vis-text.vis-sunday {
color: white;
}
"
/><input
type="hidden"
name="html"
value='<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="styling/gridStyling.html"
><div class="example-image">
<img
src="thumbnails/5808f4695af7c1e388b809d20a2bf84dab9a34d9c481d4b9bdb7e521340f485e.png"
alt="Grid styling"
/></div></a></span
><span class="example-link"
><div>
<a href="groups/groups.html">Group example</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 now = moment()
.minutes(0)
.seconds(0)
.milliseconds(0);
var groupCount = 3;
var itemCount = 20;
// create a data set with groups
var names = ["John", "Alston", "Lee", "Grant"];
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({ id: g, content: names[g] });
}
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 200, "hours");
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,
group: group,
content:
"item " +
i +
' <span style="color:#97B0F8;">(' +
names[group] +
")</span>",
start: start,
type: "box"
});
}
// create visualization
var container = document.getElementById("visualization");
var options = {
groupOrder: "content" // groupOrder can be a property name or a sorting function
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example demonstrate using groups. Note that a DataSet is used for both
items and groups, allowing to dynamically add, update or remove both items and
groups via the DataSet.
</p>
<div id="visualization"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js,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 | Group example"
/>
</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#visualization {\n box-sizing: border-box;\n width: 100%;\n height: 300px;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n This example demonstrate using groups. Note that a DataSet is used for both\n items and groups, allowing to dynamically add, update or remove both items and\n groups via the DataSet.\n</p>\n<div id=\"visualization\"></div>\n","js":"var now = moment()\n .minutes(0)\n .seconds(0)\n .milliseconds(0);\nvar groupCount = 3;\nvar itemCount = 20;\n\n// create a data set with groups\nvar names = [\"John\", \"Alston\", \"Lee\", \"Grant\"];\nvar groups = new vis.DataSet();\nfor (var g = 0; g < groupCount; g++) {\n groups.add({ id: g, content: names[g] });\n}\n\n// create a dataset with items\nvar items = new vis.DataSet();\nfor (var i = 0; i < itemCount; i++) {\n var start = now.clone().add(Math.random() * 200, \"hours\");\n var group = Math.floor(Math.random() * groupCount);\n items.add({\n id: i,\n group: group,\n content:\n \"item \" +\n i +\n ' <span style=\"color:#97B0F8;\">(' +\n names[group] +\n \")</span>\",\n start: start,\n type: \"box\"\n });\n}\n\n// create visualization\nvar container = document.getElementById(\"visualization\");\nvar options = {\n groupOrder: \"content\" // groupOrder can be a property name or a sorting function\n};\n\nvar timeline = new vis.Timeline(container);\ntimeline.setOptions(options);\ntimeline.setGroups(groups);\ntimeline.setItems(items);\n","js_external":"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Group example"}'
/><input
type="hidden"
name="js"
value='var now = moment()
.minutes(0)
.seconds(0)
.milliseconds(0);
var groupCount = 3;
var itemCount = 20;
// create a data set with groups
var names = ["John", "Alston", "Lee", "Grant"];
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({ id: g, content: names[g] });
}
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 200, "hours");
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,
group: group,
content:
"item " +
i +
' <span style="color:#97B0F8;">(' +
names[group] +
")</span>",
start: start,
type: "box"
});
}
// create visualization
var container = document.getElementById("visualization");
var options = {
groupOrder: "content" // groupOrder can be a property name or a sorting function
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example demonstrate using groups. Note that a DataSet is used for both
items and groups, allowing to dynamically add, update or remove both items and
groups via the DataSet.
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="groups/groups.html"
><div class="example-image">
<img
src="thumbnails/af6866f0b664c428c0c5f77220060db6a2d4c2f613a2775ac487b4c274ea5e29.png"
alt="Group example"
/></div></a></span
><span class="example-link"
><div>
<a href="groups/groupsOrdering.html">Groups ordering</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 groups = new vis.DataSet([
{ id: 0, content: "First", value: 1 },
{ id: 1, content: "Third", value: 3 },
{ id: 2, content: "Second", value: 2 }
]);
// create a dataset with items
// note that months are zero-based in the JavaScript Date object, so month 3 is April
var items = new vis.DataSet([
{
id: 0,
group: 0,
content: "item 0",
start: new Date(2014, 3, 17),
end: new Date(2014, 3, 21)
},
{
id: 1,
group: 0,
content: "item 1",
start: new Date(2014, 3, 19),
end: new Date(2014, 3, 20)
},
{
id: 2,
group: 1,
content: "item 2",
start: new Date(2014, 3, 16),
end: new Date(2014, 3, 24)
},
{
id: 3,
group: 1,
content: "item 3",
start: new Date(2014, 3, 23),
end: new Date(2014, 3, 24)
},
{
id: 4,
group: 1,
content: "item 4",
start: new Date(2014, 3, 22),
end: new Date(2014, 3, 26)
},
{
id: 5,
group: 2,
content: "item 5",
start: new Date(2014, 3, 24),
end: new Date(2014, 3, 27)
}
]);
// create visualization
var container = document.getElementById("visualization");
var options = {
// option groupOrder can be a property name or a sort function
// the sort function must compare two groups and return a value
// > 0 when a > b
// < 0 when a < b
// 0 when a == b
groupOrder: function(a, b) {
return a.value - b.value;
},
editable: true
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example demonstrates custom ordering of groups.
</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 | Groups ordering"
/>
</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#visualization {\n box-sizing: border-box;\n width: 100%;\n height: 300px;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n This example demonstrates custom ordering of groups.\n</p>\n<div id=\"visualization\"></div>\n","js":"var groups = new vis.DataSet([\n { id: 0, content: \"First\", value: 1 },\n { id: 1, content: \"Third\", value: 3 },\n { id: 2, content: \"Second\", value: 2 }\n]);\n\n// create a dataset with items\n// note that months are zero-based in the JavaScript Date object, so month 3 is April\nvar items = new vis.DataSet([\n {\n id: 0,\n group: 0,\n content: \"item 0\",\n start: new Date(2014, 3, 17),\n end: new Date(2014, 3, 21)\n },\n {\n id: 1,\n group: 0,\n content: \"item 1\",\n start: new Date(2014, 3, 19),\n end: new Date(2014, 3, 20)\n },\n {\n id: 2,\n group: 1,\n content: \"item 2\",\n start: new Date(2014, 3, 16),\n end: new Date(2014, 3, 24)\n },\n {\n id: 3,\n group: 1,\n content: \"item 3\",\n start: new Date(2014, 3, 23),\n end: new Date(2014, 3, 24)\n },\n {\n id: 4,\n group: 1,\n content: \"item 4\",\n start: new Date(2014, 3, 22),\n end: new Date(2014, 3, 26)\n },\n {\n id: 5,\n group: 2,\n content: \"item 5\",\n start: new Date(2014, 3, 24),\n end: new Date(2014, 3, 27)\n }\n]);\n\n// create visualization\nvar container = document.getElementById(\"visualization\");\nvar options = {\n // option groupOrder can be a property name or a sort function\n // the sort function must compare two groups and return a value\n // > 0 when a > b\n // < 0 when a < b\n // 0 when a == b\n groupOrder: function(a, b) {\n return a.value - b.value;\n },\n editable: true\n};\n\nvar timeline = new vis.Timeline(container);\ntimeline.setOptions(options);\ntimeline.setGroups(groups);\ntimeline.setItems(items);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Groups ordering"}'
/><input
type="hidden"
name="js"
value='var groups = new vis.DataSet([
{ id: 0, content: "First", value: 1 },
{ id: 1, content: "Third", value: 3 },
{ id: 2, content: "Second", value: 2 }
]);
// create a dataset with items
// note that months are zero-based in the JavaScript Date object, so month 3 is April
var items = new vis.DataSet([
{
id: 0,
group: 0,
content: "item 0",
start: new Date(2014, 3, 17),
end: new Date(2014, 3, 21)
},
{
id: 1,
group: 0,
content: "item 1",
start: new Date(2014, 3, 19),
end: new Date(2014, 3, 20)
},
{
id: 2,
group: 1,
content: "item 2",
start: new Date(2014, 3, 16),
end: new Date(2014, 3, 24)
},
{
id: 3,
group: 1,
content: "item 3",
start: new Date(2014, 3, 23),
end: new Date(2014, 3, 24)
},
{
id: 4,
group: 1,
content: "item 4",
start: new Date(2014, 3, 22),
end: new Date(2014, 3, 26)
},
{
id: 5,
group: 2,
content: "item 5",
start: new Date(2014, 3, 24),
end: new Date(2014, 3, 27)
}
]);
// create visualization
var container = document.getElementById("visualization");
var options = {
// option groupOrder can be a property name or a sort function
// the sort function must compare two groups and return a value
// > 0 when a > b
// < 0 when a < b
// 0 when a == b
groupOrder: function(a, b) {
return a.value - b.value;
},
editable: true
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example demonstrates custom ordering of groups.
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="groups/groupsOrdering.html"
><div class="example-image">
<img
src="thumbnails/8f8d1efd04134b8bf2f75836bb6402f3faa30058c5a8c0ffdd6ecf9989bb89e5.png"
alt="Groups ordering"
/></div></a></span
><span class="example-link"
><div>
<a href="other/hidingPeriods.html">Hiding periods</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-19" },
{ id: 2, content: "item 2", start: "2014-04-21" },
{ id: 3, content: "item 3", start: "2014-04-18" },
{ id: 4, content: "item 4", start: "2014-04-16", end: "2014-04-24" },
{ id: 5, content: "item 5", start: "2014-04-26 12:00:00" },
{ id: 6, content: "item 6", start: "2014-04-27", type: "point" }
]);
// Configuration for the Timeline
var options = {
hiddenDates: [
{ start: "2014-03-21 00:00:00", end: "2014-03-28 00:00:00" },
{
start: "2013-10-26 00:00:00",
end: "2013-10-28 00:00:00",
repeat: "weekly"
}, // daily weekly monthly yearly
{
start: "2013-03-29 20:00:00",
end: "2013-03-30 09:00:00",
repeat: "daily"
} // daily weekly monthly yearly
],
start: "2014-04-17",
end: "2014-05-01",
height: "200px",
editable: true
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
timeline.addCustomTime("2014-04-18 13:00:00");
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<p>
It&apos;s possible to hide (recurring) periods from the Timeline. The
following example hides weekends and nights.
</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 | Hiding periods"
/>
</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 It&apos;s possible to hide (recurring) periods from the Timeline. The\n following example hides weekends and nights.\n</p>\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-19\" },\n { id: 2, content: \"item 2\", start: \"2014-04-21\" },\n { id: 3, content: \"item 3\", start: \"2014-04-18\" },\n { id: 4, content: \"item 4\", start: \"2014-04-16\", end: \"2014-04-24\" },\n { id: 5, content: \"item 5\", start: \"2014-04-26 12:00:00\" },\n { id: 6, content: \"item 6\", start: \"2014-04-27\", type: \"point\" }\n]);\n\n// Configuration for the Timeline\nvar options = {\n hiddenDates: [\n { start: \"2014-03-21 00:00:00\", end: \"2014-03-28 00:00:00\" },\n {\n start: \"2013-10-26 00:00:00\",\n end: \"2013-10-28 00:00:00\",\n repeat: \"weekly\"\n }, // daily weekly monthly yearly\n {\n start: \"2013-03-29 20:00:00\",\n end: \"2013-03-30 09:00:00\",\n repeat: \"daily\"\n } // daily weekly monthly yearly\n ],\n start: \"2014-04-17\",\n end: \"2014-05-01\",\n height: \"200px\",\n editable: true\n};\n\n// Create a Timeline\nvar timeline = new vis.Timeline(container, items, options);\ntimeline.addCustomTime(\"2014-04-18 13:00:00\");\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Hiding periods"}'
/><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-19" },
{ id: 2, content: "item 2", start: "2014-04-21" },
{ id: 3, content: "item 3", start: "2014-04-18" },
{ id: 4, content: "item 4", start: "2014-04-16", end: "2014-04-24" },
{ id: 5, content: "item 5", start: "2014-04-26 12:00:00" },
{ id: 6, content: "item 6", start: "2014-04-27", type: "point" }
]);
// Configuration for the Timeline
var options = {
hiddenDates: [
{ start: "2014-03-21 00:00:00", end: "2014-03-28 00:00:00" },
{
start: "2013-10-26 00:00:00",
end: "2013-10-28 00:00:00",
repeat: "weekly"
}, // daily weekly monthly yearly
{
start: "2013-03-29 20:00:00",
end: "2013-03-30 09:00:00",
repeat: "daily"
} // daily weekly monthly yearly
],
start: "2014-04-17",
end: "2014-05-01",
height: "200px",
editable: true
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
timeline.addCustomTime("2014-04-18 13:00:00");
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<p>
It&apos;s possible to hide (recurring) periods from the Timeline. The
following example hides weekends and nights.
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="other/hidingPeriods.html"
><div class="example-image">
<img
src="thumbnails/d2cc6018822238dd712587e1237cbe712d9003e7ee8a6984e3c5be593eea9d3a.png"
alt="Hiding periods"
/></div></a></span
><span class="example-link"
><div>
<a href="other/horizontalScroll.html">Horizontal Scroll Option</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 groups
var numberOfGroups = 25;
var groups = new vis.DataSet();
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: "Truck&nbsp;" + i
});
}
// create items
var numberOfItems = 1000;
var items = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems / numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
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 + itemsPerGroup * truck,
group: truck,
start: start,
end: end,
content: "Order " + order
});
}
}
// specify options
var options = {
stack: true,
horizontalScroll: true,
zoomKey: "ctrlKey",
maxHeight: 400,
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, items, groups, options);
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<h1>Timeline horizontal scroll option</h1>
<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 | Horizontal Scroll Option"
/>
</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":"","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h1>Timeline horizontal scroll option</h1>\n\n<div id=\"visualization\"></div>\n","js":"// create groups\nvar numberOfGroups = 25;\nvar groups = new vis.DataSet();\nfor (var i = 0; i < numberOfGroups; i++) {\n groups.add({\n id: i,\n content: \"Truck&nbsp;\" + i\n });\n}\n\n// create items\nvar numberOfItems = 1000;\nvar items = new vis.DataSet();\n\nvar itemsPerGroup = Math.round(numberOfItems / numberOfGroups);\n\nfor (var truck = 0; truck < numberOfGroups; truck++) {\n var date = new Date();\n for (var order = 0; order < itemsPerGroup; order++) {\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 + itemsPerGroup * truck,\n group: truck,\n start: start,\n end: end,\n content: \"Order \" + order\n });\n }\n}\n\n// specify options\nvar options = {\n stack: true,\n horizontalScroll: true,\n zoomKey: \"ctrlKey\",\n maxHeight: 400,\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, items, groups, options);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Horizontal Scroll Option"}'
/><input
type="hidden"
name="js"
value='// create groups
var numberOfGroups = 25;
var groups = new vis.DataSet();
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: "Truck&nbsp;" + i
});
}
// create items
var numberOfItems = 1000;
var items = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems / numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
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 + itemsPerGroup * truck,
group: truck,
start: start,
end: end,
content: "Order " + order
});
}
}
// specify options
var options = {
stack: true,
horizontalScroll: true,
zoomKey: "ctrlKey",
maxHeight: 400,
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, items, groups, options);
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<h1>Timeline horizontal scroll option</h1>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="other/horizontalScroll.html"
><div class="example-image">
<img
src="thumbnails/f6d0aca8c8725a34e22d0999705f2e6cf2f9638cd4ec3ccdb4685770e1725c7d.png"
alt="Horizontal Scroll Option"
/></div></a></span
><span class="example-link"
><div>
<a href="items/htmlContents.html">HTML 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='// create a couple of HTML items in various ways
var item1 = document.createElement("div");
item1.appendChild(document.createTextNode("item 1"));
var item2 = document.createElement("div");
item2.innerHTML = "<span>item 2</span>";
var item3 = document.createElement("div");
var span3 = document.createElement("span");
span3.className = "large";
span3.appendChild(document.createTextNode("item 3"));
item3.appendChild(span3);
var item4 = 'item <span class="large">4</span>';
var item5 = document.createElement("div");
item5.appendChild(document.createTextNode("item 5"));
item5.appendChild(document.createElement("br"));
var img5 = document.createElement("img");
img5.src = "../resources/img/attachment-icon.png";
img5.style.width = "48px";
img5.style.height = "48px";
item5.appendChild(img5);
var item6 =
'item6<br><img src="../resources/img/comments-icon.png" style="width: 48px; height: 48px;">';
var item7 =
'item7<br><a href="https://visjs.org" target="_blank">click here</a>';
// create data and a Timeline
var container = document.getElementById("visualization");
var items = new vis.DataSet([
{ id: 1, content: item1, start: "2013-04-20" },
{ id: 2, content: item2, start: "2013-04-14" },
{ id: 3, content: item3, start: "2013-04-18" },
{ id: 4, content: item4, start: "2013-04-16", end: "2013-04-19" },
{ id: 5, content: item5, start: "2013-04-25" },
{ id: 6, content: item6, start: "2013-04-27" },
{ id: 7, content: item7, start: "2013-04-21" }
]);
var options = {};
var timeline = new vis.Timeline(container, items, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
span {
color: red;
}
span.large {
font-size: 200%;
}
"
/><input
type="hidden"
name="html"
value='<p>
Load HTML contents in the Timeline in various ways.
</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 | HTML 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,\nhtml {\n font-family: arial, sans-serif;\n font-size: 11pt;\n}\nspan {\n color: red;\n}\nspan.large {\n font-size: 200%;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n Load HTML contents in the Timeline in various ways.\n</p>\n<div id=\"visualization\"></div>\n","js":"// create a couple of HTML items in various ways\n\nvar item1 = document.createElement(\"div\");\nitem1.appendChild(document.createTextNode(\"item 1\"));\n\nvar item2 = document.createElement(\"div\");\nitem2.innerHTML = \"<span>item 2</span>\";\n\nvar item3 = document.createElement(\"div\");\nvar span3 = document.createElement(\"span\");\nspan3.className = \"large\";\nspan3.appendChild(document.createTextNode(\"item 3\"));\nitem3.appendChild(span3);\n\nvar item4 = 'item <span class=\"large\">4</span>';\n\nvar item5 = document.createElement(\"div\");\nitem5.appendChild(document.createTextNode(\"item 5\"));\nitem5.appendChild(document.createElement(\"br\"));\nvar img5 = document.createElement(\"img\");\nimg5.src = \"../resources/img/attachment-icon.png\";\nimg5.style.width = \"48px\";\nimg5.style.height = \"48px\";\nitem5.appendChild(img5);\n\nvar item6 =\n 'item6<br><img src=\"../resources/img/comments-icon.png\" style=\"width: 48px; height: 48px;\">';\n\nvar item7 =\n 'item7<br><a href=\"https://visjs.org\" target=\"_blank\">click here</a>';\n\n// create data and a Timeline\nvar container = document.getElementById(\"visualization\");\nvar items = new vis.DataSet([\n { id: 1, content: item1, start: \"2013-04-20\" },\n { id: 2, content: item2, start: \"2013-04-14\" },\n { id: 3, content: item3, start: \"2013-04-18\" },\n { id: 4, content: item4, start: \"2013-04-16\", end: \"2013-04-19\" },\n { id: 5, content: item5, start: \"2013-04-25\" },\n { id: 6, content: item6, start: \"2013-04-27\" },\n { id: 7, content: item7, start: \"2013-04-21\" }\n]);\nvar options = {};\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 | HTML data"}'
/><input
type="hidden"
name="js"
value='// create a couple of HTML items in various ways
var item1 = document.createElement("div");
item1.appendChild(document.createTextNode("item 1"));
var item2 = document.createElement("div");
item2.innerHTML = "<span>item 2</span>";
var item3 = document.createElement("div");
var span3 = document.createElement("span");
span3.className = "large";
span3.appendChild(document.createTextNode("item 3"));
item3.appendChild(span3);
var item4 = 'item <span class="large">4</span>';
var item5 = document.createElement("div");
item5.appendChild(document.createTextNode("item 5"));
item5.appendChild(document.createElement("br"));
var img5 = document.createElement("img");
img5.src = "../resources/img/attachment-icon.png";
img5.style.width = "48px";
img5.style.height = "48px";
item5.appendChild(img5);
var item6 =
'item6<br><img src="../resources/img/comments-icon.png" style="width: 48px; height: 48px;">';
var item7 =
'item7<br><a href="https://visjs.org" target="_blank">click here</a>';
// create data and a Timeline
var container = document.getElementById("visualization");
var items = new vis.DataSet([
{ id: 1, content: item1, start: "2013-04-20" },
{ id: 2, content: item2, start: "2013-04-14" },
{ id: 3, content: item3, start: "2013-04-18" },
{ id: 4, content: item4, start: "2013-04-16", end: "2013-04-19" },
{ id: 5, content: item5, start: "2013-04-25" },
{ id: 6, content: item6, start: "2013-04-27" },
{ id: 7, content: item7, start: "2013-04-21" }
]);
var options = {};
var timeline = new vis.Timeline(container, items, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
span {
color: red;
}
span.large {
font-size: 200%;
}
"
/><input
type="hidden"
name="html"
value='<p>
Load HTML contents in the Timeline in various ways.
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="items/htmlContents.html"
><div class="example-image">
<img
src="thumbnails/3e85e53d3d171809dce83f094808626fd55bebbec92fb7290971829c33d29270.png"
alt="HTML data"
/></div></a></span
><span class="example-link"
><div>
<a href="editing/individualEditableItems.html"
>Individual editable items</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 groups to highlight groupUpdate
var groups = new vis.DataSet([
{ id: 1, content: "Group 1" },
{ id: 2, content: "Group 2" }
]);
// create a DataSet with items
var items = new vis.DataSet([
{ id: 1, content: "Editable", editable: true, start: "2010-08-23", group: 1 },
{
id: 2,
content: "Editable",
editable: true,
start: "2010-08-23T23:00:00",
group: 2
},
{
id: 3,
content: "Read-only",
editable: false,
start: "2010-08-24T16:00:00",
group: 1
},
{
id: 4,
content: "Read-only",
editable: false,
start: "2010-08-26",
end: "2010-09-02",
group: 2
},
{
id: 5,
content: "Edit Time Only",
editable: { updateTime: true, updateGroup: false, remove: false },
start: "2010-08-28",
group: 1
},
{
id: 6,
content: "Edit Group Only",
editable: { updateTime: false, updateGroup: true, remove: false },
start: "2010-08-29",
group: 2
},
{
id: 7,
content: "Remove Only",
editable: { updateTime: false, updateGroup: false, remove: true },
start: "2010-08-31",
end: "2010-09-03",
group: 1
},
{ id: 8, content: "Default", start: "2010-09-04T12:00:00", group: 2 }
]);
var container = document.getElementById("visualization");
var options = {
editable: true // default for all items
};
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;
}
div.vis-editable,
div.vis-editable.vis-selected {
/* custom styling for editable items... */
}
div.vis-readonly,
div.vis-readonly.vis-selected {
/* custom styling for readonly items... */
background-color: #ff4500;
border-color: red;
color: white;
}
"
/><input
type="hidden"
name="html"
value='<p>Specify individual items to be editable or readonly.</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 | Individual editable items"
/>
</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\ndiv.vis-editable,\ndiv.vis-editable.vis-selected {\n /* custom styling for editable items... */\n}\n\ndiv.vis-readonly,\ndiv.vis-readonly.vis-selected {\n /* custom styling for readonly items... */\n background-color: #ff4500;\n border-color: red;\n color: white;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>Specify individual items to be editable or readonly.</p>\n\n<div id=\"visualization\"></div>\n","js":"// create groups to highlight groupUpdate\nvar groups = new vis.DataSet([\n { id: 1, content: \"Group 1\" },\n { id: 2, content: \"Group 2\" }\n]);\n// create a DataSet with items\nvar items = new vis.DataSet([\n { id: 1, content: \"Editable\", editable: true, start: \"2010-08-23\", group: 1 },\n {\n id: 2,\n content: \"Editable\",\n editable: true,\n start: \"2010-08-23T23:00:00\",\n group: 2\n },\n {\n id: 3,\n content: \"Read-only\",\n editable: false,\n start: \"2010-08-24T16:00:00\",\n group: 1\n },\n {\n id: 4,\n content: \"Read-only\",\n editable: false,\n start: \"2010-08-26\",\n end: \"2010-09-02\",\n group: 2\n },\n {\n id: 5,\n content: \"Edit Time Only\",\n editable: { updateTime: true, updateGroup: false, remove: false },\n start: \"2010-08-28\",\n group: 1\n },\n {\n id: 6,\n content: \"Edit Group Only\",\n editable: { updateTime: false, updateGroup: true, remove: false },\n start: \"2010-08-29\",\n group: 2\n },\n {\n id: 7,\n content: \"Remove Only\",\n editable: { updateTime: false, updateGroup: false, remove: true },\n start: \"2010-08-31\",\n end: \"2010-09-03\",\n group: 1\n },\n { id: 8, content: \"Default\", start: \"2010-09-04T12:00:00\", group: 2 }\n]);\n\nvar container = document.getElementById(\"visualization\");\nvar options = {\n editable: true // default for all items\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 | Individual editable items"}'
/><input
type="hidden"
name="js"
value='// create groups to highlight groupUpdate
var groups = new vis.DataSet([
{ id: 1, content: "Group 1" },
{ id: 2, content: "Group 2" }
]);
// create a DataSet with items
var items = new vis.DataSet([
{ id: 1, content: "Editable", editable: true, start: "2010-08-23", group: 1 },
{
id: 2,
content: "Editable",
editable: true,
start: "2010-08-23T23:00:00",
group: 2
},
{
id: 3,
content: "Read-only",
editable: false,
start: "2010-08-24T16:00:00",
group: 1
},
{
id: 4,
content: "Read-only",
editable: false,
start: "2010-08-26",
end: "2010-09-02",
group: 2
},
{
id: 5,
content: "Edit Time Only",
editable: { updateTime: true, updateGroup: false, remove: false },
start: "2010-08-28",
group: 1
},
{
id: 6,
content: "Edit Group Only",
editable: { updateTime: false, updateGroup: true, remove: false },
start: "2010-08-29",
group: 2
},
{
id: 7,
content: "Remove Only",
editable: { updateTime: false, updateGroup: false, remove: true },
start: "2010-08-31",
end: "2010-09-03",
group: 1
},
{ id: 8, content: "Default", start: "2010-09-04T12:00:00", group: 2 }
]);
var container = document.getElementById("visualization");
var options = {
editable: true // default for all items
};
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;
}
div.vis-editable,
div.vis-editable.vis-selected {
/* custom styling for editable items... */
}
div.vis-readonly,
div.vis-readonly.vis-selected {
/* custom styling for readonly items... */
background-color: #ff4500;
border-color: red;
color: white;
}
"
/><input
type="hidden"
name="html"
value='<p>Specify individual items to be editable or readonly.</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="editing/individualEditableItems.html"
><div class="example-image">
<img
src="thumbnails/2c19ded2c36375586a26b1fcb1032921a88878564bb8e4105a196924d132787b.png"
alt="Individual editable items"
/></div></a></span
><span class="example-link"
><div>
<a href="editing/overrideEditingItems.html"
>Individual editable items (override)</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
var items = new vis.DataSet([
{ id: 1, content: "Editable", editable: true, start: "2010-08-23", group: 1 },
{
id: 2,
content: "Editable",
editable: true,
start: "2010-08-23T23:00:00",
group: 2
},
{
id: 3,
content: "Read-only",
editable: false,
start: "2010-08-24T16:00:00",
group: 1
},
{
id: 4,
content: "Read-only",
editable: false,
start: "2010-08-26",
end: "2010-09-02",
group: 2
},
{ id: 5, content: "Editable", editable: true, start: "2010-08-28", group: 1 },
{
id: 6,
content: "Read-only",
editable: false,
start: "2010-08-29",
group: 2
},
{
id: 7,
content: "Editable",
editable: true,
start: "2010-08-31",
end: "2010-09-03",
group: 1
},
{
id: 8,
content: "Read-only",
editable: false,
start: "2010-09-04T12:00:00",
group: 2
},
{ id: 9, content: "Default", start: "2010-09-04", group: 1 },
{ id: 10, content: "Default", start: "2010-08-24", group: 2 }
]);
var groups = [
{
id: 1,
content: "group 1"
},
{
id: 2,
content: "group 2"
}
];
var container = document.getElementById("visualization");
var options = {
editable: {
add: true,
remove: true,
updateGroup: false,
updateTime: true,
overrideItems: false
} // default for all items
};
var timeline = new vis.Timeline(container, items, groups, options);
var updateEditOptions = function(e) {
var changedOption = e.target.name;
var options = { editable: {} };
options.editable[changedOption] = e.target.checked;
timeline.setOptions(options);
};
var cbs = document.getElementsByTagName("input");
[].forEach.call(cbs, function(cb) {
cb.onchange = updateEditOptions;
});
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
div.vis-editable,
div.vis-editable.vis-selected {
/* custom styling for editable items... */
}
div.vis-readonly,
div.vis-readonly.vis-selected {
/* custom styling for readonly items... */
background-color: #ff4500;
border-color: red;
color: white;
}
"
/><input
type="hidden"
name="html"
value='<p>
Specify individual items to be editable or readonly. Toggle edit options and
override behavior from timeline.editable
</p>
<div id="visualization"></div>
<p></p>
<form>
Timeline.editable = {<br />
<input name="add" type="checkbox" checked />add<br />
<input name="remove" type="checkbox" checked />remove<br />
<input name="updateGroup" type="checkbox" />updateGroup<br />
<input name="updateTime" type="checkbox" checked />updateTime<br />
<input name="overrideItems" type="checkbox" />overrideItems<br />
}
</form>
<p></p>
'
/><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 | Individual editable items (override)"
/>
</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\ndiv.vis-editable,\ndiv.vis-editable.vis-selected {\n /* custom styling for editable items... */\n}\n\ndiv.vis-readonly,\ndiv.vis-readonly.vis-selected {\n /* custom styling for readonly items... */\n background-color: #ff4500;\n border-color: red;\n color: white;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n Specify individual items to be editable or readonly. Toggle edit options and\n override behavior from timeline.editable\n</p>\n\n<div id=\"visualization\"></div>\n<p></p>\n<form>\n Timeline.editable = {<br />\n <input name=\"add\" type=\"checkbox\" checked />add<br />\n <input name=\"remove\" type=\"checkbox\" checked />remove<br />\n <input name=\"updateGroup\" type=\"checkbox\" />updateGroup<br />\n <input name=\"updateTime\" type=\"checkbox\" checked />updateTime<br />\n <input name=\"overrideItems\" type=\"checkbox\" />overrideItems<br />\n }\n</form>\n<p></p>\n","js":"// create a DataSet with items\nvar items = new vis.DataSet([\n { id: 1, content: \"Editable\", editable: true, start: \"2010-08-23\", group: 1 },\n {\n id: 2,\n content: \"Editable\",\n editable: true,\n start: \"2010-08-23T23:00:00\",\n group: 2\n },\n {\n id: 3,\n content: \"Read-only\",\n editable: false,\n start: \"2010-08-24T16:00:00\",\n group: 1\n },\n {\n id: 4,\n content: \"Read-only\",\n editable: false,\n start: \"2010-08-26\",\n end: \"2010-09-02\",\n group: 2\n },\n { id: 5, content: \"Editable\", editable: true, start: \"2010-08-28\", group: 1 },\n {\n id: 6,\n content: \"Read-only\",\n editable: false,\n start: \"2010-08-29\",\n group: 2\n },\n {\n id: 7,\n content: \"Editable\",\n editable: true,\n start: \"2010-08-31\",\n end: \"2010-09-03\",\n group: 1\n },\n {\n id: 8,\n content: \"Read-only\",\n editable: false,\n start: \"2010-09-04T12:00:00\",\n group: 2\n },\n { id: 9, content: \"Default\", start: \"2010-09-04\", group: 1 },\n { id: 10, content: \"Default\", start: \"2010-08-24\", group: 2 }\n]);\n\nvar groups = [\n {\n id: 1,\n content: \"group 1\"\n },\n {\n id: 2,\n content: \"group 2\"\n }\n];\n\nvar container = document.getElementById(\"visualization\");\nvar options = {\n editable: {\n add: true,\n remove: true,\n updateGroup: false,\n updateTime: true,\n overrideItems: false\n } // default for all items\n};\n\nvar timeline = new vis.Timeline(container, items, groups, options);\n\nvar updateEditOptions = function(e) {\n var changedOption = e.target.name;\n var options = { editable: {} };\n options.editable[changedOption] = e.target.checked;\n timeline.setOptions(options);\n};\n\nvar cbs = document.getElementsByTagName(\"input\");\n[].forEach.call(cbs, function(cb) {\n cb.onchange = updateEditOptions;\n});\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Individual editable items (override)"}'
/><input
type="hidden"
name="js"
value='// create a DataSet with items
var items = new vis.DataSet([
{ id: 1, content: "Editable", editable: true, start: "2010-08-23", group: 1 },
{
id: 2,
content: "Editable",
editable: true,
start: "2010-08-23T23:00:00",
group: 2
},
{
id: 3,
content: "Read-only",
editable: false,
start: "2010-08-24T16:00:00",
group: 1
},
{
id: 4,
content: "Read-only",
editable: false,
start: "2010-08-26",
end: "2010-09-02",
group: 2
},
{ id: 5, content: "Editable", editable: true, start: "2010-08-28", group: 1 },
{
id: 6,
content: "Read-only",
editable: false,
start: "2010-08-29",
group: 2
},
{
id: 7,
content: "Editable",
editable: true,
start: "2010-08-31",
end: "2010-09-03",
group: 1
},
{
id: 8,
content: "Read-only",
editable: false,
start: "2010-09-04T12:00:00",
group: 2
},
{ id: 9, content: "Default", start: "2010-09-04", group: 1 },
{ id: 10, content: "Default", start: "2010-08-24", group: 2 }
]);
var groups = [
{
id: 1,
content: "group 1"
},
{
id: 2,
content: "group 2"
}
];
var container = document.getElementById("visualization");
var options = {
editable: {
add: true,
remove: true,
updateGroup: false,
updateTime: true,
overrideItems: false
} // default for all items
};
var timeline = new vis.Timeline(container, items, groups, options);
var updateEditOptions = function(e) {
var changedOption = e.target.name;
var options = { editable: {} };
options.editable[changedOption] = e.target.checked;
timeline.setOptions(options);
};
var cbs = document.getElementsByTagName("input");
[].forEach.call(cbs, function(cb) {
cb.onchange = updateEditOptions;
});
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
div.vis-editable,
div.vis-editable.vis-selected {
/* custom styling for editable items... */
}
div.vis-readonly,
div.vis-readonly.vis-selected {
/* custom styling for readonly items... */
background-color: #ff4500;
border-color: red;
color: white;
}
"
/><input
type="hidden"
name="html"
value='<p>
Specify individual items to be editable or readonly. Toggle edit options and
override behavior from timeline.editable
</p>
<div id="visualization"></div>
<p></p>
<form>
Timeline.editable = {<br />
<input name="add" type="checkbox" checked />add<br />
<input name="remove" type="checkbox" checked />remove<br />
<input name="updateGroup" type="checkbox" />updateGroup<br />
<input name="updateTime" type="checkbox" checked />updateTime<br />
<input name="overrideItems" type="checkbox" />overrideItems<br />
}
</form>
<p></p>
'
/></form
></span>
</div>
<a href="editing/overrideEditingItems.html"
><div class="example-image">
<img
src="thumbnails/c00a930f5cdf6643c99e60a9e2a067a0bd753d513077f3e4de918f9e9c27a3c9.png"
alt="Individual editable items (override)"
/></div></a></span
><span class="example-link"
><div>
<a href="styling/itemClassNames.html">Item class names</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 data
// note that months are zero-based in the JavaScript Date object
var data = new vis.DataSet([
{
start: new Date(2012, 7, 19),
content: "default"
},
{
start: new Date(2012, 7, 23),
content: "green",
className: "green"
},
{
start: new Date(2012, 7, 29),
content: "red",
className: "red"
},
{
start: new Date(2012, 7, 27),
end: new Date(2012, 8, 1),
content: "orange",
className: "orange"
},
{
start: new Date(2012, 8, 2),
content: "magenta",
className: "magenta"
}
]);
// specify options
var options = {
editable: true
};
// create the timeline
var container = document.getElementById("visualization");
timeline = new vis.Timeline(container, data, options);
'
/><input
type="hidden"
name="css"
value="body,
input {
font: 12pt verdana;
}
/* custom styles for individual items, load this after vis-timeline-graph2d.min.css/vis-timeline-graph2d.min.css */
.vis-item.green {
background-color: greenyellow;
border-color: green;
}
/* create a custom sized dot at the bottom of the red item */
.vis-item.red {
background-color: red;
border-color: darkred;
color: white;
font-family: monospace;
box-shadow: 0 0 10px gray;
}
.vis-item.vis-dot.red {
border-radius: 10px;
border-width: 10px;
}
.vis-item.vis-line.red {
border-width: 5px;
}
.vis-item.vis-box.red {
border-radius: 0;
border-width: 2px;
font-size: 24pt;
font-weight: bold;
}
.vis-item.orange {
background-color: gold;
border-color: orange;
}
.vis-item.vis-selected.orange {
/* custom colors for selected orange items */
background-color: orange;
border-color: orangered;
}
.vis-item.magenta {
background-color: magenta;
border-color: purple;
color: white;
}
/* our custom classes overrule the styles for selected events,
so lets define a new style for the selected events */
.vis-item.vis-selected {
background-color: white;
border-color: black;
color: black;
box-shadow: 0 0 10px gray;
}
"
/><input
type="hidden"
name="html"
value='<p>
This page demonstrates the Timeline with custom css classes for individual
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 | Item class names"
/>
</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,\ninput {\n font: 12pt verdana;\n}\n\n/* custom styles for individual items, load this after vis-timeline-graph2d.min.css/vis-timeline-graph2d.min.css */\n\n.vis-item.green {\n background-color: greenyellow;\n border-color: green;\n}\n\n/* create a custom sized dot at the bottom of the red item */\n.vis-item.red {\n background-color: red;\n border-color: darkred;\n color: white;\n font-family: monospace;\n box-shadow: 0 0 10px gray;\n}\n.vis-item.vis-dot.red {\n border-radius: 10px;\n border-width: 10px;\n}\n.vis-item.vis-line.red {\n border-width: 5px;\n}\n.vis-item.vis-box.red {\n border-radius: 0;\n border-width: 2px;\n font-size: 24pt;\n font-weight: bold;\n}\n\n.vis-item.orange {\n background-color: gold;\n border-color: orange;\n}\n.vis-item.vis-selected.orange {\n /* custom colors for selected orange items */\n background-color: orange;\n border-color: orangered;\n}\n\n.vis-item.magenta {\n background-color: magenta;\n border-color: purple;\n color: white;\n}\n\n/* our custom classes overrule the styles for selected events,\n so lets define a new style for the selected events */\n.vis-item.vis-selected {\n background-color: white;\n border-color: black;\n color: black;\n box-shadow: 0 0 10px gray;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n This page demonstrates the Timeline with custom css classes for individual\n items.\n</p>\n\n<div id=\"visualization\"></div>\n","js":"// create data\n// note that months are zero-based in the JavaScript Date object\nvar data = new vis.DataSet([\n {\n start: new Date(2012, 7, 19),\n content: \"default\"\n },\n {\n start: new Date(2012, 7, 23),\n content: \"green\",\n className: \"green\"\n },\n {\n start: new Date(2012, 7, 29),\n content: \"red\",\n className: \"red\"\n },\n {\n start: new Date(2012, 7, 27),\n end: new Date(2012, 8, 1),\n content: \"orange\",\n className: \"orange\"\n },\n {\n start: new Date(2012, 8, 2),\n content: \"magenta\",\n className: \"magenta\"\n }\n]);\n\n// specify options\nvar options = {\n editable: true\n};\n\n// create the timeline\nvar container = document.getElementById(\"visualization\");\ntimeline = new vis.Timeline(container, data, options);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Item class names"}'
/><input
type="hidden"
name="js"
value='// create data
// note that months are zero-based in the JavaScript Date object
var data = new vis.DataSet([
{
start: new Date(2012, 7, 19),
content: "default"
},
{
start: new Date(2012, 7, 23),
content: "green",
className: "green"
},
{
start: new Date(2012, 7, 29),
content: "red",
className: "red"
},
{
start: new Date(2012, 7, 27),
end: new Date(2012, 8, 1),
content: "orange",
className: "orange"
},
{
start: new Date(2012, 8, 2),
content: "magenta",
className: "magenta"
}
]);
// specify options
var options = {
editable: true
};
// create the timeline
var container = document.getElementById("visualization");
timeline = new vis.Timeline(container, data, options);
'
/><input
type="hidden"
name="css"
value="body,
input {
font: 12pt verdana;
}
/* custom styles for individual items, load this after vis-timeline-graph2d.min.css/vis-timeline-graph2d.min.css */
.vis-item.green {
background-color: greenyellow;
border-color: green;
}
/* create a custom sized dot at the bottom of the red item */
.vis-item.red {
background-color: red;
border-color: darkred;
color: white;
font-family: monospace;
box-shadow: 0 0 10px gray;
}
.vis-item.vis-dot.red {
border-radius: 10px;
border-width: 10px;
}
.vis-item.vis-line.red {
border-width: 5px;
}
.vis-item.vis-box.red {
border-radius: 0;
border-width: 2px;
font-size: 24pt;
font-weight: bold;
}
.vis-item.orange {
background-color: gold;
border-color: orange;
}
.vis-item.vis-selected.orange {
/* custom colors for selected orange items */
background-color: orange;
border-color: orangered;
}
.vis-item.magenta {
background-color: magenta;
border-color: purple;
color: white;
}
/* our custom classes overrule the styles for selected events,
so lets define a new style for the selected events */
.vis-item.vis-selected {
background-color: white;
border-color: black;
color: black;
box-shadow: 0 0 10px gray;
}
"
/><input
type="hidden"
name="html"
value='<p>
This page demonstrates the Timeline with custom css classes for individual
items.
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="styling/itemClassNames.html"
><div class="example-image">
<img
src="thumbnails/2e2ffba26d48afc14f27f907f9070c04e12c047f9373af4875a662bc555702ff.png"
alt="Item class names"
/></div></a></span
><span class="example-link"
><div>
<a href="items/itemOrdering.html">Item ordering</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();
var date = vis.moment("2015-03-02");
for (var i = 0; i < 100; i++) {
date.add(Math.round(Math.random() * 2), "hour");
items.add({
id: i,
content: "Item " + i,
start: date.clone(),
end: date.clone().add(4, "hour")
});
}
function customOrder(a, b) {
// order by id
return a.id - b.id;
}
// Configuration for the Timeline
var options = {
order: customOrder,
editable: true,
margin: { item: 0 }
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
var ordering = document.getElementById("ordering");
ordering.onchange = function() {
timeline.setOptions({
order: ordering.checked ? customOrder : () => {}
});
};
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
p {
max-width: 800px;
}
"
/><input
type="hidden"
name="html"
value='<h1>Item ordering</h1>
<p>
By default, the items displayed on the Timeline are unordered. They are
stacked in the order that they where loaded. This means that way items are
stacked can change while moving and zooming the Timeline.
</p>
<p>
To display and stack the items in a controlled order, you can provide a custom
sorting function via the configuration option <code>order</code>.
</p>
<p>
WARNING: Custom ordering is only suitable for small amounts of items (up to a
few hundred), as the Timeline has to render <i>all</i> items once on load to
determine their width and height.
</p>
<p>
<label for="ordering"
><input type="checkbox" id="ordering" checked /> Apply custom ordering.
Order items by their id.</label
>
</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 | Item ordering"
/>
</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}\np {\n max-width: 800px;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h1>Item ordering</h1>\n<p>\n By default, the items displayed on the Timeline are unordered. They are\n stacked in the order that they where loaded. This means that way items are\n stacked can change while moving and zooming the Timeline.\n</p>\n<p>\n To display and stack the items in a controlled order, you can provide a custom\n sorting function via the configuration option <code>order</code>.\n</p>\n<p>\n WARNING: Custom ordering is only suitable for small amounts of items (up to a\n few hundred), as the Timeline has to render <i>all</i> items once on load to\n determine their width and height.\n</p>\n<p>\n <label for=\"ordering\"\n ><input type=\"checkbox\" id=\"ordering\" checked /> Apply custom ordering.\n Order items by their id.</label\n >\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();\nvar date = vis.moment(\"2015-03-02\");\nfor (var i = 0; i < 100; i++) {\n date.add(Math.round(Math.random() * 2), \"hour\");\n items.add({\n id: i,\n content: \"Item \" + i,\n start: date.clone(),\n end: date.clone().add(4, \"hour\")\n });\n}\n\nfunction customOrder(a, b) {\n // order by id\n return a.id - b.id;\n}\n\n// Configuration for the Timeline\nvar options = {\n order: customOrder,\n editable: true,\n margin: { item: 0 }\n};\n\n// Create a Timeline\nvar timeline = new vis.Timeline(container, items, options);\n\nvar ordering = document.getElementById(\"ordering\");\nordering.onchange = function() {\n timeline.setOptions({\n order: ordering.checked ? customOrder : () => {}\n });\n};\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Item ordering"}'
/><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();
var date = vis.moment("2015-03-02");
for (var i = 0; i < 100; i++) {
date.add(Math.round(Math.random() * 2), "hour");
items.add({
id: i,
content: "Item " + i,
start: date.clone(),
end: date.clone().add(4, "hour")
});
}
function customOrder(a, b) {
// order by id
return a.id - b.id;
}
// Configuration for the Timeline
var options = {
order: customOrder,
editable: true,
margin: { item: 0 }
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
var ordering = document.getElementById("ordering");
ordering.onchange = function() {
timeline.setOptions({
order: ordering.checked ? customOrder : () => {}
});
};
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
p {
max-width: 800px;
}
"
/><input
type="hidden"
name="html"
value='<h1>Item ordering</h1>
<p>
By default, the items displayed on the Timeline are unordered. They are
stacked in the order that they where loaded. This means that way items are
stacked can change while moving and zooming the Timeline.
</p>
<p>
To display and stack the items in a controlled order, you can provide a custom
sorting function via the configuration option <code>order</code>.
</p>
<p>
WARNING: Custom ordering is only suitable for small amounts of items (up to a
few hundred), as the Timeline has to render <i>all</i> items once on load to
determine their width and height.
</p>
<p>
<label for="ordering"
><input type="checkbox" id="ordering" checked /> Apply custom ordering.
Order items by their id.</label
>
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="items/itemOrdering.html"
><div class="example-image">
<img
src="thumbnails/5c0e1fbbc2415bf91a113bbd371ef0fc7caedd9177d3a68dc3a59276c40efa00.png"
alt="Item ordering"
/></div></a></span
><span class="example-link"
><div>
<a href="editing/itemsAlwaysDraggable.html"
>itemsAlwaysDraggable Option</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 container = document.getElementById("visualization"),
items = new vis.DataSet();
for (var i = 10; i >= 0; i--) {
var start = new Date(new Date().getTime() + i * 100000);
items.add({
id: i,
content: "item " + i,
start: start,
end: new Date(start.getTime() + 100000)
});
}
var options = {
start: new Date(),
end: new Date(new Date().getTime() + 1000000),
editable: true,
itemsAlwaysDraggable: {
item: true,
range: true
}
};
var timeline = new vis.Timeline(container, items, null, options);
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<p>
The <code>itemsAlwaysDraggable</code> option allows to drag items around
without first selecting them. When <code>itemsAlwaysDraggable.range</code> is
set to <code>true</code>, the range can be changed without selection as well.
</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 | itemsAlwaysDraggable Option"
/>
</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":"","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n The <code>itemsAlwaysDraggable</code> option allows to drag items around\n without first selecting them. When <code>itemsAlwaysDraggable.range</code> is\n set to <code>true</code>, the range can be changed without selection as well.\n</p>\n<div id=\"visualization\"></div>\n","js":"var container = document.getElementById(\"visualization\"),\n items = new vis.DataSet();\n\nfor (var i = 10; i >= 0; i--) {\n var start = new Date(new Date().getTime() + i * 100000);\n items.add({\n id: i,\n content: \"item \" + i,\n start: start,\n end: new Date(start.getTime() + 100000)\n });\n}\n\nvar options = {\n start: new Date(),\n end: new Date(new Date().getTime() + 1000000),\n editable: true,\n itemsAlwaysDraggable: {\n item: true,\n range: true\n }\n};\nvar timeline = new vis.Timeline(container, items, null, options);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | itemsAlwaysDraggable Option"}'
/><input
type="hidden"
name="js"
value='var container = document.getElementById("visualization"),
items = new vis.DataSet();
for (var i = 10; i >= 0; i--) {
var start = new Date(new Date().getTime() + i * 100000);
items.add({
id: i,
content: "item " + i,
start: start,
end: new Date(start.getTime() + 100000)
});
}
var options = {
start: new Date(),
end: new Date(new Date().getTime() + 1000000),
editable: true,
itemsAlwaysDraggable: {
item: true,
range: true
}
};
var timeline = new vis.Timeline(container, items, null, options);
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<p>
The <code>itemsAlwaysDraggable</code> option allows to drag items around
without first selecting them. When <code>itemsAlwaysDraggable.range</code> is
set to <code>true</code>, the range can be changed without selection as well.
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="editing/itemsAlwaysDraggable.html"
><div class="example-image">
<img
src="thumbnails/b4163a37f6eb02be74b76dc06830eae4d26fb4b3f67ed53bf14a1184aa170dc7.png"
alt="itemsAlwaysDraggable Option"
/></div></a></span
><span class="example-link"
><div>
<a href="interaction/limitMoveAndZoom.html">Limit move and zoom</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 some items
// note that months are zero-based in the JavaScript Date object, so month 4 is May
var items = new vis.DataSet([
{ start: new Date(2012, 4, 25), content: "First" },
{ start: new Date(2012, 4, 26), content: "Last" }
]);
// create visualization
var container = document.getElementById("visualization");
var options = {
height: "300px",
min: new Date(2012, 0, 1), // lower limit of visible range
max: new Date(2013, 0, 1), // upper limit of visible range
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 3 // about three months in milliseconds
};
// create the timeline
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setItems(items);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p>
The visible range is limited in this demo:
</p>
<ul>
<li>
minimum visible date is limited to 2012-01-01 using option <code>min</code>
</li>
<li>
maximum visible date is limited to 2013-01-01 (excluded) using option
<code>max</code>
</li>
<li>
visible zoom interval is limited to a minimum of 24 hours using option
<code>zoomMin</code>
</li>
<li>
visible zoom interval is limited to a maximum of about 3 months using option
<code>zoomMax</code>
</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 | Limit move and zoom"
/>
</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 The visible range is limited in this demo:\n</p>\n<ul>\n <li>\n minimum visible date is limited to 2012-01-01 using option <code>min</code>\n </li>\n <li>\n maximum visible date is limited to 2013-01-01 (excluded) using option\n <code>max</code>\n </li>\n <li>\n visible zoom interval is limited to a minimum of 24 hours using option\n <code>zoomMin</code>\n </li>\n <li>\n visible zoom interval is limited to a maximum of about 3 months using option\n <code>zoomMax</code>\n </li>\n</ul>\n<div id=\"visualization\"></div>\n","js":"// create some items\n// note that months are zero-based in the JavaScript Date object, so month 4 is May\nvar items = new vis.DataSet([\n { start: new Date(2012, 4, 25), content: \"First\" },\n { start: new Date(2012, 4, 26), content: \"Last\" }\n]);\n\n// create visualization\nvar container = document.getElementById(\"visualization\");\nvar options = {\n height: \"300px\",\n min: new Date(2012, 0, 1), // lower limit of visible range\n max: new Date(2013, 0, 1), // upper limit of visible range\n zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds\n zoomMax: 1000 * 60 * 60 * 24 * 31 * 3 // about three months in milliseconds\n};\n\n// create the timeline\nvar timeline = new vis.Timeline(container);\ntimeline.setOptions(options);\ntimeline.setItems(items);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Limit move and zoom"}'
/><input
type="hidden"
name="js"
value='// create some items
// note that months are zero-based in the JavaScript Date object, so month 4 is May
var items = new vis.DataSet([
{ start: new Date(2012, 4, 25), content: "First" },
{ start: new Date(2012, 4, 26), content: "Last" }
]);
// create visualization
var container = document.getElementById("visualization");
var options = {
height: "300px",
min: new Date(2012, 0, 1), // lower limit of visible range
max: new Date(2013, 0, 1), // upper limit of visible range
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 31 * 3 // about three months in milliseconds
};
// create the timeline
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setItems(items);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p>
The visible range is limited in this demo:
</p>
<ul>
<li>
minimum visible date is limited to 2012-01-01 using option <code>min</code>
</li>
<li>
maximum visible date is limited to 2013-01-01 (excluded) using option
<code>max</code>
</li>
<li>
visible zoom interval is limited to a minimum of 24 hours using option
<code>zoomMin</code>
</li>
<li>
visible zoom interval is limited to a maximum of about 3 months using option
<code>zoomMax</code>
</li>
</ul>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="interaction/limitMoveAndZoom.html"
><div class="example-image">
<img
src="thumbnails/c94a77d96d85f0e55350c2585cdb7c8815c51e47a957f8549d0fd25d30769275.png"
alt="Limit move and zoom"
/></div></a></span
><span class="example-link"
><div>
<a href="other/loadingScreen.html">Loading screen example</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 now = moment();
var groupCount = 20;
var itemCount = 400;
// create a data set with groups
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({
id: g,
content: "group " + g
});
}
var types = ["point", "range", "box", "background"];
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 180, "days");
var end = start.clone().add(Math.random() * 30, "days");
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,
type: types[Math.floor(Math.random() * types.length)],
group: group,
content: "" + i,
start: start,
end: end
});
}
// create visualization
var container = document.getElementById("visualization");
var options = {
start: new Date(),
end: new Date(100000 * 60 * 60 * 24 + new Date().valueOf()),
loadingScreenTemplate: function() {
return "<h1>Loading...</h1>";
}
};
var timeline = new vis.Timeline(container, items, groups, options);
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<h1>Timeline with loading screen</h1>
<div id="visualization"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js,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 | Loading screen example"
/>
</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":"","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h1>Timeline with loading screen</h1>\n<div id=\"visualization\"></div>\n","js":"var now = moment();\nvar groupCount = 20;\nvar itemCount = 400;\n\n// create a data set with groups\nvar groups = new vis.DataSet();\nfor (var g = 0; g < groupCount; g++) {\n groups.add({\n id: g,\n content: \"group \" + g\n });\n}\n\nvar types = [\"point\", \"range\", \"box\", \"background\"];\n// create a dataset with items\nvar items = new vis.DataSet();\nfor (var i = 0; i < itemCount; i++) {\n var start = now.clone().add(Math.random() * 180, \"days\");\n var end = start.clone().add(Math.random() * 30, \"days\");\n var group = Math.floor(Math.random() * groupCount);\n items.add({\n id: i,\n type: types[Math.floor(Math.random() * types.length)],\n group: group,\n content: \"\" + i,\n start: start,\n end: end\n });\n}\n\n// create visualization\nvar container = document.getElementById(\"visualization\");\nvar options = {\n start: new Date(),\n end: new Date(100000 * 60 * 60 * 24 + new Date().valueOf()),\n loadingScreenTemplate: function() {\n return \"<h1>Loading...</h1>\";\n }\n};\n\nvar timeline = new vis.Timeline(container, items, groups, options);\n","js_external":"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Loading screen example"}'
/><input
type="hidden"
name="js"
value='var now = moment();
var groupCount = 20;
var itemCount = 400;
// create a data set with groups
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({
id: g,
content: "group " + g
});
}
var types = ["point", "range", "box", "background"];
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 180, "days");
var end = start.clone().add(Math.random() * 30, "days");
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,
type: types[Math.floor(Math.random() * types.length)],
group: group,
content: "" + i,
start: start,
end: end
});
}
// create visualization
var container = document.getElementById("visualization");
var options = {
start: new Date(),
end: new Date(100000 * 60 * 60 * 24 + new Date().valueOf()),
loadingScreenTemplate: function() {
return "<h1>Loading...</h1>";
}
};
var timeline = new vis.Timeline(container, items, groups, options);
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<h1>Timeline with loading screen</h1>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="other/loadingScreen.html"
><div class="example-image">
<img
src="thumbnails/144da08a1b7b8864a9264cd45ea3e69b87738d5fc48b328e92ff43dbf5fd5332.png"
alt="Loading screen example"
/></div></a></span
><span class="example-link"
><div>
<a href="other/localization.html">Localization</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 DAY = 24 * 60 * 60 * 1000;
// 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: new Date(new Date().valueOf() - DAY) },
{ id: 2, content: "item 2", start: new Date(new Date().valueOf() + 2 * DAY) }
]);
// Configuration for the Timeline
var options = {
showCurrentTime: true
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
timeline.addCustomTime(new Date());
timeline.setCustomTime(new Date(new Date().valueOf() + DAY));
// update the locale when changing the select box value
var select = document.getElementById("locale");
select.onchange = function() {
timeline.setOptions({
locale: this.value
});
};
select.onchange();
'
/><input
type="hidden"
name="css"
value="body,
html,
select {
font-family: sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p>
<label for="locale">Select a locale:</label>
<select id="locale">
<option value="en" selected>en</option>
<option value="it">it</option>
<option value="fr">fr</option>
<option value="nl">nl</option>
<option value="de">de</option>
</select>
</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 | Localization"
/>
</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,\nselect {\n font-family: 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 <label for=\"locale\">Select a locale:</label>\n <select id=\"locale\">\n <option value=\"en\" selected>en</option>\n <option value=\"it\">it</option>\n <option value=\"fr\">fr</option>\n <option value=\"nl\">nl</option>\n <option value=\"de\">de</option>\n </select>\n</p>\n\n<div id=\"visualization\"></div>\n","js":"var DAY = 24 * 60 * 60 * 1000;\n\n// 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: new Date(new Date().valueOf() - DAY) },\n { id: 2, content: \"item 2\", start: new Date(new Date().valueOf() + 2 * DAY) }\n]);\n\n// Configuration for the Timeline\nvar options = {\n showCurrentTime: true\n};\n\n// Create a Timeline\nvar timeline = new vis.Timeline(container, items, options);\ntimeline.addCustomTime(new Date());\n\ntimeline.setCustomTime(new Date(new Date().valueOf() + DAY));\n\n// update the locale when changing the select box value\nvar select = document.getElementById(\"locale\");\nselect.onchange = function() {\n timeline.setOptions({\n locale: this.value\n });\n};\nselect.onchange();\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Localization"}'
/><input
type="hidden"
name="js"
value='var DAY = 24 * 60 * 60 * 1000;
// 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: new Date(new Date().valueOf() - DAY) },
{ id: 2, content: "item 2", start: new Date(new Date().valueOf() + 2 * DAY) }
]);
// Configuration for the Timeline
var options = {
showCurrentTime: true
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
timeline.addCustomTime(new Date());
timeline.setCustomTime(new Date(new Date().valueOf() + DAY));
// update the locale when changing the select box value
var select = document.getElementById("locale");
select.onchange = function() {
timeline.setOptions({
locale: this.value
});
};
select.onchange();
'
/><input
type="hidden"
name="css"
value="body,
html,
select {
font-family: sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p>
<label for="locale">Select a locale:</label>
<select id="locale">
<option value="en" selected>en</option>
<option value="it">it</option>
<option value="fr">fr</option>
<option value="nl">nl</option>
<option value="de">de</option>
</select>
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="other/localization.html"
><div class="example-image">
<img
src="thumbnails/73cec3028924f326760defc093e4bd12da7060d2dbff7001fce13ef64cd32472.png"
alt="Localization"
/></div></a></span
><span class="example-link"
><div>
<a href="editing/editingItemsCallbacks.html"
>Manipulation callbacks</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='// note that months are zero-based in the JavaScript Date object, so month 3 is April
var items = new vis.DataSet([
{ id: 1, content: "item 1", start: new Date(2013, 3, 20) },
{ id: 2, content: "item 2", start: new Date(2013, 3, 14) },
{ id: 3, content: "item 3", start: new Date(2013, 3, 18) },
{
id: 4,
content: "item 4",
start: new Date(2013, 3, 16),
end: new Date(2013, 3, 19)
},
{ id: 5, content: "item 5", start: new Date(2013, 3, 25) },
{ id: 6, content: "item 6", start: new Date(2013, 3, 27) }
]);
var min = new Date(2013, 3, 1); // 1 april
var max = new Date(2013, 3, 30, 23, 59, 59); // 30 april
var container = document.getElementById("visualization");
var options = {
editable: true,
onAdd: function(item, callback) {
prettyPrompt(
"Add item",
"Enter text content for new item:",
item.content,
function(value) {
if (value) {
item.content = value;
callback(item); // send back adjusted new item
} else {
callback(null); // cancel item creation
}
}
);
},
onMove: function(item, callback) {
var title =
"Do you really want to move the item to\n" +
"start: " +
item.start +
"\n" +
"end: " +
item.end +
"?";
prettyConfirm("Move item", title, function(ok) {
if (ok) {
callback(item); // send back item as confirmation (can be changed)
} else {
callback(null); // cancel editing item
}
});
},
onMoving: function(item, callback) {
if (item.start < min) item.start = min;
if (item.start > max) item.start = max;
if (item.end > max) item.end = max;
callback(item); // send back the (possibly) changed item
},
onUpdate: function(item, callback) {
prettyPrompt("Update item", "Edit items text:", item.content, function(
value
) {
if (value) {
item.content = value;
callback(item); // send back adjusted item
} else {
callback(null); // cancel updating the item
}
});
},
onRemove: function(item, callback) {
prettyConfirm(
"Remove item",
"Do you really want to remove item " + item.content + "?",
function(ok) {
if (ok) {
callback(item); // confirm deletion
} else {
callback(null); // cancel deletion
}
}
);
}
};
var timeline = new vis.Timeline(container, items, options);
items.on("*", function(event, properties) {
logEvent(event, properties);
});
function logEvent(event, properties) {
var log = document.getElementById("log");
var msg = document.createElement("div");
msg.innerHTML =
"event=" +
JSON.stringify(event) +
", " +
"properties=" +
JSON.stringify(properties);
log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
}
function prettyConfirm(title, text, callback) {
swal(
{
title: title,
text: text,
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55"
},
callback
);
}
function prettyPrompt(title, text, inputValue, callback) {
swal(
{
title: title,
text: text,
type: "input",
showCancelButton: true,
inputValue: inputValue
},
callback
);
}
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p style="max-width: 800px;">
This example shows how to use callback functions <code>onAdd</code>,
<code>onMove</code>, <code>onMoving</code>, <code>onUpdate</code>, and
<code>onRemove</code>. The <code>onMoving</code> function updates an item
while dragging, and can be used to prevent the item from being drawn at
disallowed or infeasible timeslots. In this example, the items cannot be moved
outside of the month April 2013. The other callback functions are called after
an add, move, update, or remove action has taken place, and can be used to
cancel these actions.
</p>
<div id="visualization"></div>
<p></p>
<div id="log"></div>
'
/><input
type="hidden"
name="resources"
value="https://cdn.jsdelivr.net/npm/sweetalert@1.1.3/dist/sweetalert.css,https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://cdn.jsdelivr.net/npm/sweetalert@1.1.3/dist/sweetalert.min.js,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 | Manipulation callbacks"
/>
</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 font-size: 11pt;\n}\n","css_external":"https://cdn.jsdelivr.net/npm/sweetalert@1.1.3/dist/sweetalert.css;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p style=\"max-width: 800px;\">\n This example shows how to use callback functions <code>onAdd</code>,\n <code>onMove</code>, <code>onMoving</code>, <code>onUpdate</code>, and\n <code>onRemove</code>. The <code>onMoving</code> function updates an item\n while dragging, and can be used to prevent the item from being drawn at\n disallowed or infeasible timeslots. In this example, the items cannot be moved\n outside of the month April 2013. The other callback functions are called after\n an add, move, update, or remove action has taken place, and can be used to\n cancel these actions.\n</p>\n\n<div id=\"visualization\"></div>\n<p></p>\n<div id=\"log\"></div>\n","js":"// note that months are zero-based in the JavaScript Date object, so month 3 is April\nvar items = new vis.DataSet([\n { id: 1, content: \"item 1\", start: new Date(2013, 3, 20) },\n { id: 2, content: \"item 2\", start: new Date(2013, 3, 14) },\n { id: 3, content: \"item 3\", start: new Date(2013, 3, 18) },\n {\n id: 4,\n content: \"item 4\",\n start: new Date(2013, 3, 16),\n end: new Date(2013, 3, 19)\n },\n { id: 5, content: \"item 5\", start: new Date(2013, 3, 25) },\n { id: 6, content: \"item 6\", start: new Date(2013, 3, 27) }\n]);\n\nvar min = new Date(2013, 3, 1); // 1 april\nvar max = new Date(2013, 3, 30, 23, 59, 59); // 30 april\n\nvar container = document.getElementById(\"visualization\");\nvar options = {\n editable: true,\n\n onAdd: function(item, callback) {\n prettyPrompt(\n \"Add item\",\n \"Enter text content for new item:\",\n item.content,\n function(value) {\n if (value) {\n item.content = value;\n callback(item); // send back adjusted new item\n } else {\n callback(null); // cancel item creation\n }\n }\n );\n },\n\n onMove: function(item, callback) {\n var title =\n \"Do you really want to move the item to\\n\" +\n \"start: \" +\n item.start +\n \"\\n\" +\n \"end: \" +\n item.end +\n \"?\";\n\n prettyConfirm(\"Move item\", title, function(ok) {\n if (ok) {\n callback(item); // send back item as confirmation (can be changed)\n } else {\n callback(null); // cancel editing item\n }\n });\n },\n\n onMoving: function(item, callback) {\n if (item.start < min) item.start = min;\n if (item.start > max) item.start = max;\n if (item.end > max) item.end = max;\n\n callback(item); // send back the (possibly) changed item\n },\n\n onUpdate: function(item, callback) {\n prettyPrompt(\"Update item\", \"Edit items text:\", item.content, function(\n value\n ) {\n if (value) {\n item.content = value;\n callback(item); // send back adjusted item\n } else {\n callback(null); // cancel updating the item\n }\n });\n },\n\n onRemove: function(item, callback) {\n prettyConfirm(\n \"Remove item\",\n \"Do you really want to remove item \" + item.content + \"?\",\n function(ok) {\n if (ok) {\n callback(item); // confirm deletion\n } else {\n callback(null); // cancel deletion\n }\n }\n );\n }\n};\nvar timeline = new vis.Timeline(container, items, options);\n\nitems.on(\"*\", function(event, properties) {\n logEvent(event, properties);\n});\n\nfunction logEvent(event, properties) {\n var log = document.getElementById(\"log\");\n var msg = document.createElement(\"div\");\n msg.innerHTML =\n \"event=\" +\n JSON.stringify(event) +\n \", \" +\n \"properties=\" +\n JSON.stringify(properties);\n log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);\n}\n\nfunction prettyConfirm(title, text, callback) {\n swal(\n {\n title: title,\n text: text,\n type: \"warning\",\n showCancelButton: true,\n confirmButtonColor: \"#DD6B55\"\n },\n callback\n );\n}\n\nfunction prettyPrompt(title, text, inputValue, callback) {\n swal(\n {\n title: title,\n text: text,\n type: \"input\",\n showCancelButton: true,\n inputValue: inputValue\n },\n callback\n );\n}\n","js_external":"https://cdn.jsdelivr.net/npm/sweetalert@1.1.3/dist/sweetalert.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Manipulation callbacks"}'
/><input
type="hidden"
name="js"
value='// note that months are zero-based in the JavaScript Date object, so month 3 is April
var items = new vis.DataSet([
{ id: 1, content: "item 1", start: new Date(2013, 3, 20) },
{ id: 2, content: "item 2", start: new Date(2013, 3, 14) },
{ id: 3, content: "item 3", start: new Date(2013, 3, 18) },
{
id: 4,
content: "item 4",
start: new Date(2013, 3, 16),
end: new Date(2013, 3, 19)
},
{ id: 5, content: "item 5", start: new Date(2013, 3, 25) },
{ id: 6, content: "item 6", start: new Date(2013, 3, 27) }
]);
var min = new Date(2013, 3, 1); // 1 april
var max = new Date(2013, 3, 30, 23, 59, 59); // 30 april
var container = document.getElementById("visualization");
var options = {
editable: true,
onAdd: function(item, callback) {
prettyPrompt(
"Add item",
"Enter text content for new item:",
item.content,
function(value) {
if (value) {
item.content = value;
callback(item); // send back adjusted new item
} else {
callback(null); // cancel item creation
}
}
);
},
onMove: function(item, callback) {
var title =
"Do you really want to move the item to\n" +
"start: " +
item.start +
"\n" +
"end: " +
item.end +
"?";
prettyConfirm("Move item", title, function(ok) {
if (ok) {
callback(item); // send back item as confirmation (can be changed)
} else {
callback(null); // cancel editing item
}
});
},
onMoving: function(item, callback) {
if (item.start < min) item.start = min;
if (item.start > max) item.start = max;
if (item.end > max) item.end = max;
callback(item); // send back the (possibly) changed item
},
onUpdate: function(item, callback) {
prettyPrompt("Update item", "Edit items text:", item.content, function(
value
) {
if (value) {
item.content = value;
callback(item); // send back adjusted item
} else {
callback(null); // cancel updating the item
}
});
},
onRemove: function(item, callback) {
prettyConfirm(
"Remove item",
"Do you really want to remove item " + item.content + "?",
function(ok) {
if (ok) {
callback(item); // confirm deletion
} else {
callback(null); // cancel deletion
}
}
);
}
};
var timeline = new vis.Timeline(container, items, options);
items.on("*", function(event, properties) {
logEvent(event, properties);
});
function logEvent(event, properties) {
var log = document.getElementById("log");
var msg = document.createElement("div");
msg.innerHTML =
"event=" +
JSON.stringify(event) +
", " +
"properties=" +
JSON.stringify(properties);
log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
}
function prettyConfirm(title, text, callback) {
swal(
{
title: title,
text: text,
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55"
},
callback
);
}
function prettyPrompt(title, text, inputValue, callback) {
swal(
{
title: title,
text: text,
type: "input",
showCancelButton: true,
inputValue: inputValue
},
callback
);
}
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p style="max-width: 800px;">
This example shows how to use callback functions <code>onAdd</code>,
<code>onMove</code>, <code>onMoving</code>, <code>onUpdate</code>, and
<code>onRemove</code>. The <code>onMoving</code> function updates an item
while dragging, and can be used to prevent the item from being drawn at
disallowed or infeasible timeslots. In this example, the items cannot be moved
outside of the month April 2013. The other callback functions are called after
an add, move, update, or remove action has taken place, and can be used to
cancel these actions.
</p>
<div id="visualization"></div>
<p></p>
<div id="log"></div>
'
/></form
></span>
</div>
<a href="editing/editingItemsCallbacks.html"
><div class="example-image">
<img
src="thumbnails/fcd88ed4f8a58003b8281d0d82af2c570817a742eb48150964f19ba8c8afac50.png"
alt="Manipulation callbacks"
/></div></a></span
><span class="example-link"
><div>
<a href="editing/editingItems.html">Manipulation example</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" }
]);
// log changes to the console
items.on("*", function(event, properties) {
console.log(event, properties.items);
});
var container = document.getElementById("visualization");
var options = {
start: "2014-01-10",
end: "2014-02-10",
height: "300px",
// allow selecting multiple items using ctrl+click, shift+click, or hold.
multiselect: true,
// allow manipulation of items
editable: true,
/* alternatively, enable/disable individual actions:
editable: {
add: true,
updateTime: true,
updateGroup: true,
remove: true
},
*/
showCurrentTime: 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;
}
"
/><input
type="hidden"
name="html"
value='<p>
An editable timeline allows to drag items around, create new items, and remove
items. Changes are logged in the browser console.
</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 | Manipulation example"
/>
</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 An editable timeline allows to drag items around, create new items, and remove\n items. Changes are logged in the browser console.\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\n// log changes to the console\nitems.on(\"*\", function(event, properties) {\n console.log(event, properties.items);\n});\n\nvar container = document.getElementById(\"visualization\");\nvar options = {\n start: \"2014-01-10\",\n end: \"2014-02-10\",\n height: \"300px\",\n\n // allow selecting multiple items using ctrl+click, shift+click, or hold.\n multiselect: true,\n\n // allow manipulation of items\n editable: true,\n\n /* alternatively, enable/disable individual actions:\n\n editable: {\n add: true,\n updateTime: true,\n updateGroup: true,\n remove: true\n },\n\n */\n\n showCurrentTime: 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 | Manipulation example"}'
/><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" }
]);
// log changes to the console
items.on("*", function(event, properties) {
console.log(event, properties.items);
});
var container = document.getElementById("visualization");
var options = {
start: "2014-01-10",
end: "2014-02-10",
height: "300px",
// allow selecting multiple items using ctrl+click, shift+click, or hold.
multiselect: true,
// allow manipulation of items
editable: true,
/* alternatively, enable/disable individual actions:
editable: {
add: true,
updateTime: true,
updateGroup: true,
remove: true
},
*/
showCurrentTime: 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;
}
"
/><input
type="hidden"
name="html"
value='<p>
An editable timeline allows to drag items around, create new items, and remove
items. Changes are logged in the browser console.
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="editing/editingItems.html"
><div class="example-image">
<img
src="thumbnails/19ce08365bc40ce6dd772754b491a6e3599e5b138ac616b1d500eec196575497.png"
alt="Manipulation example"
/></div></a></span
><span class="example-link"
><div>
<a href="markers/markerEvents.html">Marker events</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();
var customDate = new Date();
var options = {
start: new Date(Date.now() - 1000 * 60 * 60 * 24),
end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
};
var container = document.getElementById("visualization");
var timeline = new vis.Timeline(container, items, options);
var id = "id";
timeline.addCustomTime(
new Date(
customDate.getFullYear(),
customDate.getMonth(),
customDate.getDate() + 3
),
id
);
timeline.setCustomTimeMarker("Enter some text", id, true);
timeline.on("markerchange", function(properties) {
logEvent("markerchange", properties);
});
timeline.on("markerchanged", function(properties) {
logEvent("markerchanged", properties);
});
function logEvent(event, properties) {
var log = document.getElementById("log");
var msg = document.createElement("div");
msg.innerHTML =
"event=" + event + ", " + "properties=" + JSON.stringify(properties);
log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
}
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p>The timeline has two marker events.</p>
<ol>
<li>
<p>
<code>markerchange</code> which is fired when a marker title has been
changed.
</p>
</li>
<li>
<p>
<code>markerchanged</code> which is fired when an alteration to a marker
title is committed.
</p>
</li>
</ol>
<div id="visualization"></div>
<br />
<div id="log"></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 | Marker events"
/>
</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 font-size: 11pt;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>The timeline has two marker events.</p>\n<ol>\n <li>\n <p>\n <code>markerchange</code> which is fired when a marker title has been\n changed.\n </p>\n </li>\n <li>\n <p>\n <code>markerchanged</code> which is fired when an alteration to a marker\n title is committed.\n </p>\n </li>\n</ol>\n<div id=\"visualization\"></div>\n<br />\n<div id=\"log\"></div>\n","js":"var items = new vis.DataSet();\nvar customDate = new Date();\nvar options = {\n start: new Date(Date.now() - 1000 * 60 * 60 * 24),\n end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)\n};\n\nvar container = document.getElementById(\"visualization\");\nvar timeline = new vis.Timeline(container, items, options);\nvar id = \"id\";\ntimeline.addCustomTime(\n new Date(\n customDate.getFullYear(),\n customDate.getMonth(),\n customDate.getDate() + 3\n ),\n id\n);\ntimeline.setCustomTimeMarker(\"Enter some text\", id, true);\ntimeline.on(\"markerchange\", function(properties) {\n logEvent(\"markerchange\", properties);\n});\ntimeline.on(\"markerchanged\", function(properties) {\n logEvent(\"markerchanged\", properties);\n});\n\nfunction logEvent(event, properties) {\n var log = document.getElementById(\"log\");\n var msg = document.createElement(\"div\");\n msg.innerHTML =\n \"event=\" + event + \", \" + \"properties=\" + JSON.stringify(properties);\n log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);\n}\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Marker events"}'
/><input
type="hidden"
name="js"
value='var items = new vis.DataSet();
var customDate = new Date();
var options = {
start: new Date(Date.now() - 1000 * 60 * 60 * 24),
end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
};
var container = document.getElementById("visualization");
var timeline = new vis.Timeline(container, items, options);
var id = "id";
timeline.addCustomTime(
new Date(
customDate.getFullYear(),
customDate.getMonth(),
customDate.getDate() + 3
),
id
);
timeline.setCustomTimeMarker("Enter some text", id, true);
timeline.on("markerchange", function(properties) {
logEvent("markerchange", properties);
});
timeline.on("markerchanged", function(properties) {
logEvent("markerchanged", properties);
});
function logEvent(event, properties) {
var log = document.getElementById("log");
var msg = document.createElement("div");
msg.innerHTML =
"event=" + event + ", " + "properties=" + JSON.stringify(properties);
log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
}
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p>The timeline has two marker events.</p>
<ol>
<li>
<p>
<code>markerchange</code> which is fired when a marker title has been
changed.
</p>
</li>
<li>
<p>
<code>markerchanged</code> which is fired when an alteration to a marker
title is committed.
</p>
</li>
</ol>
<div id="visualization"></div>
<br />
<div id="log"></div>
'
/></form
></span>
</div>
<a href="markers/markerEvents.html"
><div class="example-image">
<img
src="thumbnails/be6e4ac7452eb2299dc6d3d5cd3a8ba9ce78fdc9f3ea2a87799fc01d209720ba.png"
alt="Marker events"
/></div></a></span
><span class="example-link"
><div>
<a href="markers/customTimeMarkers.html">Markers example</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 container = document.getElementById("visualization");
var items = new vis.DataSet();
var customDate = new Date();
var options = {
start: new Date(Date.now() - 1000 * 60 * 60 * 24),
end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
};
var timeline = new vis.Timeline(container, items, options);
timeline.on("doubleClick", function(properties) {
var eventProps = timeline.getEventProperties(properties.event);
if (eventProps.what === "custom-time") {
timeline.removeCustomTime(eventProps.customTime);
} else {
var id = new Date().getTime();
var markerText = document.getElementById("markerText").value || undefined;
timeline.addCustomTime(eventProps.time, id);
timeline.setCustomTimeMarker(markerText, id);
}
});
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p>
The Timeline has a function to add multiple custom time markers which can be
dragged by the user.
</p>
<p>
In this example, you can add new markers by double-clicking the timeline below
and delete the markers by double-clicking it.
</p>
<p>
<input type="text" id="markerText" placeholder="marker text" />
</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 | Markers example"
/>
</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 font-size: 11pt;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n The Timeline has a function to add multiple custom time markers which can be\n dragged by the user.\n</p>\n<p>\n In this example, you can add new markers by double-clicking the timeline below\n and delete the markers by double-clicking it.\n</p>\n<p>\n <input type=\"text\" id=\"markerText\" placeholder=\"marker text\" />\n</p>\n\n<div id=\"visualization\"></div>\n","js":"var container = document.getElementById(\"visualization\");\nvar items = new vis.DataSet();\nvar customDate = new Date();\nvar options = {\n start: new Date(Date.now() - 1000 * 60 * 60 * 24),\n end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)\n};\nvar timeline = new vis.Timeline(container, items, options);\n\ntimeline.on(\"doubleClick\", function(properties) {\n var eventProps = timeline.getEventProperties(properties.event);\n if (eventProps.what === \"custom-time\") {\n timeline.removeCustomTime(eventProps.customTime);\n } else {\n var id = new Date().getTime();\n var markerText = document.getElementById(\"markerText\").value || undefined;\n timeline.addCustomTime(eventProps.time, id);\n timeline.setCustomTimeMarker(markerText, id);\n }\n});\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Markers example"}'
/><input
type="hidden"
name="js"
value='var container = document.getElementById("visualization");
var items = new vis.DataSet();
var customDate = new Date();
var options = {
start: new Date(Date.now() - 1000 * 60 * 60 * 24),
end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
};
var timeline = new vis.Timeline(container, items, options);
timeline.on("doubleClick", function(properties) {
var eventProps = timeline.getEventProperties(properties.event);
if (eventProps.what === "custom-time") {
timeline.removeCustomTime(eventProps.customTime);
} else {
var id = new Date().getTime();
var markerText = document.getElementById("markerText").value || undefined;
timeline.addCustomTime(eventProps.time, id);
timeline.setCustomTimeMarker(markerText, id);
}
});
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p>
The Timeline has a function to add multiple custom time markers which can be
dragged by the user.
</p>
<p>
In this example, you can add new markers by double-clicking the timeline below
and delete the markers by double-clicking it.
</p>
<p>
<input type="text" id="markerText" placeholder="marker text" />
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="markers/customTimeMarkers.html"
><div class="example-image">
<img
src="thumbnails/40ca83e8a80f9a3cae47495cab8a02bea1b18ae2faa3e0ab998dafbb4d9f2d44.png"
alt="Markers example"
/></div></a></span
><span class="example-link"
><div>
<a href="interaction/navigationMenu.html">navigation menu</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 timeline with some data
var container = document.getElementById("visualization");
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" }
]);
var options = {};
var timeline = new vis.Timeline(container, items, options);
/**
* Move the timeline a given percentage to left or right
* @param {Number} percentage For example 0.1 (left) or -0.1 (right)
*/
function move(percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
document.getElementById("zoomIn").onclick = function() {
timeline.zoomIn(0.2);
};
document.getElementById("zoomOut").onclick = function() {
timeline.zoomOut(0.2);
};
document.getElementById("moveLeft").onclick = function() {
move(0.2);
};
document.getElementById("moveRight").onclick = function() {
move(-0.2);
};
document.getElementById("toggleRollingMode").onclick = function() {
timeline.toggleRollingMode();
};
'
/><input
type="hidden"
name="css"
value="body,
html,
input {
font-family: sans-serif;
font-size: 12pt;
}
#visualization {
position: relative;
}
.menu {
position: absolute;
top: 0;
right: 0;
margin: 10px;
z-index: 9999;
}
"
/><input
type="hidden"
name="html"
value='<p>
Create your own navigation menu by creating an overlay with buttons to zoom
and move.
</p>
<div id="visualization">
<div class="menu">
<input type="button" id="zoomIn" value="Zoom in" />
<input type="button" id="zoomOut" value="Zoom out" />
<input type="button" id="moveLeft" value="Move left" />
<input type="button" id="moveRight" value="Move right" />
<input type="button" id="toggleRollingMode" value="toggleRollingMode" />
</div>
</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 | navigation menu"
/>
</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,\ninput {\n font-family: sans-serif;\n font-size: 12pt;\n}\n\n#visualization {\n position: relative;\n}\n\n.menu {\n position: absolute;\n top: 0;\n right: 0;\n margin: 10px;\n z-index: 9999;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n Create your own navigation menu by creating an overlay with buttons to zoom\n and move.\n</p>\n\n<div id=\"visualization\">\n <div class=\"menu\">\n <input type=\"button\" id=\"zoomIn\" value=\"Zoom in\" />\n <input type=\"button\" id=\"zoomOut\" value=\"Zoom out\" />\n <input type=\"button\" id=\"moveLeft\" value=\"Move left\" />\n <input type=\"button\" id=\"moveRight\" value=\"Move right\" />\n <input type=\"button\" id=\"toggleRollingMode\" value=\"toggleRollingMode\" />\n </div>\n</div>\n","js":"// create a timeline with some data\nvar container = document.getElementById(\"visualization\");\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]);\nvar options = {};\nvar timeline = new vis.Timeline(container, items, options);\n\n/**\n * Move the timeline a given percentage to left or right\n * @param {Number} percentage For example 0.1 (left) or -0.1 (right)\n */\nfunction move(percentage) {\n var range = timeline.getWindow();\n var interval = range.end - range.start;\n\n timeline.setWindow({\n start: range.start.valueOf() - interval * percentage,\n end: range.end.valueOf() - interval * percentage\n });\n}\n\n// attach events to the navigation buttons\ndocument.getElementById(\"zoomIn\").onclick = function() {\n timeline.zoomIn(0.2);\n};\ndocument.getElementById(\"zoomOut\").onclick = function() {\n timeline.zoomOut(0.2);\n};\ndocument.getElementById(\"moveLeft\").onclick = function() {\n move(0.2);\n};\ndocument.getElementById(\"moveRight\").onclick = function() {\n move(-0.2);\n};\ndocument.getElementById(\"toggleRollingMode\").onclick = function() {\n timeline.toggleRollingMode();\n};\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | navigation menu"}'
/><input
type="hidden"
name="js"
value='// create a timeline with some data
var container = document.getElementById("visualization");
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" }
]);
var options = {};
var timeline = new vis.Timeline(container, items, options);
/**
* Move the timeline a given percentage to left or right
* @param {Number} percentage For example 0.1 (left) or -0.1 (right)
*/
function move(percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
// attach events to the navigation buttons
document.getElementById("zoomIn").onclick = function() {
timeline.zoomIn(0.2);
};
document.getElementById("zoomOut").onclick = function() {
timeline.zoomOut(0.2);
};
document.getElementById("moveLeft").onclick = function() {
move(0.2);
};
document.getElementById("moveRight").onclick = function() {
move(-0.2);
};
document.getElementById("toggleRollingMode").onclick = function() {
timeline.toggleRollingMode();
};
'
/><input
type="hidden"
name="css"
value="body,
html,
input {
font-family: sans-serif;
font-size: 12pt;
}
#visualization {
position: relative;
}
.menu {
position: absolute;
top: 0;
right: 0;
margin: 10px;
z-index: 9999;
}
"
/><input
type="hidden"
name="html"
value='<p>
Create your own navigation menu by creating an overlay with buttons to zoom
and move.
</p>
<div id="visualization">
<div class="menu">
<input type="button" id="zoomIn" value="Zoom in" />
<input type="button" id="zoomOut" value="Zoom out" />
<input type="button" id="moveLeft" value="Move left" />
<input type="button" id="moveRight" value="Move right" />
<input type="button" id="toggleRollingMode" value="toggleRollingMode" />
</div>
</div>
'
/></form
></span>
</div>
<a href="interaction/navigationMenu.html"
><div class="example-image">
<img
src="thumbnails/fd3d50bded9f844d1a51a5d3faaa654fec7f75b8bf37dfdebd94df69cb6c2aa6.png"
alt="navigation menu"
/></div></a></span
><span class="example-link"
><div>
<a href="groups/nestedGroups.html">Nested Groups example</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 now = moment()
.minutes(0)
.seconds(0)
.milliseconds(0);
var itemCount = 60;
// create a data set with groups
var groups = new vis.DataSet();
groups.add([
{
id: 1,
content: "Lee",
nestedGroups: [11, 12, 13]
},
{
id: 2,
content: "invisible group",
visible: false
},
{
id: 3,
content: "John",
nestedGroups: [14],
showNested: false
},
{
id: 4,
content: "Alson"
}
]);
groups.add([
{
id: 11,
content: "cook"
},
{
id: 12,
content: "shop"
},
{
id: 13,
content: "clean house"
},
{
id: 14,
content: "wash dishes"
}
]);
// create a dataset with items
var items = new vis.DataSet();
var groupIds = groups.getIds();
var types = ["box", "point", "range", "background"];
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 200, "hours");
var end = start.clone().add(2, "hours");
var randomGroupId = groupIds[Math.floor(Math.random() * groupIds.length)];
var type = types[Math.floor(4 * Math.random())];
items.add({
id: i,
group: randomGroupId,
content: "item " + i,
start: start,
end: end,
type: type
});
}
// create visualization
var container = document.getElementById("visualization");
var options = {
groupOrder: "content" // groupOrder can be a property name or a sorting function
};
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;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example demonstrate using groups. Note that a DataSet is used for both
items and groups, allowing to dynamically add, update or remove both items and
groups via the DataSet.
</p>
<div id="visualization"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js,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 | Nested Groups example"
/>
</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#visualization {\n box-sizing: border-box;\n width: 100%;\n height: 300px;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n This example demonstrate using groups. Note that a DataSet is used for both\n items and groups, allowing to dynamically add, update or remove both items and\n groups via the DataSet.\n</p>\n<div id=\"visualization\"></div>\n","js":"var now = moment()\n .minutes(0)\n .seconds(0)\n .milliseconds(0);\nvar itemCount = 60;\n\n// create a data set with groups\nvar groups = new vis.DataSet();\n\ngroups.add([\n {\n id: 1,\n content: \"Lee\",\n nestedGroups: [11, 12, 13]\n },\n {\n id: 2,\n content: \"invisible group\",\n visible: false\n },\n {\n id: 3,\n content: \"John\",\n nestedGroups: [14],\n showNested: false\n },\n {\n id: 4,\n content: \"Alson\"\n }\n]);\n\ngroups.add([\n {\n id: 11,\n content: \"cook\"\n },\n {\n id: 12,\n content: \"shop\"\n },\n {\n id: 13,\n content: \"clean house\"\n },\n {\n id: 14,\n content: \"wash dishes\"\n }\n]);\n\n// create a dataset with items\nvar items = new vis.DataSet();\nvar groupIds = groups.getIds();\nvar types = [\"box\", \"point\", \"range\", \"background\"];\nfor (var i = 0; i < itemCount; i++) {\n var start = now.clone().add(Math.random() * 200, \"hours\");\n var end = start.clone().add(2, \"hours\");\n var randomGroupId = groupIds[Math.floor(Math.random() * groupIds.length)];\n var type = types[Math.floor(4 * Math.random())];\n\n items.add({\n id: i,\n group: randomGroupId,\n content: \"item \" + i,\n start: start,\n end: end,\n type: type\n });\n}\n\n// create visualization\nvar container = document.getElementById(\"visualization\");\nvar options = {\n groupOrder: \"content\" // groupOrder can be a property name or a sorting function\n};\n\nvar timeline = new vis.Timeline(container, items, groups, options);\n","js_external":"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Nested Groups example"}'
/><input
type="hidden"
name="js"
value='var now = moment()
.minutes(0)
.seconds(0)
.milliseconds(0);
var itemCount = 60;
// create a data set with groups
var groups = new vis.DataSet();
groups.add([
{
id: 1,
content: "Lee",
nestedGroups: [11, 12, 13]
},
{
id: 2,
content: "invisible group",
visible: false
},
{
id: 3,
content: "John",
nestedGroups: [14],
showNested: false
},
{
id: 4,
content: "Alson"
}
]);
groups.add([
{
id: 11,
content: "cook"
},
{
id: 12,
content: "shop"
},
{
id: 13,
content: "clean house"
},
{
id: 14,
content: "wash dishes"
}
]);
// create a dataset with items
var items = new vis.DataSet();
var groupIds = groups.getIds();
var types = ["box", "point", "range", "background"];
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 200, "hours");
var end = start.clone().add(2, "hours");
var randomGroupId = groupIds[Math.floor(Math.random() * groupIds.length)];
var type = types[Math.floor(4 * Math.random())];
items.add({
id: i,
group: randomGroupId,
content: "item " + i,
start: start,
end: end,
type: type
});
}
// create visualization
var container = document.getElementById("visualization");
var options = {
groupOrder: "content" // groupOrder can be a property name or a sorting function
};
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;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example demonstrate using groups. Note that a DataSet is used for both
items and groups, allowing to dynamically add, update or remove both items and
groups via the DataSet.
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="groups/nestedGroups.html"
><div class="example-image">
<img
src="thumbnails/d6d6ca67b2482ff49688e8ce25e2a0a4991ff1bb1c3b91ee036deb30d116d6b5.png"
alt="Nested Groups example"
/></div></a></span
><span class="example-link"
><div>
<a href="groups/nestedThreeLevels.html"
>Nested Groups example (3 levels)</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 sdt = [
{
group3: [
{
id: 1243,
treeLevel: 3,
content: "Level 3 1243"
},
{
id: 1525,
treeLevel: 3,
content: "Level 3 1525"
},
{
id: 1624,
treeLevel: 3,
content: "Level 3 1624"
},
{
id: 2076,
treeLevel: 3,
content: "Level 3 2076"
},
{
id: 1345,
treeLevel: 3,
content: "Level 3 1345"
},
{
id: 2078,
treeLevel: 3,
content: "Level 3 2078"
},
{
id: 1826,
treeLevel: 3,
content: "Level 3 1826"
},
{
id: 2107,
treeLevel: 3,
content: "Level 3 2107"
}
],
groups: [
{
id: 10,
title: "Group 10",
content: "Group 10",
treeLevel: 1,
nestedGroups: [1, 2, 3, 4, 5, 6]
},
{
id: 1,
content: "North America",
treeLevel: 2,
nestedGroups: [1243, 1525, 1624, 1345, 2078, 1826, 2076, 2107]
},
{
id: 2,
treeLevel: 2,
content: "Latin America"
},
{
id: 3,
treeLevel: 2,
content: "Europe"
},
{
id: 4,
treeLevel: 2,
content: "Asia"
},
{
id: 5,
treeLevel: 2,
content: "Oceania"
},
{
id: 6,
treeLevel: 2,
content: "Africa"
},
{
id: 100,
title: "Group 100",
content: "Group 100",
treeLevel: 1,
nestedGroups: [101, 102, 103, 104, 105, 106],
text: "Totals",
EditionId: 0,
groupId: 0
},
{
id: 101,
treeLevel: 2,
content: "North America"
},
{
id: 102,
treeLevel: 2,
content: "Latin America"
},
{
id: 103,
treeLevel: 2,
content: "Europe"
},
{
id: 104,
treeLevel: 2,
content: "Asia"
},
{
id: 105,
treeLevel: 2,
content: "Oceania"
},
{
id: 106,
treeLevel: 2,
content: "Africa"
}
]
}
];
function randomIntFromInterval(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
let startDay = moment()
.startOf("month")
.startOf("week")
.isoWeekday(1);
// 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(data.result);
var now = moment()
.minutes(0)
.seconds(0)
.milliseconds(0);
var itemCount = 60;
// create a data set with groups
var groups = new vis.DataSet();
groups.add(sdt[0].groups);
groups.add(sdt[0].group3);
// create a dataset with items
var items = new vis.DataSet();
var groupIds = groups.getIds();
var types = ["box", "point", "range", "background"];
for (var i = 0; i < itemCount; i++) {
var rInt = randomIntFromInterval(1, 30);
var start = startDay.clone().add(rInt, "days");
var end = start.clone().add(24, "hours");
var randomGroupId = groupIds[randomIntFromInterval(1, groupIds.length)];
var type = types[randomIntFromInterval(0, 3)];
items.add({
id: i,
group: randomGroupId,
content: "item " + i + " " + rInt,
start: start,
end: end,
type: type
});
}
// specify options
let options = {
start: startDay.toDate(),
end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),
horizontalScroll: true,
zoomKey: "ctrlKey",
orientation: "both",
zoomMin: 1000 * 60 * 60 * 240
};
// create a Timeline
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;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example demonstrate nested groups that are 3 levels deep. Note that a
DataSet is used for both items and groups, allowing to dynamically add, update
or remove both items and groups via the DataSet.
</p>
<div id="visualization"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js,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 | Nested Groups example (3 levels)"
/>
</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#visualization {\n box-sizing: border-box;\n width: 100%;\n height: 300px;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n This example demonstrate nested groups that are 3 levels deep. Note that a\n DataSet is used for both items and groups, allowing to dynamically add, update\n or remove both items and groups via the DataSet.\n</p>\n<div id=\"visualization\"></div>\n","js":"var sdt = [\n {\n group3: [\n {\n id: 1243,\n treeLevel: 3,\n content: \"Level 3 1243\"\n },\n {\n id: 1525,\n treeLevel: 3,\n content: \"Level 3 1525\"\n },\n {\n id: 1624,\n treeLevel: 3,\n content: \"Level 3 1624\"\n },\n {\n id: 2076,\n treeLevel: 3,\n content: \"Level 3 2076\"\n },\n {\n id: 1345,\n treeLevel: 3,\n content: \"Level 3 1345\"\n },\n {\n id: 2078,\n treeLevel: 3,\n content: \"Level 3 2078\"\n },\n {\n id: 1826,\n treeLevel: 3,\n content: \"Level 3 1826\"\n },\n {\n id: 2107,\n treeLevel: 3,\n content: \"Level 3 2107\"\n }\n ],\n groups: [\n {\n id: 10,\n title: \"Group 10\",\n content: \"Group 10\",\n treeLevel: 1,\n nestedGroups: [1, 2, 3, 4, 5, 6]\n },\n {\n id: 1,\n content: \"North America\",\n treeLevel: 2,\n nestedGroups: [1243, 1525, 1624, 1345, 2078, 1826, 2076, 2107]\n },\n {\n id: 2,\n treeLevel: 2,\n content: \"Latin America\"\n },\n {\n id: 3,\n treeLevel: 2,\n content: \"Europe\"\n },\n {\n id: 4,\n treeLevel: 2,\n content: \"Asia\"\n },\n {\n id: 5,\n treeLevel: 2,\n content: \"Oceania\"\n },\n {\n id: 6,\n treeLevel: 2,\n content: \"Africa\"\n },\n {\n id: 100,\n title: \"Group 100\",\n content: \"Group 100\",\n treeLevel: 1,\n nestedGroups: [101, 102, 103, 104, 105, 106],\n text: \"Totals\",\n EditionId: 0,\n groupId: 0\n },\n {\n id: 101,\n treeLevel: 2,\n content: \"North America\"\n },\n {\n id: 102,\n treeLevel: 2,\n content: \"Latin America\"\n },\n {\n id: 103,\n treeLevel: 2,\n content: \"Europe\"\n },\n {\n id: 104,\n treeLevel: 2,\n content: \"Asia\"\n },\n {\n id: 105,\n treeLevel: 2,\n content: \"Oceania\"\n },\n {\n id: 106,\n treeLevel: 2,\n content: \"Africa\"\n }\n ]\n }\n];\n\nfunction randomIntFromInterval(min, max) {\n return Math.floor(Math.random() * (max - min + 1) + min);\n}\n\nlet startDay = moment()\n .startOf(\"month\")\n .startOf(\"week\")\n .isoWeekday(1);\n\n// DOM element where the Timeline will be attached\nvar container = document.getElementById(\"visualization\");\n\n// Create a DataSet (allows two way data-binding)\n//var items = new vis.DataSet(data.result);\n\nvar now = moment()\n .minutes(0)\n .seconds(0)\n .milliseconds(0);\nvar itemCount = 60;\n\n// create a data set with groups\nvar groups = new vis.DataSet();\n\ngroups.add(sdt[0].groups);\ngroups.add(sdt[0].group3);\n\n// create a dataset with items\nvar items = new vis.DataSet();\nvar groupIds = groups.getIds();\nvar types = [\"box\", \"point\", \"range\", \"background\"];\nfor (var i = 0; i < itemCount; i++) {\n var rInt = randomIntFromInterval(1, 30);\n var start = startDay.clone().add(rInt, \"days\");\n var end = start.clone().add(24, \"hours\");\n var randomGroupId = groupIds[randomIntFromInterval(1, groupIds.length)];\n var type = types[randomIntFromInterval(0, 3)];\n\n items.add({\n id: i,\n group: randomGroupId,\n content: \"item \" + i + \" \" + rInt,\n start: start,\n end: end,\n type: type\n });\n}\n\n// specify options\nlet options = {\n start: startDay.toDate(),\n end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),\n horizontalScroll: true,\n zoomKey: \"ctrlKey\",\n orientation: \"both\",\n zoomMin: 1000 * 60 * 60 * 240\n};\n\n// create a Timeline\nvar timeline = new vis.Timeline(container, items, groups, options);\n","js_external":"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Nested Groups example (3 levels)"}'
/><input
type="hidden"
name="js"
value='var sdt = [
{
group3: [
{
id: 1243,
treeLevel: 3,
content: "Level 3 1243"
},
{
id: 1525,
treeLevel: 3,
content: "Level 3 1525"
},
{
id: 1624,
treeLevel: 3,
content: "Level 3 1624"
},
{
id: 2076,
treeLevel: 3,
content: "Level 3 2076"
},
{
id: 1345,
treeLevel: 3,
content: "Level 3 1345"
},
{
id: 2078,
treeLevel: 3,
content: "Level 3 2078"
},
{
id: 1826,
treeLevel: 3,
content: "Level 3 1826"
},
{
id: 2107,
treeLevel: 3,
content: "Level 3 2107"
}
],
groups: [
{
id: 10,
title: "Group 10",
content: "Group 10",
treeLevel: 1,
nestedGroups: [1, 2, 3, 4, 5, 6]
},
{
id: 1,
content: "North America",
treeLevel: 2,
nestedGroups: [1243, 1525, 1624, 1345, 2078, 1826, 2076, 2107]
},
{
id: 2,
treeLevel: 2,
content: "Latin America"
},
{
id: 3,
treeLevel: 2,
content: "Europe"
},
{
id: 4,
treeLevel: 2,
content: "Asia"
},
{
id: 5,
treeLevel: 2,
content: "Oceania"
},
{
id: 6,
treeLevel: 2,
content: "Africa"
},
{
id: 100,
title: "Group 100",
content: "Group 100",
treeLevel: 1,
nestedGroups: [101, 102, 103, 104, 105, 106],
text: "Totals",
EditionId: 0,
groupId: 0
},
{
id: 101,
treeLevel: 2,
content: "North America"
},
{
id: 102,
treeLevel: 2,
content: "Latin America"
},
{
id: 103,
treeLevel: 2,
content: "Europe"
},
{
id: 104,
treeLevel: 2,
content: "Asia"
},
{
id: 105,
treeLevel: 2,
content: "Oceania"
},
{
id: 106,
treeLevel: 2,
content: "Africa"
}
]
}
];
function randomIntFromInterval(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
let startDay = moment()
.startOf("month")
.startOf("week")
.isoWeekday(1);
// 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(data.result);
var now = moment()
.minutes(0)
.seconds(0)
.milliseconds(0);
var itemCount = 60;
// create a data set with groups
var groups = new vis.DataSet();
groups.add(sdt[0].groups);
groups.add(sdt[0].group3);
// create a dataset with items
var items = new vis.DataSet();
var groupIds = groups.getIds();
var types = ["box", "point", "range", "background"];
for (var i = 0; i < itemCount; i++) {
var rInt = randomIntFromInterval(1, 30);
var start = startDay.clone().add(rInt, "days");
var end = start.clone().add(24, "hours");
var randomGroupId = groupIds[randomIntFromInterval(1, groupIds.length)];
var type = types[randomIntFromInterval(0, 3)];
items.add({
id: i,
group: randomGroupId,
content: "item " + i + " " + rInt,
start: start,
end: end,
type: type
});
}
// specify options
let options = {
start: startDay.toDate(),
end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),
horizontalScroll: true,
zoomKey: "ctrlKey",
orientation: "both",
zoomMin: 1000 * 60 * 60 * 240
};
// create a Timeline
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;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example demonstrate nested groups that are 3 levels deep. Note that a
DataSet is used for both items and groups, allowing to dynamically add, update
or remove both items and groups via the DataSet.
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="groups/nestedThreeLevels.html"
><div class="example-image">
<img
src="thumbnails/5755c35ac064f650a39a34e7d118ee2a684f6160f2a7f1b6c5c4c9407e81fd3c.png"
alt="Nested Groups example (3 levels)"
/></div></a></span
><span class="example-link"
><div>
<a href="other/onTimeout.html">onTimeout example</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 now = moment();
var itemCount = 300;
var types = ["point", "range", "box"];
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 180, "days");
var end = start.clone().add(Math.random() * 30, "days");
items.add({
id: i,
type: types[Math.floor(Math.random() * types.length)],
content: "" + i,
start: start,
end: end
});
}
// create visualization
var container = document.getElementById("visualization");
var options = {
stack: true,
onTimeout: {
timeoutMs: 10,
callback: function(callback) {
var didUserCancel;
var didUserCancel = confirm(
"Too many items loaded! Would you like to continue rendering (this might take a while)?"
);
callback(didUserCancel);
}
}
};
var timeline = new vis.Timeline(container, items, options);
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<div id="visualization"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js,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 | onTimeout example"
/>
</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":"","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<div id=\"visualization\"></div>\n","js":"var now = moment();\nvar itemCount = 300;\n\nvar types = [\"point\", \"range\", \"box\"];\n// create a dataset with items\nvar items = new vis.DataSet();\nfor (var i = 0; i < itemCount; i++) {\n var start = now.clone().add(Math.random() * 180, \"days\");\n var end = start.clone().add(Math.random() * 30, \"days\");\n items.add({\n id: i,\n type: types[Math.floor(Math.random() * types.length)],\n content: \"\" + i,\n start: start,\n end: end\n });\n}\n\n// create visualization\nvar container = document.getElementById(\"visualization\");\nvar options = {\n stack: true,\n onTimeout: {\n timeoutMs: 10,\n callback: function(callback) {\n var didUserCancel;\n var didUserCancel = confirm(\n \"Too many items loaded! Would you like to continue rendering (this might take a while)?\"\n );\n callback(didUserCancel);\n }\n }\n};\n\nvar timeline = new vis.Timeline(container, items, options);\n","js_external":"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | onTimeout example"}'
/><input
type="hidden"
name="js"
value='var now = moment();
var itemCount = 300;
var types = ["point", "range", "box"];
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 180, "days");
var end = start.clone().add(Math.random() * 30, "days");
items.add({
id: i,
type: types[Math.floor(Math.random() * types.length)],
content: "" + i,
start: start,
end: end
});
}
// create visualization
var container = document.getElementById("visualization");
var options = {
stack: true,
onTimeout: {
timeoutMs: 10,
callback: function(callback) {
var didUserCancel;
var didUserCancel = confirm(
"Too many items loaded! Would you like to continue rendering (this might take a while)?"
);
callback(didUserCancel);
}
}
};
var timeline = new vis.Timeline(container, items, options);
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="other/onTimeout.html"
><div class="example-image">
<img
src="thumbnails/a7ae475d0c817ee4c6cc65c69e7df32ec1b538747fda1263710ae6625ef7bad3.png"
alt="onTimeout example"
/></div></a></span
><span class="example-link"
><div>
<a href="styling/axisOrientation.html">Orientation</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 = {
height: 250 // px
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
var axisOrientation = document.getElementById("axis-orientation");
axisOrientation.onchange = function() {
timeline.setOptions({ orientation: { axis: this.value } });
};
var itemOrientation = document.getElementById("item-orientation");
itemOrientation.onchange = function() {
timeline.setOptions({ orientation: { item: this.value } });
};
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<p>
There are a number of orientation options for the time axis and the items.
</p>
<p>
<label for="axis-orientation">Axis orientation</label>
<select id="axis-orientation">
<option value="both">both</option>
<option value="bottom" selected>bottom</option>
<option value="none">none</option>
<option value="top">top</option>
</select>
</p>
<p>
<label for="item-orientation">Item orientation</label>
<select id="item-orientation">
<option value="bottom" selected>bottom</option>
<option value="top">top</option>
</select>
</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 | Orientation"
/>
</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 There are a number of orientation options for the time axis and the items.\n</p>\n\n<p>\n <label for=\"axis-orientation\">Axis orientation</label>\n <select id=\"axis-orientation\">\n <option value=\"both\">both</option>\n <option value=\"bottom\" selected>bottom</option>\n <option value=\"none\">none</option>\n <option value=\"top\">top</option>\n </select>\n</p>\n\n<p>\n <label for=\"item-orientation\">Item orientation</label>\n <select id=\"item-orientation\">\n <option value=\"bottom\" selected>bottom</option>\n <option value=\"top\">top</option>\n </select>\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 height: 250 // px\n};\n\n// Create a Timeline\nvar timeline = new vis.Timeline(container, items, options);\n\nvar axisOrientation = document.getElementById(\"axis-orientation\");\naxisOrientation.onchange = function() {\n timeline.setOptions({ orientation: { axis: this.value } });\n};\n\nvar itemOrientation = document.getElementById(\"item-orientation\");\nitemOrientation.onchange = function() {\n timeline.setOptions({ orientation: { item: this.value } });\n};\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Orientation"}'
/><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 = {
height: 250 // px
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
var axisOrientation = document.getElementById("axis-orientation");
axisOrientation.onchange = function() {
timeline.setOptions({ orientation: { axis: this.value } });
};
var itemOrientation = document.getElementById("item-orientation");
itemOrientation.onchange = function() {
timeline.setOptions({ orientation: { item: this.value } });
};
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<p>
There are a number of orientation options for the time axis and the items.
</p>
<p>
<label for="axis-orientation">Axis orientation</label>
<select id="axis-orientation">
<option value="both">both</option>
<option value="bottom" selected>bottom</option>
<option value="none">none</option>
<option value="top">top</option>
</select>
</p>
<p>
<label for="item-orientation">Item orientation</label>
<select id="item-orientation">
<option value="bottom" selected>bottom</option>
<option value="top">top</option>
</select>
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="styling/axisOrientation.html"
><div class="example-image">
<img
src="thumbnails/9896372a72394b2020f86bba7293682e6ba07149cad0b0af4972a6252abb3ce2.png"
alt="Orientation"
/></div></a></span
><span class="example-link"
><div>
<a href="other/performance.html">performance</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
var now = moment()
.minutes(0)
.seconds(0)
.milliseconds(0);
var items = new vis.DataSet({
type: { start: "ISODate", end: "ISODate" }
});
// create data
function createData() {
var count = parseInt(document.getElementById("count").value) || 100;
var newData = [];
var start = now;
for (var i = 0; i < count; i++) {
newData.push({
id: i,
content: "item " + i,
start: start + 24 * 3600 * 1000 * i
}); // much much faster than now.clone add days
}
items.clear();
items.add(newData);
}
createData();
document.getElementById("draw").onclick = createData;
var container = document.getElementById("visualization");
var options = {
editable: true,
start: now.clone().add(-3, "days"),
end: now.clone().add(11, "days"),
zoomMin: 1000 * 60 * 60 * 24, // a day
zoomMax: 1000 * 60 * 60 * 24 * 30 * 3 // three months
};
var timeline = new vis.Timeline(container, items, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p>
Test the performance with a lot of items. The Timeline can load hundreds of
thousands of items, but the performance of rendering them in the browser is
limited. Rendering typically runs smooth for up to a few hundreds of items at
once (you can set a <code>zoomMax</code> to prevent the user from zooming out
too far).
</p>
<p>
<label for="count">Number of items</label>
<input id="count" value="10000" />
<input id="draw" type="button" value="draw" />
</p>
<div id="visualization"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js,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 | performance"
/>
</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 Test the performance with a lot of items. The Timeline can load hundreds of\n thousands of items, but the performance of rendering them in the browser is\n limited. Rendering typically runs smooth for up to a few hundreds of items at\n once (you can set a <code>zoomMax</code> to prevent the user from zooming out\n too far).\n</p>\n<p>\n <label for=\"count\">Number of items</label>\n <input id=\"count\" value=\"10000\" />\n <input id=\"draw\" type=\"button\" value=\"draw\" />\n</p>\n<div id=\"visualization\"></div>\n","js":"// create a dataset with items\nvar now = moment()\n .minutes(0)\n .seconds(0)\n .milliseconds(0);\nvar items = new vis.DataSet({\n type: { start: \"ISODate\", end: \"ISODate\" }\n});\n\n// create data\nfunction createData() {\n var count = parseInt(document.getElementById(\"count\").value) || 100;\n var newData = [];\n var start = now;\n for (var i = 0; i < count; i++) {\n newData.push({\n id: i,\n content: \"item \" + i,\n start: start + 24 * 3600 * 1000 * i\n }); // much much faster than now.clone add days\n }\n items.clear();\n items.add(newData);\n}\ncreateData();\n\ndocument.getElementById(\"draw\").onclick = createData;\n\nvar container = document.getElementById(\"visualization\");\nvar options = {\n editable: true,\n start: now.clone().add(-3, \"days\"),\n end: now.clone().add(11, \"days\"),\n zoomMin: 1000 * 60 * 60 * 24, // a day\n zoomMax: 1000 * 60 * 60 * 24 * 30 * 3 // three months\n};\n\nvar timeline = new vis.Timeline(container, items, options);\n","js_external":"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | performance"}'
/><input
type="hidden"
name="js"
value='// create a dataset with items
var now = moment()
.minutes(0)
.seconds(0)
.milliseconds(0);
var items = new vis.DataSet({
type: { start: "ISODate", end: "ISODate" }
});
// create data
function createData() {
var count = parseInt(document.getElementById("count").value) || 100;
var newData = [];
var start = now;
for (var i = 0; i < count; i++) {
newData.push({
id: i,
content: "item " + i,
start: start + 24 * 3600 * 1000 * i
}); // much much faster than now.clone add days
}
items.clear();
items.add(newData);
}
createData();
document.getElementById("draw").onclick = createData;
var container = document.getElementById("visualization");
var options = {
editable: true,
start: now.clone().add(-3, "days"),
end: now.clone().add(11, "days"),
zoomMin: 1000 * 60 * 60 * 24, // a day
zoomMax: 1000 * 60 * 60 * 24 * 30 * 3 // three months
};
var timeline = new vis.Timeline(container, items, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p>
Test the performance with a lot of items. The Timeline can load hundreds of
thousands of items, but the performance of rendering them in the browser is
limited. Rendering typically runs smooth for up to a few hundreds of items at
once (you can set a <code>zoomMax</code> to prevent the user from zooming out
too far).
</p>
<p>
<label for="count">Number of items</label>
<input id="count" value="10000" />
<input id="draw" type="button" value="draw" />
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="other/performance.html"
><div class="example-image">
<img
src="thumbnails/767d6f0fb45a6e924c79ca74b1ad611dfd91e3eb037326753b3a9f07ff4561d9.png"
alt="performance"
/></div></a></span
><span class="example-link"
><div>
<a href="items/pointItems.html">Point items</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 container = document.getElementById("visualization");
// note that months are zero-based in the JavaScript Date object
var items = new vis.DataSet([
{ start: new Date(1939, 8, 1), content: "German Invasion of Poland" },
{
start: new Date(1940, 4, 10),
content: "Battle of France and the Low Countries"
},
{
start: new Date(1940, 7, 13),
content: "Battle of Britain - RAF vs. Luftwaffe"
},
{
start: new Date(1941, 1, 14),
content: "German Afrika Korps arrives in North Africa"
},
{ start: new Date(1941, 5, 22), content: "Third Reich Invades the USSR" },
{ start: new Date(1941, 11, 7), content: "Japanese Attack Pearl Harbor" },
{ start: new Date(1942, 5, 4), content: "Battle of Midway in the Pacific" },
{
start: new Date(1942, 10, 8),
content: "Americans open Second Front in North Africa"
},
{ start: new Date(1942, 10, 19), content: "Battle of Stalingrad in Russia" },
{
start: new Date(1943, 6, 5),
content: "Battle of Kursk - Last German Offensive on Eastern Front"
},
{
start: new Date(1943, 6, 10),
content: "Anglo-American Landings in Sicily"
},
{ start: new Date(1944, 2, 8), content: "Japanese Attack British India" },
{
start: new Date(1944, 5, 6),
content: "D-Day - Allied Invasion of Normandy"
},
{
start: new Date(1944, 5, 22),
content: "Destruction of Army Group Center in Byelorussia"
},
{
start: new Date(1944, 7, 1),
content: "The Warsaw Uprising in Occupied Poland"
},
{
start: new Date(1944, 9, 20),
content: "American Liberation of the Philippines"
},
{
start: new Date(1944, 11, 16),
content: "Battle of the Bulge in the Ardennes"
},
{ start: new Date(1944, 1, 19), content: "American Landings on Iwo Jima" },
{ start: new Date(1945, 3, 1), content: "US Invasion of Okinawa" },
{
start: new Date(1945, 3, 16),
content: "Battle of Berlin - End of the Third Reich"
}
]);
var options = {
// Set global item type. Type can also be specified for items individually
// Available types: 'box' (default), 'point', 'range'
type: "point",
showMajorLabels: false
};
var timeline = new vis.Timeline(container, items, options);
'
/><input
type="hidden"
name="css"
value="body {
font: 10pt arial;
}
"
/><input
type="hidden"
name="html"
value='<h1>World War II timeline</h1>
<p>
Source:
<a href="https://www.onwar.com/chrono/index.htm" target="_blank"
>https://www.onwar.com/chrono/index.htm</a
>
</p>
<div id="mytimeline" style="background-color: #FAFAFA;"></div>
<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 | Point items"
/>
</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 font: 10pt arial;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h1>World War II timeline</h1>\n<p>\n Source:\n <a href=\"https://www.onwar.com/chrono/index.htm\" target=\"_blank\"\n >https://www.onwar.com/chrono/index.htm</a\n >\n</p>\n<div id=\"mytimeline\" style=\"background-color: #FAFAFA;\"></div>\n\n<div id=\"visualization\"></div>\n","js":"var container = document.getElementById(\"visualization\");\n\n// note that months are zero-based in the JavaScript Date object\nvar items = new vis.DataSet([\n { start: new Date(1939, 8, 1), content: \"German Invasion of Poland\" },\n {\n start: new Date(1940, 4, 10),\n content: \"Battle of France and the Low Countries\"\n },\n {\n start: new Date(1940, 7, 13),\n content: \"Battle of Britain - RAF vs. Luftwaffe\"\n },\n {\n start: new Date(1941, 1, 14),\n content: \"German Afrika Korps arrives in North Africa\"\n },\n { start: new Date(1941, 5, 22), content: \"Third Reich Invades the USSR\" },\n { start: new Date(1941, 11, 7), content: \"Japanese Attack Pearl Harbor\" },\n { start: new Date(1942, 5, 4), content: \"Battle of Midway in the Pacific\" },\n {\n start: new Date(1942, 10, 8),\n content: \"Americans open Second Front in North Africa\"\n },\n { start: new Date(1942, 10, 19), content: \"Battle of Stalingrad in Russia\" },\n {\n start: new Date(1943, 6, 5),\n content: \"Battle of Kursk - Last German Offensive on Eastern Front\"\n },\n {\n start: new Date(1943, 6, 10),\n content: \"Anglo-American Landings in Sicily\"\n },\n { start: new Date(1944, 2, 8), content: \"Japanese Attack British India\" },\n {\n start: new Date(1944, 5, 6),\n content: \"D-Day - Allied Invasion of Normandy\"\n },\n {\n start: new Date(1944, 5, 22),\n content: \"Destruction of Army Group Center in Byelorussia\"\n },\n {\n start: new Date(1944, 7, 1),\n content: \"The Warsaw Uprising in Occupied Poland\"\n },\n {\n start: new Date(1944, 9, 20),\n content: \"American Liberation of the Philippines\"\n },\n {\n start: new Date(1944, 11, 16),\n content: \"Battle of the Bulge in the Ardennes\"\n },\n { start: new Date(1944, 1, 19), content: \"American Landings on Iwo Jima\" },\n { start: new Date(1945, 3, 1), content: \"US Invasion of Okinawa\" },\n {\n start: new Date(1945, 3, 16),\n content: \"Battle of Berlin - End of the Third Reich\"\n }\n]);\n\nvar options = {\n // Set global item type. Type can also be specified for items individually\n // Available types: 'box' (default), 'point', 'range'\n type: \"point\",\n showMajorLabels: false\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 | Point items"}'
/><input
type="hidden"
name="js"
value='var container = document.getElementById("visualization");
// note that months are zero-based in the JavaScript Date object
var items = new vis.DataSet([
{ start: new Date(1939, 8, 1), content: "German Invasion of Poland" },
{
start: new Date(1940, 4, 10),
content: "Battle of France and the Low Countries"
},
{
start: new Date(1940, 7, 13),
content: "Battle of Britain - RAF vs. Luftwaffe"
},
{
start: new Date(1941, 1, 14),
content: "German Afrika Korps arrives in North Africa"
},
{ start: new Date(1941, 5, 22), content: "Third Reich Invades the USSR" },
{ start: new Date(1941, 11, 7), content: "Japanese Attack Pearl Harbor" },
{ start: new Date(1942, 5, 4), content: "Battle of Midway in the Pacific" },
{
start: new Date(1942, 10, 8),
content: "Americans open Second Front in North Africa"
},
{ start: new Date(1942, 10, 19), content: "Battle of Stalingrad in Russia" },
{
start: new Date(1943, 6, 5),
content: "Battle of Kursk - Last German Offensive on Eastern Front"
},
{
start: new Date(1943, 6, 10),
content: "Anglo-American Landings in Sicily"
},
{ start: new Date(1944, 2, 8), content: "Japanese Attack British India" },
{
start: new Date(1944, 5, 6),
content: "D-Day - Allied Invasion of Normandy"
},
{
start: new Date(1944, 5, 22),
content: "Destruction of Army Group Center in Byelorussia"
},
{
start: new Date(1944, 7, 1),
content: "The Warsaw Uprising in Occupied Poland"
},
{
start: new Date(1944, 9, 20),
content: "American Liberation of the Philippines"
},
{
start: new Date(1944, 11, 16),
content: "Battle of the Bulge in the Ardennes"
},
{ start: new Date(1944, 1, 19), content: "American Landings on Iwo Jima" },
{ start: new Date(1945, 3, 1), content: "US Invasion of Okinawa" },
{
start: new Date(1945, 3, 16),
content: "Battle of Berlin - End of the Third Reich"
}
]);
var options = {
// Set global item type. Type can also be specified for items individually
// Available types: 'box' (default), 'point', 'range'
type: "point",
showMajorLabels: false
};
var timeline = new vis.Timeline(container, items, options);
'
/><input
type="hidden"
name="css"
value="body {
font: 10pt arial;
}
"
/><input
type="hidden"
name="html"
value='<h1>World War II timeline</h1>
<p>
Source:
<a href="https://www.onwar.com/chrono/index.htm" target="_blank"
>https://www.onwar.com/chrono/index.htm</a
>
</p>
<div id="mytimeline" style="background-color: #FAFAFA;"></div>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="items/pointItems.html"
><div class="example-image">
<img
src="thumbnails/840742b1172cd81d7c7eeb61d230422f4e30f4381b970b3adb55b7c6e537d904.png"
alt="Point items"
/></div></a></span
><span class="example-link"
><div>
<a href="items/rangeOverflowItem.html">Range overflow</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 with overflowing text content",
start: "2014-04-20",
end: "2014-04-26"
},
{
id: 2,
content: "item 2 with overflowing text content",
start: "2014-05-14",
end: "2014-05-18"
},
{
id: 3,
content: "item 3 with overflowing text content",
start: "2014-06-18",
end: "2014-06-22"
},
{
id: 4,
content: "item 4 with overflowing text content",
start: "2014-06-16",
end: "2014-06-17"
},
{
id: 5,
content: "item 5 with overflowing text content",
start: "2014-06-25",
end: "2014-06-27"
},
{
id: 6,
content: "item 6 with overflowing text content",
start: "2014-09-27",
end: "2014-09-28"
}
]);
// 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;
}
.vis-item .vis-item-overflow {
overflow: visible;
}
"
/><input
type="hidden"
name="html"
value='<p>
In case of ranges being spread over a wide range of time, it can be
interesting to have the text contents of the ranges overflow the box. This can
be achieved by changing the overflow property of the contents to visible with
css:
</p>
<pre>
.vis-item .vis-item-overflow {
overflow: visible;
}
</pre>
<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 | Range overflow"
/>
</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\n.vis-item .vis-item-overflow {\n overflow: visible;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n In case of ranges being spread over a wide range of time, it can be\n interesting to have the text contents of the ranges overflow the box. This can\n be achieved by changing the overflow property of the contents to visible with\n css:\n</p>\n<pre>\n.vis-item .vis-item-overflow {\n overflow: visible;\n}\n</pre>\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 {\n id: 1,\n content: \"item 1 with overflowing text content\",\n start: \"2014-04-20\",\n end: \"2014-04-26\"\n },\n {\n id: 2,\n content: \"item 2 with overflowing text content\",\n start: \"2014-05-14\",\n end: \"2014-05-18\"\n },\n {\n id: 3,\n content: \"item 3 with overflowing text content\",\n start: \"2014-06-18\",\n end: \"2014-06-22\"\n },\n {\n id: 4,\n content: \"item 4 with overflowing text content\",\n start: \"2014-06-16\",\n end: \"2014-06-17\"\n },\n {\n id: 5,\n content: \"item 5 with overflowing text content\",\n start: \"2014-06-25\",\n end: \"2014-06-27\"\n },\n {\n id: 6,\n content: \"item 6 with overflowing text content\",\n start: \"2014-09-27\",\n end: \"2014-09-28\"\n }\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 | Range overflow"}'
/><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 with overflowing text content",
start: "2014-04-20",
end: "2014-04-26"
},
{
id: 2,
content: "item 2 with overflowing text content",
start: "2014-05-14",
end: "2014-05-18"
},
{
id: 3,
content: "item 3 with overflowing text content",
start: "2014-06-18",
end: "2014-06-22"
},
{
id: 4,
content: "item 4 with overflowing text content",
start: "2014-06-16",
end: "2014-06-17"
},
{
id: 5,
content: "item 5 with overflowing text content",
start: "2014-06-25",
end: "2014-06-27"
},
{
id: 6,
content: "item 6 with overflowing text content",
start: "2014-09-27",
end: "2014-09-28"
}
]);
// 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;
}
.vis-item .vis-item-overflow {
overflow: visible;
}
"
/><input
type="hidden"
name="html"
value='<p>
In case of ranges being spread over a wide range of time, it can be
interesting to have the text contents of the ranges overflow the box. This can
be achieved by changing the overflow property of the contents to visible with
css:
</p>
<pre>
.vis-item .vis-item-overflow {
overflow: visible;
}
</pre>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="items/rangeOverflowItem.html"
><div class="example-image">
<img
src="thumbnails/3dc7091f5e57b7311a29e191620f46f17a8f393ee333be69f9391d5869de5ec0.png"
alt="Range overflow"
/></div></a></span
><span class="example-link"
><div>
<a href="other/usingReact15AndLess.html"
>React 15 Components in templates</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 groups
var numberOfGroups = 25;
var groups = new vis.DataSet();
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: "Truck " + i
});
}
// create items
var numberOfItems = 1000;
var items = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems / numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
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 + itemsPerGroup * truck,
group: truck,
start: start,
end: end,
content: "Order " + order
});
}
}
var GroupTemplate = React.createClass({
render: function() {
var { group } = this.props;
return (
<div>
<label>{group.content}</label>
</div>
);
}
});
var ItemTemplate = React.createClass({
render: function() {
var { item } = this.props;
return (
<div>
<label>{item.content}</label>
</div>
);
}
});
// specify options
var options = {
orientation: "top",
maxHeight: 400,
start: new Date(),
end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),
editable: true,
template: function(item, element) {
if (!item) {
return;
}
ReactDOM.unmountComponentAtNode(element);
return ReactDOM.render(<ItemTemplate item={item} />, element);
},
groupTemplate: function(group, element) {
if (!group) {
return;
}
ReactDOM.unmountComponentAtNode(element);
return ReactDOM.render(<GroupTemplate group={group} />, element);
}
};
var Timeline = React.createClass({
componentDidMount: function() {
return initTimeline();
},
render: function() {
return (
<div>
<h1>timline with React</h1>
<h2>Using react components for items and group templates</h2>
<div id="visualization"></div>
</div>
);
}
});
function initTimeline() {
var container = document.getElementById("visualization");
timeline = new vis.Timeline(container, items, groups, options);
}
ReactDOM.render(<Timeline />, document.getElementById("root"));
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<div id="root"></div>
<!--
For ease of use, we are including the React, ReactDOM and Babel CDN
builds to make getting started as fast as possible.
In production, you'll want to instead look at using something
like Gulp, Grunt or WebPack (my personal recommendation)
to compile JSX into JavaScript. Also, check out:
https://facebook.github.io/react/docs/tooling-integration.html
-->
<link
href="../../../dist/vis-timeline-graph2d.css"
rel="stylesheet"
type="text/css"
/>
<!--
This is where you link to your React code. Can be .js or .jsx
extension, doesn't really matter.
-->
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.css,https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js,https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js,https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js,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 | React 15 Components in templates"
/>
</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":"","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.css","html":"<div id=\"root\"></div>\n\n<!--\n For ease of use, we are including the React, ReactDOM and Babel CDN\n builds to make getting started as fast as possible.\n \n In production, you'll want to instead look at using something \n like Gulp, Grunt or WebPack (my personal recommendation) \n to compile JSX into JavaScript. Also, check out:\n https://facebook.github.io/react/docs/tooling-integration.html\n -->\n\n<link\n href=\"../../../dist/vis-timeline-graph2d.css\"\n rel=\"stylesheet\"\n type=\"text/css\"\n/>\n\n<!--\n This is where you link to your React code. Can be .js or .jsx \n extension, doesn't really matter.\n -->\n","js":"// create groups\nvar numberOfGroups = 25;\nvar groups = new vis.DataSet();\nfor (var i = 0; i < numberOfGroups; i++) {\n groups.add({\n id: i,\n content: \"Truck \" + i\n });\n}\n\n// create items\nvar numberOfItems = 1000;\nvar items = new vis.DataSet();\nvar itemsPerGroup = Math.round(numberOfItems / numberOfGroups);\nfor (var truck = 0; truck < numberOfGroups; truck++) {\n var date = new Date();\n for (var order = 0; order < itemsPerGroup; order++) {\n date.setHours(date.getHours() + 4 * (Math.random() < 0.2));\n var start = new Date(date);\n date.setHours(date.getHours() + 2 + Math.floor(Math.random() * 4));\n var end = new Date(date);\n items.add({\n id: order + itemsPerGroup * truck,\n group: truck,\n start: start,\n end: end,\n content: \"Order \" + order\n });\n }\n}\n\nvar GroupTemplate = React.createClass({\n render: function() {\n var { group } = this.props;\n return (\n <div>\n <label>{group.content}</label>\n </div>\n );\n }\n});\n\nvar ItemTemplate = React.createClass({\n render: function() {\n var { item } = this.props;\n return (\n <div>\n <label>{item.content}</label>\n </div>\n );\n }\n});\n\n// specify options\nvar options = {\n orientation: \"top\",\n maxHeight: 400,\n start: new Date(),\n end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),\n editable: true,\n template: function(item, element) {\n if (!item) {\n return;\n }\n ReactDOM.unmountComponentAtNode(element);\n return ReactDOM.render(<ItemTemplate item={item} />, element);\n },\n groupTemplate: function(group, element) {\n if (!group) {\n return;\n }\n ReactDOM.unmountComponentAtNode(element);\n return ReactDOM.render(<GroupTemplate group={group} />, element);\n }\n};\n\nvar Timeline = React.createClass({\n componentDidMount: function() {\n return initTimeline();\n },\n render: function() {\n return (\n <div>\n <h1>timline with React</h1>\n <h2>Using react components for items and group templates</h2>\n\n <div id=\"visualization\"></div>\n </div>\n );\n }\n});\n\nfunction initTimeline() {\n var container = document.getElementById(\"visualization\");\n timeline = new vis.Timeline(container, items, groups, options);\n}\n\nReactDOM.render(<Timeline />, document.getElementById(\"root\"));\n","js_external":"https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js;https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js;https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | React 15 Components in templates"}'
/><input
type="hidden"
name="js"
value='// create groups
var numberOfGroups = 25;
var groups = new vis.DataSet();
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: "Truck " + i
});
}
// create items
var numberOfItems = 1000;
var items = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems / numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
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 + itemsPerGroup * truck,
group: truck,
start: start,
end: end,
content: "Order " + order
});
}
}
var GroupTemplate = React.createClass({
render: function() {
var { group } = this.props;
return (
<div>
<label>{group.content}</label>
</div>
);
}
});
var ItemTemplate = React.createClass({
render: function() {
var { item } = this.props;
return (
<div>
<label>{item.content}</label>
</div>
);
}
});
// specify options
var options = {
orientation: "top",
maxHeight: 400,
start: new Date(),
end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),
editable: true,
template: function(item, element) {
if (!item) {
return;
}
ReactDOM.unmountComponentAtNode(element);
return ReactDOM.render(<ItemTemplate item={item} />, element);
},
groupTemplate: function(group, element) {
if (!group) {
return;
}
ReactDOM.unmountComponentAtNode(element);
return ReactDOM.render(<GroupTemplate group={group} />, element);
}
};
var Timeline = React.createClass({
componentDidMount: function() {
return initTimeline();
},
render: function() {
return (
<div>
<h1>timline with React</h1>
<h2>Using react components for items and group templates</h2>
<div id="visualization"></div>
</div>
);
}
});
function initTimeline() {
var container = document.getElementById("visualization");
timeline = new vis.Timeline(container, items, groups, options);
}
ReactDOM.render(<Timeline />, document.getElementById("root"));
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<div id="root"></div>
<!--
For ease of use, we are including the React, ReactDOM and Babel CDN
builds to make getting started as fast as possible.
In production, you'll want to instead look at using something
like Gulp, Grunt or WebPack (my personal recommendation)
to compile JSX into JavaScript. Also, check out:
https://facebook.github.io/react/docs/tooling-integration.html
-->
<link
href="../../../dist/vis-timeline-graph2d.css"
rel="stylesheet"
type="text/css"
/>
<!--
This is where you link to your React code. Can be .js or .jsx
extension, doesn't really matter.
-->
'
/></form
></span>
</div>
<a href="other/usingReact15AndLess.html"
><div class="example-image">
<img
src="thumbnails/2a5a60741939e9324fbe9fc07d682143106a98092c0f94683802681987f5c2f9.png"
alt="React 15 Components in templates"
/></div></a></span
><span class="example-link"
><div>
<a href="other/usingReact16.html"
>React 16 Components in templates</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 groups
var numberOfGroups = 25;
var groups = new vis.DataSet();
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: "Truck " + i
});
}
// create items
var numberOfItems = 1000;
window.items = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems / numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
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 + itemsPerGroup * truck,
group: truck,
start: start,
end: end,
content: "Order " + order
});
}
}
var GroupTemplate = group => {
return (
<div>
<label>{group.content}</label>
</div>
);
};
class ItemTemplate extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<label>{this.props.item.content}</label>
<button
onClick={() => {
return console.log("aaaaaa");
}}
>
aaaa
</button>
</div>
);
}
}
class VisibleFramTemplate extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
id: {this.props.item.id}
<button
onClick={() => {
return console.log("aaaaaa");
}}
>
aaaa
</button>
</div>
);
}
}
// specify options
var options = {
orientation: "top",
maxHeight: 400,
start: new Date(),
end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),
editable: true,
onInitialDrawComplete: () => {
window.timeline.setItems(window.items);
},
template: function(item, element) {
if (!item) {
return;
}
return ReactDOM.createPortal(
ReactDOM.render(<ItemTemplate item={item} />, element),
element,
() => {
window.timeline.redraw();
}
);
// Works too
// return ReactDOMServer.renderToString(<ItemTemplate item={item} />)
// Kinda works
// ReactDOM.render(<ItemTemplate item={item} />, element );
// return ''
},
groupTemplate: function(group, element) {
if (!group || !group.content) {
return;
}
return ReactDOM.createPortal(
ReactDOM.render(<GroupTemplate group={group} />, element),
element
);
},
visibleFrameTemplate: function(item, element) {
if (!item || !element) {
return;
}
if (element.className.indexOf("timeline-item-visible-frame") === -1) {
return;
}
return ReactDOM.createPortal(
ReactDOM.render(<VisibleFramTemplate item={item} />, element),
element
);
}
};
class Timeline extends React.Component {
componentDidMount() {
return initTimeline();
}
render() {
return (
<div>
<h1>timline with React</h1>
<h2>Using react components for items and group templates</h2>
<div id="visualization"></div>
</div>
);
}
}
function initTimeline() {
var container = document.getElementById("visualization");
window.timeline = new vis.Timeline(container, items, groups, options);
}
ReactDOM.render(<Timeline />, document.getElementById("root"));
'
/><input
type="hidden"
name="css"
value=".vis-item-visible-frame {
z-index: 111111;
position: absolute;
top: 0;
}
"
/><input
type="hidden"
name="html"
value='<div id="root"></div>
<link
href="../../../dist/vis-timeline-graph2d.css"
rel="stylesheet"
type="text/css"
/>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.css,https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.development.js,https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.development.js,https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.1/umd/react-dom-server.browser.development.js,https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js,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 | React 16 Components in templates"
/>
</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":".vis-item-visible-frame {\n z-index: 111111;\n position: absolute;\n top: 0;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.css","html":"<div id=\"root\"></div>\n\n<link\n href=\"../../../dist/vis-timeline-graph2d.css\"\n rel=\"stylesheet\"\n type=\"text/css\"\n/>\n","js":"// create groups\nvar numberOfGroups = 25;\nvar groups = new vis.DataSet();\nfor (var i = 0; i < numberOfGroups; i++) {\n groups.add({\n id: i,\n content: \"Truck \" + i\n });\n}\n\n// create items\nvar numberOfItems = 1000;\nwindow.items = new vis.DataSet();\nvar itemsPerGroup = Math.round(numberOfItems / numberOfGroups);\nfor (var truck = 0; truck < numberOfGroups; truck++) {\n var date = new Date();\n for (var order = 0; order < itemsPerGroup; order++) {\n date.setHours(date.getHours() + 4 * (Math.random() < 0.2));\n var start = new Date(date);\n date.setHours(date.getHours() + 2 + Math.floor(Math.random() * 4));\n var end = new Date(date);\n items.add({\n id: order + itemsPerGroup * truck,\n group: truck,\n start: start,\n end: end,\n content: \"Order \" + order\n });\n }\n}\n\nvar GroupTemplate = group => {\n return (\n <div>\n <label>{group.content}</label>\n </div>\n );\n};\n\nclass ItemTemplate extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <div>\n <label>{this.props.item.content}</label>\n <button\n onClick={() => {\n return console.log(\"aaaaaa\");\n }}\n >\n aaaa\n </button>\n </div>\n );\n }\n}\n\nclass VisibleFramTemplate extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <div>\n id: {this.props.item.id}\n <button\n onClick={() => {\n return console.log(\"aaaaaa\");\n }}\n >\n aaaa\n </button>\n </div>\n );\n }\n}\n\n// specify options\nvar options = {\n orientation: \"top\",\n maxHeight: 400,\n start: new Date(),\n end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),\n editable: true,\n onInitialDrawComplete: () => {\n window.timeline.setItems(window.items);\n },\n template: function(item, element) {\n if (!item) {\n return;\n }\n\n return ReactDOM.createPortal(\n ReactDOM.render(<ItemTemplate item={item} />, element),\n element,\n () => {\n window.timeline.redraw();\n }\n );\n\n // Works too\n // return ReactDOMServer.renderToString(<ItemTemplate item={item} />)\n\n // Kinda works\n // ReactDOM.render(<ItemTemplate item={item} />, element );\n // return ''\n },\n\n groupTemplate: function(group, element) {\n if (!group || !group.content) {\n return;\n }\n return ReactDOM.createPortal(\n ReactDOM.render(<GroupTemplate group={group} />, element),\n element\n );\n },\n\n visibleFrameTemplate: function(item, element) {\n if (!item || !element) {\n return;\n }\n if (element.className.indexOf(\"timeline-item-visible-frame\") === -1) {\n return;\n }\n return ReactDOM.createPortal(\n ReactDOM.render(<VisibleFramTemplate item={item} />, element),\n element\n );\n }\n};\n\nclass Timeline extends React.Component {\n componentDidMount() {\n return initTimeline();\n }\n render() {\n return (\n <div>\n <h1>timline with React</h1>\n <h2>Using react components for items and group templates</h2>\n\n <div id=\"visualization\"></div>\n </div>\n );\n }\n}\n\nfunction initTimeline() {\n var container = document.getElementById(\"visualization\");\n window.timeline = new vis.Timeline(container, items, groups, options);\n}\n\nReactDOM.render(<Timeline />, document.getElementById(\"root\"));\n","js_external":"https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.development.js;https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.development.js;https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.1/umd/react-dom-server.browser.development.js;https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | React 16 Components in templates"}'
/><input
type="hidden"
name="js"
value='// create groups
var numberOfGroups = 25;
var groups = new vis.DataSet();
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: "Truck " + i
});
}
// create items
var numberOfItems = 1000;
window.items = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems / numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
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 + itemsPerGroup * truck,
group: truck,
start: start,
end: end,
content: "Order " + order
});
}
}
var GroupTemplate = group => {
return (
<div>
<label>{group.content}</label>
</div>
);
};
class ItemTemplate extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<label>{this.props.item.content}</label>
<button
onClick={() => {
return console.log("aaaaaa");
}}
>
aaaa
</button>
</div>
);
}
}
class VisibleFramTemplate extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
id: {this.props.item.id}
<button
onClick={() => {
return console.log("aaaaaa");
}}
>
aaaa
</button>
</div>
);
}
}
// specify options
var options = {
orientation: "top",
maxHeight: 400,
start: new Date(),
end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),
editable: true,
onInitialDrawComplete: () => {
window.timeline.setItems(window.items);
},
template: function(item, element) {
if (!item) {
return;
}
return ReactDOM.createPortal(
ReactDOM.render(<ItemTemplate item={item} />, element),
element,
() => {
window.timeline.redraw();
}
);
// Works too
// return ReactDOMServer.renderToString(<ItemTemplate item={item} />)
// Kinda works
// ReactDOM.render(<ItemTemplate item={item} />, element );
// return ''
},
groupTemplate: function(group, element) {
if (!group || !group.content) {
return;
}
return ReactDOM.createPortal(
ReactDOM.render(<GroupTemplate group={group} />, element),
element
);
},
visibleFrameTemplate: function(item, element) {
if (!item || !element) {
return;
}
if (element.className.indexOf("timeline-item-visible-frame") === -1) {
return;
}
return ReactDOM.createPortal(
ReactDOM.render(<VisibleFramTemplate item={item} />, element),
element
);
}
};
class Timeline extends React.Component {
componentDidMount() {
return initTimeline();
}
render() {
return (
<div>
<h1>timline with React</h1>
<h2>Using react components for items and group templates</h2>
<div id="visualization"></div>
</div>
);
}
}
function initTimeline() {
var container = document.getElementById("visualization");
window.timeline = new vis.Timeline(container, items, groups, options);
}
ReactDOM.render(<Timeline />, document.getElementById("root"));
'
/><input
type="hidden"
name="css"
value=".vis-item-visible-frame {
z-index: 111111;
position: absolute;
top: 0;
}
"
/><input
type="hidden"
name="html"
value='<div id="root"></div>
<link
href="../../../dist/vis-timeline-graph2d.css"
rel="stylesheet"
type="text/css"
/>
'
/></form
></span>
</div>
<a href="other/usingReact16.html"
><div class="example-image">
<img
src="thumbnails/7936664a890b76df2eab104a36cb10e95bb49c07a0d6470b0dc5e610e8d417b0.png"
alt="React 16 Components in templates"
/></div></a></span
><span class="example-link"
><div>
<a href="other/usingReact.html">React Components in templates</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 timeline;
// create groups
var numberOfGroups = 25;
var groups = new vis.DataSet();
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: "Truck " + i
});
}
// create items
var numberOfItems = 1000;
var items = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems / numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
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 + itemsPerGroup * truck,
group: truck,
start: start,
end: end,
content: "Order " + order
});
}
}
var GroupTemplate = React.createClass({
render: function() {
var { group } = this.props;
return (
<div>
<label>{group.content}</label>
</div>
);
}
});
var ItemTemplate = React.createClass({
render: function() {
var { item } = this.props;
return (
<div>
<label>{item.content}</label>
</div>
);
}
});
// specify options
var options = {
orientation: "top",
maxHeight: 400,
start: new Date(),
end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),
editable: true,
template: function(item, element) {
if (!item) {
return;
}
ReactDOM.unmountComponentAtNode(element);
return ReactDOM.render(<ItemTemplate item={item} />, element);
},
groupTemplate: function(group, element) {
if (!group) {
return;
}
ReactDOM.unmountComponentAtNode(element);
return ReactDOM.render(<GroupTemplate group={group} />, element);
}
};
var VisTimeline = React.createClass({
componentDidMount: function() {
return initTimeline();
},
render: function() {
return (
<div>
<h1>Vis timline with React</h1>
<h2>Using react components for items and group templates</h2>
<div id="visualization"></div>
</div>
);
}
});
function initTimeline() {
var container = document.getElementById("visualization");
timeline = new vis.Timeline(container, items, groups, options);
}
ReactDOM.render(<VisTimeline />, document.getElementById("root"));
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<div id="root"></div>
<!--
For ease of use, we are including the React, ReactDOM and Babel CDN
builds to make getting started as fast as possible.
In production, you'll want to instead look at using something
like Gulp, Grunt or WebPack (my personal recommendation)
to compile JSX into JavaScript. Also, check out:
https://facebook.github.io/react/docs/tooling-integration.html
-->
<link
href="../../../dist/vis-timeline-graph2d.min.css"
rel="stylesheet"
type="text/css"
/>
<!--
This is where you link to your React code. Can be .js or .jsx
extension, doesn't really matter.
-->
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js,https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js,https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js,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 | React Components in templates"
/>
</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":"","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<div id=\"root\"></div>\n\n<!--\n For ease of use, we are including the React, ReactDOM and Babel CDN\n builds to make getting started as fast as possible.\n \n In production, you'll want to instead look at using something \n like Gulp, Grunt or WebPack (my personal recommendation) \n to compile JSX into JavaScript. Also, check out:\n https://facebook.github.io/react/docs/tooling-integration.html\n -->\n\n<link\n href=\"../../../dist/vis-timeline-graph2d.min.css\"\n rel=\"stylesheet\"\n type=\"text/css\"\n/>\n\n<!--\n This is where you link to your React code. Can be .js or .jsx \n extension, doesn't really matter.\n -->\n","js":"var timeline;\n\n// create groups\nvar numberOfGroups = 25;\nvar groups = new vis.DataSet();\nfor (var i = 0; i < numberOfGroups; i++) {\n groups.add({\n id: i,\n content: \"Truck \" + i\n });\n}\n\n// create items\nvar numberOfItems = 1000;\nvar items = new vis.DataSet();\nvar itemsPerGroup = Math.round(numberOfItems / numberOfGroups);\nfor (var truck = 0; truck < numberOfGroups; truck++) {\n var date = new Date();\n for (var order = 0; order < itemsPerGroup; order++) {\n date.setHours(date.getHours() + 4 * (Math.random() < 0.2));\n var start = new Date(date);\n date.setHours(date.getHours() + 2 + Math.floor(Math.random() * 4));\n var end = new Date(date);\n items.add({\n id: order + itemsPerGroup * truck,\n group: truck,\n start: start,\n end: end,\n content: \"Order \" + order\n });\n }\n}\n\nvar GroupTemplate = React.createClass({\n render: function() {\n var { group } = this.props;\n return (\n <div>\n <label>{group.content}</label>\n </div>\n );\n }\n});\n\nvar ItemTemplate = React.createClass({\n render: function() {\n var { item } = this.props;\n return (\n <div>\n <label>{item.content}</label>\n </div>\n );\n }\n});\n\n// specify options\nvar options = {\n orientation: \"top\",\n maxHeight: 400,\n start: new Date(),\n end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),\n editable: true,\n template: function(item, element) {\n if (!item) {\n return;\n }\n ReactDOM.unmountComponentAtNode(element);\n return ReactDOM.render(<ItemTemplate item={item} />, element);\n },\n groupTemplate: function(group, element) {\n if (!group) {\n return;\n }\n ReactDOM.unmountComponentAtNode(element);\n return ReactDOM.render(<GroupTemplate group={group} />, element);\n }\n};\n\nvar VisTimeline = React.createClass({\n componentDidMount: function() {\n return initTimeline();\n },\n render: function() {\n return (\n <div>\n <h1>Vis timline with React</h1>\n <h2>Using react components for items and group templates</h2>\n\n <div id=\"visualization\"></div>\n </div>\n );\n }\n});\n\nfunction initTimeline() {\n var container = document.getElementById(\"visualization\");\n timeline = new vis.Timeline(container, items, groups, options);\n}\n\nReactDOM.render(<VisTimeline />, document.getElementById(\"root\"));\n","js_external":"https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js;https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js;https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | React Components in templates"}'
/><input
type="hidden"
name="js"
value='var timeline;
// create groups
var numberOfGroups = 25;
var groups = new vis.DataSet();
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: "Truck " + i
});
}
// create items
var numberOfItems = 1000;
var items = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems / numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
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 + itemsPerGroup * truck,
group: truck,
start: start,
end: end,
content: "Order " + order
});
}
}
var GroupTemplate = React.createClass({
render: function() {
var { group } = this.props;
return (
<div>
<label>{group.content}</label>
</div>
);
}
});
var ItemTemplate = React.createClass({
render: function() {
var { item } = this.props;
return (
<div>
<label>{item.content}</label>
</div>
);
}
});
// specify options
var options = {
orientation: "top",
maxHeight: 400,
start: new Date(),
end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),
editable: true,
template: function(item, element) {
if (!item) {
return;
}
ReactDOM.unmountComponentAtNode(element);
return ReactDOM.render(<ItemTemplate item={item} />, element);
},
groupTemplate: function(group, element) {
if (!group) {
return;
}
ReactDOM.unmountComponentAtNode(element);
return ReactDOM.render(<GroupTemplate group={group} />, element);
}
};
var VisTimeline = React.createClass({
componentDidMount: function() {
return initTimeline();
},
render: function() {
return (
<div>
<h1>Vis timline with React</h1>
<h2>Using react components for items and group templates</h2>
<div id="visualization"></div>
</div>
);
}
});
function initTimeline() {
var container = document.getElementById("visualization");
timeline = new vis.Timeline(container, items, groups, options);
}
ReactDOM.render(<VisTimeline />, document.getElementById("root"));
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<div id="root"></div>
<!--
For ease of use, we are including the React, ReactDOM and Babel CDN
builds to make getting started as fast as possible.
In production, you'll want to instead look at using something
like Gulp, Grunt or WebPack (my personal recommendation)
to compile JSX into JavaScript. Also, check out:
https://facebook.github.io/react/docs/tooling-integration.html
-->
<link
href="../../../dist/vis-timeline-graph2d.min.css"
rel="stylesheet"
type="text/css"
/>
<!--
This is where you link to your React code. Can be .js or .jsx
extension, doesn't really matter.
-->
'
/></form
></span>
</div>
<a href="other/usingReact.html"
><div class="example-image">
<img
src="thumbnails/a1fb9f9444a41e7c625a0045bbec9da6aa950cb314f268f78e44dae17a88d578.png"
alt="React Components in templates"
/></div></a></span
><span class="example-link"
><div>
<a href="other/requirejs/requirejs_example.html"
>require.js 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="
"
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<p>
This example shows how to load the vis-timeline-graph2d.min.js library using
require.js.
</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/examples/timeline/other/requirejs/scripts/require.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Timeline | require.js 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":"","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n This example shows how to load the vis-timeline-graph2d.min.js library using\n require.js.\n</p>\n<div id=\"visualization\"></div>\n","js":"\n","js_external":"https://visjs.github.io/vis-timeline/examples/timeline/other/requirejs/scripts/require.js","title":"Timeline | require.js demo"}'
/><input
type="hidden"
name="js"
value="
"
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<p>
This example shows how to load the vis-timeline-graph2d.min.js library using
require.js.
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="other/requirejs/requirejs_example.html"
><div class="example-image">
<img
src="thumbnails/3dd1a76008c6defa4d5cd73616583aea53cc0d013fbf28d4985f31e44361a03b.png"
alt="require.js demo"
/></div></a></span
><span class="example-link"
><div>
<a href="interaction/rollingMode.html">rolling mode Option</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 container = document.getElementById("visualization");
var items = new vis.DataSet();
for (var i = 10; i >= 0; i--) {
items.add({
id: i,
content: "item " + i,
start: new Date(new Date().getTime() + i * 100000)
});
}
// Configuration for the Timeline
// specify options
var options = {
start: new Date(),
end: new Date(new Date().getTime() + 1000000),
rollingMode: {
follow: true,
offset: 0.5
}
};
// create a Timeline
timeline = new vis.Timeline(container, items, null, options);
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<h1><i id="icon">&#x26F6;</i>Timeline rolling mode option</h1>
<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 | rolling mode Option"
/>
</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":"","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h1><i id=\"icon\">&#x26F6;</i>Timeline rolling mode option</h1>\n\n<div id=\"visualization\"></div>\n","js":"var container = document.getElementById(\"visualization\");\n\nvar items = new vis.DataSet();\n\nfor (var i = 10; i >= 0; i--) {\n items.add({\n id: i,\n content: \"item \" + i,\n start: new Date(new Date().getTime() + i * 100000)\n });\n}\n\n// Configuration for the Timeline\n// specify options\nvar options = {\n start: new Date(),\n end: new Date(new Date().getTime() + 1000000),\n rollingMode: {\n follow: true,\n offset: 0.5\n }\n};\n\n// create a Timeline\ntimeline = new vis.Timeline(container, items, null, options);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | rolling mode Option"}'
/><input
type="hidden"
name="js"
value='var container = document.getElementById("visualization");
var items = new vis.DataSet();
for (var i = 10; i >= 0; i--) {
items.add({
id: i,
content: "item " + i,
start: new Date(new Date().getTime() + i * 100000)
});
}
// Configuration for the Timeline
// specify options
var options = {
start: new Date(),
end: new Date(new Date().getTime() + 1000000),
rollingMode: {
follow: true,
offset: 0.5
}
};
// create a Timeline
timeline = new vis.Timeline(container, items, null, options);
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<h1><i id="icon">&#x26F6;</i>Timeline rolling mode option</h1>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="interaction/rollingMode.html"
><div class="example-image">
<img
src="thumbnails/a696d54cddef9ab2fc5cc9c2e664f10676b2bdcc94ba3f3fd9022b26163213d0.png"
alt="rolling mode Option"
/></div></a></span
><span class="example-link"
><div>
<a href="other/rtl.html">RTL example</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();
// add items to the DataSet
items.add([
{ id: 1, content: "2014-01-23 <br>start", start: "2014-01-23" },
{ id: 2, content: "2014-01-18", start: "2014-01-18" },
{ id: 3, content: "2014-01-21", start: "2014-01-21" },
{
id: 4,
content: "2014-01-19 - 2014-01-24",
start: "2014-01-19",
end: "2014-01-24"
},
{ id: 5, content: "2014-01-28", start: "2014-01-28", type: "point" },
{ id: 6, content: "2014-01-26", start: "2014-01-26" }
]);
var container1 = document.getElementById("timeline1");
var container2 = document.getElementById("timeline2");
var options = {
start: "2014-01-10",
end: "2014-02-10",
height: "300px"
};
var options1 = jQuery.extend(options, {});
var timeline1 = new vis.Timeline(container1, items, options1);
var options2 = jQuery.extend(options, { rtl: true });
var timeline2 = new vis.Timeline(container2, items, options2);
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<h1>Timeline RTL support</h1>
<h2>Using <code>dir = &quot;rtl&quot;</code> in any parent node</h2>
<div id="timeline1" dir="rtl"></div>
<h2>Using <code>options.rtl = true</code></h2>
<div id="timeline2"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js,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 | RTL example"
/>
</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":"","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h1>Timeline RTL support</h1>\n\n<h2>Using <code>dir = &quot;rtl&quot;</code> in any parent node</h2>\n<div id=\"timeline1\" dir=\"rtl\"></div>\n\n<h2>Using <code>options.rtl = true</code></h2>\n<div id=\"timeline2\"></div>\n","js":"var items = new vis.DataSet();\n// add items to the DataSet\nitems.add([\n { id: 1, content: \"2014-01-23 <br>start\", start: \"2014-01-23\" },\n { id: 2, content: \"2014-01-18\", start: \"2014-01-18\" },\n { id: 3, content: \"2014-01-21\", start: \"2014-01-21\" },\n {\n id: 4,\n content: \"2014-01-19 - 2014-01-24\",\n start: \"2014-01-19\",\n end: \"2014-01-24\"\n },\n { id: 5, content: \"2014-01-28\", start: \"2014-01-28\", type: \"point\" },\n { id: 6, content: \"2014-01-26\", start: \"2014-01-26\" }\n]);\n\nvar container1 = document.getElementById(\"timeline1\");\nvar container2 = document.getElementById(\"timeline2\");\n\nvar options = {\n start: \"2014-01-10\",\n end: \"2014-02-10\",\n height: \"300px\"\n};\n\nvar options1 = jQuery.extend(options, {});\nvar timeline1 = new vis.Timeline(container1, items, options1);\n\nvar options2 = jQuery.extend(options, { rtl: true });\nvar timeline2 = new vis.Timeline(container2, items, options2);\n","js_external":"https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | RTL example"}'
/><input
type="hidden"
name="js"
value='var items = new vis.DataSet();
// add items to the DataSet
items.add([
{ id: 1, content: "2014-01-23 <br>start", start: "2014-01-23" },
{ id: 2, content: "2014-01-18", start: "2014-01-18" },
{ id: 3, content: "2014-01-21", start: "2014-01-21" },
{
id: 4,
content: "2014-01-19 - 2014-01-24",
start: "2014-01-19",
end: "2014-01-24"
},
{ id: 5, content: "2014-01-28", start: "2014-01-28", type: "point" },
{ id: 6, content: "2014-01-26", start: "2014-01-26" }
]);
var container1 = document.getElementById("timeline1");
var container2 = document.getElementById("timeline2");
var options = {
start: "2014-01-10",
end: "2014-02-10",
height: "300px"
};
var options1 = jQuery.extend(options, {});
var timeline1 = new vis.Timeline(container1, items, options1);
var options2 = jQuery.extend(options, { rtl: true });
var timeline2 = new vis.Timeline(container2, items, options2);
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<h1>Timeline RTL support</h1>
<h2>Using <code>dir = &quot;rtl&quot;</code> in any parent node</h2>
<div id="timeline1" dir="rtl"></div>
<h2>Using <code>options.rtl = true</code></h2>
<div id="timeline2"></div>
'
/></form
></span>
</div>
<a href="other/rtl.html"
><div class="example-image">
<img
src="thumbnails/a91002adfe2db1a5befdc5cfb6ba3c5e485bc41d139133a477c07de8b068b2f7.png"
alt="RTL example"
/></div></a></span
><span class="example-link"
><div>
<a href="interaction/setSelection.html">Select items</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 = {
editable: true
};
var timeline = new vis.Timeline(container, items, options);
var selection = document.getElementById("selection");
var select = document.getElementById("select");
var focus = document.getElementById("focus");
select.onclick = function() {
var ids = selection.value.split(",").map(function(value) {
return value.trim();
});
timeline.setSelection(ids, { focus: focus.checked });
};
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}
// Vertical scroll example
var groups = [];
var items = [];
var groupItems = {};
for (var g = 0; g < 10; g++) {
groups.push({
id: g,
content: "Group " + g
});
groupItems[g] = [];
for (var i = 0; i < 30; i++) {
items.push({
id: "g" + g + "_" + i,
content: "g" + g + "_" + i,
group: g,
start: "2014-" + (g + 1) + "-" + getRandomInt(1, 20)
});
groupItems[g].push(items[items.length - 1]);
}
}
var container2 = document.getElementById("vertical-visualization");
var options = {
editable: false,
stack: true,
height: 300,
verticalScroll: true,
groupOrder: "id"
};
var timeline2 = new vis.Timeline(container2, items, groups, options);
var groupIndex = 0;
var itemIndex = 0;
var moveToItem = function(direction) {
itemIndex += direction;
groupIndex += direction;
if (groupIndex < 0) {
groupIndex = groups.length - 1;
} else if (groupIndex >= groups.length) {
groupIndex = 0;
}
var items = groupItems[groupIndex];
if (itemIndex < 0) {
itemIndex = items.length - 1;
} else if (itemIndex >= items.length) {
itemIndex = 0;
}
var id = items[itemIndex].id;
timeline2.setSelection(id, { focus: true });
};
var nextFocus = document.getElementById("nextFocus");
var prevFocus = document.getElementById("prevFocus");
var selectionVertical = document.getElementById("selectionVertical");
var selectVertical = document.getElementById("selectVertical");
selectVertical.onclick = function() {
var ids = selectionVertical.value.split(",").map(function(value) {
return value.trim();
});
timeline2.setSelection(ids, { focus: focus.checked });
};
nextFocus.onclick = function() {
moveToItem(1);
};
prevFocus.onclick = function() {
moveToItem(-1);
};
// Set the initial focus
setTimeout(function() {
moveToItem(0);
}, 500);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<h1>Set selection</h1>
<p style="max-width: 600px;">
Enter one or multiple ids of items, then press select to select the items.
This demo uses the function <code>Timeline.setSelection(ids)</code>.
Optionally, the window can be moved to the selected items.
</p>
<p>
Select item(s): <input type="text" id="selection" value="5, 6" /><input
type="button"
id="select"
value="Select"
/><br />
<label><input type="checkbox" id="focus" checked /> Focus on selection</label>
</p>
<div id="visualization"></div>
<br />
<p>
If the height of the timeline is limited some items may be vertically
offscreen. This demo uses
<code>Timeline.setSelection(ids, {focus: true})</code> and demonstrates that
focusing on an item will cause the timeline to scroll vertically to the item
that is being focused on. You can use the buttons below select a random item
either above or below the currently selected item.
</p>
<button id="prevFocus">Select Item Above</button>
<button id="nextFocus">Select Item Below</button>
<br />
<p>
If focusing on multiple items only the first item will be scrolled to. Try
entering several ids and hitting <em>select</em>.
</p>
<p>
Select item(s):
<input type="text" id="selectionVertical" value="g1_5, g2_3" /><input
type="button"
id="selectVertical"
value="Select"
/><br />
</p>
<div id="vertical-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 | Select items"
/>
</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":"<h1>Set selection</h1>\n<p style=\"max-width: 600px;\">\n Enter one or multiple ids of items, then press select to select the items.\n This demo uses the function <code>Timeline.setSelection(ids)</code>.\n Optionally, the window can be moved to the selected items.\n</p>\n\n<p>\n Select item(s): <input type=\"text\" id=\"selection\" value=\"5, 6\" /><input\n type=\"button\"\n id=\"select\"\n value=\"Select\"\n /><br />\n <label><input type=\"checkbox\" id=\"focus\" checked /> Focus on selection</label>\n</p>\n<div id=\"visualization\"></div>\n\n<br />\n<p>\n If the height of the timeline is limited some items may be vertically\n offscreen. This demo uses\n <code>Timeline.setSelection(ids, {focus: true})</code> and demonstrates that\n focusing on an item will cause the timeline to scroll vertically to the item\n that is being focused on. You can use the buttons below select a random item\n either above or below the currently selected item.\n</p>\n<button id=\"prevFocus\">Select Item Above</button>\n<button id=\"nextFocus\">Select Item Below</button>\n<br />\n\n<p>\n If focusing on multiple items only the first item will be scrolled to. Try\n entering several ids and hitting <em>select</em>.\n</p>\n<p>\n Select item(s):\n <input type=\"text\" id=\"selectionVertical\" value=\"g1_5, g2_3\" /><input\n type=\"button\"\n id=\"selectVertical\"\n value=\"Select\"\n /><br />\n</p>\n\n<div id=\"vertical-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 editable: true\n};\n\nvar timeline = new vis.Timeline(container, items, options);\n\nvar selection = document.getElementById(\"selection\");\nvar select = document.getElementById(\"select\");\nvar focus = document.getElementById(\"focus\");\nselect.onclick = function() {\n var ids = selection.value.split(\",\").map(function(value) {\n return value.trim();\n });\n timeline.setSelection(ids, { focus: focus.checked });\n};\n\nfunction getRandomInt(min, max) {\n min = Math.ceil(min);\n max = Math.floor(max);\n return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive\n}\n\n// Vertical scroll example\nvar groups = [];\nvar items = [];\nvar groupItems = {};\n\nfor (var g = 0; g < 10; g++) {\n groups.push({\n id: g,\n content: \"Group \" + g\n });\n\n groupItems[g] = [];\n\n for (var i = 0; i < 30; i++) {\n items.push({\n id: \"g\" + g + \"_\" + i,\n content: \"g\" + g + \"_\" + i,\n group: g,\n start: \"2014-\" + (g + 1) + \"-\" + getRandomInt(1, 20)\n });\n\n groupItems[g].push(items[items.length - 1]);\n }\n}\n\nvar container2 = document.getElementById(\"vertical-visualization\");\nvar options = {\n editable: false,\n stack: true,\n height: 300,\n verticalScroll: true,\n groupOrder: \"id\"\n};\n\nvar timeline2 = new vis.Timeline(container2, items, groups, options);\n\nvar groupIndex = 0;\nvar itemIndex = 0;\n\nvar moveToItem = function(direction) {\n itemIndex += direction;\n groupIndex += direction;\n\n if (groupIndex < 0) {\n groupIndex = groups.length - 1;\n } else if (groupIndex >= groups.length) {\n groupIndex = 0;\n }\n\n var items = groupItems[groupIndex];\n\n if (itemIndex < 0) {\n itemIndex = items.length - 1;\n } else if (itemIndex >= items.length) {\n itemIndex = 0;\n }\n\n var id = items[itemIndex].id;\n\n timeline2.setSelection(id, { focus: true });\n};\n\nvar nextFocus = document.getElementById(\"nextFocus\");\nvar prevFocus = document.getElementById(\"prevFocus\");\nvar selectionVertical = document.getElementById(\"selectionVertical\");\nvar selectVertical = document.getElementById(\"selectVertical\");\n\nselectVertical.onclick = function() {\n var ids = selectionVertical.value.split(\",\").map(function(value) {\n return value.trim();\n });\n timeline2.setSelection(ids, { focus: focus.checked });\n};\n\nnextFocus.onclick = function() {\n moveToItem(1);\n};\n\nprevFocus.onclick = function() {\n moveToItem(-1);\n};\n\n// Set the initial focus\nsetTimeout(function() {\n moveToItem(0);\n}, 500);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Select items"}'
/><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 = {
editable: true
};
var timeline = new vis.Timeline(container, items, options);
var selection = document.getElementById("selection");
var select = document.getElementById("select");
var focus = document.getElementById("focus");
select.onclick = function() {
var ids = selection.value.split(",").map(function(value) {
return value.trim();
});
timeline.setSelection(ids, { focus: focus.checked });
};
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}
// Vertical scroll example
var groups = [];
var items = [];
var groupItems = {};
for (var g = 0; g < 10; g++) {
groups.push({
id: g,
content: "Group " + g
});
groupItems[g] = [];
for (var i = 0; i < 30; i++) {
items.push({
id: "g" + g + "_" + i,
content: "g" + g + "_" + i,
group: g,
start: "2014-" + (g + 1) + "-" + getRandomInt(1, 20)
});
groupItems[g].push(items[items.length - 1]);
}
}
var container2 = document.getElementById("vertical-visualization");
var options = {
editable: false,
stack: true,
height: 300,
verticalScroll: true,
groupOrder: "id"
};
var timeline2 = new vis.Timeline(container2, items, groups, options);
var groupIndex = 0;
var itemIndex = 0;
var moveToItem = function(direction) {
itemIndex += direction;
groupIndex += direction;
if (groupIndex < 0) {
groupIndex = groups.length - 1;
} else if (groupIndex >= groups.length) {
groupIndex = 0;
}
var items = groupItems[groupIndex];
if (itemIndex < 0) {
itemIndex = items.length - 1;
} else if (itemIndex >= items.length) {
itemIndex = 0;
}
var id = items[itemIndex].id;
timeline2.setSelection(id, { focus: true });
};
var nextFocus = document.getElementById("nextFocus");
var prevFocus = document.getElementById("prevFocus");
var selectionVertical = document.getElementById("selectionVertical");
var selectVertical = document.getElementById("selectVertical");
selectVertical.onclick = function() {
var ids = selectionVertical.value.split(",").map(function(value) {
return value.trim();
});
timeline2.setSelection(ids, { focus: focus.checked });
};
nextFocus.onclick = function() {
moveToItem(1);
};
prevFocus.onclick = function() {
moveToItem(-1);
};
// Set the initial focus
setTimeout(function() {
moveToItem(0);
}, 500);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<h1>Set selection</h1>
<p style="max-width: 600px;">
Enter one or multiple ids of items, then press select to select the items.
This demo uses the function <code>Timeline.setSelection(ids)</code>.
Optionally, the window can be moved to the selected items.
</p>
<p>
Select item(s): <input type="text" id="selection" value="5, 6" /><input
type="button"
id="select"
value="Select"
/><br />
<label><input type="checkbox" id="focus" checked /> Focus on selection</label>
</p>
<div id="visualization"></div>
<br />
<p>
If the height of the timeline is limited some items may be vertically
offscreen. This demo uses
<code>Timeline.setSelection(ids, {focus: true})</code> and demonstrates that
focusing on an item will cause the timeline to scroll vertically to the item
that is being focused on. You can use the buttons below select a random item
either above or below the currently selected item.
</p>
<button id="prevFocus">Select Item Above</button>
<button id="nextFocus">Select Item Below</button>
<br />
<p>
If focusing on multiple items only the first item will be scrolled to. Try
entering several ids and hitting <em>select</em>.
</p>
<p>
Select item(s):
<input type="text" id="selectionVertical" value="g1_5, g2_3" /><input
type="button"
id="selectVertical"
value="Select"
/><br />
</p>
<div id="vertical-visualization"></div>
'
/></form
></span>
</div>
<a href="interaction/setSelection.html"
><div class="example-image">
<img
src="thumbnails/913f5db43b7c58d3f83fee3552b5ae89ed4ce604a40c28c41182c91c6a7ffbd6.png"
alt="Select items"
/></div></a></span
><span class="example-link"
><div>
<a href="interaction/sequentialSelection.html"
>Sequential Selection</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" }
});
var groups = new vis.DataSet([
{
id: "bar",
content: "bar",
subgroupStack: { sg_1: true, sg_2: true, sg_3: true },
subgroupVisibility: { sg_1: true, sg_2: true, sg_3: true }
},
{
id: "foo",
content: "foo",
subgroupOrder: "subgroupOrder" // this group has no subgroups but this would be the other method to do the sorting.
}
]);
// add items to the DataSet
items.add([
{
id: "A",
start: "2014-01-20",
end: "2014-01-22",
type: "background",
group: "foo"
},
{
id: "B",
start: "2014-01-22",
end: "2014-01-23",
type: "background",
group: "foo",
className: "negative"
},
{
id: 0,
content: "no subgroup",
start: "2014-01-20",
end: "2014-01-22",
group: "foo"
},
{
id: "SG_1_1",
start: "2014-01-25",
end: "2014-01-27",
type: "background",
group: "bar",
subgroup: "sg_1",
subgroupOrder: 0
},
{
id: "SG_1_2",
start: "2014-01-26",
end: "2014-01-27",
type: "background",
className: "positive",
group: "bar",
subgroup: "sg_1",
subgroupOrder: 0
},
{
id: 1,
content: "subgroup0_1",
start: "2014-01-23T12:00:00",
end: "2014-01-26T12:00:00",
group: "bar",
subgroup: "sg_1",
subgroupOrder: 0
},
{
id: 2,
content: "subgroup0_2",
start: "2014-01-22T12:00:01",
end: "2014-01-25T12:00:00",
group: "bar",
subgroup: "sg_1",
subgroupOrder: 0
},
{
id: "SG_2_1",
start: "2014-02-01",
end: "2014-02-02",
type: "background",
group: "bar",
subgroup: "sg_2",
subgroupOrder: 1
},
{
id: "SG_2_2",
start: "2014-02-2",
end: "2014-02-03",
type: "background",
className: "negative",
group: "bar",
subgroup: "sg_2",
subgroupOrder: 1
},
{
id: 3,
content: "subgroup1_1",
start: "2014-01-27T02:00:00",
end: "2014-01-29",
group: "bar",
subgroup: "sg_2",
subgroupOrder: 1
},
{
id: 4,
content: "subgroup1_2",
start: "2014-01-28",
end: "2014-02-02",
group: "bar",
subgroup: "sg_2",
subgroupOrder: 1
},
{
id: "SG_3_1",
start: "2014-01-23",
end: "2014-01-25",
type: "background",
group: "bar",
subgroup: "sg_3",
subgroupOrder: 2,
content: "a"
},
{
id: "SG_3_2",
start: "2014-01-26",
end: "2014-01-28",
type: "background",
className: "positive",
group: "bar",
subgroup: "sg_3",
subgroupOrder: 2,
content: "b"
},
{
id: 5,
content: "subgroup2_1",
start: "2014-01-23T12:00:00",
end: "2014-01-26T12:00:00",
group: "bar",
subgroup: "sg_3",
subgroupOrder: 2
},
{
id: 6,
content: "subgroup2_2",
start: "2014-01-26T12:00:01",
end: "2014-01-29T12:00:00",
group: "bar",
subgroup: "sg_3",
subgroupOrder: 2
},
{
id: "background",
start: "2014-01-29",
end: "2014-01-30",
type: "background",
className: "negative",
group: "bar"
},
{
id: "background_all",
start: "2014-01-31",
end: "2014-02-02",
type: "background",
className: "positive"
}
]);
var container = document.getElementById("visualization");
var stackingStatus = document.getElementById("stackingStatus");
var stackSubgroupsStatus = document.getElementById("stackSubgroupsStatus");
var options = {
// orientation:'top'
start: "2014-01-10",
end: "2014-02-10",
editable: true,
stack: true,
stackSubgroups: true,
multiselect: true,
sequentialSelection: true
};
var timeline = new vis.Timeline(container, items, groups, options);
function toggleSequentialSelection() {
options.sequentialSelection = !options.sequentialSelection;
document.getElementById("seq").innerHTML = options.sequentialSelection;
timeline.setOptions(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);
}
.vis-item.vis-background.positive {
background-color: rgba(105, 255, 98, 0.2);
}
.vis-item.vis-background.marker {
border-left: 2px solid green;
}
table {
border: 1px solid gray;
}
td {
text-align: center;
}
code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
"
/><input
type="hidden"
name="html"
value='<p>This example shows the sequential selection option.</p>
<p>
When <code>sequentialSelection</code> is true, then only sequential items are
allowed to be selected (no gaps).
</p>
<table>
<thead>
<tr>
<th>Option</th>
<th>Status</th>
<th>Toggle</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>sequentialSelection</code></td>
<td id="seq">true</td>
<td><button onclick="toggleSequentialSelection()">Toggle</button></td>
</tr>
</tbody>
</table>
<br />
<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 | Sequential Selection"
/>
</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.vis-item.vis-background.positive {\n background-color: rgba(105, 255, 98, 0.2);\n}\n.vis-item.vis-background.marker {\n border-left: 2px solid green;\n}\n\ntable {\n border: 1px solid gray;\n}\n\ntd {\n text-align: center;\n}\n\ncode {\n padding: 2px 4px;\n font-size: 90%;\n color: #c7254e;\n background-color: #f9f2f4;\n border-radius: 4px;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>This example shows the sequential selection option.</p>\n<p>\n When <code>sequentialSelection</code> is true, then only sequential items are\n allowed to be selected (no gaps).\n</p>\n<table>\n <thead>\n <tr>\n <th>Option</th>\n <th>Status</th>\n <th>Toggle</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>sequentialSelection</code></td>\n <td id=\"seq\">true</td>\n <td><button onclick=\"toggleSequentialSelection()\">Toggle</button></td>\n </tr>\n </tbody>\n</table>\n<br />\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});\nvar groups = new vis.DataSet([\n {\n id: \"bar\",\n content: \"bar\",\n subgroupStack: { sg_1: true, sg_2: true, sg_3: true },\n subgroupVisibility: { sg_1: true, sg_2: true, sg_3: true }\n },\n {\n id: \"foo\",\n content: \"foo\",\n subgroupOrder: \"subgroupOrder\" // this group has no subgroups but this would be the other method to do the sorting.\n }\n]);\n// add items to the DataSet\nitems.add([\n {\n id: \"A\",\n start: \"2014-01-20\",\n end: \"2014-01-22\",\n type: \"background\",\n group: \"foo\"\n },\n {\n id: \"B\",\n start: \"2014-01-22\",\n end: \"2014-01-23\",\n type: \"background\",\n group: \"foo\",\n className: \"negative\"\n },\n {\n id: 0,\n content: \"no subgroup\",\n start: \"2014-01-20\",\n end: \"2014-01-22\",\n group: \"foo\"\n },\n\n {\n id: \"SG_1_1\",\n start: \"2014-01-25\",\n end: \"2014-01-27\",\n type: \"background\",\n group: \"bar\",\n subgroup: \"sg_1\",\n subgroupOrder: 0\n },\n {\n id: \"SG_1_2\",\n start: \"2014-01-26\",\n end: \"2014-01-27\",\n type: \"background\",\n className: \"positive\",\n group: \"bar\",\n subgroup: \"sg_1\",\n subgroupOrder: 0\n },\n {\n id: 1,\n content: \"subgroup0_1\",\n start: \"2014-01-23T12:00:00\",\n end: \"2014-01-26T12:00:00\",\n group: \"bar\",\n subgroup: \"sg_1\",\n subgroupOrder: 0\n },\n {\n id: 2,\n content: \"subgroup0_2\",\n start: \"2014-01-22T12:00:01\",\n end: \"2014-01-25T12:00:00\",\n group: \"bar\",\n subgroup: \"sg_1\",\n subgroupOrder: 0\n },\n\n {\n id: \"SG_2_1\",\n start: \"2014-02-01\",\n end: \"2014-02-02\",\n type: \"background\",\n group: \"bar\",\n subgroup: \"sg_2\",\n subgroupOrder: 1\n },\n {\n id: \"SG_2_2\",\n start: \"2014-02-2\",\n end: \"2014-02-03\",\n type: \"background\",\n className: \"negative\",\n group: \"bar\",\n subgroup: \"sg_2\",\n subgroupOrder: 1\n },\n {\n id: 3,\n content: \"subgroup1_1\",\n start: \"2014-01-27T02:00:00\",\n end: \"2014-01-29\",\n group: \"bar\",\n subgroup: \"sg_2\",\n subgroupOrder: 1\n },\n {\n id: 4,\n content: \"subgroup1_2\",\n start: \"2014-01-28\",\n end: \"2014-02-02\",\n group: \"bar\",\n subgroup: \"sg_2\",\n subgroupOrder: 1\n },\n\n {\n id: \"SG_3_1\",\n start: \"2014-01-23\",\n end: \"2014-01-25\",\n type: \"background\",\n group: \"bar\",\n subgroup: \"sg_3\",\n subgroupOrder: 2,\n content: \"a\"\n },\n {\n id: \"SG_3_2\",\n start: \"2014-01-26\",\n end: \"2014-01-28\",\n type: \"background\",\n className: \"positive\",\n group: \"bar\",\n subgroup: \"sg_3\",\n subgroupOrder: 2,\n content: \"b\"\n },\n {\n id: 5,\n content: \"subgroup2_1\",\n start: \"2014-01-23T12:00:00\",\n end: \"2014-01-26T12:00:00\",\n group: \"bar\",\n subgroup: \"sg_3\",\n subgroupOrder: 2\n },\n {\n id: 6,\n content: \"subgroup2_2\",\n start: \"2014-01-26T12:00:01\",\n end: \"2014-01-29T12:00:00\",\n group: \"bar\",\n subgroup: \"sg_3\",\n subgroupOrder: 2\n },\n\n {\n id: \"background\",\n start: \"2014-01-29\",\n end: \"2014-01-30\",\n type: \"background\",\n className: \"negative\",\n group: \"bar\"\n },\n {\n id: \"background_all\",\n start: \"2014-01-31\",\n end: \"2014-02-02\",\n type: \"background\",\n className: \"positive\"\n }\n]);\n\nvar container = document.getElementById(\"visualization\");\nvar stackingStatus = document.getElementById(\"stackingStatus\");\nvar stackSubgroupsStatus = document.getElementById(\"stackSubgroupsStatus\");\nvar options = {\n // orientation:'top'\n start: \"2014-01-10\",\n end: \"2014-02-10\",\n editable: true,\n stack: true,\n stackSubgroups: true,\n multiselect: true,\n sequentialSelection: true\n};\n\nvar timeline = new vis.Timeline(container, items, groups, options);\n\nfunction toggleSequentialSelection() {\n options.sequentialSelection = !options.sequentialSelection;\n document.getElementById(\"seq\").innerHTML = options.sequentialSelection;\n timeline.setOptions(options);\n}\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Sequential Selection"}'
/><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" }
});
var groups = new vis.DataSet([
{
id: "bar",
content: "bar",
subgroupStack: { sg_1: true, sg_2: true, sg_3: true },
subgroupVisibility: { sg_1: true, sg_2: true, sg_3: true }
},
{
id: "foo",
content: "foo",
subgroupOrder: "subgroupOrder" // this group has no subgroups but this would be the other method to do the sorting.
}
]);
// add items to the DataSet
items.add([
{
id: "A",
start: "2014-01-20",
end: "2014-01-22",
type: "background",
group: "foo"
},
{
id: "B",
start: "2014-01-22",
end: "2014-01-23",
type: "background",
group: "foo",
className: "negative"
},
{
id: 0,
content: "no subgroup",
start: "2014-01-20",
end: "2014-01-22",
group: "foo"
},
{
id: "SG_1_1",
start: "2014-01-25",
end: "2014-01-27",
type: "background",
group: "bar",
subgroup: "sg_1",
subgroupOrder: 0
},
{
id: "SG_1_2",
start: "2014-01-26",
end: "2014-01-27",
type: "background",
className: "positive",
group: "bar",
subgroup: "sg_1",
subgroupOrder: 0
},
{
id: 1,
content: "subgroup0_1",
start: "2014-01-23T12:00:00",
end: "2014-01-26T12:00:00",
group: "bar",
subgroup: "sg_1",
subgroupOrder: 0
},
{
id: 2,
content: "subgroup0_2",
start: "2014-01-22T12:00:01",
end: "2014-01-25T12:00:00",
group: "bar",
subgroup: "sg_1",
subgroupOrder: 0
},
{
id: "SG_2_1",
start: "2014-02-01",
end: "2014-02-02",
type: "background",
group: "bar",
subgroup: "sg_2",
subgroupOrder: 1
},
{
id: "SG_2_2",
start: "2014-02-2",
end: "2014-02-03",
type: "background",
className: "negative",
group: "bar",
subgroup: "sg_2",
subgroupOrder: 1
},
{
id: 3,
content: "subgroup1_1",
start: "2014-01-27T02:00:00",
end: "2014-01-29",
group: "bar",
subgroup: "sg_2",
subgroupOrder: 1
},
{
id: 4,
content: "subgroup1_2",
start: "2014-01-28",
end: "2014-02-02",
group: "bar",
subgroup: "sg_2",
subgroupOrder: 1
},
{
id: "SG_3_1",
start: "2014-01-23",
end: "2014-01-25",
type: "background",
group: "bar",
subgroup: "sg_3",
subgroupOrder: 2,
content: "a"
},
{
id: "SG_3_2",
start: "2014-01-26",
end: "2014-01-28",
type: "background",
className: "positive",
group: "bar",
subgroup: "sg_3",
subgroupOrder: 2,
content: "b"
},
{
id: 5,
content: "subgroup2_1",
start: "2014-01-23T12:00:00",
end: "2014-01-26T12:00:00",
group: "bar",
subgroup: "sg_3",
subgroupOrder: 2
},
{
id: 6,
content: "subgroup2_2",
start: "2014-01-26T12:00:01",
end: "2014-01-29T12:00:00",
group: "bar",
subgroup: "sg_3",
subgroupOrder: 2
},
{
id: "background",
start: "2014-01-29",
end: "2014-01-30",
type: "background",
className: "negative",
group: "bar"
},
{
id: "background_all",
start: "2014-01-31",
end: "2014-02-02",
type: "background",
className: "positive"
}
]);
var container = document.getElementById("visualization");
var stackingStatus = document.getElementById("stackingStatus");
var stackSubgroupsStatus = document.getElementById("stackSubgroupsStatus");
var options = {
// orientation:'top'
start: "2014-01-10",
end: "2014-02-10",
editable: true,
stack: true,
stackSubgroups: true,
multiselect: true,
sequentialSelection: true
};
var timeline = new vis.Timeline(container, items, groups, options);
function toggleSequentialSelection() {
options.sequentialSelection = !options.sequentialSelection;
document.getElementById("seq").innerHTML = options.sequentialSelection;
timeline.setOptions(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);
}
.vis-item.vis-background.positive {
background-color: rgba(105, 255, 98, 0.2);
}
.vis-item.vis-background.marker {
border-left: 2px solid green;
}
table {
border: 1px solid gray;
}
td {
text-align: center;
}
code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
"
/><input
type="hidden"
name="html"
value='<p>This example shows the sequential selection option.</p>
<p>
When <code>sequentialSelection</code> is true, then only sequential items are
allowed to be selected (no gaps).
</p>
<table>
<thead>
<tr>
<th>Option</th>
<th>Status</th>
<th>Toggle</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>sequentialSelection</code></td>
<td id="seq">true</td>
<td><button onclick="toggleSequentialSelection()">Toggle</button></td>
</tr>
</tbody>
</table>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="interaction/sequentialSelection.html"
><div class="example-image">
<img
src="thumbnails/46542af710e445ebcadb9ecd05c89e449330643092d7e5a59ce8453b94b9cfc5.png"
alt="Sequential Selection"
/></div></a></span
><span class="example-link"
><div>
<a href="other/customTimeBars.html"
>Show current and custom time bars</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 container = document.getElementById("visualization");
var items = new vis.DataSet();
var customDate = new Date();
var options = {
showCurrentTime: true,
start: new Date(Date.now() - 1000 * 60 * 60 * 24),
end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
};
var timeline = new vis.Timeline(container, items, options);
// Set first time bar
customDate = new Date(
customDate.getFullYear(),
customDate.getMonth(),
customDate.getDate() + 1
);
timeline.addCustomTime(customDate, "t1");
document.getElementById("add").onclick = function() {
try {
customDate = new Date(
customDate.getFullYear(),
customDate.getMonth(),
customDate.getDate() + 1
);
var barId = document.getElementById("barId").value || undefined;
timeline.addCustomTime(customDate, barId);
document.getElementById("barId").value = "";
} catch (err) {
console.log(err);
alert(err);
}
};
document.getElementById("remove").onclick = function() {
try {
timeline.removeCustomTime(document.getElementById("barIndex").value);
document.getElementById("barIndex").value = "";
} catch (err) {
console.log(err);
alert(err);
}
};
timeline.on("timechange", function(properties) {
document.getElementById("timechangeBar").innerHTML = properties.id;
document.getElementById("timechangeEvent").innerHTML = properties.time;
});
timeline.on("timechanged", function(properties) {
document.getElementById("timechangedBar").innerHTML = properties.id;
document.getElementById("timechangedEvent").innerHTML = properties.time;
});
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p>
The Timeline has functions to add multiple custom time bars which can be
dragged by the user.
</p>
<p>
<input type="button" id="add" value="Add custom vertical bar" />
<input type="text" id="barId" placeholder="custom bar ID" />
</p>
<p>
<input type="button" id="remove" value="Remove custom vertical bar" />
<input type="text" id="barIndex" value="t1" placeholder="custom bar ID" />
</p>
<p>
<code><strong>timechange</strong></code> event, index:
<span id="timechangeBar"></span>, time: <span id="timechangeEvent"></span>
</p>
<p>
<code><strong>timechanged</strong></code> event, index:
<span id="timechangedBar"></span>, time: <span id="timechangedEvent"></span>
</p>
<br />
<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 | Show current and custom time bars"
/>
</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 font-size: 11pt;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n The Timeline has functions to add multiple custom time bars which can be\n dragged by the user.\n</p>\n<p>\n <input type=\"button\" id=\"add\" value=\"Add custom vertical bar\" />\n <input type=\"text\" id=\"barId\" placeholder=\"custom bar ID\" />\n</p>\n<p>\n <input type=\"button\" id=\"remove\" value=\"Remove custom vertical bar\" />\n <input type=\"text\" id=\"barIndex\" value=\"t1\" placeholder=\"custom bar ID\" />\n</p>\n<p>\n <code><strong>timechange</strong></code> event, index:\n <span id=\"timechangeBar\"></span>, time: <span id=\"timechangeEvent\"></span>\n</p>\n<p>\n <code><strong>timechanged</strong></code> event, index:\n <span id=\"timechangedBar\"></span>, time: <span id=\"timechangedEvent\"></span>\n</p>\n<br />\n\n<div id=\"visualization\"></div>\n","js":"var container = document.getElementById(\"visualization\");\nvar items = new vis.DataSet();\nvar customDate = new Date();\nvar options = {\n showCurrentTime: true,\n start: new Date(Date.now() - 1000 * 60 * 60 * 24),\n end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)\n};\nvar timeline = new vis.Timeline(container, items, options);\n\n// Set first time bar\ncustomDate = new Date(\n customDate.getFullYear(),\n customDate.getMonth(),\n customDate.getDate() + 1\n);\ntimeline.addCustomTime(customDate, \"t1\");\n\ndocument.getElementById(\"add\").onclick = function() {\n try {\n customDate = new Date(\n customDate.getFullYear(),\n customDate.getMonth(),\n customDate.getDate() + 1\n );\n var barId = document.getElementById(\"barId\").value || undefined;\n timeline.addCustomTime(customDate, barId);\n document.getElementById(\"barId\").value = \"\";\n } catch (err) {\n console.log(err);\n alert(err);\n }\n};\n\ndocument.getElementById(\"remove\").onclick = function() {\n try {\n timeline.removeCustomTime(document.getElementById(\"barIndex\").value);\n document.getElementById(\"barIndex\").value = \"\";\n } catch (err) {\n console.log(err);\n alert(err);\n }\n};\n\ntimeline.on(\"timechange\", function(properties) {\n document.getElementById(\"timechangeBar\").innerHTML = properties.id;\n document.getElementById(\"timechangeEvent\").innerHTML = properties.time;\n});\ntimeline.on(\"timechanged\", function(properties) {\n document.getElementById(\"timechangedBar\").innerHTML = properties.id;\n document.getElementById(\"timechangedEvent\").innerHTML = properties.time;\n});\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Show current and custom time bars"}'
/><input
type="hidden"
name="js"
value='var container = document.getElementById("visualization");
var items = new vis.DataSet();
var customDate = new Date();
var options = {
showCurrentTime: true,
start: new Date(Date.now() - 1000 * 60 * 60 * 24),
end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
};
var timeline = new vis.Timeline(container, items, options);
// Set first time bar
customDate = new Date(
customDate.getFullYear(),
customDate.getMonth(),
customDate.getDate() + 1
);
timeline.addCustomTime(customDate, "t1");
document.getElementById("add").onclick = function() {
try {
customDate = new Date(
customDate.getFullYear(),
customDate.getMonth(),
customDate.getDate() + 1
);
var barId = document.getElementById("barId").value || undefined;
timeline.addCustomTime(customDate, barId);
document.getElementById("barId").value = "";
} catch (err) {
console.log(err);
alert(err);
}
};
document.getElementById("remove").onclick = function() {
try {
timeline.removeCustomTime(document.getElementById("barIndex").value);
document.getElementById("barIndex").value = "";
} catch (err) {
console.log(err);
alert(err);
}
};
timeline.on("timechange", function(properties) {
document.getElementById("timechangeBar").innerHTML = properties.id;
document.getElementById("timechangeEvent").innerHTML = properties.time;
});
timeline.on("timechanged", function(properties) {
document.getElementById("timechangedBar").innerHTML = properties.id;
document.getElementById("timechangedEvent").innerHTML = properties.time;
});
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p>
The Timeline has functions to add multiple custom time bars which can be
dragged by the user.
</p>
<p>
<input type="button" id="add" value="Add custom vertical bar" />
<input type="text" id="barId" placeholder="custom bar ID" />
</p>
<p>
<input type="button" id="remove" value="Remove custom vertical bar" />
<input type="text" id="barIndex" value="t1" placeholder="custom bar ID" />
</p>
<p>
<code><strong>timechange</strong></code> event, index:
<span id="timechangeBar"></span>, time: <span id="timechangeEvent"></span>
</p>
<p>
<code><strong>timechanged</strong></code> event, index:
<span id="timechangedBar"></span>, time: <span id="timechangedEvent"></span>
</p>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="other/customTimeBars.html"
><div class="example-image">
<img
src="thumbnails/12b05b40dea3e925576f999165f29ef9c4f8c62ec9bc9339d59c2122aa0dbae7.png"
alt="Show current and custom time bars"
/></div></a></span
><span class="example-link"
><div>
<a href="other/customTimeBarsTooltip.html"
>Show current and custom time bars tooltip</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 container = document.getElementById("visualization");
var items = new vis.DataSet();
var customDate = new Date();
var options = {
showCurrentTime: true,
start: new Date(Date.now() - 1000 * 60 * 60 * 24),
end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
};
var timeline = new vis.Timeline(container, items, options);
// Set first time bar
customDate = new Date(
customDate.getFullYear(),
customDate.getMonth(),
customDate.getDate() + 1
);
timeline.addCustomTime(customDate, "t1");
timeline.setCustomTimeTitle(function(time) {
return "I'm t1!";
}, "t1");
document.getElementById("add").onclick = function() {
try {
customDate = new Date(
customDate.getFullYear(),
customDate.getMonth(),
customDate.getDate() + 1
);
var barId = document.getElementById("barId").value || undefined;
timeline.addCustomTime(customDate, barId);
timeline.setCustomTimeTitle(function(time) {
return "I'm " + barId + "!";
}, barId);
document.getElementById("barId").value = "";
} catch (err) {
console.log(err);
alert(err);
}
};
document.getElementById("remove").onclick = function() {
try {
timeline.removeCustomTime(document.getElementById("barIndex").value);
document.getElementById("barIndex").value = "";
} catch (err) {
console.log(err);
alert(err);
}
};
timeline.on("timechange", function(properties) {
document.getElementById("timechangeBar").innerHTML = properties.id;
document.getElementById("timechangeEvent").innerHTML = properties.time;
});
timeline.on("timechanged", function(properties) {
document.getElementById("timechangedBar").innerHTML = properties.id;
document.getElementById("timechangedEvent").innerHTML = properties.time;
});
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p>
The Timeline has functions to add multiple custom time bars which can be
dragged by the user.
</p>
<p>
<input type="button" id="add" value="Add custom vertical bar" />
<input type="text" id="barId" placeholder="custom bar ID" />
</p>
<p>
<input type="button" id="remove" value="Remove custom vertical bar" />
<input type="text" id="barIndex" value="t1" placeholder="custom bar ID" />
</p>
<p>
<code><strong>timechange</strong></code> event, index:
<span id="timechangeBar"></span>, time: <span id="timechangeEvent"></span>
</p>
<p>
<code><strong>timechanged</strong></code> event, index:
<span id="timechangedBar"></span>, time: <span id="timechangedEvent"></span>
</p>
<br />
<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,https://visjs.github.io/vis-timeline/examples/googleAnalytics.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Timeline | Show current and custom time bars tooltip"
/>
</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 font-size: 11pt;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n The Timeline has functions to add multiple custom time bars which can be\n dragged by the user.\n</p>\n<p>\n <input type=\"button\" id=\"add\" value=\"Add custom vertical bar\" />\n <input type=\"text\" id=\"barId\" placeholder=\"custom bar ID\" />\n</p>\n<p>\n <input type=\"button\" id=\"remove\" value=\"Remove custom vertical bar\" />\n <input type=\"text\" id=\"barIndex\" value=\"t1\" placeholder=\"custom bar ID\" />\n</p>\n<p>\n <code><strong>timechange</strong></code> event, index:\n <span id=\"timechangeBar\"></span>, time: <span id=\"timechangeEvent\"></span>\n</p>\n<p>\n <code><strong>timechanged</strong></code> event, index:\n <span id=\"timechangedBar\"></span>, time: <span id=\"timechangedEvent\"></span>\n</p>\n<br />\n\n<div id=\"visualization\"></div>\n","js":"var container = document.getElementById(\"visualization\");\nvar items = new vis.DataSet();\nvar customDate = new Date();\nvar options = {\n showCurrentTime: true,\n start: new Date(Date.now() - 1000 * 60 * 60 * 24),\n end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)\n};\nvar timeline = new vis.Timeline(container, items, options);\n\n// Set first time bar\ncustomDate = new Date(\n customDate.getFullYear(),\n customDate.getMonth(),\n customDate.getDate() + 1\n);\ntimeline.addCustomTime(customDate, \"t1\");\ntimeline.setCustomTimeTitle(function(time) {\n return \"I'm t1!\";\n}, \"t1\");\n\ndocument.getElementById(\"add\").onclick = function() {\n try {\n customDate = new Date(\n customDate.getFullYear(),\n customDate.getMonth(),\n customDate.getDate() + 1\n );\n var barId = document.getElementById(\"barId\").value || undefined;\n timeline.addCustomTime(customDate, barId);\n timeline.setCustomTimeTitle(function(time) {\n return \"I'm \" + barId + \"!\";\n }, barId);\n document.getElementById(\"barId\").value = \"\";\n } catch (err) {\n console.log(err);\n alert(err);\n }\n};\n\ndocument.getElementById(\"remove\").onclick = function() {\n try {\n timeline.removeCustomTime(document.getElementById(\"barIndex\").value);\n document.getElementById(\"barIndex\").value = \"\";\n } catch (err) {\n console.log(err);\n alert(err);\n }\n};\n\ntimeline.on(\"timechange\", function(properties) {\n document.getElementById(\"timechangeBar\").innerHTML = properties.id;\n document.getElementById(\"timechangeEvent\").innerHTML = properties.time;\n});\ntimeline.on(\"timechanged\", function(properties) {\n document.getElementById(\"timechangedBar\").innerHTML = properties.id;\n document.getElementById(\"timechangedEvent\").innerHTML = properties.time;\n});\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js;https://visjs.github.io/vis-timeline/examples/googleAnalytics.js","title":"Timeline | Show current and custom time bars tooltip"}'
/><input
type="hidden"
name="js"
value='var container = document.getElementById("visualization");
var items = new vis.DataSet();
var customDate = new Date();
var options = {
showCurrentTime: true,
start: new Date(Date.now() - 1000 * 60 * 60 * 24),
end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
};
var timeline = new vis.Timeline(container, items, options);
// Set first time bar
customDate = new Date(
customDate.getFullYear(),
customDate.getMonth(),
customDate.getDate() + 1
);
timeline.addCustomTime(customDate, "t1");
timeline.setCustomTimeTitle(function(time) {
return "I'm t1!";
}, "t1");
document.getElementById("add").onclick = function() {
try {
customDate = new Date(
customDate.getFullYear(),
customDate.getMonth(),
customDate.getDate() + 1
);
var barId = document.getElementById("barId").value || undefined;
timeline.addCustomTime(customDate, barId);
timeline.setCustomTimeTitle(function(time) {
return "I'm " + barId + "!";
}, barId);
document.getElementById("barId").value = "";
} catch (err) {
console.log(err);
alert(err);
}
};
document.getElementById("remove").onclick = function() {
try {
timeline.removeCustomTime(document.getElementById("barIndex").value);
document.getElementById("barIndex").value = "";
} catch (err) {
console.log(err);
alert(err);
}
};
timeline.on("timechange", function(properties) {
document.getElementById("timechangeBar").innerHTML = properties.id;
document.getElementById("timechangeEvent").innerHTML = properties.time;
});
timeline.on("timechanged", function(properties) {
document.getElementById("timechangedBar").innerHTML = properties.id;
document.getElementById("timechangedEvent").innerHTML = properties.time;
});
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
font-size: 11pt;
}
"
/><input
type="hidden"
name="html"
value='<p>
The Timeline has functions to add multiple custom time bars which can be
dragged by the user.
</p>
<p>
<input type="button" id="add" value="Add custom vertical bar" />
<input type="text" id="barId" placeholder="custom bar ID" />
</p>
<p>
<input type="button" id="remove" value="Remove custom vertical bar" />
<input type="text" id="barIndex" value="t1" placeholder="custom bar ID" />
</p>
<p>
<code><strong>timechange</strong></code> event, index:
<span id="timechangeBar"></span>, time: <span id="timechangeEvent"></span>
</p>
<p>
<code><strong>timechanged</strong></code> event, index:
<span id="timechangedBar"></span>, time: <span id="timechangedEvent"></span>
</p>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="other/customTimeBarsTooltip.html"
><div class="example-image">
<img
src="thumbnails/43eb002631e689755270e04660fffafb91026a927be7be81981cb557868aee6e.png"
alt="Show current and custom time bars tooltip"
/></div></a></span
><span class="example-link"
><div>
<a href="interaction/specificItemSelectable.html"
>Specific Item Selectability</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" }
});
var groups = new vis.DataSet([
{
id: "bar",
content: "bar"
},
{
id: "foo",
content: "foo"
}
]);
// add items to the DataSet
items.add([
{
id: "A",
start: "2014-01-20",
end: "2014-01-22",
type: "background",
group: "foo"
},
{
id: "B",
start: "2014-01-22",
end: "2014-01-23",
type: "background",
group: "foo",
className: "negative"
},
{
id: 0,
content: "no subgroup",
start: "2014-01-20",
end: "2014-01-22",
group: "foo"
},
{
id: "SG_1_1",
start: "2014-01-25",
end: "2014-01-27",
type: "background",
group: "bar",
subgroup: "sg_1"
},
{
id: "SG_1_2",
start: "2014-01-26",
end: "2014-01-27",
type: "background",
className: "positive",
group: "bar",
subgroup: "sg_1"
},
{
id: 1,
content: "subgroup0_1",
start: "2014-01-23T12:00:00",
end: "2014-01-26T12:00:00",
group: "bar",
subgroup: "sg_1"
},
{
id: 2,
content: "subgroup0_2",
start: "2014-01-22T12:00:01",
end: "2014-01-25T12:00:00",
group: "bar",
subgroup: "sg_1"
},
{
id: "SG_2_1",
start: "2014-02-01",
end: "2014-02-02",
type: "background",
group: "bar",
subgroup: "sg_2"
},
{
id: "SG_2_2",
start: "2014-02-2",
end: "2014-02-03",
type: "background",
className: "negative",
group: "bar",
subgroup: "sg_2"
},
{
id: 3,
content: "subgroup1_1",
start: "2014-01-27T02:00:00",
end: "2014-01-29",
group: "bar",
subgroup: "sg_2"
},
{
id: 4,
content: "subgroup1_2",
start: "2014-01-28",
end: "2014-02-02",
group: "bar",
subgroup: "sg_2"
},
{
id: "SG_3_1",
start: "2014-01-23",
end: "2014-01-25",
type: "background",
group: "bar",
subgroup: "sg_3",
content: "a"
},
{
id: "SG_3_2",
start: "2014-01-26",
end: "2014-01-28",
type: "background",
className: "positive",
group: "bar",
subgroup: "sg_3",
content: "b"
},
{
id: 5,
content: "subgroup2_1",
start: "2014-01-23T12:00:00",
end: "2014-01-26T12:00:00",
group: "bar",
subgroup: "sg_3"
},
{
id: 6,
content: "subgroup2_2",
start: "2014-01-26T12:00:01",
end: "2014-01-29T12:00:00",
group: "bar",
subgroup: "sg_3"
},
{
id: "background",
start: "2014-01-29",
end: "2014-01-30",
type: "background",
className: "negative",
group: "bar"
},
{
id: "background_all",
start: "2014-01-31",
end: "2014-02-02",
type: "background",
className: "positive"
}
]);
var container = document.getElementById("visualization");
var options = {
// orientation:'top'
start: "2014-01-10",
end: "2014-02-10",
selectable: true
};
var timeline = new vis.Timeline(container, items, groups, options);
var sel = true;
function toggleItemSelectability() {
items.update({ id: 0, selectable: (sel = !sel) });
document.getElementById("select").innerHTML = items.get(0).selectable;
timeline.setItems(items);
}
'
/><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);
}
.vis-item.vis-background.positive {
background-color: rgba(105, 255, 98, 0.2);
}
.vis-item.vis-background.marker {
border-left: 2px solid green;
}
table {
border: 1px solid gray;
}
td {
text-align: center;
}
code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example shows the ability to set specific items to be selectable.
</p>
<p>
Items selectability can be toggled by setting <code>selectable</code> in the
<i>items</i> configuration options. Note: This will not override the
timeline&apos;s <code>selectable</code> configuration option. If the
timeline&apos;s <code>selectable</code> configuration option is false, then no
items will be selectable.
</p>
<table>
<thead>
<tr>
<th>Option</th>
<th>Status</th>
<th>Toggle</th>
</tr>
</thead>
<tbody>
<tr>
<td>
item selectability of &apos;no subgroup&apos; item in the
&apos;foo&apos; group
</td>
<td id="select">true</td>
<td><button onclick="toggleItemSelectability()">Toggle</button></td>
</tr>
</tbody>
</table>
<br />
<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 | Specific Item Selectability"
/>
</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.vis-item.vis-background.positive {\n background-color: rgba(105, 255, 98, 0.2);\n}\n.vis-item.vis-background.marker {\n border-left: 2px solid green;\n}\n\ntable {\n border: 1px solid gray;\n}\n\ntd {\n text-align: center;\n}\n\ncode {\n padding: 2px 4px;\n font-size: 90%;\n color: #c7254e;\n background-color: #f9f2f4;\n border-radius: 4px;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n This example shows the ability to set specific items to be selectable.\n</p>\n<p>\n Items selectability can be toggled by setting <code>selectable</code> in the\n <i>items</i> configuration options. Note: This will not override the\n timeline&apos;s <code>selectable</code> configuration option. If the\n timeline&apos;s <code>selectable</code> configuration option is false, then no\n items will be selectable.\n</p>\n<table>\n <thead>\n <tr>\n <th>Option</th>\n <th>Status</th>\n <th>Toggle</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>\n item selectability of &apos;no subgroup&apos; item in the\n &apos;foo&apos; group\n </td>\n <td id=\"select\">true</td>\n <td><button onclick=\"toggleItemSelectability()\">Toggle</button></td>\n </tr>\n </tbody>\n</table>\n<br />\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});\nvar groups = new vis.DataSet([\n {\n id: \"bar\",\n content: \"bar\"\n },\n {\n id: \"foo\",\n content: \"foo\"\n }\n]);\n// add items to the DataSet\nitems.add([\n {\n id: \"A\",\n start: \"2014-01-20\",\n end: \"2014-01-22\",\n type: \"background\",\n group: \"foo\"\n },\n {\n id: \"B\",\n start: \"2014-01-22\",\n end: \"2014-01-23\",\n type: \"background\",\n group: \"foo\",\n className: \"negative\"\n },\n {\n id: 0,\n content: \"no subgroup\",\n start: \"2014-01-20\",\n end: \"2014-01-22\",\n group: \"foo\"\n },\n\n {\n id: \"SG_1_1\",\n start: \"2014-01-25\",\n end: \"2014-01-27\",\n type: \"background\",\n group: \"bar\",\n subgroup: \"sg_1\"\n },\n {\n id: \"SG_1_2\",\n start: \"2014-01-26\",\n end: \"2014-01-27\",\n type: \"background\",\n className: \"positive\",\n group: \"bar\",\n subgroup: \"sg_1\"\n },\n {\n id: 1,\n content: \"subgroup0_1\",\n start: \"2014-01-23T12:00:00\",\n end: \"2014-01-26T12:00:00\",\n group: \"bar\",\n subgroup: \"sg_1\"\n },\n {\n id: 2,\n content: \"subgroup0_2\",\n start: \"2014-01-22T12:00:01\",\n end: \"2014-01-25T12:00:00\",\n group: \"bar\",\n subgroup: \"sg_1\"\n },\n\n {\n id: \"SG_2_1\",\n start: \"2014-02-01\",\n end: \"2014-02-02\",\n type: \"background\",\n group: \"bar\",\n subgroup: \"sg_2\"\n },\n {\n id: \"SG_2_2\",\n start: \"2014-02-2\",\n end: \"2014-02-03\",\n type: \"background\",\n className: \"negative\",\n group: \"bar\",\n subgroup: \"sg_2\"\n },\n {\n id: 3,\n content: \"subgroup1_1\",\n start: \"2014-01-27T02:00:00\",\n end: \"2014-01-29\",\n group: \"bar\",\n subgroup: \"sg_2\"\n },\n {\n id: 4,\n content: \"subgroup1_2\",\n start: \"2014-01-28\",\n end: \"2014-02-02\",\n group: \"bar\",\n subgroup: \"sg_2\"\n },\n\n {\n id: \"SG_3_1\",\n start: \"2014-01-23\",\n end: \"2014-01-25\",\n type: \"background\",\n group: \"bar\",\n subgroup: \"sg_3\",\n content: \"a\"\n },\n {\n id: \"SG_3_2\",\n start: \"2014-01-26\",\n end: \"2014-01-28\",\n type: \"background\",\n className: \"positive\",\n group: \"bar\",\n subgroup: \"sg_3\",\n content: \"b\"\n },\n {\n id: 5,\n content: \"subgroup2_1\",\n start: \"2014-01-23T12:00:00\",\n end: \"2014-01-26T12:00:00\",\n group: \"bar\",\n subgroup: \"sg_3\"\n },\n {\n id: 6,\n content: \"subgroup2_2\",\n start: \"2014-01-26T12:00:01\",\n end: \"2014-01-29T12:00:00\",\n group: \"bar\",\n subgroup: \"sg_3\"\n },\n\n {\n id: \"background\",\n start: \"2014-01-29\",\n end: \"2014-01-30\",\n type: \"background\",\n className: \"negative\",\n group: \"bar\"\n },\n {\n id: \"background_all\",\n start: \"2014-01-31\",\n end: \"2014-02-02\",\n type: \"background\",\n className: \"positive\"\n }\n]);\n\nvar container = document.getElementById(\"visualization\");\nvar options = {\n // orientation:'top'\n start: \"2014-01-10\",\n end: \"2014-02-10\",\n selectable: true\n};\n\nvar timeline = new vis.Timeline(container, items, groups, options);\n\nvar sel = true;\n\nfunction toggleItemSelectability() {\n items.update({ id: 0, selectable: (sel = !sel) });\n document.getElementById(\"select\").innerHTML = items.get(0).selectable;\n timeline.setItems(items);\n}\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Specific Item Selectability"}'
/><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" }
});
var groups = new vis.DataSet([
{
id: "bar",
content: "bar"
},
{
id: "foo",
content: "foo"
}
]);
// add items to the DataSet
items.add([
{
id: "A",
start: "2014-01-20",
end: "2014-01-22",
type: "background",
group: "foo"
},
{
id: "B",
start: "2014-01-22",
end: "2014-01-23",
type: "background",
group: "foo",
className: "negative"
},
{
id: 0,
content: "no subgroup",
start: "2014-01-20",
end: "2014-01-22",
group: "foo"
},
{
id: "SG_1_1",
start: "2014-01-25",
end: "2014-01-27",
type: "background",
group: "bar",
subgroup: "sg_1"
},
{
id: "SG_1_2",
start: "2014-01-26",
end: "2014-01-27",
type: "background",
className: "positive",
group: "bar",
subgroup: "sg_1"
},
{
id: 1,
content: "subgroup0_1",
start: "2014-01-23T12:00:00",
end: "2014-01-26T12:00:00",
group: "bar",
subgroup: "sg_1"
},
{
id: 2,
content: "subgroup0_2",
start: "2014-01-22T12:00:01",
end: "2014-01-25T12:00:00",
group: "bar",
subgroup: "sg_1"
},
{
id: "SG_2_1",
start: "2014-02-01",
end: "2014-02-02",
type: "background",
group: "bar",
subgroup: "sg_2"
},
{
id: "SG_2_2",
start: "2014-02-2",
end: "2014-02-03",
type: "background",
className: "negative",
group: "bar",
subgroup: "sg_2"
},
{
id: 3,
content: "subgroup1_1",
start: "2014-01-27T02:00:00",
end: "2014-01-29",
group: "bar",
subgroup: "sg_2"
},
{
id: 4,
content: "subgroup1_2",
start: "2014-01-28",
end: "2014-02-02",
group: "bar",
subgroup: "sg_2"
},
{
id: "SG_3_1",
start: "2014-01-23",
end: "2014-01-25",
type: "background",
group: "bar",
subgroup: "sg_3",
content: "a"
},
{
id: "SG_3_2",
start: "2014-01-26",
end: "2014-01-28",
type: "background",
className: "positive",
group: "bar",
subgroup: "sg_3",
content: "b"
},
{
id: 5,
content: "subgroup2_1",
start: "2014-01-23T12:00:00",
end: "2014-01-26T12:00:00",
group: "bar",
subgroup: "sg_3"
},
{
id: 6,
content: "subgroup2_2",
start: "2014-01-26T12:00:01",
end: "2014-01-29T12:00:00",
group: "bar",
subgroup: "sg_3"
},
{
id: "background",
start: "2014-01-29",
end: "2014-01-30",
type: "background",
className: "negative",
group: "bar"
},
{
id: "background_all",
start: "2014-01-31",
end: "2014-02-02",
type: "background",
className: "positive"
}
]);
var container = document.getElementById("visualization");
var options = {
// orientation:'top'
start: "2014-01-10",
end: "2014-02-10",
selectable: true
};
var timeline = new vis.Timeline(container, items, groups, options);
var sel = true;
function toggleItemSelectability() {
items.update({ id: 0, selectable: (sel = !sel) });
document.getElementById("select").innerHTML = items.get(0).selectable;
timeline.setItems(items);
}
'
/><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);
}
.vis-item.vis-background.positive {
background-color: rgba(105, 255, 98, 0.2);
}
.vis-item.vis-background.marker {
border-left: 2px solid green;
}
table {
border: 1px solid gray;
}
td {
text-align: center;
}
code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example shows the ability to set specific items to be selectable.
</p>
<p>
Items selectability can be toggled by setting <code>selectable</code> in the
<i>items</i> configuration options. Note: This will not override the
timeline&apos;s <code>selectable</code> configuration option. If the
timeline&apos;s <code>selectable</code> configuration option is false, then no
items will be selectable.
</p>
<table>
<thead>
<tr>
<th>Option</th>
<th>Status</th>
<th>Toggle</th>
</tr>
</thead>
<tbody>
<tr>
<td>
item selectability of &apos;no subgroup&apos; item in the
&apos;foo&apos; group
</td>
<td id="select">true</td>
<td><button onclick="toggleItemSelectability()">Toggle</button></td>
</tr>
</tbody>
</table>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="interaction/specificItemSelectable.html"
><div class="example-image">
<img
src="thumbnails/f029e8fb46bc82f1bda78c4b457a5a8903b5c7e3fc2ecfecc6dba30119dc4e42.png"
alt="Specific Item Selectability"
/></div></a></span
><span class="example-link"
><div>
<a href="other/stressPerformance.html"
>Stress Performance example</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 now = moment();
var groupCount = 20;
var itemCount = 400;
// create a data set with groups
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({
id: g,
content: "group " + g
});
}
var types = ["point", "range", "box", "background"];
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 180, "days");
var end = start.clone().add(Math.random() * 30, "days");
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,
type: types[Math.floor(Math.random() * types.length)],
group: group,
content: "" + i,
start: start,
end: end
});
}
// create visualization
var container = document.getElementById("visualization");
var options = {};
var timeline = new vis.Timeline(container, items, groups, options);
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<div id="visualization"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js,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 | Stress Performance example"
/>
</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":"","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<div id=\"visualization\"></div>\n","js":"var now = moment();\nvar groupCount = 20;\nvar itemCount = 400;\n\n// create a data set with groups\nvar groups = new vis.DataSet();\nfor (var g = 0; g < groupCount; g++) {\n groups.add({\n id: g,\n content: \"group \" + g\n });\n}\n\nvar types = [\"point\", \"range\", \"box\", \"background\"];\n// create a dataset with items\nvar items = new vis.DataSet();\nfor (var i = 0; i < itemCount; i++) {\n var start = now.clone().add(Math.random() * 180, \"days\");\n var end = start.clone().add(Math.random() * 30, \"days\");\n var group = Math.floor(Math.random() * groupCount);\n items.add({\n id: i,\n type: types[Math.floor(Math.random() * types.length)],\n group: group,\n content: \"\" + i,\n start: start,\n end: end\n });\n}\n\n// create visualization\nvar container = document.getElementById(\"visualization\");\nvar options = {};\n\nvar timeline = new vis.Timeline(container, items, groups, options);\n","js_external":"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Stress Performance example"}'
/><input
type="hidden"
name="js"
value='var now = moment();
var groupCount = 20;
var itemCount = 400;
// create a data set with groups
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({
id: g,
content: "group " + g
});
}
var types = ["point", "range", "box", "background"];
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 180, "days");
var end = start.clone().add(Math.random() * 30, "days");
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,
type: types[Math.floor(Math.random() * types.length)],
group: group,
content: "" + i,
start: start,
end: end
});
}
// create visualization
var container = document.getElementById("visualization");
var options = {};
var timeline = new vis.Timeline(container, items, groups, options);
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="other/stressPerformance.html"
><div class="example-image">
<img
src="thumbnails/dcbcfc1e625c8e5bc69c76b9e94367f9b2ed2de5a43f4003ed7fda15c09a46d0.png"
alt="Stress Performance example"
/></div></a></span
><span class="example-link"
><div>
<a href="groups/subgroupsVisibility.html">Subgroup Visibility</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" }
});
var groups = new vis.DataSet([
{
id: "bar",
content: "bar",
subgroupVisibility: { sg_1: true, sg_2: true, sg_3: true }
},
{
id: "foo",
content: "foo"
}
]);
// add items to the DataSet
items.add([
{
id: "A",
start: "2014-01-20",
end: "2014-01-22",
type: "background",
group: "foo"
},
{
id: "B",
start: "2014-01-22",
end: "2014-01-23",
type: "background",
group: "foo",
className: "negative"
},
{
id: 0,
content: "no subgroup",
start: "2014-01-20",
end: "2014-01-22",
group: "foo"
},
{
id: "SG_1_1",
start: "2014-01-25",
end: "2014-01-27",
type: "background",
group: "bar",
subgroup: "sg_1"
},
{
id: "SG_1_2",
start: "2014-01-26",
end: "2014-01-27",
type: "background",
className: "positive",
group: "bar",
subgroup: "sg_1"
},
{
id: 1,
content: "subgroup0_1",
start: "2014-01-23T12:00:00",
end: "2014-01-26T12:00:00",
group: "bar",
subgroup: "sg_1"
},
{
id: 2,
content: "subgroup0_2",
start: "2014-01-22T12:00:01",
end: "2014-01-25T12:00:00",
group: "bar",
subgroup: "sg_1"
},
{
id: "SG_2_1",
start: "2014-02-01",
end: "2014-02-02",
type: "background",
group: "bar",
subgroup: "sg_2"
},
{
id: "SG_2_2",
start: "2014-02-2",
end: "2014-02-03",
type: "background",
className: "negative",
group: "bar",
subgroup: "sg_2"
},
{
id: 3,
content: "subgroup1_1",
start: "2014-01-27T02:00:00",
end: "2014-01-29",
group: "bar",
subgroup: "sg_2"
},
{
id: 4,
content: "subgroup1_2",
start: "2014-01-28",
end: "2014-02-02",
group: "bar",
subgroup: "sg_2"
},
{
id: "SG_3_1",
start: "2014-01-23",
end: "2014-01-25",
type: "background",
group: "bar",
subgroup: "sg_3",
content: "a"
},
{
id: "SG_3_2",
start: "2014-01-26",
end: "2014-01-28",
type: "background",
className: "positive",
group: "bar",
subgroup: "sg_3",
content: "b"
},
{
id: 5,
content: "subgroup2_1",
start: "2014-01-23T12:00:00",
end: "2014-01-26T12:00:00",
group: "bar",
subgroup: "sg_3"
},
{
id: 6,
content: "subgroup2_2",
start: "2014-01-26T12:00:01",
end: "2014-01-29T12:00:00",
group: "bar",
subgroup: "sg_3"
},
{
id: "background",
start: "2014-01-29",
end: "2014-01-30",
type: "background",
className: "negative",
group: "bar"
},
{
id: "background_all",
start: "2014-01-31",
end: "2014-02-02",
type: "background",
className: "positive"
}
]);
var container = document.getElementById("visualization");
var options = {
// orientation:'top'
start: "2014-01-10",
end: "2014-02-10"
};
var timeline = new vis.Timeline(container, items, groups, options);
function toggleSubgroupVisibility(subgroup) {
groups.get("bar").subgroupVisibility[subgroup] = !groups.get("bar")
.subgroupVisibility[subgroup];
document.getElementById("subgVis" + subgroup).innerHTML = groups
.get("bar")
.subgroupVisibility[subgroup].toString();
timeline.setGroups(groups);
}
'
/><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);
}
.vis-item.vis-background.positive {
background-color: rgba(105, 255, 98, 0.2);
}
.vis-item.vis-background.marker {
border-left: 2px solid green;
}
table {
border: 1px solid gray;
}
td {
text-align: center;
}
code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example shows the ability to hide specific subgroups.
</p>
<p>
Subgroups can be hidden using the <code>subgroupVisibility</code> parameter in
the timeline configuration options.
</p>
<table>
<thead>
<tr>
<th>Option</th>
<th>Status</th>
<th>Toggle</th>
</tr>
</thead>
<tbody>
<tr>
<td>sg_1 visibility</td>
<td id="subgVissg_1">true</td>
<td>
<button onclick="toggleSubgroupVisibility('sg_1')">Toggle</button>
</td>
</tr>
<tr>
<td>sg_2 visibility</td>
<td id="subgVissg_2">true</td>
<td>
<button onclick="toggleSubgroupVisibility('sg_2')">Toggle</button>
</td>
</tr>
<tr>
<td>sg_3 visibility</td>
<td id="subgVissg_3">true</td>
<td>
<button onclick="toggleSubgroupVisibility('sg_3')">Toggle</button>
</td>
</tr>
</tbody>
</table>
<br />
<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 | Subgroup Visibility"
/>
</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.vis-item.vis-background.positive {\n background-color: rgba(105, 255, 98, 0.2);\n}\n.vis-item.vis-background.marker {\n border-left: 2px solid green;\n}\n\ntable {\n border: 1px solid gray;\n}\n\ntd {\n text-align: center;\n}\n\ncode {\n padding: 2px 4px;\n font-size: 90%;\n color: #c7254e;\n background-color: #f9f2f4;\n border-radius: 4px;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n This example shows the ability to hide specific subgroups.\n</p>\n<p>\n Subgroups can be hidden using the <code>subgroupVisibility</code> parameter in\n the timeline configuration options.\n</p>\n<table>\n <thead>\n <tr>\n <th>Option</th>\n <th>Status</th>\n <th>Toggle</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>sg_1 visibility</td>\n <td id=\"subgVissg_1\">true</td>\n <td>\n <button onclick=\"toggleSubgroupVisibility('sg_1')\">Toggle</button>\n </td>\n </tr>\n <tr>\n <td>sg_2 visibility</td>\n <td id=\"subgVissg_2\">true</td>\n <td>\n <button onclick=\"toggleSubgroupVisibility('sg_2')\">Toggle</button>\n </td>\n </tr>\n <tr>\n <td>sg_3 visibility</td>\n <td id=\"subgVissg_3\">true</td>\n <td>\n <button onclick=\"toggleSubgroupVisibility('sg_3')\">Toggle</button>\n </td>\n </tr>\n </tbody>\n</table>\n<br />\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});\nvar groups = new vis.DataSet([\n {\n id: \"bar\",\n content: \"bar\",\n subgroupVisibility: { sg_1: true, sg_2: true, sg_3: true }\n },\n {\n id: \"foo\",\n content: \"foo\"\n }\n]);\n// add items to the DataSet\nitems.add([\n {\n id: \"A\",\n start: \"2014-01-20\",\n end: \"2014-01-22\",\n type: \"background\",\n group: \"foo\"\n },\n {\n id: \"B\",\n start: \"2014-01-22\",\n end: \"2014-01-23\",\n type: \"background\",\n group: \"foo\",\n className: \"negative\"\n },\n {\n id: 0,\n content: \"no subgroup\",\n start: \"2014-01-20\",\n end: \"2014-01-22\",\n group: \"foo\"\n },\n\n {\n id: \"SG_1_1\",\n start: \"2014-01-25\",\n end: \"2014-01-27\",\n type: \"background\",\n group: \"bar\",\n subgroup: \"sg_1\"\n },\n {\n id: \"SG_1_2\",\n start: \"2014-01-26\",\n end: \"2014-01-27\",\n type: \"background\",\n className: \"positive\",\n group: \"bar\",\n subgroup: \"sg_1\"\n },\n {\n id: 1,\n content: \"subgroup0_1\",\n start: \"2014-01-23T12:00:00\",\n end: \"2014-01-26T12:00:00\",\n group: \"bar\",\n subgroup: \"sg_1\"\n },\n {\n id: 2,\n content: \"subgroup0_2\",\n start: \"2014-01-22T12:00:01\",\n end: \"2014-01-25T12:00:00\",\n group: \"bar\",\n subgroup: \"sg_1\"\n },\n\n {\n id: \"SG_2_1\",\n start: \"2014-02-01\",\n end: \"2014-02-02\",\n type: \"background\",\n group: \"bar\",\n subgroup: \"sg_2\"\n },\n {\n id: \"SG_2_2\",\n start: \"2014-02-2\",\n end: \"2014-02-03\",\n type: \"background\",\n className: \"negative\",\n group: \"bar\",\n subgroup: \"sg_2\"\n },\n {\n id: 3,\n content: \"subgroup1_1\",\n start: \"2014-01-27T02:00:00\",\n end: \"2014-01-29\",\n group: \"bar\",\n subgroup: \"sg_2\"\n },\n {\n id: 4,\n content: \"subgroup1_2\",\n start: \"2014-01-28\",\n end: \"2014-02-02\",\n group: \"bar\",\n subgroup: \"sg_2\"\n },\n\n {\n id: \"SG_3_1\",\n start: \"2014-01-23\",\n end: \"2014-01-25\",\n type: \"background\",\n group: \"bar\",\n subgroup: \"sg_3\",\n content: \"a\"\n },\n {\n id: \"SG_3_2\",\n start: \"2014-01-26\",\n end: \"2014-01-28\",\n type: \"background\",\n className: \"positive\",\n group: \"bar\",\n subgroup: \"sg_3\",\n content: \"b\"\n },\n {\n id: 5,\n content: \"subgroup2_1\",\n start: \"2014-01-23T12:00:00\",\n end: \"2014-01-26T12:00:00\",\n group: \"bar\",\n subgroup: \"sg_3\"\n },\n {\n id: 6,\n content: \"subgroup2_2\",\n start: \"2014-01-26T12:00:01\",\n end: \"2014-01-29T12:00:00\",\n group: \"bar\",\n subgroup: \"sg_3\"\n },\n\n {\n id: \"background\",\n start: \"2014-01-29\",\n end: \"2014-01-30\",\n type: \"background\",\n className: \"negative\",\n group: \"bar\"\n },\n {\n id: \"background_all\",\n start: \"2014-01-31\",\n end: \"2014-02-02\",\n type: \"background\",\n className: \"positive\"\n }\n]);\n\nvar container = document.getElementById(\"visualization\");\nvar options = {\n // orientation:'top'\n start: \"2014-01-10\",\n end: \"2014-02-10\"\n};\n\nvar timeline = new vis.Timeline(container, items, groups, options);\n\nfunction toggleSubgroupVisibility(subgroup) {\n groups.get(\"bar\").subgroupVisibility[subgroup] = !groups.get(\"bar\")\n .subgroupVisibility[subgroup];\n document.getElementById(\"subgVis\" + subgroup).innerHTML = groups\n .get(\"bar\")\n .subgroupVisibility[subgroup].toString();\n timeline.setGroups(groups);\n}\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Subgroup Visibility"}'
/><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" }
});
var groups = new vis.DataSet([
{
id: "bar",
content: "bar",
subgroupVisibility: { sg_1: true, sg_2: true, sg_3: true }
},
{
id: "foo",
content: "foo"
}
]);
// add items to the DataSet
items.add([
{
id: "A",
start: "2014-01-20",
end: "2014-01-22",
type: "background",
group: "foo"
},
{
id: "B",
start: "2014-01-22",
end: "2014-01-23",
type: "background",
group: "foo",
className: "negative"
},
{
id: 0,
content: "no subgroup",
start: "2014-01-20",
end: "2014-01-22",
group: "foo"
},
{
id: "SG_1_1",
start: "2014-01-25",
end: "2014-01-27",
type: "background",
group: "bar",
subgroup: "sg_1"
},
{
id: "SG_1_2",
start: "2014-01-26",
end: "2014-01-27",
type: "background",
className: "positive",
group: "bar",
subgroup: "sg_1"
},
{
id: 1,
content: "subgroup0_1",
start: "2014-01-23T12:00:00",
end: "2014-01-26T12:00:00",
group: "bar",
subgroup: "sg_1"
},
{
id: 2,
content: "subgroup0_2",
start: "2014-01-22T12:00:01",
end: "2014-01-25T12:00:00",
group: "bar",
subgroup: "sg_1"
},
{
id: "SG_2_1",
start: "2014-02-01",
end: "2014-02-02",
type: "background",
group: "bar",
subgroup: "sg_2"
},
{
id: "SG_2_2",
start: "2014-02-2",
end: "2014-02-03",
type: "background",
className: "negative",
group: "bar",
subgroup: "sg_2"
},
{
id: 3,
content: "subgroup1_1",
start: "2014-01-27T02:00:00",
end: "2014-01-29",
group: "bar",
subgroup: "sg_2"
},
{
id: 4,
content: "subgroup1_2",
start: "2014-01-28",
end: "2014-02-02",
group: "bar",
subgroup: "sg_2"
},
{
id: "SG_3_1",
start: "2014-01-23",
end: "2014-01-25",
type: "background",
group: "bar",
subgroup: "sg_3",
content: "a"
},
{
id: "SG_3_2",
start: "2014-01-26",
end: "2014-01-28",
type: "background",
className: "positive",
group: "bar",
subgroup: "sg_3",
content: "b"
},
{
id: 5,
content: "subgroup2_1",
start: "2014-01-23T12:00:00",
end: "2014-01-26T12:00:00",
group: "bar",
subgroup: "sg_3"
},
{
id: 6,
content: "subgroup2_2",
start: "2014-01-26T12:00:01",
end: "2014-01-29T12:00:00",
group: "bar",
subgroup: "sg_3"
},
{
id: "background",
start: "2014-01-29",
end: "2014-01-30",
type: "background",
className: "negative",
group: "bar"
},
{
id: "background_all",
start: "2014-01-31",
end: "2014-02-02",
type: "background",
className: "positive"
}
]);
var container = document.getElementById("visualization");
var options = {
// orientation:'top'
start: "2014-01-10",
end: "2014-02-10"
};
var timeline = new vis.Timeline(container, items, groups, options);
function toggleSubgroupVisibility(subgroup) {
groups.get("bar").subgroupVisibility[subgroup] = !groups.get("bar")
.subgroupVisibility[subgroup];
document.getElementById("subgVis" + subgroup).innerHTML = groups
.get("bar")
.subgroupVisibility[subgroup].toString();
timeline.setGroups(groups);
}
'
/><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);
}
.vis-item.vis-background.positive {
background-color: rgba(105, 255, 98, 0.2);
}
.vis-item.vis-background.marker {
border-left: 2px solid green;
}
table {
border: 1px solid gray;
}
td {
text-align: center;
}
code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example shows the ability to hide specific subgroups.
</p>
<p>
Subgroups can be hidden using the <code>subgroupVisibility</code> parameter in
the timeline configuration options.
</p>
<table>
<thead>
<tr>
<th>Option</th>
<th>Status</th>
<th>Toggle</th>
</tr>
</thead>
<tbody>
<tr>
<td>sg_1 visibility</td>
<td id="subgVissg_1">true</td>
<td>
<button onclick="toggleSubgroupVisibility('sg_1')">Toggle</button>
</td>
</tr>
<tr>
<td>sg_2 visibility</td>
<td id="subgVissg_2">true</td>
<td>
<button onclick="toggleSubgroupVisibility('sg_2')">Toggle</button>
</td>
</tr>
<tr>
<td>sg_3 visibility</td>
<td id="subgVissg_3">true</td>
<td>
<button onclick="toggleSubgroupVisibility('sg_3')">Toggle</button>
</td>
</tr>
</tbody>
</table>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="groups/subgroupsVisibility.html"
><div class="example-image">
<img
src="thumbnails/cbe58b635e3b8276f38aec03f80dfba15b483dbb12a9cda951c7f8029ae6c2eb.png"
alt="Subgroup Visibility"
/></div></a></span
><span class="example-link"
><div>
<a href="groups/subgroups.html">Subgroups</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" }
});
var groups = new vis.DataSet([
{
id: "bar",
content: "bar",
subgroupOrder: function(a, b) {
return a.subgroupOrder - b.subgroupOrder;
},
subgroupStack: { sg_1: false, sg_2: false, sg_3: false }
},
{
id: "foo",
content: "foo",
subgroupOrder: "subgroupOrder" // this group has no subgroups but this would be the other method to do the sorting.
}
]);
// add items to the DataSet
items.add([
{
id: "A",
start: "2014-01-20",
end: "2014-01-22",
type: "background",
group: "foo"
},
{
id: "B",
start: "2014-01-22",
end: "2014-01-23",
type: "background",
group: "foo",
className: "negative"
},
{
id: 0,
content: "no subgroup",
start: "2014-01-20",
end: "2014-01-22",
group: "foo"
},
{
id: "SG_1_1",
start: "2014-01-25",
end: "2014-01-27",
type: "background",
group: "bar",
subgroup: "sg_1",
subgroupOrder: 0
},
{
id: "SG_1_2",
start: "2014-01-26",
end: "2014-01-27",
type: "background",
className: "positive",
group: "bar",
subgroup: "sg_1",
subgroupOrder: 0
},
{
id: 1,
content: "subgroup0_1",
start: "2014-01-23T12:00:00",
end: "2014-01-26T12:00:00",
group: "bar",
subgroup: "sg_1",
subgroupOrder: 0
},
{
id: 2,
content: "subgroup0_2",
start: "2014-01-22T12:00:01",
end: "2014-01-25T12:00:00",
group: "bar",
subgroup: "sg_1",
subgroupOrder: 0
},
{
id: "SG_2_1",
start: "2014-02-01",
end: "2014-02-02",
type: "background",
group: "bar",
subgroup: "sg_2",
subgroupOrder: 1
},
{
id: "SG_2_2",
start: "2014-02-2",
end: "2014-02-03",
type: "background",
className: "negative",
group: "bar",
subgroup: "sg_2",
subgroupOrder: 1
},
{
id: 3,
content: "subgroup1_1",
start: "2014-01-27T02:00:00",
end: "2014-01-29",
group: "bar",
subgroup: "sg_2",
subgroupOrder: 1
},
{
id: 4,
content: "subgroup1_2",
start: "2014-01-28",
end: "2014-02-02",
group: "bar",
subgroup: "sg_2",
subgroupOrder: 1
},
{
id: "SG_3_1",
start: "2014-01-23",
end: "2014-01-25",
type: "background",
group: "bar",
subgroup: "sg_3",
subgroupOrder: 2,
content: "a"
},
{
id: "SG_3_2",
start: "2014-01-26",
end: "2014-01-28",
type: "background",
className: "positive",
group: "bar",
subgroup: "sg_3",
subgroupOrder: 2,
content: "b"
},
{
id: 5,
content: "subgroup2_1",
start: "2014-01-23T12:00:00",
end: "2014-01-26T12:00:00",
group: "bar",
subgroup: "sg_3",
subgroupOrder: 2
},
{
id: 6,
content: "subgroup2_2",
start: "2014-01-26T12:00:01",
end: "2014-01-29T12:00:00",
group: "bar",
subgroup: "sg_3",
subgroupOrder: 2
},
{
id: "background",
start: "2014-01-29",
end: "2014-01-30",
type: "background",
className: "negative",
group: "bar"
},
{
id: "background_all",
start: "2014-01-31",
end: "2014-02-02",
type: "background",
className: "positive"
}
]);
var container = document.getElementById("visualization");
var stackingStatus = document.getElementById("stackingStatus");
var stackSubgroupsStatus = document.getElementById("stackSubgroupsStatus");
var options = {
// orientation:'top'
start: "2014-01-10",
end: "2014-02-10",
editable: true,
stack: false,
stackSubgroups: true
};
var timeline = new vis.Timeline(container, items, groups, options);
function toggleStacking() {
options.stack = !options.stack;
stackingStatus.innerHTML = options.stack.toString();
timeline.setOptions(options);
}
function toggleStackSubgroups() {
options.stackSubgroups = !options.stackSubgroups;
stackSubgroupsStatus.innerHTML = options.stackSubgroups.toString();
timeline.setOptions(options);
}
function toggleSubgroupStack(subgroup) {
groups.get("bar").subgroupStack[subgroup] = !groups.get("bar").subgroupStack[
subgroup
];
document.getElementById("stack" + subgroup).innerHTML = groups
.get("bar")
.subgroupStack[subgroup].toString();
timeline.setGroups(groups);
}
'
/><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);
}
.vis-item.vis-background.positive {
background-color: rgba(105, 255, 98, 0.2);
}
.vis-item.vis-background.marker {
border-left: 2px solid green;
}
table {
border: 1px solid gray;
}
td {
text-align: center;
}
code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example shows the workings of the subgroups. Subgroups can be stacked on
each other, and the items within each subgroup can be stacked.
</p>
<p>
When stacking is on for the whole timeline, all items in the timeline will be
stacked with respect to each other <em>unless</em> the
<code>stackSubgroups</code> option is set to <code>true</code>
and at least one subgroup has stacking enabled. In that case the subgroups
will be stacked with respect to each other and the elements in each subgroup
will be stacked based on the individual stacking settings for each subgroup.
</p>
<table>
<thead>
<tr>
<th>Option</th>
<th>Status</th>
<th>Toggle</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stacking</td>
<td id="stackingStatus">false</td>
<td><button onclick="toggleStacking()">Toggle</button></td>
</tr>
<tr>
<td>stackSubgroups</td>
<td id="stackSubgroupsStatus">true</td>
<td><button onclick="toggleStackSubgroups()">Toggle</button></td>
</tr>
<tr>
<td>Stack Subgroup 0</td>
<td id="stacksg_1">false</td>
<td><button onclick="toggleSubgroupStack('sg_1')">Toggle</button></td>
</tr>
<tr>
<td>Stack Subgroup 1</td>
<td id="stacksg_2">false</td>
<td><button onclick="toggleSubgroupStack('sg_2')">Toggle</button></td>
</tr>
<tr>
<td>Stack Subgroup 2</td>
<td id="stacksg_3">false</td>
<td><button onclick="toggleSubgroupStack('sg_3')">Toggle</button></td>
</tr>
</tbody>
</table>
<br />
<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 | Subgroups"
/>
</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.vis-item.vis-background.positive {\n background-color: rgba(105, 255, 98, 0.2);\n}\n.vis-item.vis-background.marker {\n border-left: 2px solid green;\n}\n\ntable {\n border: 1px solid gray;\n}\n\ntd {\n text-align: center;\n}\n\ncode {\n padding: 2px 4px;\n font-size: 90%;\n color: #c7254e;\n background-color: #f9f2f4;\n border-radius: 4px;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n This example shows the workings of the subgroups. Subgroups can be stacked on\n each other, and the items within each subgroup can be stacked.\n</p>\n<p>\n When stacking is on for the whole timeline, all items in the timeline will be\n stacked with respect to each other <em>unless</em> the\n <code>stackSubgroups</code> option is set to <code>true</code>\n and at least one subgroup has stacking enabled. In that case the subgroups\n will be stacked with respect to each other and the elements in each subgroup\n will be stacked based on the individual stacking settings for each subgroup.\n</p>\n<table>\n <thead>\n <tr>\n <th>Option</th>\n <th>Status</th>\n <th>Toggle</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Stacking</td>\n <td id=\"stackingStatus\">false</td>\n <td><button onclick=\"toggleStacking()\">Toggle</button></td>\n </tr>\n <tr>\n <td>stackSubgroups</td>\n <td id=\"stackSubgroupsStatus\">true</td>\n <td><button onclick=\"toggleStackSubgroups()\">Toggle</button></td>\n </tr>\n <tr>\n <td>Stack Subgroup 0</td>\n <td id=\"stacksg_1\">false</td>\n <td><button onclick=\"toggleSubgroupStack('sg_1')\">Toggle</button></td>\n </tr>\n <tr>\n <td>Stack Subgroup 1</td>\n <td id=\"stacksg_2\">false</td>\n <td><button onclick=\"toggleSubgroupStack('sg_2')\">Toggle</button></td>\n </tr>\n <tr>\n <td>Stack Subgroup 2</td>\n <td id=\"stacksg_3\">false</td>\n <td><button onclick=\"toggleSubgroupStack('sg_3')\">Toggle</button></td>\n </tr>\n </tbody>\n</table>\n<br />\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});\nvar groups = new vis.DataSet([\n {\n id: \"bar\",\n content: \"bar\",\n subgroupOrder: function(a, b) {\n return a.subgroupOrder - b.subgroupOrder;\n },\n subgroupStack: { sg_1: false, sg_2: false, sg_3: false }\n },\n {\n id: \"foo\",\n content: \"foo\",\n subgroupOrder: \"subgroupOrder\" // this group has no subgroups but this would be the other method to do the sorting.\n }\n]);\n// add items to the DataSet\nitems.add([\n {\n id: \"A\",\n start: \"2014-01-20\",\n end: \"2014-01-22\",\n type: \"background\",\n group: \"foo\"\n },\n {\n id: \"B\",\n start: \"2014-01-22\",\n end: \"2014-01-23\",\n type: \"background\",\n group: \"foo\",\n className: \"negative\"\n },\n {\n id: 0,\n content: \"no subgroup\",\n start: \"2014-01-20\",\n end: \"2014-01-22\",\n group: \"foo\"\n },\n\n {\n id: \"SG_1_1\",\n start: \"2014-01-25\",\n end: \"2014-01-27\",\n type: \"background\",\n group: \"bar\",\n subgroup: \"sg_1\",\n subgroupOrder: 0\n },\n {\n id: \"SG_1_2\",\n start: \"2014-01-26\",\n end: \"2014-01-27\",\n type: \"background\",\n className: \"positive\",\n group: \"bar\",\n subgroup: \"sg_1\",\n subgroupOrder: 0\n },\n {\n id: 1,\n content: \"subgroup0_1\",\n start: \"2014-01-23T12:00:00\",\n end: \"2014-01-26T12:00:00\",\n group: \"bar\",\n subgroup: \"sg_1\",\n subgroupOrder: 0\n },\n {\n id: 2,\n content: \"subgroup0_2\",\n start: \"2014-01-22T12:00:01\",\n end: \"2014-01-25T12:00:00\",\n group: \"bar\",\n subgroup: \"sg_1\",\n subgroupOrder: 0\n },\n\n {\n id: \"SG_2_1\",\n start: \"2014-02-01\",\n end: \"2014-02-02\",\n type: \"background\",\n group: \"bar\",\n subgroup: \"sg_2\",\n subgroupOrder: 1\n },\n {\n id: \"SG_2_2\",\n start: \"2014-02-2\",\n end: \"2014-02-03\",\n type: \"background\",\n className: \"negative\",\n group: \"bar\",\n subgroup: \"sg_2\",\n subgroupOrder: 1\n },\n {\n id: 3,\n content: \"subgroup1_1\",\n start: \"2014-01-27T02:00:00\",\n end: \"2014-01-29\",\n group: \"bar\",\n subgroup: \"sg_2\",\n subgroupOrder: 1\n },\n {\n id: 4,\n content: \"subgroup1_2\",\n start: \"2014-01-28\",\n end: \"2014-02-02\",\n group: \"bar\",\n subgroup: \"sg_2\",\n subgroupOrder: 1\n },\n\n {\n id: \"SG_3_1\",\n start: \"2014-01-23\",\n end: \"2014-01-25\",\n type: \"background\",\n group: \"bar\",\n subgroup: \"sg_3\",\n subgroupOrder: 2,\n content: \"a\"\n },\n {\n id: \"SG_3_2\",\n start: \"2014-01-26\",\n end: \"2014-01-28\",\n type: \"background\",\n className: \"positive\",\n group: \"bar\",\n subgroup: \"sg_3\",\n subgroupOrder: 2,\n content: \"b\"\n },\n {\n id: 5,\n content: \"subgroup2_1\",\n start: \"2014-01-23T12:00:00\",\n end: \"2014-01-26T12:00:00\",\n group: \"bar\",\n subgroup: \"sg_3\",\n subgroupOrder: 2\n },\n {\n id: 6,\n content: \"subgroup2_2\",\n start: \"2014-01-26T12:00:01\",\n end: \"2014-01-29T12:00:00\",\n group: \"bar\",\n subgroup: \"sg_3\",\n subgroupOrder: 2\n },\n\n {\n id: \"background\",\n start: \"2014-01-29\",\n end: \"2014-01-30\",\n type: \"background\",\n className: \"negative\",\n group: \"bar\"\n },\n {\n id: \"background_all\",\n start: \"2014-01-31\",\n end: \"2014-02-02\",\n type: \"background\",\n className: \"positive\"\n }\n]);\n\nvar container = document.getElementById(\"visualization\");\nvar stackingStatus = document.getElementById(\"stackingStatus\");\nvar stackSubgroupsStatus = document.getElementById(\"stackSubgroupsStatus\");\nvar options = {\n // orientation:'top'\n start: \"2014-01-10\",\n end: \"2014-02-10\",\n editable: true,\n stack: false,\n stackSubgroups: true\n};\n\nvar timeline = new vis.Timeline(container, items, groups, options);\n\nfunction toggleStacking() {\n options.stack = !options.stack;\n stackingStatus.innerHTML = options.stack.toString();\n timeline.setOptions(options);\n}\n\nfunction toggleStackSubgroups() {\n options.stackSubgroups = !options.stackSubgroups;\n stackSubgroupsStatus.innerHTML = options.stackSubgroups.toString();\n timeline.setOptions(options);\n}\n\nfunction toggleSubgroupStack(subgroup) {\n groups.get(\"bar\").subgroupStack[subgroup] = !groups.get(\"bar\").subgroupStack[\n subgroup\n ];\n document.getElementById(\"stack\" + subgroup).innerHTML = groups\n .get(\"bar\")\n .subgroupStack[subgroup].toString();\n timeline.setGroups(groups);\n}\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Subgroups"}'
/><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" }
});
var groups = new vis.DataSet([
{
id: "bar",
content: "bar",
subgroupOrder: function(a, b) {
return a.subgroupOrder - b.subgroupOrder;
},
subgroupStack: { sg_1: false, sg_2: false, sg_3: false }
},
{
id: "foo",
content: "foo",
subgroupOrder: "subgroupOrder" // this group has no subgroups but this would be the other method to do the sorting.
}
]);
// add items to the DataSet
items.add([
{
id: "A",
start: "2014-01-20",
end: "2014-01-22",
type: "background",
group: "foo"
},
{
id: "B",
start: "2014-01-22",
end: "2014-01-23",
type: "background",
group: "foo",
className: "negative"
},
{
id: 0,
content: "no subgroup",
start: "2014-01-20",
end: "2014-01-22",
group: "foo"
},
{
id: "SG_1_1",
start: "2014-01-25",
end: "2014-01-27",
type: "background",
group: "bar",
subgroup: "sg_1",
subgroupOrder: 0
},
{
id: "SG_1_2",
start: "2014-01-26",
end: "2014-01-27",
type: "background",
className: "positive",
group: "bar",
subgroup: "sg_1",
subgroupOrder: 0
},
{
id: 1,
content: "subgroup0_1",
start: "2014-01-23T12:00:00",
end: "2014-01-26T12:00:00",
group: "bar",
subgroup: "sg_1",
subgroupOrder: 0
},
{
id: 2,
content: "subgroup0_2",
start: "2014-01-22T12:00:01",
end: "2014-01-25T12:00:00",
group: "bar",
subgroup: "sg_1",
subgroupOrder: 0
},
{
id: "SG_2_1",
start: "2014-02-01",
end: "2014-02-02",
type: "background",
group: "bar",
subgroup: "sg_2",
subgroupOrder: 1
},
{
id: "SG_2_2",
start: "2014-02-2",
end: "2014-02-03",
type: "background",
className: "negative",
group: "bar",
subgroup: "sg_2",
subgroupOrder: 1
},
{
id: 3,
content: "subgroup1_1",
start: "2014-01-27T02:00:00",
end: "2014-01-29",
group: "bar",
subgroup: "sg_2",
subgroupOrder: 1
},
{
id: 4,
content: "subgroup1_2",
start: "2014-01-28",
end: "2014-02-02",
group: "bar",
subgroup: "sg_2",
subgroupOrder: 1
},
{
id: "SG_3_1",
start: "2014-01-23",
end: "2014-01-25",
type: "background",
group: "bar",
subgroup: "sg_3",
subgroupOrder: 2,
content: "a"
},
{
id: "SG_3_2",
start: "2014-01-26",
end: "2014-01-28",
type: "background",
className: "positive",
group: "bar",
subgroup: "sg_3",
subgroupOrder: 2,
content: "b"
},
{
id: 5,
content: "subgroup2_1",
start: "2014-01-23T12:00:00",
end: "2014-01-26T12:00:00",
group: "bar",
subgroup: "sg_3",
subgroupOrder: 2
},
{
id: 6,
content: "subgroup2_2",
start: "2014-01-26T12:00:01",
end: "2014-01-29T12:00:00",
group: "bar",
subgroup: "sg_3",
subgroupOrder: 2
},
{
id: "background",
start: "2014-01-29",
end: "2014-01-30",
type: "background",
className: "negative",
group: "bar"
},
{
id: "background_all",
start: "2014-01-31",
end: "2014-02-02",
type: "background",
className: "positive"
}
]);
var container = document.getElementById("visualization");
var stackingStatus = document.getElementById("stackingStatus");
var stackSubgroupsStatus = document.getElementById("stackSubgroupsStatus");
var options = {
// orientation:'top'
start: "2014-01-10",
end: "2014-02-10",
editable: true,
stack: false,
stackSubgroups: true
};
var timeline = new vis.Timeline(container, items, groups, options);
function toggleStacking() {
options.stack = !options.stack;
stackingStatus.innerHTML = options.stack.toString();
timeline.setOptions(options);
}
function toggleStackSubgroups() {
options.stackSubgroups = !options.stackSubgroups;
stackSubgroupsStatus.innerHTML = options.stackSubgroups.toString();
timeline.setOptions(options);
}
function toggleSubgroupStack(subgroup) {
groups.get("bar").subgroupStack[subgroup] = !groups.get("bar").subgroupStack[
subgroup
];
document.getElementById("stack" + subgroup).innerHTML = groups
.get("bar")
.subgroupStack[subgroup].toString();
timeline.setGroups(groups);
}
'
/><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);
}
.vis-item.vis-background.positive {
background-color: rgba(105, 255, 98, 0.2);
}
.vis-item.vis-background.marker {
border-left: 2px solid green;
}
table {
border: 1px solid gray;
}
td {
text-align: center;
}
code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
"
/><input
type="hidden"
name="html"
value='<p>
This example shows the workings of the subgroups. Subgroups can be stacked on
each other, and the items within each subgroup can be stacked.
</p>
<p>
When stacking is on for the whole timeline, all items in the timeline will be
stacked with respect to each other <em>unless</em> the
<code>stackSubgroups</code> option is set to <code>true</code>
and at least one subgroup has stacking enabled. In that case the subgroups
will be stacked with respect to each other and the elements in each subgroup
will be stacked based on the individual stacking settings for each subgroup.
</p>
<table>
<thead>
<tr>
<th>Option</th>
<th>Status</th>
<th>Toggle</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stacking</td>
<td id="stackingStatus">false</td>
<td><button onclick="toggleStacking()">Toggle</button></td>
</tr>
<tr>
<td>stackSubgroups</td>
<td id="stackSubgroupsStatus">true</td>
<td><button onclick="toggleStackSubgroups()">Toggle</button></td>
</tr>
<tr>
<td>Stack Subgroup 0</td>
<td id="stacksg_1">false</td>
<td><button onclick="toggleSubgroupStack('sg_1')">Toggle</button></td>
</tr>
<tr>
<td>Stack Subgroup 1</td>
<td id="stacksg_2">false</td>
<td><button onclick="toggleSubgroupStack('sg_2')">Toggle</button></td>
</tr>
<tr>
<td>Stack Subgroup 2</td>
<td id="stacksg_3">false</td>
<td><button onclick="toggleSubgroupStack('sg_3')">Toggle</button></td>
</tr>
</tbody>
</table>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="groups/subgroups.html"
><div class="example-image">
<img
src="thumbnails/068b73f94c8bc2d97508bd7188a0a19fd368dc855c702f1928d11674f0c979bf.png"
alt="Subgroups"
/></div></a></span
><span class="example-link"
><div>
<a href="styling/itemTemplates.html">Templates</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='<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>;
// create a handlebars template
var source = document.getElementById("item-template").innerHTML;
var template = Handlebars.compile(
document.getElementById("item-template").innerHTML
);
// 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([
// 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"
},
{
player1: "Costa Rica",
abbr1: "cr",
score1: "1 (5)",
player2: "Greece",
abbr2: "gr",
score2: "1 (3)",
description: "round of 16",
start: "2014-06-29T17:00:00"
},
{
player1: "France",
abbr1: "fr",
score1: 2,
player2: "Nigeria",
abbr2: "ng",
score2: 0,
description: "round of 16",
start: "2014-06-30T13:00:00"
},
{
player1: "Germany",
abbr1: "de",
score1: 2,
player2: "Algeria",
abbr2: "dz",
score2: 1,
description: "round of 16",
start: "2014-06-30T17:00:00"
},
{
player1: "Argentina",
abbr1: "ar",
score1: 1,
player2: "Switzerland",
abbr2: "ch",
score2: 0,
description: "round of 16",
start: "2014-07-01T13:00:00"
},
{
player1: "Belgium",
abbr1: "be",
score1: 2,
player2: "USA",
abbr2: "us",
score2: 1,
description: "round of 16",
start: "2014-07-01T17:00:00"
},
// quarter-finals
{
player1: "France",
abbr1: "fr",
score1: 0,
player2: "Germany",
abbr2: "de",
score2: 1,
description: "quarter-finals",
start: "2014-07-04T13:00:00"
},
{
player1: "Brazil",
abbr1: "br",
score1: 2,
player2: "Colombia",
abbr2: "co",
score2: 1,
description: "quarter-finals",
start: "2014-07-04T17:00:00"
},
{
player1: "Argentina",
abbr1: "ar",
score1: 1,
player2: "Belgium",
abbr2: "be",
score2: 0,
description: "quarter-finals",
start: "2014-07-05T13:00:00"
},
{
player1: "Netherlands",
abbr1: "nl",
score1: "0 (4)",
player2: "Costa Rica",
abbr2: "cr",
score2: "0 (3)",
description: "quarter-finals",
start: "2014-07-05T17:00:00"
},
// semi-finals
{
player1: "Brazil",
abbr1: "br",
score1: 1,
player2: "Germany",
abbr2: "de",
score2: 7,
description: "semi-finals",
start: "2014-07-08T17:00:00"
},
{
player1: "Netherlands",
abbr1: "nl",
score1: "0 (2)",
player2: "Argentina",
abbr2: "ar",
score2: "0 (4)",
description: "semi-finals",
start: "2014-07-09T17:00:00"
},
// final
{
player1: "Germany",
score1: 1,
abbr1: "de",
player2: "Argentina",
abbr2: "ar",
score2: 0,
description: "final",
start: "2014-07-13T16: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);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
font-size: 10pt;
}
.vis.timeline .item {
border-color: #acacac;
background-color: #efefef;
box-shadow: 5px 5px 10px rgba(128, 128, 128, 0.3);
}
table .description {
font-style: italic;
}
#visualization {
position: relative;
overflow: hidden;
}
.logo {
position: absolute;
right: 10px;
top: 10px;
}
.logo img {
width: 120px;
}
"
/><input
type="hidden"
name="html"
value='<h1>WK 2014</h1>
<p style="max-width: 600px;">
This example demonstrates using templates to format item contents. In this
case <a href="https://handlebarsjs.com">handlebars</a> is used as template
engine, but you can just use your favorite template engine or manually craft
HTML from the data of an item.
</p>
<div id="visualization"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js,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 | Templates"
/>
</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 font-size: 10pt;\n}\n\n.vis.timeline .item {\n border-color: #acacac;\n background-color: #efefef;\n box-shadow: 5px 5px 10px rgba(128, 128, 128, 0.3);\n}\n\ntable .description {\n font-style: italic;\n}\n\n#visualization {\n position: relative;\n overflow: hidden;\n}\n\n.logo {\n position: absolute;\n right: 10px;\n top: 10px;\n}\n.logo img {\n width: 120px;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h1>WK 2014</h1>\n<p style=\"max-width: 600px;\">\n This example demonstrates using templates to format item contents. In this\n case <a href=\"https://handlebarsjs.com\">handlebars</a> is used as template\n engine, but you can just use your favorite template engine or manually craft\n HTML from the data of an item.\n</p>\n\n<div id=\"visualization\"></div>\n","js":"<table class=\"score\">\n <tr>\n <td colspan=\"3\" class=\"description\">\n {{ description }}\n </td>\n </tr>\n <tr>\n <td>{{ player1 }}</td>\n <th>\n {{ score1 }} - {{ score2 }}\n </th>\n <td>{{ player2 }}</td>\n </tr>\n <tr>\n <td>\n <img\n src=\"https://flagpedia.net/data/flags/mini/{{abbr1}}.png\"\n width=\"31\"\n height=\"20\"\n alt=\"{{abbr1}}\"\n />\n </td>\n <th></th>\n <td>\n <img\n src=\"https://flagpedia.net/data/flags/mini/{{abbr2}}.png\"\n width=\"31\"\n height=\"20\"\n alt=\"{{abbr2}}\"\n />\n </td>\n </tr>\n</table>;\n\n// create a handlebars template\nvar source = document.getElementById(\"item-template\").innerHTML;\nvar template = Handlebars.compile(\n document.getElementById(\"item-template\").innerHTML\n);\n\n// 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 // round of 16\n {\n player1: \"Brazil\",\n abbr1: \"br\",\n score1: \"1 (3)\",\n player2: \"Chile\",\n abbr2: \"cl\",\n score2: \"1 (2)\",\n description: \"round of 16\",\n start: \"2014-06-28T13:00:00\"\n },\n {\n player1: \"Colombia\",\n abbr1: \"co\",\n score1: 2,\n player2: \"Uruguay\",\n abbr2: \"uy\",\n score2: 0,\n description: \"round of 16\",\n start: \"2014-06-28T17:00:00\"\n },\n {\n player1: \"Netherlands\",\n abbr1: \"nl\",\n score1: 2,\n player2: \"Mexico\",\n abbr2: \"mx\",\n score2: 1,\n description: \"round of 16\",\n start: \"2014-06-29T13:00:00\"\n },\n {\n player1: \"Costa Rica\",\n abbr1: \"cr\",\n score1: \"1 (5)\",\n player2: \"Greece\",\n abbr2: \"gr\",\n score2: \"1 (3)\",\n description: \"round of 16\",\n start: \"2014-06-29T17:00:00\"\n },\n {\n player1: \"France\",\n abbr1: \"fr\",\n score1: 2,\n player2: \"Nigeria\",\n abbr2: \"ng\",\n score2: 0,\n description: \"round of 16\",\n start: \"2014-06-30T13:00:00\"\n },\n {\n player1: \"Germany\",\n abbr1: \"de\",\n score1: 2,\n player2: \"Algeria\",\n abbr2: \"dz\",\n score2: 1,\n description: \"round of 16\",\n start: \"2014-06-30T17:00:00\"\n },\n {\n player1: \"Argentina\",\n abbr1: \"ar\",\n score1: 1,\n player2: \"Switzerland\",\n abbr2: \"ch\",\n score2: 0,\n description: \"round of 16\",\n start: \"2014-07-01T13:00:00\"\n },\n {\n player1: \"Belgium\",\n abbr1: \"be\",\n score1: 2,\n player2: \"USA\",\n abbr2: \"us\",\n score2: 1,\n description: \"round of 16\",\n start: \"2014-07-01T17:00:00\"\n },\n\n // quarter-finals\n {\n player1: \"France\",\n abbr1: \"fr\",\n score1: 0,\n player2: \"Germany\",\n abbr2: \"de\",\n score2: 1,\n description: \"quarter-finals\",\n start: \"2014-07-04T13:00:00\"\n },\n {\n player1: \"Brazil\",\n abbr1: \"br\",\n score1: 2,\n player2: \"Colombia\",\n abbr2: \"co\",\n score2: 1,\n description: \"quarter-finals\",\n start: \"2014-07-04T17:00:00\"\n },\n {\n player1: \"Argentina\",\n abbr1: \"ar\",\n score1: 1,\n player2: \"Belgium\",\n abbr2: \"be\",\n score2: 0,\n description: \"quarter-finals\",\n start: \"2014-07-05T13:00:00\"\n },\n {\n player1: \"Netherlands\",\n abbr1: \"nl\",\n score1: \"0 (4)\",\n player2: \"Costa Rica\",\n abbr2: \"cr\",\n score2: \"0 (3)\",\n description: \"quarter-finals\",\n start: \"2014-07-05T17:00:00\"\n },\n\n // semi-finals\n {\n player1: \"Brazil\",\n abbr1: \"br\",\n score1: 1,\n player2: \"Germany\",\n abbr2: \"de\",\n score2: 7,\n description: \"semi-finals\",\n start: \"2014-07-08T17:00:00\"\n },\n {\n player1: \"Netherlands\",\n abbr1: \"nl\",\n score1: \"0 (2)\",\n player2: \"Argentina\",\n abbr2: \"ar\",\n score2: \"0 (4)\",\n description: \"semi-finals\",\n start: \"2014-07-09T17:00:00\"\n },\n\n // final\n {\n player1: \"Germany\",\n score1: 1,\n abbr1: \"de\",\n player2: \"Argentina\",\n abbr2: \"ar\",\n score2: 0,\n description: \"final\",\n start: \"2014-07-13T16:00:00\"\n }\n]);\n\n// Configuration for the Timeline\nvar options = {\n // specify a template for the items\n template: template\n};\n\n// Create a Timeline\nvar timeline = new vis.Timeline(container, items, options);\n","js_external":"https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Templates"}'
/><input
type="hidden"
name="js"
value='<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>;
// create a handlebars template
var source = document.getElementById("item-template").innerHTML;
var template = Handlebars.compile(
document.getElementById("item-template").innerHTML
);
// 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([
// 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"
},
{
player1: "Costa Rica",
abbr1: "cr",
score1: "1 (5)",
player2: "Greece",
abbr2: "gr",
score2: "1 (3)",
description: "round of 16",
start: "2014-06-29T17:00:00"
},
{
player1: "France",
abbr1: "fr",
score1: 2,
player2: "Nigeria",
abbr2: "ng",
score2: 0,
description: "round of 16",
start: "2014-06-30T13:00:00"
},
{
player1: "Germany",
abbr1: "de",
score1: 2,
player2: "Algeria",
abbr2: "dz",
score2: 1,
description: "round of 16",
start: "2014-06-30T17:00:00"
},
{
player1: "Argentina",
abbr1: "ar",
score1: 1,
player2: "Switzerland",
abbr2: "ch",
score2: 0,
description: "round of 16",
start: "2014-07-01T13:00:00"
},
{
player1: "Belgium",
abbr1: "be",
score1: 2,
player2: "USA",
abbr2: "us",
score2: 1,
description: "round of 16",
start: "2014-07-01T17:00:00"
},
// quarter-finals
{
player1: "France",
abbr1: "fr",
score1: 0,
player2: "Germany",
abbr2: "de",
score2: 1,
description: "quarter-finals",
start: "2014-07-04T13:00:00"
},
{
player1: "Brazil",
abbr1: "br",
score1: 2,
player2: "Colombia",
abbr2: "co",
score2: 1,
description: "quarter-finals",
start: "2014-07-04T17:00:00"
},
{
player1: "Argentina",
abbr1: "ar",
score1: 1,
player2: "Belgium",
abbr2: "be",
score2: 0,
description: "quarter-finals",
start: "2014-07-05T13:00:00"
},
{
player1: "Netherlands",
abbr1: "nl",
score1: "0 (4)",
player2: "Costa Rica",
abbr2: "cr",
score2: "0 (3)",
description: "quarter-finals",
start: "2014-07-05T17:00:00"
},
// semi-finals
{
player1: "Brazil",
abbr1: "br",
score1: 1,
player2: "Germany",
abbr2: "de",
score2: 7,
description: "semi-finals",
start: "2014-07-08T17:00:00"
},
{
player1: "Netherlands",
abbr1: "nl",
score1: "0 (2)",
player2: "Argentina",
abbr2: "ar",
score2: "0 (4)",
description: "semi-finals",
start: "2014-07-09T17:00:00"
},
// final
{
player1: "Germany",
score1: 1,
abbr1: "de",
player2: "Argentina",
abbr2: "ar",
score2: 0,
description: "final",
start: "2014-07-13T16: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);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
font-size: 10pt;
}
.vis.timeline .item {
border-color: #acacac;
background-color: #efefef;
box-shadow: 5px 5px 10px rgba(128, 128, 128, 0.3);
}
table .description {
font-style: italic;
}
#visualization {
position: relative;
overflow: hidden;
}
.logo {
position: absolute;
right: 10px;
top: 10px;
}
.logo img {
width: 120px;
}
"
/><input
type="hidden"
name="html"
value='<h1>WK 2014</h1>
<p style="max-width: 600px;">
This example demonstrates using templates to format item contents. In this
case <a href="https://handlebarsjs.com">handlebars</a> is used as template
engine, but you can just use your favorite template engine or manually craft
HTML from the data of an item.
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="styling/itemTemplates.html"
><div class="example-image">
<img
src="thumbnails/db0425b7f9ed3ece9c4c99b1aba9f3781604e190c93ad606cef2bb1e2b96ae4f.png"
alt="Templates"
/></div></a></span
><span class="example-link"
><div>
<a href="other/timezone.html">Time zone</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 (allows two way data-binding)
var today = vis.moment(vis.moment.utc().format("YYYY-MM-DDT00:00:00.000Z"));
var start = today.clone();
var end = today.clone().add(2, "day");
var customTime = today.clone().add(28, "hour");
var items = new vis.DataSet([
{ id: 1, content: "item 1", start: today.clone().add(8, "hour") },
{ id: 2, content: "item 2", start: today.clone().add(16, "hour") },
{ id: 3, content: "item 3", start: today.clone().add(32, "hour") }
]);
// Create a timeline displaying in local time (default)
var timelineLocal = new vis.Timeline(document.getElementById("local"), items, {
editable: true,
start: start,
end: end
});
timelineLocal.addCustomTime(customTime);
// Create a timeline displaying in UTC
var timelineUTC = new vis.Timeline(document.getElementById("utc"), items, {
editable: true,
start: start,
end: end,
moment: function(date) {
return vis.moment(date).utc();
}
});
timelineUTC.addCustomTime(customTime);
// Create a timeline displaying in UTC +08:00
var timelinePlus8 = new vis.Timeline(document.getElementById("plus8"), items, {
editable: true,
start: start,
end: end,
moment: function(date) {
return vis.moment(date).utcOffset("+08:00");
}
});
timelinePlus8.addCustomTime(customTime);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
max-width: 800px;
}
"
/><input
type="hidden"
name="html"
value='<h1>Time zone</h1>
<p>
The following demo shows how to display items in local time (default), in UTC,
or for a specific time zone offset. By configuring your own
<code>moment</code> constructor, you can display items in the time zone that
you want. All timelines have the same start and end date.
</p>
<h2>Local time</h2>
<div id="local"></div>
<h2>UTC</h2>
<div id="utc"></div>
<h2>UTC +08:00</h2>
<div id="plus8"></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 | Time zone"
/>
</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 max-width: 800px;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h1>Time zone</h1>\n\n<p>\n The following demo shows how to display items in local time (default), in UTC,\n or for a specific time zone offset. By configuring your own\n <code>moment</code> constructor, you can display items in the time zone that\n you want. All timelines have the same start and end date.\n</p>\n\n<h2>Local time</h2>\n<div id=\"local\"></div>\n\n<h2>UTC</h2>\n<div id=\"utc\"></div>\n\n<h2>UTC +08:00</h2>\n<div id=\"plus8\"></div>\n","js":"// Create a DataSet (allows two way data-binding)\nvar today = vis.moment(vis.moment.utc().format(\"YYYY-MM-DDT00:00:00.000Z\"));\nvar start = today.clone();\nvar end = today.clone().add(2, \"day\");\nvar customTime = today.clone().add(28, \"hour\");\n\nvar items = new vis.DataSet([\n { id: 1, content: \"item 1\", start: today.clone().add(8, \"hour\") },\n { id: 2, content: \"item 2\", start: today.clone().add(16, \"hour\") },\n { id: 3, content: \"item 3\", start: today.clone().add(32, \"hour\") }\n]);\n\n// Create a timeline displaying in local time (default)\nvar timelineLocal = new vis.Timeline(document.getElementById(\"local\"), items, {\n editable: true,\n start: start,\n end: end\n});\ntimelineLocal.addCustomTime(customTime);\n\n// Create a timeline displaying in UTC\nvar timelineUTC = new vis.Timeline(document.getElementById(\"utc\"), items, {\n editable: true,\n start: start,\n end: end,\n moment: function(date) {\n return vis.moment(date).utc();\n }\n});\ntimelineUTC.addCustomTime(customTime);\n\n// Create a timeline displaying in UTC +08:00\nvar timelinePlus8 = new vis.Timeline(document.getElementById(\"plus8\"), items, {\n editable: true,\n start: start,\n end: end,\n moment: function(date) {\n return vis.moment(date).utcOffset(\"+08:00\");\n }\n});\ntimelinePlus8.addCustomTime(customTime);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Time zone"}'
/><input
type="hidden"
name="js"
value='// Create a DataSet (allows two way data-binding)
var today = vis.moment(vis.moment.utc().format("YYYY-MM-DDT00:00:00.000Z"));
var start = today.clone();
var end = today.clone().add(2, "day");
var customTime = today.clone().add(28, "hour");
var items = new vis.DataSet([
{ id: 1, content: "item 1", start: today.clone().add(8, "hour") },
{ id: 2, content: "item 2", start: today.clone().add(16, "hour") },
{ id: 3, content: "item 3", start: today.clone().add(32, "hour") }
]);
// Create a timeline displaying in local time (default)
var timelineLocal = new vis.Timeline(document.getElementById("local"), items, {
editable: true,
start: start,
end: end
});
timelineLocal.addCustomTime(customTime);
// Create a timeline displaying in UTC
var timelineUTC = new vis.Timeline(document.getElementById("utc"), items, {
editable: true,
start: start,
end: end,
moment: function(date) {
return vis.moment(date).utc();
}
});
timelineUTC.addCustomTime(customTime);
// Create a timeline displaying in UTC +08:00
var timelinePlus8 = new vis.Timeline(document.getElementById("plus8"), items, {
editable: true,
start: start,
end: end,
moment: function(date) {
return vis.moment(date).utcOffset("+08:00");
}
});
timelinePlus8.addCustomTime(customTime);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
max-width: 800px;
}
"
/><input
type="hidden"
name="html"
value='<h1>Time zone</h1>
<p>
The following demo shows how to display items in local time (default), in UTC,
or for a specific time zone offset. By configuring your own
<code>moment</code> constructor, you can display items in the time zone that
you want. All timelines have the same start and end date.
</p>
<h2>Local time</h2>
<div id="local"></div>
<h2>UTC</h2>
<div id="utc"></div>
<h2>UTC +08:00</h2>
<div id="plus8"></div>
'
/></form
></span>
</div>
<a href="other/timezone.html"
><div class="example-image">
<img
src="thumbnails/bd707c6a6b7a099594fcd09f423f5cda8761116c84d64a317905240cec7cca7e.png"
alt="Time zone"
/></div></a></span
><span class="example-link"
><div>
<a href="editing/tooltipOnItemChange.html"
>Tooltip on item onUpdateTime Option</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 items
var numberOfItems = 10;
var items = new vis.DataSet();
var types = ["box", "point", "range"];
for (var order = 0; order < numberOfItems; order++) {
var date = vis.moment();
date.add(Math.round(Math.random() * 2), "hour");
items.add({
id: order,
type: types[Math.floor(3 * Math.random())],
content: "Item " + order,
start: date.clone().add(order + 1, "hour"),
end: date.clone().add(order + 3, "hour")
});
}
// specify options
var options = {
multiselect: true,
maxHeight: 400,
start: new Date(new Date().valueOf() - 10000000),
end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),
editable: true
};
var options1 = jQuery.extend(options, {
tooltipOnItemUpdateTime: true
});
var container1 = document.getElementById("mytimeline1");
timeline1 = new vis.Timeline(container1, items, null, options1);
var options2 = jQuery.extend(options, {
orientation: "top",
tooltipOnItemUpdateTime: {
template: function(item) {
return "html template for tooltip with <b>item.start</b>: " + item.start;
}
}
});
var container2 = document.getElementById("mytimeline2");
timeline2 = new vis.Timeline(container2, items, null, options2);
// create groups
var numberOfGroups = 25;
var groups = new vis.DataSet();
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: "Truck&nbsp;" + i
});
}
// create items for groups
var numberOfItems = 1000;
var itemsWithGroups = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems / numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
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);
itemsWithGroups.add({
id: order + itemsPerGroup * truck,
group: truck,
start: start,
end: end,
content: "Order " + order
});
}
}
var options3 = jQuery.extend(options, {
orientation: "top",
tooltipOnItemUpdateTime: true
});
var container3 = document.getElementById("mytimeline3");
timeline3 = new vis.Timeline(container3, itemsWithGroups, groups, options3);
'
/><input
type="hidden"
name="css"
value=".vis-item .vis-onUpdateTime-tooltip {
border-radius: 4px;
}
"
/><input
type="hidden"
name="html"
value='<h1>Timeline Tooltip on item onUpdateTime Option</h1>
<h2>With <code>tooltipOnItemUpdateTime: true</code></h2>
<div id="mytimeline1"></div>
<h2>With <code>tooltipOnItemUpdateTime: { template: [Function] }</code></h2>
<div id="mytimeline2"></div>
<h2>With groups</h2>
<div id="mytimeline3"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js,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 | Tooltip on item onUpdateTime Option"
/>
</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":".vis-item .vis-onUpdateTime-tooltip {\n border-radius: 4px;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h1>Timeline Tooltip on item onUpdateTime Option</h1>\n\n<h2>With <code>tooltipOnItemUpdateTime: true</code></h2>\n\n<div id=\"mytimeline1\"></div>\n\n<h2>With <code>tooltipOnItemUpdateTime: { template: [Function] }</code></h2>\n\n<div id=\"mytimeline2\"></div>\n\n<h2>With groups</h2>\n\n<div id=\"mytimeline3\"></div>\n","js":"// create items\nvar numberOfItems = 10;\nvar items = new vis.DataSet();\nvar types = [\"box\", \"point\", \"range\"];\n\nfor (var order = 0; order < numberOfItems; order++) {\n var date = vis.moment();\n\n date.add(Math.round(Math.random() * 2), \"hour\");\n items.add({\n id: order,\n type: types[Math.floor(3 * Math.random())],\n content: \"Item \" + order,\n start: date.clone().add(order + 1, \"hour\"),\n end: date.clone().add(order + 3, \"hour\")\n });\n}\n\n// specify options\nvar options = {\n multiselect: true,\n maxHeight: 400,\n start: new Date(new Date().valueOf() - 10000000),\n end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),\n editable: true\n};\n\nvar options1 = jQuery.extend(options, {\n tooltipOnItemUpdateTime: true\n});\nvar container1 = document.getElementById(\"mytimeline1\");\ntimeline1 = new vis.Timeline(container1, items, null, options1);\n\nvar options2 = jQuery.extend(options, {\n orientation: \"top\",\n tooltipOnItemUpdateTime: {\n template: function(item) {\n return \"html template for tooltip with <b>item.start</b>: \" + item.start;\n }\n }\n});\nvar container2 = document.getElementById(\"mytimeline2\");\ntimeline2 = new vis.Timeline(container2, items, null, options2);\n\n// create groups\nvar numberOfGroups = 25;\nvar groups = new vis.DataSet();\nfor (var i = 0; i < numberOfGroups; i++) {\n groups.add({\n id: i,\n content: \"Truck&nbsp;\" + i\n });\n}\n\n// create items for groups\nvar numberOfItems = 1000;\nvar itemsWithGroups = new vis.DataSet();\n\nvar itemsPerGroup = Math.round(numberOfItems / numberOfGroups);\n\nfor (var truck = 0; truck < numberOfGroups; truck++) {\n var date = new Date();\n for (var order = 0; order < itemsPerGroup; order++) {\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 itemsWithGroups.add({\n id: order + itemsPerGroup * truck,\n group: truck,\n start: start,\n end: end,\n content: \"Order \" + order\n });\n }\n}\n\nvar options3 = jQuery.extend(options, {\n orientation: \"top\",\n tooltipOnItemUpdateTime: true\n});\nvar container3 = document.getElementById(\"mytimeline3\");\ntimeline3 = new vis.Timeline(container3, itemsWithGroups, groups, options3);\n","js_external":"https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Tooltip on item onUpdateTime Option"}'
/><input
type="hidden"
name="js"
value='// create items
var numberOfItems = 10;
var items = new vis.DataSet();
var types = ["box", "point", "range"];
for (var order = 0; order < numberOfItems; order++) {
var date = vis.moment();
date.add(Math.round(Math.random() * 2), "hour");
items.add({
id: order,
type: types[Math.floor(3 * Math.random())],
content: "Item " + order,
start: date.clone().add(order + 1, "hour"),
end: date.clone().add(order + 3, "hour")
});
}
// specify options
var options = {
multiselect: true,
maxHeight: 400,
start: new Date(new Date().valueOf() - 10000000),
end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),
editable: true
};
var options1 = jQuery.extend(options, {
tooltipOnItemUpdateTime: true
});
var container1 = document.getElementById("mytimeline1");
timeline1 = new vis.Timeline(container1, items, null, options1);
var options2 = jQuery.extend(options, {
orientation: "top",
tooltipOnItemUpdateTime: {
template: function(item) {
return "html template for tooltip with <b>item.start</b>: " + item.start;
}
}
});
var container2 = document.getElementById("mytimeline2");
timeline2 = new vis.Timeline(container2, items, null, options2);
// create groups
var numberOfGroups = 25;
var groups = new vis.DataSet();
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: "Truck&nbsp;" + i
});
}
// create items for groups
var numberOfItems = 1000;
var itemsWithGroups = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems / numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
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);
itemsWithGroups.add({
id: order + itemsPerGroup * truck,
group: truck,
start: start,
end: end,
content: "Order " + order
});
}
}
var options3 = jQuery.extend(options, {
orientation: "top",
tooltipOnItemUpdateTime: true
});
var container3 = document.getElementById("mytimeline3");
timeline3 = new vis.Timeline(container3, itemsWithGroups, groups, options3);
'
/><input
type="hidden"
name="css"
value=".vis-item .vis-onUpdateTime-tooltip {
border-radius: 4px;
}
"
/><input
type="hidden"
name="html"
value='<h1>Timeline Tooltip on item onUpdateTime Option</h1>
<h2>With <code>tooltipOnItemUpdateTime: true</code></h2>
<div id="mytimeline1"></div>
<h2>With <code>tooltipOnItemUpdateTime: { template: [Function] }</code></h2>
<div id="mytimeline2"></div>
<h2>With groups</h2>
<div id="mytimeline3"></div>
'
/></form
></span>
</div>
<a href="editing/tooltipOnItemChange.html"
><div class="example-image">
<img
src="thumbnails/78f8b8ffa322a4473a48e5f275ad3812bb9f5078426cf3a33bcf84e58f503e03.png"
alt="Tooltip on item onUpdateTime Option"
/></div></a></span
><span class="example-link"
><div>
<a href="items/tooltipTemplate.html">Tooltip Template</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: 1,
content: "Item with custom tooltip",
start: "2016-01-02",
end: "2016-01-03",
title: "IN_PROGRESS"
}
]);
var options = {
start: "2016-01-01",
end: "2016-01-04",
tooltip: {
template: function(originalItemData, parsedItemData) {
var color = originalItemData.title == "IN_PROGRESS" ? "red" : "green";
return `<span style="color:${color}">${originalItemData.title}</span>`;
}
}
};
var element = document.getElementById("visualization");
// Timeline object
var timelineTooltips = new vis.Timeline(element, items, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
max-width: 800px;
}
"
/><input
type="hidden"
name="html"
value='<h1>Tooltip Templates</h1>
<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 | Tooltip Template"
/>
</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 max-width: 800px;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h1>Tooltip Templates</h1>\n\n<div id=\"visualization\"></div>\n","js":"var items = new vis.DataSet([\n {\n id: 1,\n content: \"Item with custom tooltip\",\n start: \"2016-01-02\",\n end: \"2016-01-03\",\n title: \"IN_PROGRESS\"\n }\n]);\n\nvar options = {\n start: \"2016-01-01\",\n end: \"2016-01-04\",\n tooltip: {\n template: function(originalItemData, parsedItemData) {\n var color = originalItemData.title == \"IN_PROGRESS\" ? \"red\" : \"green\";\n return `<span style=\"color:${color}\">${originalItemData.title}</span>`;\n }\n }\n};\n\nvar element = document.getElementById(\"visualization\");\n\n// Timeline object\nvar timelineTooltips = new vis.Timeline(element, items, options);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Tooltip Template"}'
/><input
type="hidden"
name="js"
value='var items = new vis.DataSet([
{
id: 1,
content: "Item with custom tooltip",
start: "2016-01-02",
end: "2016-01-03",
title: "IN_PROGRESS"
}
]);
var options = {
start: "2016-01-01",
end: "2016-01-04",
tooltip: {
template: function(originalItemData, parsedItemData) {
var color = originalItemData.title == "IN_PROGRESS" ? "red" : "green";
return `<span style="color:${color}">${originalItemData.title}</span>`;
}
}
};
var element = document.getElementById("visualization");
// Timeline object
var timelineTooltips = new vis.Timeline(element, items, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
max-width: 800px;
}
"
/><input
type="hidden"
name="html"
value='<h1>Tooltip Templates</h1>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="items/tooltipTemplate.html"
><div class="example-image">
<img
src="thumbnails/37147a90c96cebbb73b8d135fbfd599bf4ab98a3b7248ea5e6d3244813605d43.png"
alt="Tooltip Template"
/></div></a></span
><span class="example-link"
><div>
<a href="items/tooltip.html">Tooltips</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 (allows two way data-binding)
var items = new vis.DataSet([
{
id: 1,
content: "Item 1",
start: "2016-01-01",
end: "2016-01-02",
title: "Normal text"
},
{ id: 2, content: "Item 2", start: "2016-01-02", title: "<b>Bold</b>" },
{
id: 3,
content: "Item 3",
start: "2016-01-03",
type: "point",
title: '<span style="color: red">Red</span> text'
},
{
id: 4,
content: "<h1>HTML</h1> Item",
start: "2016-01-03",
end: "2016-01-04",
title: '<table border="1"><tr><td>Cell 1</td><td>Cell 2</td></tr></table>'
}
]);
// Options
var options = {};
// Timeline object
var timelineTooltips = new vis.Timeline(
document.getElementById("tooltips"),
items,
options
);
// Follow options
var follow_options = {
tooltip: {
followMouse: true
}
};
var timelineFollow = new vis.Timeline(
document.getElementById("tooltips-follow"),
items,
follow_options
);
// Cap options
var cap_options = {
tooltip: {
followMouse: true,
overflowMethod: "cap"
}
};
var timelineCap = new vis.Timeline(
document.getElementById("tooltips-cap"),
items,
cap_options
);
// Hide options
var hide_options = {
showTooltips: false
};
var timelineHide = new vis.Timeline(
document.getElementById("tooltips-hide"),
items,
hide_options
);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
max-width: 800px;
}
"
/><input
type="hidden"
name="html"
value='<h1>Tooltips</h1>
<p>
Setting the tooltip in various ways.
</p>
<div id="tooltips"></div>
<p>
The example below has the tooltip follow the mouse.
</p>
<div id="tooltips-follow"></div>
<p>
The example below has the tooltip overflow set to &apos;cap&apos;. Compare
this to the one above, to see how they differ. For the best results, move the
cursor to the top right, where the tool-tip is going to overflow out of the
timeline.
</p>
<div id="tooltips-cap"></div>
<p>
Disable item tooltips.
</p>
<div id="tooltips-hide"></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 | Tooltips"
/>
</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 max-width: 800px;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h1>Tooltips</h1>\n\n<p>\n Setting the tooltip in various ways.\n</p>\n\n<div id=\"tooltips\"></div>\n\n<p>\n The example below has the tooltip follow the mouse.\n</p>\n\n<div id=\"tooltips-follow\"></div>\n\n<p>\n The example below has the tooltip overflow set to &apos;cap&apos;. Compare\n this to the one above, to see how they differ. For the best results, move the\n cursor to the top right, where the tool-tip is going to overflow out of the\n timeline.\n</p>\n\n<div id=\"tooltips-cap\"></div>\n\n<p>\n Disable item tooltips.\n</p>\n\n<div id=\"tooltips-hide\"></div>\n","js":"// Create a DataSet (allows two way data-binding)\nvar items = new vis.DataSet([\n {\n id: 1,\n content: \"Item 1\",\n start: \"2016-01-01\",\n end: \"2016-01-02\",\n title: \"Normal text\"\n },\n { id: 2, content: \"Item 2\", start: \"2016-01-02\", title: \"<b>Bold</b>\" },\n {\n id: 3,\n content: \"Item 3\",\n start: \"2016-01-03\",\n type: \"point\",\n title: '<span style=\"color: red\">Red</span> text'\n },\n {\n id: 4,\n content: \"<h1>HTML</h1> Item\",\n start: \"2016-01-03\",\n end: \"2016-01-04\",\n title: '<table border=\"1\"><tr><td>Cell 1</td><td>Cell 2</td></tr></table>'\n }\n]);\n\n// Options\nvar options = {};\n\n// Timeline object\nvar timelineTooltips = new vis.Timeline(\n document.getElementById(\"tooltips\"),\n items,\n options\n);\n\n// Follow options\nvar follow_options = {\n tooltip: {\n followMouse: true\n }\n};\n\nvar timelineFollow = new vis.Timeline(\n document.getElementById(\"tooltips-follow\"),\n items,\n follow_options\n);\n\n// Cap options\nvar cap_options = {\n tooltip: {\n followMouse: true,\n overflowMethod: \"cap\"\n }\n};\n\nvar timelineCap = new vis.Timeline(\n document.getElementById(\"tooltips-cap\"),\n items,\n cap_options\n);\n\n// Hide options\nvar hide_options = {\n showTooltips: false\n};\n\nvar timelineHide = new vis.Timeline(\n document.getElementById(\"tooltips-hide\"),\n items,\n hide_options\n);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Tooltips"}'
/><input
type="hidden"
name="js"
value='// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{
id: 1,
content: "Item 1",
start: "2016-01-01",
end: "2016-01-02",
title: "Normal text"
},
{ id: 2, content: "Item 2", start: "2016-01-02", title: "<b>Bold</b>" },
{
id: 3,
content: "Item 3",
start: "2016-01-03",
type: "point",
title: '<span style="color: red">Red</span> text'
},
{
id: 4,
content: "<h1>HTML</h1> Item",
start: "2016-01-03",
end: "2016-01-04",
title: '<table border="1"><tr><td>Cell 1</td><td>Cell 2</td></tr></table>'
}
]);
// Options
var options = {};
// Timeline object
var timelineTooltips = new vis.Timeline(
document.getElementById("tooltips"),
items,
options
);
// Follow options
var follow_options = {
tooltip: {
followMouse: true
}
};
var timelineFollow = new vis.Timeline(
document.getElementById("tooltips-follow"),
items,
follow_options
);
// Cap options
var cap_options = {
tooltip: {
followMouse: true,
overflowMethod: "cap"
}
};
var timelineCap = new vis.Timeline(
document.getElementById("tooltips-cap"),
items,
cap_options
);
// Hide options
var hide_options = {
showTooltips: false
};
var timelineHide = new vis.Timeline(
document.getElementById("tooltips-hide"),
items,
hide_options
);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
max-width: 800px;
}
"
/><input
type="hidden"
name="html"
value='<h1>Tooltips</h1>
<p>
Setting the tooltip in various ways.
</p>
<div id="tooltips"></div>
<p>
The example below has the tooltip follow the mouse.
</p>
<div id="tooltips-follow"></div>
<p>
The example below has the tooltip overflow set to &apos;cap&apos;. Compare
this to the one above, to see how they differ. For the best results, move the
cursor to the top right, where the tool-tip is going to overflow out of the
timeline.
</p>
<div id="tooltips-cap"></div>
<p>
Disable item tooltips.
</p>
<div id="tooltips-hide"></div>
'
/></form
></span>
</div>
<a href="items/tooltip.html"
><div class="example-image">
<img
src="thumbnails/e3119354f2d2e0e62fa7cb307dcf18d7766eb9ded86d11104fc16eee77c92962.png"
alt="Tooltips"
/></div></a></span
><span class="example-link"
><div>
<a href="editing/updateDataOnEvent.html">Update data on event</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 data set
var data = new vis.DataSet([
{
id: 1,
start: new Date(new Date().getTime() - 60 * 1000),
end: new Date(),
content: "Dynamic event"
}
]);
// specify options
var options = {
showCurrentTime: true
};
// create a timeline
var container = document.getElementById("visualization");
timeline = new vis.Timeline(container, data, options);
timeline.addCustomTime(new Date());
// add event listener
timeline.on("timechange", function(event) {
document.getElementById("customTime").innerHTML =
"Custom Time: " + event.time;
var item = data.get(1);
if (event.time > item.start) {
item.end = new Date(event.time);
var now = new Date();
if (event.time < now) {
item.content = "Dynamic event (past)";
item.className = "past";
} else if (event.time > now) {
item.content = "Dynamic event (future)";
item.className = "future";
} else {
item.content = "Dynamic event (now)";
item.className = "now";
}
data.update(item);
}
});
// set a custom range from -2 minute to +3 minutes current time
var start = new Date(new Date().getTime() - 2 * 60 * 1000);
var end = new Date(new Date().getTime() + 3 * 60 * 1000);
timeline.setWindow(start, end, { animation: false });
'
/><input
type="hidden"
name="css"
value="body {
font: 11pt verdana;
}
.vis.timeline .item.past {
filter: alpha(opacity=50);
opacity: 0.5;
}
"
/><input
type="hidden"
name="html"
value='<p style="width: 600px;">
When the custom time bar is shown, the user can drag this bar to a specific
time. The Timeline sends an event that the custom time is changed, after which
the contents of the timeline can be changed according to the specified time in
past or future.
</p>
<div id="customTime">&#xA0;</div>
<p></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 | Update data on event"
/>
</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 font: 11pt verdana;\n}\n\n.vis.timeline .item.past {\n filter: alpha(opacity=50);\n opacity: 0.5;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p style=\"width: 600px;\">\n When the custom time bar is shown, the user can drag this bar to a specific\n time. The Timeline sends an event that the custom time is changed, after which\n the contents of the timeline can be changed according to the specified time in\n past or future.\n</p>\n\n<div id=\"customTime\">&#xA0;</div>\n<p></p>\n\n<div id=\"visualization\"></div>\n","js":"// create a data set\nvar data = new vis.DataSet([\n {\n id: 1,\n start: new Date(new Date().getTime() - 60 * 1000),\n end: new Date(),\n content: \"Dynamic event\"\n }\n]);\n\n// specify options\nvar options = {\n showCurrentTime: true\n};\n\n// create a timeline\nvar container = document.getElementById(\"visualization\");\ntimeline = new vis.Timeline(container, data, options);\n\ntimeline.addCustomTime(new Date());\n\n// add event listener\ntimeline.on(\"timechange\", function(event) {\n document.getElementById(\"customTime\").innerHTML =\n \"Custom Time: \" + event.time;\n\n var item = data.get(1);\n if (event.time > item.start) {\n item.end = new Date(event.time);\n var now = new Date();\n if (event.time < now) {\n item.content = \"Dynamic event (past)\";\n item.className = \"past\";\n } else if (event.time > now) {\n item.content = \"Dynamic event (future)\";\n item.className = \"future\";\n } else {\n item.content = \"Dynamic event (now)\";\n item.className = \"now\";\n }\n\n data.update(item);\n }\n});\n\n// set a custom range from -2 minute to +3 minutes current time\nvar start = new Date(new Date().getTime() - 2 * 60 * 1000);\nvar end = new Date(new Date().getTime() + 3 * 60 * 1000);\ntimeline.setWindow(start, end, { animation: false });\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Update data on event"}'
/><input
type="hidden"
name="js"
value='// create a data set
var data = new vis.DataSet([
{
id: 1,
start: new Date(new Date().getTime() - 60 * 1000),
end: new Date(),
content: "Dynamic event"
}
]);
// specify options
var options = {
showCurrentTime: true
};
// create a timeline
var container = document.getElementById("visualization");
timeline = new vis.Timeline(container, data, options);
timeline.addCustomTime(new Date());
// add event listener
timeline.on("timechange", function(event) {
document.getElementById("customTime").innerHTML =
"Custom Time: " + event.time;
var item = data.get(1);
if (event.time > item.start) {
item.end = new Date(event.time);
var now = new Date();
if (event.time < now) {
item.content = "Dynamic event (past)";
item.className = "past";
} else if (event.time > now) {
item.content = "Dynamic event (future)";
item.className = "future";
} else {
item.content = "Dynamic event (now)";
item.className = "now";
}
data.update(item);
}
});
// set a custom range from -2 minute to +3 minutes current time
var start = new Date(new Date().getTime() - 2 * 60 * 1000);
var end = new Date(new Date().getTime() + 3 * 60 * 1000);
timeline.setWindow(start, end, { animation: false });
'
/><input
type="hidden"
name="css"
value="body {
font: 11pt verdana;
}
.vis.timeline .item.past {
filter: alpha(opacity=50);
opacity: 0.5;
}
"
/><input
type="hidden"
name="html"
value='<p style="width: 600px;">
When the custom time bar is shown, the user can drag this bar to a specific
time. The Timeline sends an event that the custom time is changed, after which
the contents of the timeline can be changed according to the specified time in
past or future.
</p>
<div id="customTime">&#xA0;</div>
<p></p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="editing/updateDataOnEvent.html"
><div class="example-image">
<img
src="thumbnails/8b297691ca4e950a70464ef9e6d293d0d65b91078d6c7d62c7ae736f34149fe8.png"
alt="Update data on event"
/></div></a></span
><span class="example-link"
><div>
<a href="groups/verticalItemsHide.html">Vertical Items Hide</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='function showVisibleItems() {
document.getElementById("visibleItemsContainer").innerHTML = "";
document.getElementById("visibleItemsContainer").innerHTML += a;
}
// get selected item count from url parameter
var 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" },
{ id: 5, content: "Truck&nbsp;5" },
{ id: 6, content: "Truck&nbsp;6" },
{ id: 7, content: "Truck&nbsp;7" },
{ id: 8, content: "Truck&nbsp;8" },
{ id: 9, content: "Truck&nbsp;9" },
{ id: 10, content: "Truck&nbsp;10" },
{ id: 11, content: "Truck&nbsp;11" },
{ id: 12, content: "Truck&nbsp;12" },
{ id: 13, content: "Truck&nbsp;13" },
{ id: 14, content: "Truck&nbsp;14" },
{ id: 15, content: "Truck&nbsp;15" },
{ id: 16, content: "Truck&nbsp;16" },
{ id: 17, content: "Truck&nbsp;17" },
{ id: 18, content: "Truck&nbsp;18" },
{ id: 19, content: "Truck&nbsp;19" },
{ id: 20, content: "Truck&nbsp;20" },
{ id: 21, content: "Truck&nbsp;21" },
{ id: 22, content: "Truck&nbsp;22" },
{ id: 23, content: "Truck&nbsp;23" },
{ id: 24, content: "Truck&nbsp;24" },
{ id: 25, content: "Truck&nbsp;25" }
]);
// create items
var items = new vis.DataSet();
var types = ["box", "point", "range", "background"];
var order = 1;
var truck = 1;
for (var j = 0; j < 25; j++) {
var date = new Date();
for (var i = 0; i < count / 25; 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);
var type = types[Math.floor(4 * Math.random())];
items.add({
id: order,
group: truck,
start: start,
end: end,
type: type,
content: "Order " + order
});
order++;
}
truck++;
}
// specify options
var options = {
stack: true,
maxHeight: 400,
start: new Date(),
end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf())
};
// create a Timeline
var container = document.getElementById("visualization");
timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);
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 vertical visibility</h1>
<button onclick="showVisibleItems()">Show current visible items</button>
<div>
<h2>visible items:</h2>
<h3 id="visibleItemsContainer"></h3>
</div>
<div id="visualization"></div>
<br />
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://visjs.github.io/vis-timeline/docs/js/jquery.min.js,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 | Vertical Items Hide"
/>
</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 vertical visibility</h1>\n\n<button onclick=\"showVisibleItems()\">Show current visible items</button>\n<div>\n <h2>visible items:</h2>\n <h3 id=\"visibleItemsContainer\"></h3>\n</div>\n\n<div id=\"visualization\"></div>\n<br />\n","js":"function showVisibleItems() {\n document.getElementById(\"visibleItemsContainer\").innerHTML = \"\";\n document.getElementById(\"visibleItemsContainer\").innerHTML += a;\n}\n\n// get selected item count from url parameter\nvar 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 { id: 5, content: \"Truck&nbsp;5\" },\n { id: 6, content: \"Truck&nbsp;6\" },\n { id: 7, content: \"Truck&nbsp;7\" },\n { id: 8, content: \"Truck&nbsp;8\" },\n { id: 9, content: \"Truck&nbsp;9\" },\n { id: 10, content: \"Truck&nbsp;10\" },\n { id: 11, content: \"Truck&nbsp;11\" },\n { id: 12, content: \"Truck&nbsp;12\" },\n { id: 13, content: \"Truck&nbsp;13\" },\n { id: 14, content: \"Truck&nbsp;14\" },\n { id: 15, content: \"Truck&nbsp;15\" },\n { id: 16, content: \"Truck&nbsp;16\" },\n { id: 17, content: \"Truck&nbsp;17\" },\n { id: 18, content: \"Truck&nbsp;18\" },\n { id: 19, content: \"Truck&nbsp;19\" },\n { id: 20, content: \"Truck&nbsp;20\" },\n { id: 21, content: \"Truck&nbsp;21\" },\n { id: 22, content: \"Truck&nbsp;22\" },\n { id: 23, content: \"Truck&nbsp;23\" },\n { id: 24, content: \"Truck&nbsp;24\" },\n { id: 25, content: \"Truck&nbsp;25\" }\n]);\n\n// create items\nvar items = new vis.DataSet();\n\nvar types = [\"box\", \"point\", \"range\", \"background\"];\nvar order = 1;\nvar truck = 1;\nfor (var j = 0; j < 25; j++) {\n var date = new Date();\n for (var i = 0; i < count / 25; 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 var type = types[Math.floor(4 * Math.random())];\n\n items.add({\n id: order,\n group: truck,\n start: start,\n end: end,\n type: type,\n content: \"Order \" + order\n });\n\n order++;\n }\n truck++;\n}\n\n// specify options\nvar options = {\n stack: true,\n maxHeight: 400,\n start: new Date(),\n end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf())\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\nwindow.addEventListener(\"resize\", () => {\n /*timeline.checkResize();*/\n});\n","js_external":"https://visjs.github.io/vis-timeline/docs/js/jquery.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Vertical Items Hide"}'
/><input
type="hidden"
name="js"
value='function showVisibleItems() {
document.getElementById("visibleItemsContainer").innerHTML = "";
document.getElementById("visibleItemsContainer").innerHTML += a;
}
// get selected item count from url parameter
var 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" },
{ id: 5, content: "Truck&nbsp;5" },
{ id: 6, content: "Truck&nbsp;6" },
{ id: 7, content: "Truck&nbsp;7" },
{ id: 8, content: "Truck&nbsp;8" },
{ id: 9, content: "Truck&nbsp;9" },
{ id: 10, content: "Truck&nbsp;10" },
{ id: 11, content: "Truck&nbsp;11" },
{ id: 12, content: "Truck&nbsp;12" },
{ id: 13, content: "Truck&nbsp;13" },
{ id: 14, content: "Truck&nbsp;14" },
{ id: 15, content: "Truck&nbsp;15" },
{ id: 16, content: "Truck&nbsp;16" },
{ id: 17, content: "Truck&nbsp;17" },
{ id: 18, content: "Truck&nbsp;18" },
{ id: 19, content: "Truck&nbsp;19" },
{ id: 20, content: "Truck&nbsp;20" },
{ id: 21, content: "Truck&nbsp;21" },
{ id: 22, content: "Truck&nbsp;22" },
{ id: 23, content: "Truck&nbsp;23" },
{ id: 24, content: "Truck&nbsp;24" },
{ id: 25, content: "Truck&nbsp;25" }
]);
// create items
var items = new vis.DataSet();
var types = ["box", "point", "range", "background"];
var order = 1;
var truck = 1;
for (var j = 0; j < 25; j++) {
var date = new Date();
for (var i = 0; i < count / 25; 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);
var type = types[Math.floor(4 * Math.random())];
items.add({
id: order,
group: truck,
start: start,
end: end,
type: type,
content: "Order " + order
});
order++;
}
truck++;
}
// specify options
var options = {
stack: true,
maxHeight: 400,
start: new Date(),
end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf())
};
// create a Timeline
var container = document.getElementById("visualization");
timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);
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 vertical visibility</h1>
<button onclick="showVisibleItems()">Show current visible items</button>
<div>
<h2>visible items:</h2>
<h3 id="visibleItemsContainer"></h3>
</div>
<div id="visualization"></div>
<br />
'
/></form
></span>
</div>
<a href="groups/verticalItemsHide.html"
><div class="example-image">
<img
src="thumbnails/7382dd3b88f8212959193d35dc404852f070344f62fbaa23f0e764fa9cd5619a.png"
alt="Vertical Items Hide"
/></div></a></span
><span class="example-link"
><div>
<a href="other/verticalScroll.html">Vertical Scroll Option</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 groups
var numberOfGroups = 25;
var groups = new vis.DataSet();
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: "Truck&nbsp;" + i
});
}
// create items
var numberOfItems = 1000;
var items = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems / numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
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);
var orderIndex = order + itemsPerGroup * truck;
items.add({
id: orderIndex,
group: truck,
start: start,
end: end,
content: "Order " + orderIndex
});
}
}
// specify options
var options = {
stack: true,
verticalScroll: true,
zoomKey: "ctrlKey",
maxHeight: 200,
start: new Date(),
end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf())
};
// create a Timeline
options1 = jQuery.extend(options, {});
var container1 = document.getElementById("mytimeline1");
timeline1 = new vis.Timeline(container1, items, groups, options1);
options2 = jQuery.extend(options, { horizontalScroll: true });
var container2 = document.getElementById("mytimeline2");
timeline2 = new vis.Timeline(container2, items, groups, options2);
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<h1>Timeline vertical scroll option</h1>
<h2>With <code> verticalScroll: true, zoomKey: &apos;ctrlKey&apos;</code></h2>
<div id="mytimeline1"></div>
<h2>
With
<code>
horizontalScroll: true, verticalScroll: true, zoomKey:
&apos;ctrlKey&apos;</code
>
</h2>
<div id="mytimeline2"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js,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 | Vertical Scroll Option"
/>
</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":"","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h1>Timeline vertical scroll option</h1>\n\n<h2>With <code> verticalScroll: true, zoomKey: &apos;ctrlKey&apos;</code></h2>\n\n<div id=\"mytimeline1\"></div>\n\n<h2>\n With\n <code>\n horizontalScroll: true, verticalScroll: true, zoomKey:\n &apos;ctrlKey&apos;</code\n >\n</h2>\n<div id=\"mytimeline2\"></div>\n","js":"// create groups\nvar numberOfGroups = 25;\nvar groups = new vis.DataSet();\nfor (var i = 0; i < numberOfGroups; i++) {\n groups.add({\n id: i,\n content: \"Truck&nbsp;\" + i\n });\n}\n\n// create items\nvar numberOfItems = 1000;\nvar items = new vis.DataSet();\n\nvar itemsPerGroup = Math.round(numberOfItems / numberOfGroups);\n\nfor (var truck = 0; truck < numberOfGroups; truck++) {\n var date = new Date();\n for (var order = 0; order < itemsPerGroup; order++) {\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 var orderIndex = order + itemsPerGroup * truck;\n items.add({\n id: orderIndex,\n group: truck,\n start: start,\n end: end,\n content: \"Order \" + orderIndex\n });\n }\n}\n\n// specify options\nvar options = {\n stack: true,\n verticalScroll: true,\n zoomKey: \"ctrlKey\",\n maxHeight: 200,\n start: new Date(),\n end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf())\n};\n\n// create a Timeline\n\noptions1 = jQuery.extend(options, {});\nvar container1 = document.getElementById(\"mytimeline1\");\ntimeline1 = new vis.Timeline(container1, items, groups, options1);\n\noptions2 = jQuery.extend(options, { horizontalScroll: true });\nvar container2 = document.getElementById(\"mytimeline2\");\ntimeline2 = new vis.Timeline(container2, items, groups, options2);\n","js_external":"https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Vertical Scroll Option"}'
/><input
type="hidden"
name="js"
value='// create groups
var numberOfGroups = 25;
var groups = new vis.DataSet();
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: "Truck&nbsp;" + i
});
}
// create items
var numberOfItems = 1000;
var items = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems / numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
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);
var orderIndex = order + itemsPerGroup * truck;
items.add({
id: orderIndex,
group: truck,
start: start,
end: end,
content: "Order " + orderIndex
});
}
}
// specify options
var options = {
stack: true,
verticalScroll: true,
zoomKey: "ctrlKey",
maxHeight: 200,
start: new Date(),
end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf())
};
// create a Timeline
options1 = jQuery.extend(options, {});
var container1 = document.getElementById("mytimeline1");
timeline1 = new vis.Timeline(container1, items, groups, options1);
options2 = jQuery.extend(options, { horizontalScroll: true });
var container2 = document.getElementById("mytimeline2");
timeline2 = new vis.Timeline(container2, items, groups, options2);
'
/><input type="hidden" name="css" value /><input
type="hidden"
name="html"
value='<h1>Timeline vertical scroll option</h1>
<h2>With <code> verticalScroll: true, zoomKey: &apos;ctrlKey&apos;</code></h2>
<div id="mytimeline1"></div>
<h2>
With
<code>
horizontalScroll: true, verticalScroll: true, zoomKey:
&apos;ctrlKey&apos;</code
>
</h2>
<div id="mytimeline2"></div>
'
/></form
></span>
</div>
<a href="other/verticalScroll.html"
><div class="example-image">
<img
src="thumbnails/288bb394ea8eec9ee6585f16518fceaf7866f7eb9fe97dbc46c19f32e35ac2bf.png"
alt="Vertical Scroll Option"
/></div></a></span
><span class="example-link"
><div>
<a href="groups/visibleGroups.html">Visible 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='function showVisibleGroups() {
var a = timeline.getVisibleGroups();
document.getElementById("visibleGroupsContainer").innerHTML = "";
document.getElementById("visibleGroupsContainer").innerHTML += a;
}
var now = Date.now();
var options = {
stack: true,
maxHeight: 640,
horizontalScroll: false,
verticalScroll: true,
zoomKey: "ctrlKey",
start: Date.now() - 1000 * 60 * 60 * 24 * 3, // minus 3 days
end: Date.now() + 1000 * 60 * 60 * 24 * 21, // plus 1 months aprox.
orientation: {
axis: "both",
item: "top"
}
};
var groups = new vis.DataSet();
var items = new vis.DataSet();
var count = 300;
for (var i = 0; i < count; i++) {
var start = now + 1000 * 60 * 60 * 24 * (i + Math.floor(Math.random() * 7));
var end = start + 1000 * 60 * 60 * 24 * (1 + Math.floor(Math.random() * 5));
groups.add({
id: i,
content: "Task " + i,
order: i
});
items.add({
id: i,
group: i,
start: start,
end: end,
type: "range",
content: "Item " + i
});
}
// create a Timeline
var container = document.getElementById("visualization");
timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);
function debounce(func, wait = 100) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, args);
}, wait);
};
}
let groupFocus = e => {
let vGroups = timeline.getVisibleGroups();
let vItems = vGroups.reduce((res, groupId) => {
let group = timeline.itemSet.groups[groupId];
if (group.items) {
res = res.concat(Object.keys(group.items));
}
return res;
}, []);
timeline.focus(vItems);
};
this.timeline.on("scroll", debounce(groupFocus, 200));
// Enabling the next line leads to a continuous since calling focus might scroll vertically even if it shouldn't
// this.timeline.on("scrollSide", debounce(groupFocus, 200))
'
/><input
type="hidden"
name="css"
value="body {
color: #4d4d4d;
font: 10pt arial;
}
"
/><input
type="hidden"
name="html"
value='<h1>Timeline visible Groups</h1>
<button onclick="showVisibleGroups()">Show current visible items</button>
<div>
<h2>visible groups:</h2>
<h3 id="visibleGroupsContainer"></h3>
<h2>
(Scroll with the mouse and see the items being focus automatically on the
timeline)
</h2>
</div>
<div id="visualization"></div>
<br />
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://visjs.github.io/vis-timeline/docs/js/jquery.min.js,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 | Visible 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 {\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 visible Groups</h1>\n\n<button onclick=\"showVisibleGroups()\">Show current visible items</button>\n<div>\n <h2>visible groups:</h2>\n <h3 id=\"visibleGroupsContainer\"></h3>\n <h2>\n (Scroll with the mouse and see the items being focus automatically on the\n timeline)\n </h2>\n</div>\n\n<div id=\"visualization\"></div>\n<br />\n","js":"function showVisibleGroups() {\n var a = timeline.getVisibleGroups();\n document.getElementById(\"visibleGroupsContainer\").innerHTML = \"\";\n document.getElementById(\"visibleGroupsContainer\").innerHTML += a;\n}\n\nvar now = Date.now();\n\nvar options = {\n stack: true,\n maxHeight: 640,\n horizontalScroll: false,\n verticalScroll: true,\n zoomKey: \"ctrlKey\",\n start: Date.now() - 1000 * 60 * 60 * 24 * 3, // minus 3 days\n end: Date.now() + 1000 * 60 * 60 * 24 * 21, // plus 1 months aprox.\n orientation: {\n axis: \"both\",\n item: \"top\"\n }\n};\nvar groups = new vis.DataSet();\nvar items = new vis.DataSet();\n\nvar count = 300;\n\nfor (var i = 0; i < count; i++) {\n var start = now + 1000 * 60 * 60 * 24 * (i + Math.floor(Math.random() * 7));\n var end = start + 1000 * 60 * 60 * 24 * (1 + Math.floor(Math.random() * 5));\n\n groups.add({\n id: i,\n content: \"Task \" + i,\n order: i\n });\n\n items.add({\n id: i,\n group: i,\n start: start,\n end: end,\n type: \"range\",\n content: \"Item \" + i\n });\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\nfunction debounce(func, wait = 100) {\n let timeout;\n return function(...args) {\n clearTimeout(timeout);\n timeout = setTimeout(() => {\n func.apply(this, args);\n }, wait);\n };\n}\n\nlet groupFocus = e => {\n let vGroups = timeline.getVisibleGroups();\n let vItems = vGroups.reduce((res, groupId) => {\n let group = timeline.itemSet.groups[groupId];\n if (group.items) {\n res = res.concat(Object.keys(group.items));\n }\n return res;\n }, []);\n timeline.focus(vItems);\n};\nthis.timeline.on(\"scroll\", debounce(groupFocus, 200));\n// Enabling the next line leads to a continuous since calling focus might scroll vertically even if it shouldn't\n// this.timeline.on(\"scrollSide\", debounce(groupFocus, 200))\n","js_external":"https://visjs.github.io/vis-timeline/docs/js/jquery.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Visible Groups"}'
/><input
type="hidden"
name="js"
value='function showVisibleGroups() {
var a = timeline.getVisibleGroups();
document.getElementById("visibleGroupsContainer").innerHTML = "";
document.getElementById("visibleGroupsContainer").innerHTML += a;
}
var now = Date.now();
var options = {
stack: true,
maxHeight: 640,
horizontalScroll: false,
verticalScroll: true,
zoomKey: "ctrlKey",
start: Date.now() - 1000 * 60 * 60 * 24 * 3, // minus 3 days
end: Date.now() + 1000 * 60 * 60 * 24 * 21, // plus 1 months aprox.
orientation: {
axis: "both",
item: "top"
}
};
var groups = new vis.DataSet();
var items = new vis.DataSet();
var count = 300;
for (var i = 0; i < count; i++) {
var start = now + 1000 * 60 * 60 * 24 * (i + Math.floor(Math.random() * 7));
var end = start + 1000 * 60 * 60 * 24 * (1 + Math.floor(Math.random() * 5));
groups.add({
id: i,
content: "Task " + i,
order: i
});
items.add({
id: i,
group: i,
start: start,
end: end,
type: "range",
content: "Item " + i
});
}
// create a Timeline
var container = document.getElementById("visualization");
timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);
function debounce(func, wait = 100) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, args);
}, wait);
};
}
let groupFocus = e => {
let vGroups = timeline.getVisibleGroups();
let vItems = vGroups.reduce((res, groupId) => {
let group = timeline.itemSet.groups[groupId];
if (group.items) {
res = res.concat(Object.keys(group.items));
}
return res;
}, []);
timeline.focus(vItems);
};
this.timeline.on("scroll", debounce(groupFocus, 200));
// Enabling the next line leads to a continuous since calling focus might scroll vertically even if it shouldn't
// this.timeline.on("scrollSide", debounce(groupFocus, 200))
'
/><input
type="hidden"
name="css"
value="body {
color: #4d4d4d;
font: 10pt arial;
}
"
/><input
type="hidden"
name="html"
value='<h1>Timeline visible Groups</h1>
<button onclick="showVisibleGroups()">Show current visible items</button>
<div>
<h2>visible groups:</h2>
<h3 id="visibleGroupsContainer"></h3>
<h2>
(Scroll with the mouse and see the items being focus automatically on the
timeline)
</h2>
</div>
<div id="visualization"></div>
<br />
'
/></form
></span>
</div>
<a href="groups/visibleGroups.html"
><div class="example-image">
<img
src="thumbnails/d1889faddd898e190a3f6ccf1cdaf3d65e21fb17dfe8c9bec1dbe3861cc4d113.png"
alt="Visible Groups"
/></div></a></span
><span class="example-link"
><div>
<a href="styling/weekStyling.html">Week styling</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 itemCount = 26;
// DOM element where the Timeline will be attached
var container = document.getElementById("visualization");
// just a group for the effects
var groups = new vis.DataSet();
groups.add([{ id: 1, content: "ISO Weeks" }, { id: 2, content: "US Weeks" }]);
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet();
// create a localized moment object based on the current date
var USdate = moment()
.locale("en")
.hours(0)
.minutes(0)
.seconds(0)
.milliseconds(0);
// use the locale-aware weekday function to move to the begin of the current week
USdate.weekday(0);
// Iterate and just add a week to use it again in the next iteration
for (var i = 0; i < itemCount; i++) {
var USweekNumber = USdate.format("w");
var USweekStart = USdate.format();
var USweekEnd = USdate.add(1, "week").format();
items.add({
id: i,
group: 2,
content: "US week " + USweekNumber,
start: USweekStart,
end: USweekEnd
});
}
// create another localized moment object - the 'de' locale works according to the ISO8601 leap week calendar system
var DEdate = moment()
.locale("de")
.hours(0)
.minutes(0)
.seconds(0)
.milliseconds(0);
DEdate.weekday(0);
for (var j = 0; j < itemCount; j++) {
var DEweekNumber = DEdate.format("w");
var DEweekStart = DEdate.format();
var DEweekEnd = DEdate.add(1, "week").format();
items.add({
id: itemCount + j,
group: 1,
content: "ISO week " + DEweekNumber,
start: DEweekStart,
end: DEweekEnd
});
}
// Configuration for the Timeline
var options = {
locale: "de",
timeAxis: {
scale: "week",
step: 1
},
format: {
minorLabels: { week: "w" }
}
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, groups, options);
// update the locale when changing the select box value
var select = document.getElementById("locale");
select.onchange = function() {
timeline.setOptions({
locale: this.value
});
};
select.onchange();
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
/* alternating column backgrounds */
.vis-time-axis .vis-grid.vis-odd {
background: #f5f5f5;
}
"
/><input
type="hidden"
name="html"
value='<p>
To set a locale for the timeline, specify the option
<code>{locale: STRING}</code>.
</p>
<p>
To set the scale to use week numbers, use the following options:
<code>
{ timeAxis: { scale: &apos;week&apos;, step: 1 }, format: { minorLabels:
{week: &apos;w&apos;} } }
</code>
</p>
<p>
The following timeline is initialized with the &apos;de&apos; locale and items
are added with locally localized moment.js objects. The timeline locale can be
switched to another locale at runtime. If you choose the &apos;en&apos;
locale, the week numbers will be calculated according to the US week calendar
numbering scheme.
</p>
<p>
<label for="locale">Select a locale:</label>
<select id="locale">
<option value="en">en</option>
<option value="fr">fr</option>
<option value="it">it</option>
<option value="nl">nl</option>
<option value="de" selected>de</option>
</select>
</p>
<div id="visualization"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css,https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js,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 | Week styling"
/>
</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\n/* alternating column backgrounds */\n.vis-time-axis .vis-grid.vis-odd {\n background: #f5f5f5;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<p>\n To set a locale for the timeline, specify the option\n <code>{locale: STRING}</code>.\n</p>\n<p>\n To set the scale to use week numbers, use the following options:\n <code>\n { timeAxis: { scale: &apos;week&apos;, step: 1 }, format: { minorLabels:\n {week: &apos;w&apos;} } }\n </code>\n</p>\n\n<p>\n The following timeline is initialized with the &apos;de&apos; locale and items\n are added with locally localized moment.js objects. The timeline locale can be\n switched to another locale at runtime. If you choose the &apos;en&apos;\n locale, the week numbers will be calculated according to the US week calendar\n numbering scheme.\n</p>\n\n<p>\n <label for=\"locale\">Select a locale:</label>\n <select id=\"locale\">\n <option value=\"en\">en</option>\n <option value=\"fr\">fr</option>\n <option value=\"it\">it</option>\n <option value=\"nl\">nl</option>\n <option value=\"de\" selected>de</option>\n </select>\n</p>\n\n<div id=\"visualization\"></div>\n","js":"var itemCount = 26;\n\n// DOM element where the Timeline will be attached\nvar container = document.getElementById(\"visualization\");\n\n// just a group for the effects\nvar groups = new vis.DataSet();\ngroups.add([{ id: 1, content: \"ISO Weeks\" }, { id: 2, content: \"US Weeks\" }]);\n\n// Create a DataSet (allows two way data-binding)\nvar items = new vis.DataSet();\n\n// create a localized moment object based on the current date\nvar USdate = moment()\n .locale(\"en\")\n .hours(0)\n .minutes(0)\n .seconds(0)\n .milliseconds(0);\n\n// use the locale-aware weekday function to move to the begin of the current week\nUSdate.weekday(0);\n\n// Iterate and just add a week to use it again in the next iteration\nfor (var i = 0; i < itemCount; i++) {\n var USweekNumber = USdate.format(\"w\");\n var USweekStart = USdate.format();\n var USweekEnd = USdate.add(1, \"week\").format();\n items.add({\n id: i,\n group: 2,\n content: \"US week \" + USweekNumber,\n start: USweekStart,\n end: USweekEnd\n });\n}\n\n// create another localized moment object - the 'de' locale works according to the ISO8601 leap week calendar system\nvar DEdate = moment()\n .locale(\"de\")\n .hours(0)\n .minutes(0)\n .seconds(0)\n .milliseconds(0);\nDEdate.weekday(0);\nfor (var j = 0; j < itemCount; j++) {\n var DEweekNumber = DEdate.format(\"w\");\n var DEweekStart = DEdate.format();\n var DEweekEnd = DEdate.add(1, \"week\").format();\n items.add({\n id: itemCount + j,\n group: 1,\n content: \"ISO week \" + DEweekNumber,\n start: DEweekStart,\n end: DEweekEnd\n });\n}\n\n// Configuration for the Timeline\nvar options = {\n locale: \"de\",\n timeAxis: {\n scale: \"week\",\n step: 1\n },\n format: {\n minorLabels: { week: \"w\" }\n }\n};\n\n// Create a Timeline\nvar timeline = new vis.Timeline(container, items, groups, options);\n\n// update the locale when changing the select box value\nvar select = document.getElementById(\"locale\");\nselect.onchange = function() {\n timeline.setOptions({\n locale: this.value\n });\n};\nselect.onchange();\n","js_external":"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js;https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Timeline | Week styling"}'
/><input
type="hidden"
name="js"
value='var itemCount = 26;
// DOM element where the Timeline will be attached
var container = document.getElementById("visualization");
// just a group for the effects
var groups = new vis.DataSet();
groups.add([{ id: 1, content: "ISO Weeks" }, { id: 2, content: "US Weeks" }]);
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet();
// create a localized moment object based on the current date
var USdate = moment()
.locale("en")
.hours(0)
.minutes(0)
.seconds(0)
.milliseconds(0);
// use the locale-aware weekday function to move to the begin of the current week
USdate.weekday(0);
// Iterate and just add a week to use it again in the next iteration
for (var i = 0; i < itemCount; i++) {
var USweekNumber = USdate.format("w");
var USweekStart = USdate.format();
var USweekEnd = USdate.add(1, "week").format();
items.add({
id: i,
group: 2,
content: "US week " + USweekNumber,
start: USweekStart,
end: USweekEnd
});
}
// create another localized moment object - the 'de' locale works according to the ISO8601 leap week calendar system
var DEdate = moment()
.locale("de")
.hours(0)
.minutes(0)
.seconds(0)
.milliseconds(0);
DEdate.weekday(0);
for (var j = 0; j < itemCount; j++) {
var DEweekNumber = DEdate.format("w");
var DEweekStart = DEdate.format();
var DEweekEnd = DEdate.add(1, "week").format();
items.add({
id: itemCount + j,
group: 1,
content: "ISO week " + DEweekNumber,
start: DEweekStart,
end: DEweekEnd
});
}
// Configuration for the Timeline
var options = {
locale: "de",
timeAxis: {
scale: "week",
step: 1
},
format: {
minorLabels: { week: "w" }
}
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, groups, options);
// update the locale when changing the select box value
var select = document.getElementById("locale");
select.onchange = function() {
timeline.setOptions({
locale: this.value
});
};
select.onchange();
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
/* alternating column backgrounds */
.vis-time-axis .vis-grid.vis-odd {
background: #f5f5f5;
}
"
/><input
type="hidden"
name="html"
value='<p>
To set a locale for the timeline, specify the option
<code>{locale: STRING}</code>.
</p>
<p>
To set the scale to use week numbers, use the following options:
<code>
{ timeAxis: { scale: &apos;week&apos;, step: 1 }, format: { minorLabels:
{week: &apos;w&apos;} } }
</code>
</p>
<p>
The following timeline is initialized with the &apos;de&apos; locale and items
are added with locally localized moment.js objects. The timeline locale can be
switched to another locale at runtime. If you choose the &apos;en&apos;
locale, the week numbers will be calculated according to the US week calendar
numbering scheme.
</p>
<p>
<label for="locale">Select a locale:</label>
<select id="locale">
<option value="en">en</option>
<option value="fr">fr</option>
<option value="it">it</option>
<option value="nl">nl</option>
<option value="de" selected>de</option>
</select>
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="styling/weekStyling.html"
><div class="example-image">
<img
src="thumbnails/8b1b0c14ea90d932d97a72b447a952475a4cf6611a2d7031e2a332bd0c333e29.png"
alt="Week styling"
/></div></a
></span>
</div>
</div>
</div>
</body>
</html>