vis-timeline
Version:
Create a fully customizable, interactive timeline with items and ranges.
6,328 lines • 274 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Vis Graph2D 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>Graph2d</h1>
<div>
<span class="example-link"
><div>
<a href="16_bothAxisTitles.html">Axis Titles and 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='// create a dataSet with groups
var names = ["SquareShaded", "Bargraph", "Blank", "CircleShaded"];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: "custom-style1",
options: {
drawPoints: {
style: "square" // square, circle
},
shaded: {
orientation: "bottom" // top, bottom
}
}
});
groups.add({
id: 1,
content: names[1],
className: "custom-style2",
options: {
style: "bar",
drawPoints: { style: "circle", size: 10 }
}
});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: "right", // right, left
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
className: "custom-style3",
options: {
yAxisOrientation: "right", // right, left
drawPoints: {
style: "circle" // square, circle
},
shaded: {
orientation: "top" // top, bottom
}
}
});
var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-12", y: 0, group: 0 },
{ x: "2014-06-13", y: 30, group: 0 },
{ x: "2014-06-14", y: 10, group: 0 },
{ x: "2014-06-15", y: 15, group: 1 },
{ x: "2014-06-16", y: 30, group: 1 },
{ x: "2014-06-17", y: 10, group: 1 },
{ x: "2014-06-18", y: 15, group: 1 },
{ x: "2014-06-19", y: 52, group: 1 },
{ x: "2014-06-20", y: 10, group: 1 },
{ x: "2014-06-21", y: 20, group: 2 },
{ x: "2014-06-22", y: 600, group: 2 },
{ x: "2014-06-23", y: 100, group: 2 },
{ x: "2014-06-24", y: 250, group: 2 },
{ x: "2014-06-25", y: 300, group: 2 },
{ x: "2014-06-26", y: 200, group: 3 },
{ x: "2014-06-27", y: 600, group: 3 },
{ x: "2014-06-28", y: 1000, group: 3 },
{ x: "2014-06-29", y: 250, group: 3 },
{ x: "2014-06-30", y: 300, group: 3 }
];
var dataset = new vis.DataSet(items);
var options = {
dataAxis: {
showMinorLabels: false,
right: {
title: {
text: "Title (right axis)"
}
}
},
legend: { left: { position: "bottom-left" } },
start: "2014-06-09",
end: "2014-07-03"
};
var graph2d = new vis.Graph2d(container, items, groups, options);
function showIcons(show) {
graph2d.setOptions({ dataAxis: { icons: show } });
}
function showTitle(axis, show) {
var title;
if (show == true) {
title = { text: "Title (" + axis + " axis)" };
} else {
title = { text: undefined };
}
if (axis == "left") {
graph2d.setOptions({ dataAxis: { left: { title: title } } });
} else {
graph2d.setOptions({ dataAxis: { right: { title: title } } });
}
}
var colors = ["red", "green", "blue", "black", "yellow", "purple", "pink"];
function styleTitle(axis) {
var title;
title = {
style: "color: " + colors[Math.floor(Math.random() * colors.length) + 1]
};
if (axis == "left") {
graph2d.setOptions({ dataAxis: { left: { title: title } } });
} else {
graph2d.setOptions({ dataAxis: { right: { title: title } } });
}
}
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
.custom-style1 {
fill: #f2ea00;
fill-opacity: 0;
stroke-width: 2px;
stroke: #b3ab00;
}
.custom-style2 {
fill: #00a0f2;
fill-opacity: 0;
stroke-width: 2px;
stroke: #050092;
}
.custom-style3 {
fill: #00f201;
fill-opacity: 0;
stroke-width: 2px;
stroke: #029200;
}
path.custom-style3.vis-fill {
fill-opacity: 0.5 !important;
stroke: none;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Axis Titles and Styling</h2>
<div style="width:800px; font-size:14px; text-align: justify;">
<table>
<tbody>
<tr>
<td>
This example shows setting a title for the left and right axis.
Optionally the example allows the user to show icons and labels on the
left and right axis.
</td>
<td>
<table>
<tbody>
<tr>
<td>
<input
type="button"
onclick="showIcons(true)"
value="Show Icons"
/>
</td>
<td>
<input
type="button"
onclick="showIcons(false)"
value="Hide Icons"
/>
</td>
</tr>
<tr>
<td>
<input
type="button"
onclick="showTitle('left', true)"
value="Show Left Title"
/>
</td>
<td>
<input
type="button"
onclick="showTitle('left', false)"
value="Hide Left Title"
/>
</td>
</tr>
<tr>
<td>
<input
type="button"
onclick="showTitle('right', true)"
value="Show Right Title"
/>
</td>
<td>
<input
type="button"
onclick="showTitle('right', false)"
value="Hide Right Title"
/>
</td>
</tr>
<tr>
<td>
<input
type="button"
onclick="styleTitle('left')"
value="Color Left Title"
/>
</td>
<td>
<input
type="button"
onclick="styleTitle('right')"
value="Color Right Title"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</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://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Graph2d | Axis Titles and 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.custom-style1 {\n fill: #f2ea00;\n fill-opacity: 0;\n stroke-width: 2px;\n stroke: #b3ab00;\n}\n\n.custom-style2 {\n fill: #00a0f2;\n fill-opacity: 0;\n stroke-width: 2px;\n stroke: #050092;\n}\n\n.custom-style3 {\n fill: #00f201;\n fill-opacity: 0;\n stroke-width: 2px;\n stroke: #029200;\n}\npath.custom-style3.vis-fill {\n fill-opacity: 0.5 !important;\n stroke: none;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h2>Graph2d | Axis Titles and Styling</h2>\n<div style=\"width:800px; font-size:14px; text-align: justify;\">\n <table>\n <tbody>\n <tr>\n <td>\n This example shows setting a title for the left and right axis.\n Optionally the example allows the user to show icons and labels on the\n left and right axis.\n </td>\n <td>\n <table>\n <tbody>\n <tr>\n <td>\n <input\n type=\"button\"\n onclick=\"showIcons(true)\"\n value=\"Show Icons\"\n />\n </td>\n <td>\n <input\n type=\"button\"\n onclick=\"showIcons(false)\"\n value=\"Hide Icons\"\n />\n </td>\n </tr>\n <tr>\n <td>\n <input\n type=\"button\"\n onclick=\"showTitle('left', true)\"\n value=\"Show Left Title\"\n />\n </td>\n <td>\n <input\n type=\"button\"\n onclick=\"showTitle('left', false)\"\n value=\"Hide Left Title\"\n />\n </td>\n </tr>\n <tr>\n <td>\n <input\n type=\"button\"\n onclick=\"showTitle('right', true)\"\n value=\"Show Right Title\"\n />\n </td>\n <td>\n <input\n type=\"button\"\n onclick=\"showTitle('right', false)\"\n value=\"Hide Right Title\"\n />\n </td>\n </tr>\n <tr>\n <td>\n <input\n type=\"button\"\n onclick=\"styleTitle('left')\"\n value=\"Color Left Title\"\n />\n </td>\n <td>\n <input\n type=\"button\"\n onclick=\"styleTitle('right')\"\n value=\"Color Right Title\"\n />\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n<br />\n<div id=\"visualization\"></div>\n","js":"// create a dataSet with groups\nvar names = [\"SquareShaded\", \"Bargraph\", \"Blank\", \"CircleShaded\"];\nvar groups = new vis.DataSet();\ngroups.add({\n id: 0,\n content: names[0],\n className: \"custom-style1\",\n options: {\n drawPoints: {\n style: \"square\" // square, circle\n },\n shaded: {\n orientation: \"bottom\" // top, bottom\n }\n }\n});\n\ngroups.add({\n id: 1,\n content: names[1],\n className: \"custom-style2\",\n options: {\n style: \"bar\",\n drawPoints: { style: \"circle\", size: 10 }\n }\n});\n\ngroups.add({\n id: 2,\n content: names[2],\n options: {\n yAxisOrientation: \"right\", // right, left\n drawPoints: false\n }\n});\n\ngroups.add({\n id: 3,\n content: names[3],\n className: \"custom-style3\",\n options: {\n yAxisOrientation: \"right\", // right, left\n drawPoints: {\n style: \"circle\" // square, circle\n },\n shaded: {\n orientation: \"top\" // top, bottom\n }\n }\n});\n\nvar container = document.getElementById(\"visualization\");\nvar items = [\n { x: \"2014-06-12\", y: 0, group: 0 },\n { x: \"2014-06-13\", y: 30, group: 0 },\n { x: \"2014-06-14\", y: 10, group: 0 },\n { x: \"2014-06-15\", y: 15, group: 1 },\n { x: \"2014-06-16\", y: 30, group: 1 },\n { x: \"2014-06-17\", y: 10, group: 1 },\n { x: \"2014-06-18\", y: 15, group: 1 },\n { x: \"2014-06-19\", y: 52, group: 1 },\n { x: \"2014-06-20\", y: 10, group: 1 },\n { x: \"2014-06-21\", y: 20, group: 2 },\n { x: \"2014-06-22\", y: 600, group: 2 },\n { x: \"2014-06-23\", y: 100, group: 2 },\n { x: \"2014-06-24\", y: 250, group: 2 },\n { x: \"2014-06-25\", y: 300, group: 2 },\n { x: \"2014-06-26\", y: 200, group: 3 },\n { x: \"2014-06-27\", y: 600, group: 3 },\n { x: \"2014-06-28\", y: 1000, group: 3 },\n { x: \"2014-06-29\", y: 250, group: 3 },\n { x: \"2014-06-30\", y: 300, group: 3 }\n];\n\nvar dataset = new vis.DataSet(items);\nvar options = {\n dataAxis: {\n showMinorLabels: false,\n right: {\n title: {\n text: \"Title (right axis)\"\n }\n }\n },\n legend: { left: { position: \"bottom-left\" } },\n start: \"2014-06-09\",\n end: \"2014-07-03\"\n};\nvar graph2d = new vis.Graph2d(container, items, groups, options);\n\nfunction showIcons(show) {\n graph2d.setOptions({ dataAxis: { icons: show } });\n}\n\nfunction showTitle(axis, show) {\n var title;\n if (show == true) {\n title = { text: \"Title (\" + axis + \" axis)\" };\n } else {\n title = { text: undefined };\n }\n\n if (axis == \"left\") {\n graph2d.setOptions({ dataAxis: { left: { title: title } } });\n } else {\n graph2d.setOptions({ dataAxis: { right: { title: title } } });\n }\n}\n\nvar colors = [\"red\", \"green\", \"blue\", \"black\", \"yellow\", \"purple\", \"pink\"];\nfunction styleTitle(axis) {\n var title;\n title = {\n style: \"color: \" + colors[Math.floor(Math.random() * colors.length) + 1]\n };\n\n if (axis == \"left\") {\n graph2d.setOptions({ dataAxis: { left: { title: title } } });\n } else {\n graph2d.setOptions({ dataAxis: { right: { title: title } } });\n }\n}\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Graph2d | Axis Titles and Styling"}'
/><input
type="hidden"
name="js"
value='// create a dataSet with groups
var names = ["SquareShaded", "Bargraph", "Blank", "CircleShaded"];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: "custom-style1",
options: {
drawPoints: {
style: "square" // square, circle
},
shaded: {
orientation: "bottom" // top, bottom
}
}
});
groups.add({
id: 1,
content: names[1],
className: "custom-style2",
options: {
style: "bar",
drawPoints: { style: "circle", size: 10 }
}
});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: "right", // right, left
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
className: "custom-style3",
options: {
yAxisOrientation: "right", // right, left
drawPoints: {
style: "circle" // square, circle
},
shaded: {
orientation: "top" // top, bottom
}
}
});
var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-12", y: 0, group: 0 },
{ x: "2014-06-13", y: 30, group: 0 },
{ x: "2014-06-14", y: 10, group: 0 },
{ x: "2014-06-15", y: 15, group: 1 },
{ x: "2014-06-16", y: 30, group: 1 },
{ x: "2014-06-17", y: 10, group: 1 },
{ x: "2014-06-18", y: 15, group: 1 },
{ x: "2014-06-19", y: 52, group: 1 },
{ x: "2014-06-20", y: 10, group: 1 },
{ x: "2014-06-21", y: 20, group: 2 },
{ x: "2014-06-22", y: 600, group: 2 },
{ x: "2014-06-23", y: 100, group: 2 },
{ x: "2014-06-24", y: 250, group: 2 },
{ x: "2014-06-25", y: 300, group: 2 },
{ x: "2014-06-26", y: 200, group: 3 },
{ x: "2014-06-27", y: 600, group: 3 },
{ x: "2014-06-28", y: 1000, group: 3 },
{ x: "2014-06-29", y: 250, group: 3 },
{ x: "2014-06-30", y: 300, group: 3 }
];
var dataset = new vis.DataSet(items);
var options = {
dataAxis: {
showMinorLabels: false,
right: {
title: {
text: "Title (right axis)"
}
}
},
legend: { left: { position: "bottom-left" } },
start: "2014-06-09",
end: "2014-07-03"
};
var graph2d = new vis.Graph2d(container, items, groups, options);
function showIcons(show) {
graph2d.setOptions({ dataAxis: { icons: show } });
}
function showTitle(axis, show) {
var title;
if (show == true) {
title = { text: "Title (" + axis + " axis)" };
} else {
title = { text: undefined };
}
if (axis == "left") {
graph2d.setOptions({ dataAxis: { left: { title: title } } });
} else {
graph2d.setOptions({ dataAxis: { right: { title: title } } });
}
}
var colors = ["red", "green", "blue", "black", "yellow", "purple", "pink"];
function styleTitle(axis) {
var title;
title = {
style: "color: " + colors[Math.floor(Math.random() * colors.length) + 1]
};
if (axis == "left") {
graph2d.setOptions({ dataAxis: { left: { title: title } } });
} else {
graph2d.setOptions({ dataAxis: { right: { title: title } } });
}
}
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
.custom-style1 {
fill: #f2ea00;
fill-opacity: 0;
stroke-width: 2px;
stroke: #b3ab00;
}
.custom-style2 {
fill: #00a0f2;
fill-opacity: 0;
stroke-width: 2px;
stroke: #050092;
}
.custom-style3 {
fill: #00f201;
fill-opacity: 0;
stroke-width: 2px;
stroke: #029200;
}
path.custom-style3.vis-fill {
fill-opacity: 0.5 !important;
stroke: none;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Axis Titles and Styling</h2>
<div style="width:800px; font-size:14px; text-align: justify;">
<table>
<tbody>
<tr>
<td>
This example shows setting a title for the left and right axis.
Optionally the example allows the user to show icons and labels on the
left and right axis.
</td>
<td>
<table>
<tbody>
<tr>
<td>
<input
type="button"
onclick="showIcons(true)"
value="Show Icons"
/>
</td>
<td>
<input
type="button"
onclick="showIcons(false)"
value="Hide Icons"
/>
</td>
</tr>
<tr>
<td>
<input
type="button"
onclick="showTitle('left', true)"
value="Show Left Title"
/>
</td>
<td>
<input
type="button"
onclick="showTitle('left', false)"
value="Hide Left Title"
/>
</td>
</tr>
<tr>
<td>
<input
type="button"
onclick="showTitle('right', true)"
value="Show Right Title"
/>
</td>
<td>
<input
type="button"
onclick="showTitle('right', false)"
value="Hide Right Title"
/>
</td>
</tr>
<tr>
<td>
<input
type="button"
onclick="styleTitle('left')"
value="Color Left Title"
/>
</td>
<td>
<input
type="button"
onclick="styleTitle('right')"
value="Color Right Title"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="16_bothAxisTitles.html"
><div class="example-image">
<img
src="thumbnails/9d1c81f6cadfe369c4fb40186a9fa666671c28065085ac7efe9ca555da38a22e.png"
alt="Axis Titles and Styling"
/></div></a></span
><span class="example-link"
><div>
<a href="02_bars.html">Bar Graph 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 = [
{ x: "2014-06-11", y: 10 },
{ x: "2014-06-12", y: 25 },
{ x: "2014-06-13", y: 30 },
{ x: "2014-06-14", y: 10 },
{ x: "2014-06-15", y: 15 },
{ x: "2014-06-16", y: 30 }
];
var dataset = new vis.DataSet(items);
var options = {
style: "bar",
barChart: { width: 50, align: "center" }, // align: left, center, right
drawPoints: false,
dataAxis: {
icons: true
},
orientation: "top",
start: "2014-06-10",
end: "2014-06-18"
};
var graph2d = new vis.Graph2d(container, items, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Bar Graph Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the most the same data as the first example, except we plot
the data as bars! The dataAxis (y-axis) icons have been enabled as well. These
icons are generated automatically from the CSS styling of the graphs. Finally,
we&apos;ve used the option from Timeline where we draw the x-axis (time-axis)
on top.
<br /><br />
The <code>align</code> option can be used to align the bar at the center of
the datapoint or on the left or right side of it. This example uses the
default center alignment.
</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://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Graph2d | Bar Graph 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}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h2>Graph2d | Bar Graph Example</h2>\n<div style=\"width:700px; font-size:14px; text-align: justify;\">\n This example shows the most the same data as the first example, except we plot\n the data as bars! The dataAxis (y-axis) icons have been enabled as well. These\n icons are generated automatically from the CSS styling of the graphs. Finally,\n we&apos;ve used the option from Timeline where we draw the x-axis (time-axis)\n on top.\n <br /><br />\n The <code>align</code> option can be used to align the bar at the center of\n the datapoint or on the left or right side of it. This example uses the\n default center alignment.\n</div>\n<br />\n\n<div id=\"visualization\"></div>\n","js":"var container = document.getElementById(\"visualization\");\nvar items = [\n { x: \"2014-06-11\", y: 10 },\n { x: \"2014-06-12\", y: 25 },\n { x: \"2014-06-13\", y: 30 },\n { x: \"2014-06-14\", y: 10 },\n { x: \"2014-06-15\", y: 15 },\n { x: \"2014-06-16\", y: 30 }\n];\n\nvar dataset = new vis.DataSet(items);\nvar options = {\n style: \"bar\",\n barChart: { width: 50, align: \"center\" }, // align: left, center, right\n drawPoints: false,\n dataAxis: {\n icons: true\n },\n orientation: \"top\",\n start: \"2014-06-10\",\n end: \"2014-06-18\"\n};\nvar graph2d = new vis.Graph2d(container, items, options);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Graph2d | Bar Graph Example"}'
/><input
type="hidden"
name="js"
value='var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-11", y: 10 },
{ x: "2014-06-12", y: 25 },
{ x: "2014-06-13", y: 30 },
{ x: "2014-06-14", y: 10 },
{ x: "2014-06-15", y: 15 },
{ x: "2014-06-16", y: 30 }
];
var dataset = new vis.DataSet(items);
var options = {
style: "bar",
barChart: { width: 50, align: "center" }, // align: left, center, right
drawPoints: false,
dataAxis: {
icons: true
},
orientation: "top",
start: "2014-06-10",
end: "2014-06-18"
};
var graph2d = new vis.Graph2d(container, items, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Bar Graph Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the most the same data as the first example, except we plot
the data as bars! The dataAxis (y-axis) icons have been enabled as well. These
icons are generated automatically from the CSS styling of the graphs. Finally,
we&apos;ve used the option from Timeline where we draw the x-axis (time-axis)
on top.
<br /><br />
The <code>align</code> option can be used to align the bar at the center of
the datapoint or on the left or right side of it. This example uses the
default center alignment.
</div>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="02_bars.html"
><div class="example-image">
<img
src="thumbnails/ec7621d5fc7ce566c4b2a5260be163eab31e679f658586a902871e554ea11319.png"
alt="Bar Graph Example"
/></div></a></span
><span class="example-link"
><div>
<a href="12_customRange.html">Bar Graph 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 groups = new vis.DataSet();
groups.add({ id: 0, content: "group0" });
groups.add({ id: 1, content: "group1" });
groups.add({
id: 2,
content: "group2",
options: { yAxisOrientation: "right" }
});
var items = [
{ x: "2014-06-11", y: 10, group: 0 },
{ x: "2014-06-12", y: 25, group: 0 },
{ x: "2014-06-13", y: 30, group: 0 },
{ x: "2014-06-14", y: 10, group: 0 },
{ x: "2014-06-15", y: 15, group: 0 },
{ x: "2014-06-16", y: 30, group: 0 },
{ x: "2014-06-11", y: 12, group: 1 },
{ x: "2014-06-12", y: 15, group: 1 },
{ x: "2014-06-13", y: 34, group: 1 },
{ x: "2014-06-14", y: 24, group: 1 },
{ x: "2014-06-15", y: 5, group: 1 },
{ x: "2014-06-16", y: 12, group: 1 },
{ x: "2014-06-11", y: 22, group: 2 },
{ x: "2014-06-12", y: 14, group: 2 },
{ x: "2014-06-13", y: 24, group: 2 },
{ x: "2014-06-14", y: 21, group: 2 },
{ x: "2014-06-15", y: 30, group: 2 },
{ x: "2014-06-16", y: 18, group: 2 }
];
var dataset = new vis.DataSet(items);
var options = {
style: "bar",
barChart: { width: 50, align: "center", sideBySide: true }, // align: left, center, right
drawPoints: true,
dataAxis: {
left: {
range: { min: -5, max: 30 }
},
right: {
range: { min: -5 }
},
icons: true
},
orientation: "top",
start: "2014-06-10",
end: "2014-06-18"
};
var graph2d = new vis.Graph2d(container, items, groups, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Custom axis range</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
You can define a custom range for the Y axis. Since there are two Y axis, you
can define both of them. You can also only define the min or max values. Since
one of the Y axis is slaved to the other one (the right one is slaved to the
left one), you cannot absolutely define the range of the slaved axis because
it has to use the same lines. The values you supply are used as guidelines
however. If the zero-lines have to be aligned, you can use the option
alignZeros. It is enabled by default.
<pre class="prettyprint lang-js">
var options = {
dataAxis: {
left: {
range: {min:-5, max:30}
},
right: {
range: {min:-5}
}
}
};
</pre
>
</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://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Graph2d | Bar Graph 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}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h2>Graph2d | Custom axis range</h2>\n<div style=\"width:700px; font-size:14px; text-align: justify;\">\n You can define a custom range for the Y axis. Since there are two Y axis, you\n can define both of them. You can also only define the min or max values. Since\n one of the Y axis is slaved to the other one (the right one is slaved to the\n left one), you cannot absolutely define the range of the slaved axis because\n it has to use the same lines. The values you supply are used as guidelines\n however. If the zero-lines have to be aligned, you can use the option\n alignZeros. It is enabled by default.\n\n <pre class=\"prettyprint lang-js\">\nvar options = {\n dataAxis: {\n left: {\n range: {min:-5, max:30}\n },\n right: {\n range: {min:-5}\n }\n }\n};\n</pre\n >\n</div>\n<br />\n\n<div id=\"visualization\"></div>\n","js":"var container = document.getElementById(\"visualization\");\nvar groups = new vis.DataSet();\ngroups.add({ id: 0, content: \"group0\" });\ngroups.add({ id: 1, content: \"group1\" });\ngroups.add({\n id: 2,\n content: \"group2\",\n options: { yAxisOrientation: \"right\" }\n});\n\nvar items = [\n { x: \"2014-06-11\", y: 10, group: 0 },\n { x: \"2014-06-12\", y: 25, group: 0 },\n { x: \"2014-06-13\", y: 30, group: 0 },\n { x: \"2014-06-14\", y: 10, group: 0 },\n { x: \"2014-06-15\", y: 15, group: 0 },\n { x: \"2014-06-16\", y: 30, group: 0 },\n { x: \"2014-06-11\", y: 12, group: 1 },\n { x: \"2014-06-12\", y: 15, group: 1 },\n { x: \"2014-06-13\", y: 34, group: 1 },\n { x: \"2014-06-14\", y: 24, group: 1 },\n { x: \"2014-06-15\", y: 5, group: 1 },\n { x: \"2014-06-16\", y: 12, group: 1 },\n { x: \"2014-06-11\", y: 22, group: 2 },\n { x: \"2014-06-12\", y: 14, group: 2 },\n { x: \"2014-06-13\", y: 24, group: 2 },\n { x: \"2014-06-14\", y: 21, group: 2 },\n { x: \"2014-06-15\", y: 30, group: 2 },\n { x: \"2014-06-16\", y: 18, group: 2 }\n];\n\nvar dataset = new vis.DataSet(items);\nvar options = {\n style: \"bar\",\n barChart: { width: 50, align: \"center\", sideBySide: true }, // align: left, center, right\n drawPoints: true,\n dataAxis: {\n left: {\n range: { min: -5, max: 30 }\n },\n right: {\n range: { min: -5 }\n },\n icons: true\n },\n orientation: \"top\",\n start: \"2014-06-10\",\n end: \"2014-06-18\"\n};\nvar graph2d = new vis.Graph2d(container, items, groups, options);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Graph2d | Bar Graph Example"}'
/><input
type="hidden"
name="js"
value='var container = document.getElementById("visualization");
var groups = new vis.DataSet();
groups.add({ id: 0, content: "group0" });
groups.add({ id: 1, content: "group1" });
groups.add({
id: 2,
content: "group2",
options: { yAxisOrientation: "right" }
});
var items = [
{ x: "2014-06-11", y: 10, group: 0 },
{ x: "2014-06-12", y: 25, group: 0 },
{ x: "2014-06-13", y: 30, group: 0 },
{ x: "2014-06-14", y: 10, group: 0 },
{ x: "2014-06-15", y: 15, group: 0 },
{ x: "2014-06-16", y: 30, group: 0 },
{ x: "2014-06-11", y: 12, group: 1 },
{ x: "2014-06-12", y: 15, group: 1 },
{ x: "2014-06-13", y: 34, group: 1 },
{ x: "2014-06-14", y: 24, group: 1 },
{ x: "2014-06-15", y: 5, group: 1 },
{ x: "2014-06-16", y: 12, group: 1 },
{ x: "2014-06-11", y: 22, group: 2 },
{ x: "2014-06-12", y: 14, group: 2 },
{ x: "2014-06-13", y: 24, group: 2 },
{ x: "2014-06-14", y: 21, group: 2 },
{ x: "2014-06-15", y: 30, group: 2 },
{ x: "2014-06-16", y: 18, group: 2 }
];
var dataset = new vis.DataSet(items);
var options = {
style: "bar",
barChart: { width: 50, align: "center", sideBySide: true }, // align: left, center, right
drawPoints: true,
dataAxis: {
left: {
range: { min: -5, max: 30 }
},
right: {
range: { min: -5 }
},
icons: true
},
orientation: "top",
start: "2014-06-10",
end: "2014-06-18"
};
var graph2d = new vis.Graph2d(container, items, groups, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Custom axis range</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
You can define a custom range for the Y axis. Since there are two Y axis, you
can define both of them. You can also only define the min or max values. Since
one of the Y axis is slaved to the other one (the right one is slaved to the
left one), you cannot absolutely define the range of the slaved axis because
it has to use the same lines. The values you supply are used as guidelines
however. If the zero-lines have to be aligned, you can use the option
alignZeros. It is enabled by default.
<pre class="prettyprint lang-js">
var options = {
dataAxis: {
left: {
range: {min:-5, max:30}
},
right: {
range: {min:-5}
}
}
};
</pre
>
</div>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="12_customRange.html"
><div class="example-image">
<img
src="thumbnails/497ef4c7ba075421409d94a13bb9ef2b60f8a9e48555072e1bc1505498d1fc3c.png"
alt="Bar Graph Example!"
/></div></a></span
><span class="example-link"
><div>
<a href="21_barsWithEnd.html">Bar Graph 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 = [
{ x: "2014-06-11 00:00:00", end: "2014-06-13 00:00:00", y: 10 },
{ x: "2014-06-13 00:00:00", end: "2014-06-14 00:00:00", y: 15 },
{ x: "2014-06-15 00:00:00", end: "2014-06-16 00:00:00", y: 14 },
{ x: "2014-06-16 00:00:00", end: "2014-06-17 00:00:00", y: 17 },
{ x: "2014-06-17 00:00:00", end: "2014-06-18 00:00:00", y: 20 },
{ x: "2014-06-18 00:00:00", end: "2014-06-25 00:00:00", y: 25 }
];
var dataset = new vis.DataSet(items);
var options = {
style: "bar",
drawPoints: false,
dataAxis: {
icons: true
},
orientation: "top",
start: "2014-06-10",
end: "2014-06-18"
};
var graph2d = new vis.Graph2d(container, items, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Bar Graph With End Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows how you can plot a bar chart and supply an end value to
have it fill.
</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://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Graph2d | Bar Graph 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}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h2>Graph2d | Bar Graph With End Example</h2>\n<div style=\"width:700px; font-size:14px; text-align: justify;\">\n This example shows how you can plot a bar chart and supply an end value to\n have it fill.\n</div>\n<br />\n\n<div id=\"visualization\"></div>\n","js":"var container = document.getElementById(\"visualization\");\nvar items = [\n { x: \"2014-06-11 00:00:00\", end: \"2014-06-13 00:00:00\", y: 10 },\n { x: \"2014-06-13 00:00:00\", end: \"2014-06-14 00:00:00\", y: 15 },\n { x: \"2014-06-15 00:00:00\", end: \"2014-06-16 00:00:00\", y: 14 },\n { x: \"2014-06-16 00:00:00\", end: \"2014-06-17 00:00:00\", y: 17 },\n { x: \"2014-06-17 00:00:00\", end: \"2014-06-18 00:00:00\", y: 20 },\n { x: \"2014-06-18 00:00:00\", end: \"2014-06-25 00:00:00\", y: 25 }\n];\n\nvar dataset = new vis.DataSet(items);\nvar options = {\n style: \"bar\",\n drawPoints: false,\n dataAxis: {\n icons: true\n },\n orientation: \"top\",\n start: \"2014-06-10\",\n end: \"2014-06-18\"\n};\nvar graph2d = new vis.Graph2d(container, items, options);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Graph2d | Bar Graph Example"}'
/><input
type="hidden"
name="js"
value='var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-11 00:00:00", end: "2014-06-13 00:00:00", y: 10 },
{ x: "2014-06-13 00:00:00", end: "2014-06-14 00:00:00", y: 15 },
{ x: "2014-06-15 00:00:00", end: "2014-06-16 00:00:00", y: 14 },
{ x: "2014-06-16 00:00:00", end: "2014-06-17 00:00:00", y: 17 },
{ x: "2014-06-17 00:00:00", end: "2014-06-18 00:00:00", y: 20 },
{ x: "2014-06-18 00:00:00", end: "2014-06-25 00:00:00", y: 25 }
];
var dataset = new vis.DataSet(items);
var options = {
style: "bar",
drawPoints: false,
dataAxis: {
icons: true
},
orientation: "top",
start: "2014-06-10",
end: "2014-06-18"
};
var graph2d = new vis.Graph2d(container, items, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Bar Graph With End Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows how you can plot a bar chart and supply an end value to
have it fill.
</div>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="21_barsWithEnd.html"
><div class="example-image">
<img
src="thumbnails/76eafdc1bd42681f76270a0ba1451ff5fd4173587bd7d5b766feb3369f46ecb7.png"
alt="Bar Graph Example!!"
/></div></a></span
><span class="example-link"
><div>
<a href="10_barsSideBySide.html"
>Bar Graphs Side by Side 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 = [
{ x: "2014-06-11", y: 10 },
{ x: "2014-06-12", y: 25 },
{ x: "2014-06-13", y: 30 },
{ x: "2014-06-14", y: 10 },
{ x: "2014-06-15", y: 15 },
{ x: "2014-06-16", y: 30 },
{ x: "2014-06-11", y: -12 },
{ x: "2014-06-14", y: 24 },
{ x: "2014-06-15", y: 5 },
{ x: "2014-06-16", y: 12 }
];
var dataset = new vis.DataSet(items);
var options = {
style: "bar",
stack: false,
barChart: { width: 50, align: "center", sideBySide: false }, // align: left, center, right
drawPoints: false,
dataAxis: {
icons: true
},
orientation: "top",
start: "2014-06-10",
end: "2014-06-18"
};
var graph2d = new vis.Graph2d(container, items, options);
var dropdown = document.getElementById("dropdownID");
dropdown.onchange = update;
function update() {
var options = {
stack: dropdown.value === "stack",
barChart: { sideBySide: dropdown.value === "sideBySide" }
};
graph2d.setOptions(options);
}
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Bar Graphs Side by Side Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
When using Bar graphs, it can often be the case that there are multiple bars
on the same timepoint. This may not always be the desired result. You can use
the barChart.handleOverlap option to automatically plot the bars next to
eachother or stacked on top of eachother if they occupy the same timeslot. By
default, this option is on, the bars overlap. Use the dropdown box to
experiment with the options. The stacked only really makes sense when using
groups as is shown in the
<a href="./11_barsSideBySideGroups.html">next example</a>.
<br /><br />
Handle overlap:
<select id="dropdownID">
<option value="overlap">overlap</option>
<option value="sideBySide">sideBySide</option>
<option value="stack">stack</option> </select
><br />
</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://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Graph2d | Bar Graphs Side by Side 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}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h2>Graph2d | Bar Graphs Side by Side Example</h2>\n<div style=\"width:700px; font-size:14px; text-align: justify;\">\n When using Bar graphs, it can often be the case that there are multiple bars\n on the same timepoint. This may not always be the desired result. You can use\n the barChart.handleOverlap option to automatically plot the bars next to\n eachother or stacked on top of eachother if they occupy the same timeslot. By\n default, this option is on, the bars overlap. Use the dropdown box to\n experiment with the options. The stacked only really makes sense when using\n groups as is shown in the\n <a href=\"./11_barsSideBySideGroups.html\">next example</a>.\n\n <br /><br />\n Handle overlap:\n <select id=\"dropdownID\">\n <option value=\"overlap\">overlap</option>\n <option value=\"sideBySide\">sideBySide</option>\n <option value=\"stack\">stack</option> </select\n ><br />\n</div>\n<br />\n\n<div id=\"visualization\"></div>\n","js":"var container = document.getElementById(\"visualization\");\nvar items = [\n { x: \"2014-06-11\", y: 10 },\n { x: \"2014-06-12\", y: 25 },\n { x: \"2014-06-13\", y: 30 },\n { x: \"2014-06-14\", y: 10 },\n { x: \"2014-06-15\", y: 15 },\n { x: \"2014-06-16\", y: 30 },\n { x: \"2014-06-11\", y: -12 },\n { x: \"2014-06-14\", y: 24 },\n { x: \"2014-06-15\", y: 5 },\n { x: \"2014-06-16\", y: 12 }\n];\n\nvar dataset = new vis.DataSet(items);\nvar options = {\n style: \"bar\",\n stack: false,\n barChart: { width: 50, align: \"center\", sideBySide: false }, // align: left, center, right\n drawPoints: false,\n dataAxis: {\n icons: true\n },\n orientation: \"top\",\n start: \"2014-06-10\",\n end: \"2014-06-18\"\n};\nvar graph2d = new vis.Graph2d(container, items, options);\n\nvar dropdown = document.getElementById(\"dropdownID\");\ndropdown.onchange = update;\n\nfunction update() {\n var options = {\n stack: dropdown.value === \"stack\",\n barChart: { sideBySide: dropdown.value === \"sideBySide\" }\n };\n graph2d.setOptions(options);\n}\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Graph2d | Bar Graphs Side by Side Example"}'
/><input
type="hidden"
name="js"
value='var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-11", y: 10 },
{ x: "2014-06-12", y: 25 },
{ x: "2014-06-13", y: 30 },
{ x: "2014-06-14", y: 10 },
{ x: "2014-06-15", y: 15 },
{ x: "2014-06-16", y: 30 },
{ x: "2014-06-11", y: -12 },
{ x: "2014-06-14", y: 24 },
{ x: "2014-06-15", y: 5 },
{ x: "2014-06-16", y: 12 }
];
var dataset = new vis.DataSet(items);
var options = {
style: "bar",
stack: false,
barChart: { width: 50, align: "center", sideBySide: false }, // align: left, center, right
drawPoints: false,
dataAxis: {
icons: true
},
orientation: "top",
start: "2014-06-10",
end: "2014-06-18"
};
var graph2d = new vis.Graph2d(container, items, options);
var dropdown = document.getElementById("dropdownID");
dropdown.onchange = update;
function update() {
var options = {
stack: dropdown.value === "stack",
barChart: { sideBySide: dropdown.value === "sideBySide" }
};
graph2d.setOptions(options);
}
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Bar Graphs Side by Side Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
When using Bar graphs, it can often be the case that there are multiple bars
on the same timepoint. This may not always be the desired result. You can use
the barChart.handleOverlap option to automatically plot the bars next to
eachother or stacked on top of eachother if they occupy the same timeslot. By
default, this option is on, the bars overlap. Use the dropdown box to
experiment with the options. The stacked only really makes sense when using
groups as is shown in the
<a href="./11_barsSideBySideGroups.html">next example</a>.
<br /><br />
Handle overlap:
<select id="dropdownID">
<option value="overlap">overlap</option>
<option value="sideBySide">sideBySide</option>
<option value="stack">stack</option> </select
><br />
</div>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="10_barsSideBySide.html"
><div class="example-image">
<img
src="thumbnails/ea406128ee0008077b2f7e76cad2b850a07a497d85418bd0c504be7486581724.png"
alt="Bar Graphs Side by Side Example"
/></div></a></span
><span class="example-link"
><div>
<a href="11_barsSideBySideGroups.html"
>Bar Graphs Side by Side Example 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 container = document.getElementById("visualization");
var groups = new vis.DataSet();
groups.add({ id: 0, content: "group0" });
groups.add({ id: 1, content: "group1" });
groups.add({ id: 2, content: "group2" });
var items = [
{ x: "2014-06-11", y: 10, group: 0 },
{ x: "2014-06-12", y: 25, group: 0 },
{ x: "2014-06-13", y: 30, group: 0 },
{ x: "2014-06-14", y: 10, group: 0 },
{ x: "2014-06-15", y: 15, group: 0 },
{ x: "2014-06-16", y: 30, group: 0 },
{ x: "2014-06-11", y: 12, group: 1 },
{ x: "2014-06-12", y: 15, group: 1 },
{ x: "2014-06-13", y: 34, group: 1 },
{ x: "2014-06-14", y: 24, group: 1 },
{ x: "2014-06-15", y: 5, group: 1 },
{ x: "2014-06-16", y: 12, group: 1 },
{ x: "2014-06-11", y: 22, group: 2 },
{ x: "2014-06-12", y: 14, group: 2 },
{ x: "2014-06-13", y: 24, group: 2 },
{ x: "2014-06-14", y: 21, group: 2 },
{ x: "2014-06-15", y: 30, group: 2 },
{ x: "2014-06-16", y: 18, group: 2 }
];
var dataset = new vis.DataSet(items);
var options = {
style: "bar",
stack: false,
barChart: { width: 50, align: "center", sideBySide: true }, // align: left, center, right
drawPoints: false,
dataAxis: {
icons: true
},
orientation: "top",
start: "2014-06-10",
end: "2014-06-18"
};
var graph2d = new vis.Graph2d(container, items, groups, options);
var dropdown = document.getElementById("dropdownID");
dropdown.onchange = update;
function update() {
var options = {
stack: dropdown.value === "stack",
barChart: { sideBySide: dropdown.value === "sideBySide" }
};
graph2d.setOptions(options);
}
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Bar Graphs Side by Side Example with Groups</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
When using Bar graphs, it can often be the case that there are multiple bars
on the same timepoint. This may not always be the desired result. You can use
the barChart.handleOverlap option to automatically plot the bars next to
eachother or stacked on top of eachother if they occupy the same timeslot. By
default, this option is on, the bars overlap. Use the dropdown box to
experiment with the options. The stacked only really makes sense when using
groups as is shown here.
<br /><br />
Handle overlap:
<select id="dropdownID">
<option value="overlap">overlap</option>
<option value="sideBySide" selected="selected">sideBySide</option>
<option value="stack">stack</option>
</select>
</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://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Graph2d | Bar Graphs Side by Side Example 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: sans-serif;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h2>Graph2d | Bar Graphs Side by Side Example with Groups</h2>\n<div style=\"width:700px; font-size:14px; text-align: justify;\">\n When using Bar graphs, it can often be the case that there are multiple bars\n on the same timepoint. This may not always be the desired result. You can use\n the barChart.handleOverlap option to automatically plot the bars next to\n eachother or stacked on top of eachother if they occupy the same timeslot. By\n default, this option is on, the bars overlap. Use the dropdown box to\n experiment with the options. The stacked only really makes sense when using\n groups as is shown here.\n\n <br /><br />\n Handle overlap:\n <select id=\"dropdownID\">\n <option value=\"overlap\">overlap</option>\n <option value=\"sideBySide\" selected=\"selected\">sideBySide</option>\n <option value=\"stack\">stack</option>\n </select>\n</div>\n<br />\n\n<div id=\"visualization\"></div>\n","js":"var container = document.getElementById(\"visualization\");\nvar groups = new vis.DataSet();\ngroups.add({ id: 0, content: \"group0\" });\ngroups.add({ id: 1, content: \"group1\" });\ngroups.add({ id: 2, content: \"group2\" });\n\nvar items = [\n { x: \"2014-06-11\", y: 10, group: 0 },\n { x: \"2014-06-12\", y: 25, group: 0 },\n { x: \"2014-06-13\", y: 30, group: 0 },\n { x: \"2014-06-14\", y: 10, group: 0 },\n { x: \"2014-06-15\", y: 15, group: 0 },\n { x: \"2014-06-16\", y: 30, group: 0 },\n { x: \"2014-06-11\", y: 12, group: 1 },\n { x: \"2014-06-12\", y: 15, group: 1 },\n { x: \"2014-06-13\", y: 34, group: 1 },\n { x: \"2014-06-14\", y: 24, group: 1 },\n { x: \"2014-06-15\", y: 5, group: 1 },\n { x: \"2014-06-16\", y: 12, group: 1 },\n { x: \"2014-06-11\", y: 22, group: 2 },\n { x: \"2014-06-12\", y: 14, group: 2 },\n { x: \"2014-06-13\", y: 24, group: 2 },\n { x: \"2014-06-14\", y: 21, group: 2 },\n { x: \"2014-06-15\", y: 30, group: 2 },\n { x: \"2014-06-16\", y: 18, group: 2 }\n];\n\nvar dataset = new vis.DataSet(items);\nvar options = {\n style: \"bar\",\n stack: false,\n barChart: { width: 50, align: \"center\", sideBySide: true }, // align: left, center, right\n drawPoints: false,\n dataAxis: {\n icons: true\n },\n orientation: \"top\",\n start: \"2014-06-10\",\n end: \"2014-06-18\"\n};\nvar graph2d = new vis.Graph2d(container, items, groups, options);\n\nvar dropdown = document.getElementById(\"dropdownID\");\ndropdown.onchange = update;\n\nfunction update() {\n var options = {\n stack: dropdown.value === \"stack\",\n barChart: { sideBySide: dropdown.value === \"sideBySide\" }\n };\n graph2d.setOptions(options);\n}\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Graph2d | Bar Graphs Side by Side Example with Groups"}'
/><input
type="hidden"
name="js"
value='var container = document.getElementById("visualization");
var groups = new vis.DataSet();
groups.add({ id: 0, content: "group0" });
groups.add({ id: 1, content: "group1" });
groups.add({ id: 2, content: "group2" });
var items = [
{ x: "2014-06-11", y: 10, group: 0 },
{ x: "2014-06-12", y: 25, group: 0 },
{ x: "2014-06-13", y: 30, group: 0 },
{ x: "2014-06-14", y: 10, group: 0 },
{ x: "2014-06-15", y: 15, group: 0 },
{ x: "2014-06-16", y: 30, group: 0 },
{ x: "2014-06-11", y: 12, group: 1 },
{ x: "2014-06-12", y: 15, group: 1 },
{ x: "2014-06-13", y: 34, group: 1 },
{ x: "2014-06-14", y: 24, group: 1 },
{ x: "2014-06-15", y: 5, group: 1 },
{ x: "2014-06-16", y: 12, group: 1 },
{ x: "2014-06-11", y: 22, group: 2 },
{ x: "2014-06-12", y: 14, group: 2 },
{ x: "2014-06-13", y: 24, group: 2 },
{ x: "2014-06-14", y: 21, group: 2 },
{ x: "2014-06-15", y: 30, group: 2 },
{ x: "2014-06-16", y: 18, group: 2 }
];
var dataset = new vis.DataSet(items);
var options = {
style: "bar",
stack: false,
barChart: { width: 50, align: "center", sideBySide: true }, // align: left, center, right
drawPoints: false,
dataAxis: {
icons: true
},
orientation: "top",
start: "2014-06-10",
end: "2014-06-18"
};
var graph2d = new vis.Graph2d(container, items, groups, options);
var dropdown = document.getElementById("dropdownID");
dropdown.onchange = update;
function update() {
var options = {
stack: dropdown.value === "stack",
barChart: { sideBySide: dropdown.value === "sideBySide" }
};
graph2d.setOptions(options);
}
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Bar Graphs Side by Side Example with Groups</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
When using Bar graphs, it can often be the case that there are multiple bars
on the same timepoint. This may not always be the desired result. You can use
the barChart.handleOverlap option to automatically plot the bars next to
eachother or stacked on top of eachother if they occupy the same timeslot. By
default, this option is on, the bars overlap. Use the dropdown box to
experiment with the options. The stacked only really makes sense when using
groups as is shown here.
<br /><br />
Handle overlap:
<select id="dropdownID">
<option value="overlap">overlap</option>
<option value="sideBySide" selected="selected">sideBySide</option>
<option value="stack">stack</option>
</select>
</div>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="11_barsSideBySideGroups.html"
><div class="example-image">
<img
src="thumbnails/d42b7f43c29fc1cb67f78a51136de73cd96d6bba7f21572b4d868f1937235f03.png"
alt="Bar Graphs Side by Side Example with Groups"
/></div></a></span
><span class="example-link"
><div>
<a href="01_basic.html">Basic 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 = [
{ x: "2014-06-11", y: 10 },
{ x: "2014-06-12", y: 25 },
{ x: "2014-06-13", y: 30 },
{ x: "2014-06-14", y: 10 },
{ x: "2014-06-15", y: 15 },
{ x: "2014-06-16", y: 30 }
];
var dataset = new vis.DataSet(items);
var options = {
start: "2014-06-10",
end: "2014-06-18"
};
var graph2d = new vis.Graph2d(container, dataset, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Basic Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the most basic functionality of the vis.js Graph2d module.
An array or a vis.Dataset can be used as input. In the following examples
we&apos;ll explore the options Graph2d offest for customization. This example
uses all default settings. There are 10 predefined styles that will be cycled
through automatically when you add different groups. Alternatively you can
create your own styling.
<br /><br />
Graph2d is built upon the framework of the newly refactored timeline. A lot of
the timeline options will also apply to Graph2d. In these examples however, we
will focus on what&apos;s new in Graph2d!
</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://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Graph2d | Basic 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}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h2>Graph2d | Basic Example</h2>\n<div style=\"width:700px; font-size:14px; text-align: justify;\">\n This example shows the most basic functionality of the vis.js Graph2d module.\n An array or a vis.Dataset can be used as input. In the following examples\n we&apos;ll explore the options Graph2d offest for customization. This example\n uses all default settings. There are 10 predefined styles that will be cycled\n through automatically when you add different groups. Alternatively you can\n create your own styling.\n <br /><br />\n Graph2d is built upon the framework of the newly refactored timeline. A lot of\n the timeline options will also apply to Graph2d. In these examples however, we\n will focus on what&apos;s new in Graph2d!\n</div>\n<br />\n<div id=\"visualization\"></div>\n","js":"var container = document.getElementById(\"visualization\");\nvar items = [\n { x: \"2014-06-11\", y: 10 },\n { x: \"2014-06-12\", y: 25 },\n { x: \"2014-06-13\", y: 30 },\n { x: \"2014-06-14\", y: 10 },\n { x: \"2014-06-15\", y: 15 },\n { x: \"2014-06-16\", y: 30 }\n];\n\nvar dataset = new vis.DataSet(items);\nvar options = {\n start: \"2014-06-10\",\n end: \"2014-06-18\"\n};\nvar graph2d = new vis.Graph2d(container, dataset, options);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Graph2d | Basic Example"}'
/><input
type="hidden"
name="js"
value='var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-11", y: 10 },
{ x: "2014-06-12", y: 25 },
{ x: "2014-06-13", y: 30 },
{ x: "2014-06-14", y: 10 },
{ x: "2014-06-15", y: 15 },
{ x: "2014-06-16", y: 30 }
];
var dataset = new vis.DataSet(items);
var options = {
start: "2014-06-10",
end: "2014-06-18"
};
var graph2d = new vis.Graph2d(container, dataset, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Basic Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the most basic functionality of the vis.js Graph2d module.
An array or a vis.Dataset can be used as input. In the following examples
we&apos;ll explore the options Graph2d offest for customization. This example
uses all default settings. There are 10 predefined styles that will be cycled
through automatically when you add different groups. Alternatively you can
create your own styling.
<br /><br />
Graph2d is built upon the framework of the newly refactored timeline. A lot of
the timeline options will also apply to Graph2d. In these examples however, we
will focus on what&apos;s new in Graph2d!
</div>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="01_basic.html"
><div class="example-image">
<img
src="thumbnails/09e7f1d995f6f20c3d4272892981b24757b039f3bf6eb3f212bf3a65bdb06215.png"
alt="Basic Example"
/></div></a></span
><span class="example-link"
><div>
<a href="19_labels.html">Basic 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 label1 = {
content: "Label 1 (with offset)",
xOffset: 20,
yOffset: 20
};
var label2 = {
content: "Label 2",
className: "red"
};
var label3 = {
content: "Label 3"
};
var items = [
{ group: 1, x: "2014-06-11", y: 10, label: label1 },
{ group: 1, x: "2014-06-12", y: 25, label: label2 },
{ group: 1, x: "2014-06-13", y: 30 },
{ group: 1, x: "2014-06-14", y: 10 },
{ group: 1, x: "2014-06-15", y: 15, label: label3 },
{ group: 1, x: "2014-06-16", y: 30 },
{ group: 2, x: "2014-06-17", y: 10, label: label1 },
{ group: 2, x: "2014-06-18", y: 25, label: label2 },
{ group: 2, x: "2014-06-19", y: 30 },
{ group: 2, x: "2014-06-20", y: 10 },
{ group: 2, x: "2014-06-21", y: 15, label: label3 },
{ group: 2, x: "2014-06-22", y: 30 },
{ group: 3, x: "2014-06-23", y: 10, label: label1 },
{ group: 3, x: "2014-06-24", y: 25, label: label2 },
{ group: 3, x: "2014-06-25", y: 30 },
{ group: 3, x: "2014-06-26", y: 10 },
{ group: 3, x: "2014-06-27", y: 15, label: label3 },
{ group: 3, x: "2014-06-28", y: 30 }
];
var groups = new vis.DataSet();
groups.add({
id: 1,
content:
"Only draw items with labels. Make the data point bigger and a square.",
options: {
drawPoints: function group1Renderer(item, group, grap2d) {
if (item.label == null) {
return false;
}
return {
style: "square",
size: 15
};
}
}
});
groups.add({
id: 2,
content:
"Draw according to the Graph2d callback, but make it every datapoint square one.",
options: {
drawPoints: {
style: "square"
}
}
});
groups.add({
id: 3,
content:
"I want to render datapoints with no labels. Screw the graph2d options. Except the style/size should be according to the graph2d option.",
options: {
drawPoints: function(item, group, grap2d) {
return item.label == null;
}
}
});
var dataset = new vis.DataSet(items);
var options = {
start: "2014-06-10",
end: "2014-06-29",
style: "bar",
drawPoints: {
onRender: function(item, group, grap2d) {
return item.label != null;
},
style: "circle"
}
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
.red {
fill: red;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Label Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the how to add a label to each point in Graph2d. Each item
can have a label object which contains the content and CSS class.In addition,
xOffset and yOffset will adjust the location of the label relative to the
point being labelled.
<br /><br />
</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://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Graph2d | Basic 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}\n\n.red {\n fill: red;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h2>Graph2d | Label Example</h2>\n<div style=\"width:700px; font-size:14px; text-align: justify;\">\n This example shows the how to add a label to each point in Graph2d. Each item\n can have a label object which contains the content and CSS class.In addition,\n xOffset and yOffset will adjust the location of the label relative to the\n point being labelled.\n\n <br /><br />\n</div>\n<br />\n<div id=\"visualization\"></div>\n","js":"var container = document.getElementById(\"visualization\");\nvar label1 = {\n content: \"Label 1 (with offset)\",\n xOffset: 20,\n yOffset: 20\n};\n\nvar label2 = {\n content: \"Label 2\",\n className: \"red\"\n};\n\nvar label3 = {\n content: \"Label 3\"\n};\nvar items = [\n { group: 1, x: \"2014-06-11\", y: 10, label: label1 },\n { group: 1, x: \"2014-06-12\", y: 25, label: label2 },\n { group: 1, x: \"2014-06-13\", y: 30 },\n { group: 1, x: \"2014-06-14\", y: 10 },\n { group: 1, x: \"2014-06-15\", y: 15, label: label3 },\n { group: 1, x: \"2014-06-16\", y: 30 },\n\n { group: 2, x: \"2014-06-17\", y: 10, label: label1 },\n { group: 2, x: \"2014-06-18\", y: 25, label: label2 },\n { group: 2, x: \"2014-06-19\", y: 30 },\n { group: 2, x: \"2014-06-20\", y: 10 },\n { group: 2, x: \"2014-06-21\", y: 15, label: label3 },\n { group: 2, x: \"2014-06-22\", y: 30 },\n\n { group: 3, x: \"2014-06-23\", y: 10, label: label1 },\n { group: 3, x: \"2014-06-24\", y: 25, label: label2 },\n { group: 3, x: \"2014-06-25\", y: 30 },\n { group: 3, x: \"2014-06-26\", y: 10 },\n { group: 3, x: \"2014-06-27\", y: 15, label: label3 },\n { group: 3, x: \"2014-06-28\", y: 30 }\n];\n\nvar groups = new vis.DataSet();\ngroups.add({\n id: 1,\n content:\n \"Only draw items with labels. Make the data point bigger and a square.\",\n options: {\n drawPoints: function group1Renderer(item, group, grap2d) {\n if (item.label == null) {\n return false;\n }\n return {\n style: \"square\",\n size: 15\n };\n }\n }\n});\n\ngroups.add({\n id: 2,\n content:\n \"Draw according to the Graph2d callback, but make it every datapoint square one.\",\n options: {\n drawPoints: {\n style: \"square\"\n }\n }\n});\n\ngroups.add({\n id: 3,\n content:\n \"I want to render datapoints with no labels. Screw the graph2d options. Except the style/size should be according to the graph2d option.\",\n options: {\n drawPoints: function(item, group, grap2d) {\n return item.label == null;\n }\n }\n});\n\nvar dataset = new vis.DataSet(items);\nvar options = {\n start: \"2014-06-10\",\n end: \"2014-06-29\",\n style: \"bar\",\n drawPoints: {\n onRender: function(item, group, grap2d) {\n return item.label != null;\n },\n style: \"circle\"\n }\n};\n\nvar graph2d = new vis.Graph2d(container, dataset, groups, options);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Graph2d | Basic Example"}'
/><input
type="hidden"
name="js"
value='var container = document.getElementById("visualization");
var label1 = {
content: "Label 1 (with offset)",
xOffset: 20,
yOffset: 20
};
var label2 = {
content: "Label 2",
className: "red"
};
var label3 = {
content: "Label 3"
};
var items = [
{ group: 1, x: "2014-06-11", y: 10, label: label1 },
{ group: 1, x: "2014-06-12", y: 25, label: label2 },
{ group: 1, x: "2014-06-13", y: 30 },
{ group: 1, x: "2014-06-14", y: 10 },
{ group: 1, x: "2014-06-15", y: 15, label: label3 },
{ group: 1, x: "2014-06-16", y: 30 },
{ group: 2, x: "2014-06-17", y: 10, label: label1 },
{ group: 2, x: "2014-06-18", y: 25, label: label2 },
{ group: 2, x: "2014-06-19", y: 30 },
{ group: 2, x: "2014-06-20", y: 10 },
{ group: 2, x: "2014-06-21", y: 15, label: label3 },
{ group: 2, x: "2014-06-22", y: 30 },
{ group: 3, x: "2014-06-23", y: 10, label: label1 },
{ group: 3, x: "2014-06-24", y: 25, label: label2 },
{ group: 3, x: "2014-06-25", y: 30 },
{ group: 3, x: "2014-06-26", y: 10 },
{ group: 3, x: "2014-06-27", y: 15, label: label3 },
{ group: 3, x: "2014-06-28", y: 30 }
];
var groups = new vis.DataSet();
groups.add({
id: 1,
content:
"Only draw items with labels. Make the data point bigger and a square.",
options: {
drawPoints: function group1Renderer(item, group, grap2d) {
if (item.label == null) {
return false;
}
return {
style: "square",
size: 15
};
}
}
});
groups.add({
id: 2,
content:
"Draw according to the Graph2d callback, but make it every datapoint square one.",
options: {
drawPoints: {
style: "square"
}
}
});
groups.add({
id: 3,
content:
"I want to render datapoints with no labels. Screw the graph2d options. Except the style/size should be according to the graph2d option.",
options: {
drawPoints: function(item, group, grap2d) {
return item.label == null;
}
}
});
var dataset = new vis.DataSet(items);
var options = {
start: "2014-06-10",
end: "2014-06-29",
style: "bar",
drawPoints: {
onRender: function(item, group, grap2d) {
return item.label != null;
},
style: "circle"
}
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
.red {
fill: red;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Label Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the how to add a label to each point in Graph2d. Each item
can have a label object which contains the content and CSS class.In addition,
xOffset and yOffset will adjust the location of the label relative to the
point being labelled.
<br /><br />
</div>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="19_labels.html"
><div class="example-image">
<img
src="thumbnails/ceb17a57863b02f20dbd60d9ed6e9da7475540ed952acff2a74ddb9a186fed5b.png"
alt="Basic Example!"
/></div></a></span
><span class="example-link"
><div>
<a href="05_bothAxis.html">Both Axis 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 groups
var names = ["SquareShaded", "Bargraph", "Blank", "CircleShaded"];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: "custom-style1",
options: {
drawPoints: {
style: "square" // square, circle
},
shaded: {
orientation: "bottom" // top, bottom
}
}
});
groups.add({
id: 1,
content: names[1],
className: "custom-style2",
options: {
style: "bar",
drawPoints: { style: "circle", size: 10 }
}
});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: "right", // right, left
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
className: "custom-style3",
options: {
yAxisOrientation: "right", // right, left
drawPoints: {
style: "circle" // square, circle
},
shaded: {
orientation: "top" // top, bottom
}
}
});
var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-12", y: 0, group: 0 },
{ x: "2014-06-13", y: 30, group: 0 },
{ x: "2014-06-14", y: 10, group: 0 },
{ x: "2014-06-15", y: 15, group: 1 },
{ x: "2014-06-16", y: 30, group: 1 },
{ x: "2014-06-17", y: 10, group: 1 },
{ x: "2014-06-18", y: 15, group: 1 },
{ x: "2014-06-19", y: 52, group: 1 },
{ x: "2014-06-20", y: 10, group: 1 },
{ x: "2014-06-21", y: 20, group: 2 },
{ x: "2014-06-22", y: 600, group: 2 },
{ x: "2014-06-23", y: 100, group: 2 },
{ x: "2014-06-24", y: 250, group: 2 },
{ x: "2014-06-25", y: 300, group: 2 },
{ x: "2014-06-26", y: 200, group: 3 },
{ x: "2014-06-27", y: 600, group: 3 },
{ x: "2014-06-28", y: 1000, group: 3 },
{ x: "2014-06-29", y: 250, group: 3 },
{ x: "2014-06-30", y: 300, group: 3 }
];
var dataset = new vis.DataSet(items);
var options = {
dataAxis: { showMinorLabels: false },
legend: { left: { position: "bottom-left" } },
start: "2014-06-09",
end: "2014-07-03"
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
.custom-style1 {
fill: #f2ea00;
fill-opacity: 0;
stroke-width: 2px;
stroke: #b3ab00;
}
.custom-style2 {
fill: #00a0f2;
stroke-width: 2px;
stroke: #050092;
}
.custom-style3 {
fill: #00f201;
fill-opacity: 0;
stroke-width: 2px;
stroke: #029200;
}
path.custom-style3.vis-fill {
fill-opacity: 0.5 !important;
stroke: none;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Both Axis Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the some of the graphs outlined on the right side using the
<code>yAxisOrientation</code> option within the groups. We also show a few
more custom styles for the graphs. Finally, the legend is manually positioned.
Both the left and right axis have their own legend. If one of the axis is
unused, the legend is not shown. The options for the legend have been split in
a <code>left</code> and a <code>right</code> segment. The default position of
the left axis has been changed.
</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://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Graph2d | Both Axis 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}\n\n.custom-style1 {\n fill: #f2ea00;\n fill-opacity: 0;\n stroke-width: 2px;\n stroke: #b3ab00;\n}\n\n.custom-style2 {\n fill: #00a0f2;\n stroke-width: 2px;\n stroke: #050092;\n}\n\n.custom-style3 {\n fill: #00f201;\n fill-opacity: 0;\n stroke-width: 2px;\n stroke: #029200;\n}\npath.custom-style3.vis-fill {\n fill-opacity: 0.5 !important;\n stroke: none;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h2>Graph2d | Both Axis Example</h2>\n<div style=\"width:700px; font-size:14px; text-align: justify;\">\n This example shows the some of the graphs outlined on the right side using the\n <code>yAxisOrientation</code> option within the groups. We also show a few\n more custom styles for the graphs. Finally, the legend is manually positioned.\n Both the left and right axis have their own legend. If one of the axis is\n unused, the legend is not shown. The options for the legend have been split in\n a <code>left</code> and a <code>right</code> segment. The default position of\n the left axis has been changed.\n</div>\n<br />\n<div id=\"visualization\"></div>\n","js":"// create a dataSet with groups\nvar names = [\"SquareShaded\", \"Bargraph\", \"Blank\", \"CircleShaded\"];\nvar groups = new vis.DataSet();\ngroups.add({\n id: 0,\n content: names[0],\n className: \"custom-style1\",\n options: {\n drawPoints: {\n style: \"square\" // square, circle\n },\n shaded: {\n orientation: \"bottom\" // top, bottom\n }\n }\n});\n\ngroups.add({\n id: 1,\n content: names[1],\n className: \"custom-style2\",\n options: {\n style: \"bar\",\n drawPoints: { style: \"circle\", size: 10 }\n }\n});\n\ngroups.add({\n id: 2,\n content: names[2],\n options: {\n yAxisOrientation: \"right\", // right, left\n drawPoints: false\n }\n});\n\ngroups.add({\n id: 3,\n content: names[3],\n className: \"custom-style3\",\n options: {\n yAxisOrientation: \"right\", // right, left\n drawPoints: {\n style: \"circle\" // square, circle\n },\n shaded: {\n orientation: \"top\" // top, bottom\n }\n }\n});\n\nvar container = document.getElementById(\"visualization\");\nvar items = [\n { x: \"2014-06-12\", y: 0, group: 0 },\n { x: \"2014-06-13\", y: 30, group: 0 },\n { x: \"2014-06-14\", y: 10, group: 0 },\n { x: \"2014-06-15\", y: 15, group: 1 },\n { x: \"2014-06-16\", y: 30, group: 1 },\n { x: \"2014-06-17\", y: 10, group: 1 },\n { x: \"2014-06-18\", y: 15, group: 1 },\n { x: \"2014-06-19\", y: 52, group: 1 },\n { x: \"2014-06-20\", y: 10, group: 1 },\n { x: \"2014-06-21\", y: 20, group: 2 },\n { x: \"2014-06-22\", y: 600, group: 2 },\n { x: \"2014-06-23\", y: 100, group: 2 },\n { x: \"2014-06-24\", y: 250, group: 2 },\n { x: \"2014-06-25\", y: 300, group: 2 },\n { x: \"2014-06-26\", y: 200, group: 3 },\n { x: \"2014-06-27\", y: 600, group: 3 },\n { x: \"2014-06-28\", y: 1000, group: 3 },\n { x: \"2014-06-29\", y: 250, group: 3 },\n { x: \"2014-06-30\", y: 300, group: 3 }\n];\n\nvar dataset = new vis.DataSet(items);\nvar options = {\n dataAxis: { showMinorLabels: false },\n legend: { left: { position: \"bottom-left\" } },\n start: \"2014-06-09\",\n end: \"2014-07-03\"\n};\nvar graph2d = new vis.Graph2d(container, dataset, groups, options);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Graph2d | Both Axis Example"}'
/><input
type="hidden"
name="js"
value='// create a dataSet with groups
var names = ["SquareShaded", "Bargraph", "Blank", "CircleShaded"];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: "custom-style1",
options: {
drawPoints: {
style: "square" // square, circle
},
shaded: {
orientation: "bottom" // top, bottom
}
}
});
groups.add({
id: 1,
content: names[1],
className: "custom-style2",
options: {
style: "bar",
drawPoints: { style: "circle", size: 10 }
}
});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: "right", // right, left
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
className: "custom-style3",
options: {
yAxisOrientation: "right", // right, left
drawPoints: {
style: "circle" // square, circle
},
shaded: {
orientation: "top" // top, bottom
}
}
});
var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-12", y: 0, group: 0 },
{ x: "2014-06-13", y: 30, group: 0 },
{ x: "2014-06-14", y: 10, group: 0 },
{ x: "2014-06-15", y: 15, group: 1 },
{ x: "2014-06-16", y: 30, group: 1 },
{ x: "2014-06-17", y: 10, group: 1 },
{ x: "2014-06-18", y: 15, group: 1 },
{ x: "2014-06-19", y: 52, group: 1 },
{ x: "2014-06-20", y: 10, group: 1 },
{ x: "2014-06-21", y: 20, group: 2 },
{ x: "2014-06-22", y: 600, group: 2 },
{ x: "2014-06-23", y: 100, group: 2 },
{ x: "2014-06-24", y: 250, group: 2 },
{ x: "2014-06-25", y: 300, group: 2 },
{ x: "2014-06-26", y: 200, group: 3 },
{ x: "2014-06-27", y: 600, group: 3 },
{ x: "2014-06-28", y: 1000, group: 3 },
{ x: "2014-06-29", y: 250, group: 3 },
{ x: "2014-06-30", y: 300, group: 3 }
];
var dataset = new vis.DataSet(items);
var options = {
dataAxis: { showMinorLabels: false },
legend: { left: { position: "bottom-left" } },
start: "2014-06-09",
end: "2014-07-03"
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
.custom-style1 {
fill: #f2ea00;
fill-opacity: 0;
stroke-width: 2px;
stroke: #b3ab00;
}
.custom-style2 {
fill: #00a0f2;
stroke-width: 2px;
stroke: #050092;
}
.custom-style3 {
fill: #00f201;
fill-opacity: 0;
stroke-width: 2px;
stroke: #029200;
}
path.custom-style3.vis-fill {
fill-opacity: 0.5 !important;
stroke: none;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Both Axis Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the some of the graphs outlined on the right side using the
<code>yAxisOrientation</code> option within the groups. We also show a few
more custom styles for the graphs. Finally, the legend is manually positioned.
Both the left and right axis have their own legend. If one of the axis is
unused, the legend is not shown. The options for the legend have been split in
a <code>left</code> and a <code>right</code> segment. The default position of
the left axis has been changed.
</div>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="05_bothAxis.html"
><div class="example-image">
<img
src="thumbnails/7fa0947fe49b98102bf31038a42b35d8119d15c04ca4e3751a5b6f9846519b0d.png"
alt="Both Axis Example"
/></div></a></span
><span class="example-link"
><div>
<a href="17_dynamicStyling.html">Dynamic 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");
var items = [
{ x: "2014-06-11", y: 10, group: 0 },
{ x: "2014-06-12", y: 25, group: 0 },
{ x: "2014-06-13", y: 30, group: 0 },
{ x: "2014-06-14", y: -10, group: 0 },
{ x: "2014-06-15", y: 15, group: 0 },
{ x: "2014-06-16", y: 30, group: 0 }
];
var dataset = new vis.DataSet(items);
var options = {
start: "2014-06-10",
end: "2014-06-18",
dataAxis: {
showMinorLabels: false,
icons: true
}
};
var groupData = {
id: 0,
content: "Group Name",
options: {
drawPoints: {
style: "square" // square, circle
},
shaded: {
orientation: "zero" // top, bottom
}
}
};
var groups = new vis.DataSet();
groups.add(groupData);
var graph2d = new vis.Graph2d(container, dataset, groups, options);
updateStyle();
function updateStyle() {
groupData.style = "";
groupData.style += document.getElementById("color").value;
groupData.style += document.getElementById("line").value;
groupData.style += document.getElementById("thickness").value;
groupData.options.drawPoints = {};
groupData.options.drawPoints.styles = "";
groupData.options.drawPoints.style = document.getElementById("points").value;
groupData.options.drawPoints.styles += document.getElementById(
"pointcolor"
).value;
groupData.options.drawPoints.styles += document.getElementById(
"pointthickness"
).value;
groupData.options.drawPoints.styles += document.getElementById(
"pointfill"
).value;
groupData.options.drawPoints.size = Number(
document.getElementById("pointsize").value
);
if (groupData.options.drawPoints.style == "") {
groupData.options.drawPoints = false;
}
groupData.options.shaded = {};
groupData.options.shaded.style = "";
groupData.options.shaded.style += document.getElementById("fillcolor").value;
groupData.options.shaded.style += document.getElementById(
"fillopacity"
).value;
groupData.options.shaded.orientation = document.getElementById("fill").value;
if (groupData.options.shaded.orientation == "") {
groupData.options.shaded = false;
}
var groups = new vis.DataSet();
groups.add(groupData);
graph2d.setGroups(groups);
}
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Dynamic Styling Example</h2>
<div style="width:800px; font-size:14px; text-align: justify;">
This example shows how to programmatically change the styling of a group.
While this can also be done in CSS, this must be statically defined, and the
programmatic interface allows the user to define the look of the graph at
runtime.
</div>
<br />
<table>
<colgroup>
<col width="600" />
<col width="220" />
</colgroup>
<tbody>
<tr>
<td style="padding-right: 20px; border-right: 1px solid;">
<div id="visualization"></div>
</td>
<td style="padding-left: 5px;">
<table style="font-size: 12px;">
<colgroup>
<col width="150" />
<col width="50" />
</colgroup>
<tbody>
<tr>
<td>Line Color</td>
<td>
<select id="color" onchange="updateStyle()">
<option value="stroke:green;">green</option>
<option value="stroke:red;">red</option>
<option value="stroke:blue;" selected="selected">blue</option>
<option value="stroke:black;">black</option>
</select>
</td>
</tr>
<tr>
<td>Line Style</td>
<td>
<select id="line" onchange="updateStyle()">
<option value="stroke-dasharray:1 0;" selected="selected"
>line</option
>
<option value="stroke-dasharray:10 10;">dash</option>
<option value="stroke-dasharray:2 2;">dot</option>
<option value="stroke-dasharray:10 5 2 5;">dash-dot</option>
</select>
</td>
</tr>
<tr>
<td>Line thickness</td>
<td>
<select id="thickness" onchange="updateStyle()">
<option value="stroke-width:0;">0</option>
<option value="stroke-width:1;">1</option>
<option value="stroke-width:2;" selected="selected">2</option>
<option value="stroke-width:3;">3</option>
<option value="stroke-width:4;">4</option>
<option value="stroke-width:5;">5</option>
<option value="stroke-width:6;">6</option>
</select>
</td>
</tr>
<tr>
<td>Fill Position</td>
<td>
<select id="fill" onchange="updateStyle()">
<option value>none</option>
<option value="top">top</option>
<option value="bottom">bottom</option>
<option value="zero" selected="selected">zero</option>
</select>
</td>
</tr>
<tr>
<td>Fill Color</td>
<td>
<select id="fillcolor" onchange="updateStyle()">
<option value="fill:green;">green</option>
<option value="fill:red;">red</option>
<option value="fill:blue;" selected="selected">blue</option>
<option value="fill:black;">black</option>
</select>
</td>
</tr>
<tr>
<td>Fill Opacity</td>
<td>
<select id="fillopacity" onchange="updateStyle()">
<option value="fill-opacity:0.1;">0.1</option>
<option value="fill-opacity:0.2;">0.2</option>
<option value="fill-opacity:0.3;">0.3</option>
<option value="fill-opacity:0.4;">0.4</option>
<option value="fill-opacity:0.5;">0.5</option>
<option value="fill-opacity:0.6;" selected="selected"
>0.6</option
>
<option value="fill-opacity:0.7;">0.7</option>
<option value="fill-opacity:0.8;">0.8</option>
<option value="fill-opacity:0.9;">0.9</option>
<option value="fill-opacity:1;">1</option>
</select>
</td>
</tr>
<tr>
<td>Points Shape</td>
<td>
<select id="points" onchange="updateStyle()">
<option value>none</option>
<option value="circle">circle</option>
<option value="square" selected="selected">square</option>
</select>
</td>
</tr>
<tr>
<td>Points Size</td>
<td>
<select id="pointsize" onchange="updateStyle()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6" selected="selected">6</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</td>
</tr>
<tr>
<td>Points Color</td>
<td>
<select id="pointcolor" onchange="updateStyle()">
<option value="stroke:green;">green</option>
<option value="stroke:red;">red</option>
<option value="stroke:blue;" selected="selected">blue</option>
<option value="stroke:black;">black</option>
</select>
</td>
</tr>
<tr>
<td>Point Line Thickness</td>
<td>
<select id="pointthickness" onchange="updateStyle()">
<option value="stroke-width:0;">0</option>
<option value="stroke-width:1;">1</option>
<option value="stroke-width:2;" selected="selected">2</option>
<option value="stroke-width:3;">3</option>
<option value="stroke-width:4;">4</option>
<option value="stroke-width:5;">5</option>
<option value="stroke-width:6;">6</option>
</select>
</td>
</tr>
<tr></tr>
<tr>
<td>Points Fill Color</td>
<td>
<select id="pointfill" onchange="updateStyle()">
<option value="fill:green;">green</option>
<option value="fill:red;">red</option>
<option value="fill:blue;" selected="selected">blue</option>
<option value="fill:black;">black</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
'
/><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="Graph2d | Dynamic 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","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h2>Graph2d | Dynamic Styling Example</h2>\n\n<div style=\"width:800px; font-size:14px; text-align: justify;\">\n This example shows how to programmatically change the styling of a group.\n While this can also be done in CSS, this must be statically defined, and the\n programmatic interface allows the user to define the look of the graph at\n runtime.\n</div>\n<br />\n\n<table>\n <colgroup>\n <col width=\"600\" />\n <col width=\"220\" />\n </colgroup>\n <tbody>\n <tr>\n <td style=\"padding-right: 20px; border-right: 1px solid;\">\n <div id=\"visualization\"></div>\n </td>\n <td style=\"padding-left: 5px;\">\n <table style=\"font-size: 12px;\">\n <colgroup>\n <col width=\"150\" />\n <col width=\"50\" />\n </colgroup>\n <tbody>\n <tr>\n <td>Line Color</td>\n <td>\n <select id=\"color\" onchange=\"updateStyle()\">\n <option value=\"stroke:green;\">green</option>\n <option value=\"stroke:red;\">red</option>\n <option value=\"stroke:blue;\" selected=\"selected\">blue</option>\n <option value=\"stroke:black;\">black</option>\n </select>\n </td>\n </tr>\n <tr>\n <td>Line Style</td>\n <td>\n <select id=\"line\" onchange=\"updateStyle()\">\n <option value=\"stroke-dasharray:1 0;\" selected=\"selected\"\n >line</option\n >\n <option value=\"stroke-dasharray:10 10;\">dash</option>\n <option value=\"stroke-dasharray:2 2;\">dot</option>\n <option value=\"stroke-dasharray:10 5 2 5;\">dash-dot</option>\n </select>\n </td>\n </tr>\n <tr>\n <td>Line thickness</td>\n <td>\n <select id=\"thickness\" onchange=\"updateStyle()\">\n <option value=\"stroke-width:0;\">0</option>\n <option value=\"stroke-width:1;\">1</option>\n <option value=\"stroke-width:2;\" selected=\"selected\">2</option>\n <option value=\"stroke-width:3;\">3</option>\n <option value=\"stroke-width:4;\">4</option>\n <option value=\"stroke-width:5;\">5</option>\n <option value=\"stroke-width:6;\">6</option>\n </select>\n </td>\n </tr>\n <tr>\n <td>Fill Position</td>\n <td>\n <select id=\"fill\" onchange=\"updateStyle()\">\n <option value>none</option>\n <option value=\"top\">top</option>\n <option value=\"bottom\">bottom</option>\n <option value=\"zero\" selected=\"selected\">zero</option>\n </select>\n </td>\n </tr>\n <tr>\n <td>Fill Color</td>\n <td>\n <select id=\"fillcolor\" onchange=\"updateStyle()\">\n <option value=\"fill:green;\">green</option>\n <option value=\"fill:red;\">red</option>\n <option value=\"fill:blue;\" selected=\"selected\">blue</option>\n <option value=\"fill:black;\">black</option>\n </select>\n </td>\n </tr>\n <tr>\n <td>Fill Opacity</td>\n <td>\n <select id=\"fillopacity\" onchange=\"updateStyle()\">\n <option value=\"fill-opacity:0.1;\">0.1</option>\n <option value=\"fill-opacity:0.2;\">0.2</option>\n <option value=\"fill-opacity:0.3;\">0.3</option>\n <option value=\"fill-opacity:0.4;\">0.4</option>\n <option value=\"fill-opacity:0.5;\">0.5</option>\n <option value=\"fill-opacity:0.6;\" selected=\"selected\"\n >0.6</option\n >\n <option value=\"fill-opacity:0.7;\">0.7</option>\n <option value=\"fill-opacity:0.8;\">0.8</option>\n <option value=\"fill-opacity:0.9;\">0.9</option>\n <option value=\"fill-opacity:1;\">1</option>\n </select>\n </td>\n </tr>\n <tr>\n <td>Points Shape</td>\n <td>\n <select id=\"points\" onchange=\"updateStyle()\">\n <option value>none</option>\n <option value=\"circle\">circle</option>\n <option value=\"square\" selected=\"selected\">square</option>\n </select>\n </td>\n </tr>\n <tr>\n <td>Points Size</td>\n <td>\n <select id=\"pointsize\" onchange=\"updateStyle()\">\n <option value=\"1\">1</option>\n <option value=\"2\">2</option>\n <option value=\"3\">3</option>\n <option value=\"4\">4</option>\n <option value=\"5\">5</option>\n <option value=\"6\" selected=\"selected\">6</option>\n <option value=\"8\">8</option>\n <option value=\"10\">10</option>\n <option value=\"15\">15</option>\n <option value=\"20\">20</option>\n </select>\n </td>\n </tr>\n <tr>\n <td>Points Color</td>\n <td>\n <select id=\"pointcolor\" onchange=\"updateStyle()\">\n <option value=\"stroke:green;\">green</option>\n <option value=\"stroke:red;\">red</option>\n <option value=\"stroke:blue;\" selected=\"selected\">blue</option>\n <option value=\"stroke:black;\">black</option>\n </select>\n </td>\n </tr>\n <tr>\n <td>Point Line Thickness</td>\n <td>\n <select id=\"pointthickness\" onchange=\"updateStyle()\">\n <option value=\"stroke-width:0;\">0</option>\n <option value=\"stroke-width:1;\">1</option>\n <option value=\"stroke-width:2;\" selected=\"selected\">2</option>\n <option value=\"stroke-width:3;\">3</option>\n <option value=\"stroke-width:4;\">4</option>\n <option value=\"stroke-width:5;\">5</option>\n <option value=\"stroke-width:6;\">6</option>\n </select>\n </td>\n </tr>\n <tr></tr>\n <tr>\n <td>Points Fill Color</td>\n <td>\n <select id=\"pointfill\" onchange=\"updateStyle()\">\n <option value=\"fill:green;\">green</option>\n <option value=\"fill:red;\">red</option>\n <option value=\"fill:blue;\" selected=\"selected\">blue</option>\n <option value=\"fill:black;\">black</option>\n </select>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n </tbody>\n</table>\n","js":"var container = document.getElementById(\"visualization\");\nvar items = [\n { x: \"2014-06-11\", y: 10, group: 0 },\n { x: \"2014-06-12\", y: 25, group: 0 },\n { x: \"2014-06-13\", y: 30, group: 0 },\n { x: \"2014-06-14\", y: -10, group: 0 },\n { x: \"2014-06-15\", y: 15, group: 0 },\n { x: \"2014-06-16\", y: 30, group: 0 }\n];\n\nvar dataset = new vis.DataSet(items);\nvar options = {\n start: \"2014-06-10\",\n end: \"2014-06-18\",\n dataAxis: {\n showMinorLabels: false,\n icons: true\n }\n};\n\nvar groupData = {\n id: 0,\n content: \"Group Name\",\n options: {\n drawPoints: {\n style: \"square\" // square, circle\n },\n shaded: {\n orientation: \"zero\" // top, bottom\n }\n }\n};\n\nvar groups = new vis.DataSet();\ngroups.add(groupData);\n\nvar graph2d = new vis.Graph2d(container, dataset, groups, options);\nupdateStyle();\n\nfunction updateStyle() {\n groupData.style = \"\";\n groupData.style += document.getElementById(\"color\").value;\n groupData.style += document.getElementById(\"line\").value;\n groupData.style += document.getElementById(\"thickness\").value;\n\n groupData.options.drawPoints = {};\n groupData.options.drawPoints.styles = \"\";\n groupData.options.drawPoints.style = document.getElementById(\"points\").value;\n groupData.options.drawPoints.styles += document.getElementById(\n \"pointcolor\"\n ).value;\n groupData.options.drawPoints.styles += document.getElementById(\n \"pointthickness\"\n ).value;\n groupData.options.drawPoints.styles += document.getElementById(\n \"pointfill\"\n ).value;\n groupData.options.drawPoints.size = Number(\n document.getElementById(\"pointsize\").value\n );\n if (groupData.options.drawPoints.style == \"\") {\n groupData.options.drawPoints = false;\n }\n\n groupData.options.shaded = {};\n groupData.options.shaded.style = \"\";\n groupData.options.shaded.style += document.getElementById(\"fillcolor\").value;\n groupData.options.shaded.style += document.getElementById(\n \"fillopacity\"\n ).value;\n groupData.options.shaded.orientation = document.getElementById(\"fill\").value;\n if (groupData.options.shaded.orientation == \"\") {\n groupData.options.shaded = false;\n }\n\n var groups = new vis.DataSet();\n groups.add(groupData);\n graph2d.setGroups(groups);\n}\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Graph2d | Dynamic Styling"}'
/><input
type="hidden"
name="js"
value='var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-11", y: 10, group: 0 },
{ x: "2014-06-12", y: 25, group: 0 },
{ x: "2014-06-13", y: 30, group: 0 },
{ x: "2014-06-14", y: -10, group: 0 },
{ x: "2014-06-15", y: 15, group: 0 },
{ x: "2014-06-16", y: 30, group: 0 }
];
var dataset = new vis.DataSet(items);
var options = {
start: "2014-06-10",
end: "2014-06-18",
dataAxis: {
showMinorLabels: false,
icons: true
}
};
var groupData = {
id: 0,
content: "Group Name",
options: {
drawPoints: {
style: "square" // square, circle
},
shaded: {
orientation: "zero" // top, bottom
}
}
};
var groups = new vis.DataSet();
groups.add(groupData);
var graph2d = new vis.Graph2d(container, dataset, groups, options);
updateStyle();
function updateStyle() {
groupData.style = "";
groupData.style += document.getElementById("color").value;
groupData.style += document.getElementById("line").value;
groupData.style += document.getElementById("thickness").value;
groupData.options.drawPoints = {};
groupData.options.drawPoints.styles = "";
groupData.options.drawPoints.style = document.getElementById("points").value;
groupData.options.drawPoints.styles += document.getElementById(
"pointcolor"
).value;
groupData.options.drawPoints.styles += document.getElementById(
"pointthickness"
).value;
groupData.options.drawPoints.styles += document.getElementById(
"pointfill"
).value;
groupData.options.drawPoints.size = Number(
document.getElementById("pointsize").value
);
if (groupData.options.drawPoints.style == "") {
groupData.options.drawPoints = false;
}
groupData.options.shaded = {};
groupData.options.shaded.style = "";
groupData.options.shaded.style += document.getElementById("fillcolor").value;
groupData.options.shaded.style += document.getElementById(
"fillopacity"
).value;
groupData.options.shaded.orientation = document.getElementById("fill").value;
if (groupData.options.shaded.orientation == "") {
groupData.options.shaded = false;
}
var groups = new vis.DataSet();
groups.add(groupData);
graph2d.setGroups(groups);
}
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Dynamic Styling Example</h2>
<div style="width:800px; font-size:14px; text-align: justify;">
This example shows how to programmatically change the styling of a group.
While this can also be done in CSS, this must be statically defined, and the
programmatic interface allows the user to define the look of the graph at
runtime.
</div>
<br />
<table>
<colgroup>
<col width="600" />
<col width="220" />
</colgroup>
<tbody>
<tr>
<td style="padding-right: 20px; border-right: 1px solid;">
<div id="visualization"></div>
</td>
<td style="padding-left: 5px;">
<table style="font-size: 12px;">
<colgroup>
<col width="150" />
<col width="50" />
</colgroup>
<tbody>
<tr>
<td>Line Color</td>
<td>
<select id="color" onchange="updateStyle()">
<option value="stroke:green;">green</option>
<option value="stroke:red;">red</option>
<option value="stroke:blue;" selected="selected">blue</option>
<option value="stroke:black;">black</option>
</select>
</td>
</tr>
<tr>
<td>Line Style</td>
<td>
<select id="line" onchange="updateStyle()">
<option value="stroke-dasharray:1 0;" selected="selected"
>line</option
>
<option value="stroke-dasharray:10 10;">dash</option>
<option value="stroke-dasharray:2 2;">dot</option>
<option value="stroke-dasharray:10 5 2 5;">dash-dot</option>
</select>
</td>
</tr>
<tr>
<td>Line thickness</td>
<td>
<select id="thickness" onchange="updateStyle()">
<option value="stroke-width:0;">0</option>
<option value="stroke-width:1;">1</option>
<option value="stroke-width:2;" selected="selected">2</option>
<option value="stroke-width:3;">3</option>
<option value="stroke-width:4;">4</option>
<option value="stroke-width:5;">5</option>
<option value="stroke-width:6;">6</option>
</select>
</td>
</tr>
<tr>
<td>Fill Position</td>
<td>
<select id="fill" onchange="updateStyle()">
<option value>none</option>
<option value="top">top</option>
<option value="bottom">bottom</option>
<option value="zero" selected="selected">zero</option>
</select>
</td>
</tr>
<tr>
<td>Fill Color</td>
<td>
<select id="fillcolor" onchange="updateStyle()">
<option value="fill:green;">green</option>
<option value="fill:red;">red</option>
<option value="fill:blue;" selected="selected">blue</option>
<option value="fill:black;">black</option>
</select>
</td>
</tr>
<tr>
<td>Fill Opacity</td>
<td>
<select id="fillopacity" onchange="updateStyle()">
<option value="fill-opacity:0.1;">0.1</option>
<option value="fill-opacity:0.2;">0.2</option>
<option value="fill-opacity:0.3;">0.3</option>
<option value="fill-opacity:0.4;">0.4</option>
<option value="fill-opacity:0.5;">0.5</option>
<option value="fill-opacity:0.6;" selected="selected"
>0.6</option
>
<option value="fill-opacity:0.7;">0.7</option>
<option value="fill-opacity:0.8;">0.8</option>
<option value="fill-opacity:0.9;">0.9</option>
<option value="fill-opacity:1;">1</option>
</select>
</td>
</tr>
<tr>
<td>Points Shape</td>
<td>
<select id="points" onchange="updateStyle()">
<option value>none</option>
<option value="circle">circle</option>
<option value="square" selected="selected">square</option>
</select>
</td>
</tr>
<tr>
<td>Points Size</td>
<td>
<select id="pointsize" onchange="updateStyle()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6" selected="selected">6</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</td>
</tr>
<tr>
<td>Points Color</td>
<td>
<select id="pointcolor" onchange="updateStyle()">
<option value="stroke:green;">green</option>
<option value="stroke:red;">red</option>
<option value="stroke:blue;" selected="selected">blue</option>
<option value="stroke:black;">black</option>
</select>
</td>
</tr>
<tr>
<td>Point Line Thickness</td>
<td>
<select id="pointthickness" onchange="updateStyle()">
<option value="stroke-width:0;">0</option>
<option value="stroke-width:1;">1</option>
<option value="stroke-width:2;" selected="selected">2</option>
<option value="stroke-width:3;">3</option>
<option value="stroke-width:4;">4</option>
<option value="stroke-width:5;">5</option>
<option value="stroke-width:6;">6</option>
</select>
</td>
</tr>
<tr></tr>
<tr>
<td>Points Fill Color</td>
<td>
<select id="pointfill" onchange="updateStyle()">
<option value="fill:green;">green</option>
<option value="fill:red;">red</option>
<option value="fill:blue;" selected="selected">blue</option>
<option value="fill:black;">black</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
'
/></form
></span>
</div>
<a href="17_dynamicStyling.html"
><div class="example-image">
<img
src="thumbnails/b6b8ad16f149011129409e3fc80b624d90c251d5c6e94c202fb67f2419eabad5.png"
alt="Dynamic Styling"
/></div></a></span
><span class="example-link"
><div>
<a href="09_external_legend.html">External legend 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 groups
var names = ["SquareShaded", "Bargraph", "Blank", "CircleShaded"];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: "custom-style1",
options: {
drawPoints: {
style: "square" // square, circle
},
shaded: {
orientation: "bottom" // top, bottom
}
}
});
groups.add({
id: 1,
content: names[1],
className: "custom-style2",
options: {
style: "bar",
drawPoints: { style: "circle", size: 10 }
}
});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: "right", // right, left
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
className: "custom-style3",
options: {
yAxisOrientation: "right", // right, left
drawPoints: {
style: "circle" // square, circle
},
shaded: {
orientation: "top" // top, bottom
}
}
});
var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-12", y: 0, group: 0 },
{ x: "2014-06-13", y: 30, group: 0 },
{ x: "2014-06-14", y: 10, group: 0 },
{ x: "2014-06-15", y: 15, group: 1 },
{ x: "2014-06-16", y: 30, group: 1 },
{ x: "2014-06-17", y: 10, group: 1 },
{ x: "2014-06-18", y: 15, group: 1 },
{ x: "2014-06-19", y: 52, group: 1 },
{ x: "2014-06-20", y: 10, group: 1 },
{ x: "2014-06-21", y: 20, group: 2 },
{ x: "2014-06-22", y: 600, group: 2 },
{ x: "2014-06-23", y: 100, group: 2 },
{ x: "2014-06-24", y: 250, group: 2 },
{ x: "2014-06-25", y: 300, group: 2 },
{ x: "2014-06-26", y: 200, group: 3 },
{ x: "2014-06-27", y: 600, group: 3 },
{ x: "2014-06-28", y: 1000, group: 3 },
{ x: "2014-06-29", y: 250, group: 3 },
{ x: "2014-06-30", y: 300, group: 3 }
];
var dataset = new vis.DataSet(items);
var options = {
dataAxis: { showMinorLabels: false },
start: "2014-06-09",
end: "2014-07-03"
};
var graph2d = new vis.Graph2d(container, items, groups, options);
/**
* this function fills the external legend with content using the getLegend() function.
*/
function populateExternalLegend() {
var groupsData = groups.get();
var legendDiv = document.getElementById("Legend");
legendDiv.innerHTML = "";
// get for all groups:
for (var i = 0; i < groupsData.length; i++) {
// create divs
var containerDiv = document.createElement("div");
var iconDiv = document.createElement("div");
var descriptionDiv = document.createElement("div");
// give divs classes and Ids where necessary
containerDiv.className = "legend-element-container";
containerDiv.id = groupsData[i].id + "_legendContainer";
iconDiv.className = "icon-container";
descriptionDiv.className = "description-container";
// get the legend for this group.
var legend = graph2d.getLegend(groupsData[i].id, 30, 30);
// append class to icon. All styling classes from the vis-timeline-graph2d.min.css/vis-timeline-graph2d.min.css have been copied over into the head here to be able to style the
// icons with the same classes if they are using the default ones.
legend.icon.setAttributeNS(null, "class", "legend-icon");
// append the legend to the corresponding divs
iconDiv.appendChild(legend.icon);
descriptionDiv.innerHTML = legend.label;
// determine the order for left and right orientation
if (legend.orientation == "left") {
descriptionDiv.style.textAlign = "left";
containerDiv.appendChild(iconDiv);
containerDiv.appendChild(descriptionDiv);
} else {
descriptionDiv.style.textAlign = "right";
containerDiv.appendChild(descriptionDiv);
containerDiv.appendChild(iconDiv);
}
// append to the legend container div
legendDiv.appendChild(containerDiv);
// bind click event to this legend element.
containerDiv.onclick = toggleGraph.bind(this, groupsData[i].id);
}
}
/**
* This function switchs the visible option of the selected group on an off.
* @param groupId
*/
function toggleGraph(groupId) {
// get the container that was clicked on.
var container = document.getElementById(groupId + "_legendContainer");
// if visible, hide
if (graph2d.isGroupVisible(groupId) == true) {
groups.update({ id: groupId, visible: false });
container.className = container.className + " hidden";
} else {
// if invisible, show
groups.update({ id: groupId, visible: true });
container.className = container.className.replace("hidden", "");
}
}
populateExternalLegend();
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
.custom-style1 {
fill: #f2ea00;
fill-opacity: 0;
stroke-width: 2px;
stroke: #b3ab00;
}
.custom-style2 {
fill: #00a0f2;
fill-opacity: 0;
stroke-width: 2px;
stroke: #050092;
}
.custom-style3 {
fill: #00f201;
fill-opacity: 0;
stroke-width: 2px;
stroke: #029200;
}
path.custom-style3.fill {
fill-opacity: 0.5 !important;
stroke: none;
}
.vis-graph-group0 {
fill: #4f81bd;
fill-opacity: 0;
stroke-width: 2px;
stroke: #4f81bd;
}
.vis-graph-group1 {
fill: #f79646;
fill-opacity: 0;
stroke-width: 2px;
stroke: #f79646;
}
.vis-graph-group2 {
fill: #8c51cf;
fill-opacity: 0;
stroke-width: 2px;
stroke: #8c51cf;
}
.vis-graph-group3 {
fill: #75c841;
fill-opacity: 0;
stroke-width: 2px;
stroke: #75c841;
}
.vis-graph-group4 {
fill: #ff0100;
fill-opacity: 0;
stroke-width: 2px;
stroke: #ff0100;
}
.vis-graph-group5 {
fill: #37d8e6;
fill-opacity: 0;
stroke-width: 2px;
stroke: #37d8e6;
}
.vis-graph-group6 {
fill: #042662;
fill-opacity: 0;
stroke-width: 2px;
stroke: #042662;
}
.vis-graph-group7 {
fill: #00ff26;
fill-opacity: 0;
stroke-width: 2px;
stroke: #00ff26;
}
.vis-graph-group8 {
fill: #ff00ff;
fill-opacity: 0;
stroke-width: 2px;
stroke: #ff00ff;
}
.vis-graph-group9 {
fill: #8f3938;
fill-opacity: 0;
stroke-width: 2px;
stroke: #8f3938;
}
.vis-fill {
fill-opacity: 0.1;
stroke: none;
}
.vis-bar {
fill-opacity: 0.5;
stroke-width: 1px;
}
.vis-point {
stroke-width: 2px;
fill-opacity: 1;
}
.vis-legend-background {
stroke-width: 1px;
fill-opacity: 0.9;
fill: #ffffff;
stroke: #c2c2c2;
}
.vis-outline {
stroke-width: 1px;
fill-opacity: 1;
fill: #ffffff;
stroke: #e5e5e5;
}
.vis-icon-fill {
fill-opacity: 0.3;
stroke: none;
}
div.description-container {
float: left;
height: 30px;
width: 160px;
padding-left: 5px;
padding-right: 5px;
line-height: 30px;
}
div.icon-container {
float: left;
}
div.legend-element-container {
display: inline-block;
width: 200px;
height: 30px;
border-style: solid;
border-width: 1px;
border-color: #e0e0e0;
background-color: #ffffff;
margin: 4px;
padding: 4px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
div.legend-element-container.hidden {
background-color: #d3e6ff;
}
svg.legend-icon {
width: 30px;
height: 30px;
}
div.external-legend {
position: relative;
margin-left: -5px;
width: 900px;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | External custom legend</h2>
<div style="width:800px; font-size:14px; text-align: justify;">
This example shows how to create an external custom legend using the getLegend
function. We use normal JavaScript to show and hide the groups by updating the
dataset.
</div>
<br />
<div id="Legend" class="external-legend"></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="Graph2d | External legend 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}\n\n.custom-style1 {\n fill: #f2ea00;\n fill-opacity: 0;\n stroke-width: 2px;\n stroke: #b3ab00;\n}\n\n.custom-style2 {\n fill: #00a0f2;\n fill-opacity: 0;\n stroke-width: 2px;\n stroke: #050092;\n}\n\n.custom-style3 {\n fill: #00f201;\n fill-opacity: 0;\n stroke-width: 2px;\n stroke: #029200;\n}\n\npath.custom-style3.fill {\n fill-opacity: 0.5 !important;\n stroke: none;\n}\n\n.vis-graph-group0 {\n fill: #4f81bd;\n fill-opacity: 0;\n stroke-width: 2px;\n stroke: #4f81bd;\n}\n\n.vis-graph-group1 {\n fill: #f79646;\n fill-opacity: 0;\n stroke-width: 2px;\n stroke: #f79646;\n}\n\n.vis-graph-group2 {\n fill: #8c51cf;\n fill-opacity: 0;\n stroke-width: 2px;\n stroke: #8c51cf;\n}\n\n.vis-graph-group3 {\n fill: #75c841;\n fill-opacity: 0;\n stroke-width: 2px;\n stroke: #75c841;\n}\n\n.vis-graph-group4 {\n fill: #ff0100;\n fill-opacity: 0;\n stroke-width: 2px;\n stroke: #ff0100;\n}\n\n.vis-graph-group5 {\n fill: #37d8e6;\n fill-opacity: 0;\n stroke-width: 2px;\n stroke: #37d8e6;\n}\n\n.vis-graph-group6 {\n fill: #042662;\n fill-opacity: 0;\n stroke-width: 2px;\n stroke: #042662;\n}\n\n.vis-graph-group7 {\n fill: #00ff26;\n fill-opacity: 0;\n stroke-width: 2px;\n stroke: #00ff26;\n}\n\n.vis-graph-group8 {\n fill: #ff00ff;\n fill-opacity: 0;\n stroke-width: 2px;\n stroke: #ff00ff;\n}\n\n.vis-graph-group9 {\n fill: #8f3938;\n fill-opacity: 0;\n stroke-width: 2px;\n stroke: #8f3938;\n}\n\n.vis-fill {\n fill-opacity: 0.1;\n stroke: none;\n}\n\n.vis-bar {\n fill-opacity: 0.5;\n stroke-width: 1px;\n}\n\n.vis-point {\n stroke-width: 2px;\n fill-opacity: 1;\n}\n\n.vis-legend-background {\n stroke-width: 1px;\n fill-opacity: 0.9;\n fill: #ffffff;\n stroke: #c2c2c2;\n}\n\n.vis-outline {\n stroke-width: 1px;\n fill-opacity: 1;\n fill: #ffffff;\n stroke: #e5e5e5;\n}\n\n.vis-icon-fill {\n fill-opacity: 0.3;\n stroke: none;\n}\n\ndiv.description-container {\n float: left;\n height: 30px;\n width: 160px;\n padding-left: 5px;\n padding-right: 5px;\n line-height: 30px;\n}\n\ndiv.icon-container {\n float: left;\n}\n\ndiv.legend-element-container {\n display: inline-block;\n width: 200px;\n height: 30px;\n border-style: solid;\n border-width: 1px;\n border-color: #e0e0e0;\n background-color: #ffffff;\n margin: 4px;\n padding: 4px;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\n}\ndiv.legend-element-container.hidden {\n background-color: #d3e6ff;\n}\n\nsvg.legend-icon {\n width: 30px;\n height: 30px;\n}\n\ndiv.external-legend {\n position: relative;\n margin-left: -5px;\n width: 900px;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h2>Graph2d | External custom legend</h2>\n<div style=\"width:800px; font-size:14px; text-align: justify;\">\n This example shows how to create an external custom legend using the getLegend\n function. We use normal JavaScript to show and hide the groups by updating the\n dataset.\n</div>\n<br />\n<div id=\"Legend\" class=\"external-legend\"></div>\n<div id=\"visualization\"></div>\n","js":"// create a dataSet with groups\nvar names = [\"SquareShaded\", \"Bargraph\", \"Blank\", \"CircleShaded\"];\nvar groups = new vis.DataSet();\ngroups.add({\n id: 0,\n content: names[0],\n className: \"custom-style1\",\n options: {\n drawPoints: {\n style: \"square\" // square, circle\n },\n shaded: {\n orientation: \"bottom\" // top, bottom\n }\n }\n});\n\ngroups.add({\n id: 1,\n content: names[1],\n className: \"custom-style2\",\n options: {\n style: \"bar\",\n drawPoints: { style: \"circle\", size: 10 }\n }\n});\n\ngroups.add({\n id: 2,\n content: names[2],\n options: {\n yAxisOrientation: \"right\", // right, left\n drawPoints: false\n }\n});\n\ngroups.add({\n id: 3,\n content: names[3],\n className: \"custom-style3\",\n options: {\n yAxisOrientation: \"right\", // right, left\n drawPoints: {\n style: \"circle\" // square, circle\n },\n shaded: {\n orientation: \"top\" // top, bottom\n }\n }\n});\n\nvar container = document.getElementById(\"visualization\");\nvar items = [\n { x: \"2014-06-12\", y: 0, group: 0 },\n { x: \"2014-06-13\", y: 30, group: 0 },\n { x: \"2014-06-14\", y: 10, group: 0 },\n { x: \"2014-06-15\", y: 15, group: 1 },\n { x: \"2014-06-16\", y: 30, group: 1 },\n { x: \"2014-06-17\", y: 10, group: 1 },\n { x: \"2014-06-18\", y: 15, group: 1 },\n { x: \"2014-06-19\", y: 52, group: 1 },\n { x: \"2014-06-20\", y: 10, group: 1 },\n { x: \"2014-06-21\", y: 20, group: 2 },\n { x: \"2014-06-22\", y: 600, group: 2 },\n { x: \"2014-06-23\", y: 100, group: 2 },\n { x: \"2014-06-24\", y: 250, group: 2 },\n { x: \"2014-06-25\", y: 300, group: 2 },\n { x: \"2014-06-26\", y: 200, group: 3 },\n { x: \"2014-06-27\", y: 600, group: 3 },\n { x: \"2014-06-28\", y: 1000, group: 3 },\n { x: \"2014-06-29\", y: 250, group: 3 },\n { x: \"2014-06-30\", y: 300, group: 3 }\n];\n\nvar dataset = new vis.DataSet(items);\nvar options = {\n dataAxis: { showMinorLabels: false },\n start: \"2014-06-09\",\n end: \"2014-07-03\"\n};\nvar graph2d = new vis.Graph2d(container, items, groups, options);\n\n/**\n * this function fills the external legend with content using the getLegend() function.\n */\nfunction populateExternalLegend() {\n var groupsData = groups.get();\n var legendDiv = document.getElementById(\"Legend\");\n legendDiv.innerHTML = \"\";\n\n // get for all groups:\n for (var i = 0; i < groupsData.length; i++) {\n // create divs\n var containerDiv = document.createElement(\"div\");\n var iconDiv = document.createElement(\"div\");\n var descriptionDiv = document.createElement(\"div\");\n\n // give divs classes and Ids where necessary\n containerDiv.className = \"legend-element-container\";\n containerDiv.id = groupsData[i].id + \"_legendContainer\";\n iconDiv.className = \"icon-container\";\n descriptionDiv.className = \"description-container\";\n\n // get the legend for this group.\n var legend = graph2d.getLegend(groupsData[i].id, 30, 30);\n\n // append class to icon. All styling classes from the vis-timeline-graph2d.min.css/vis-timeline-graph2d.min.css have been copied over into the head here to be able to style the\n // icons with the same classes if they are using the default ones.\n legend.icon.setAttributeNS(null, \"class\", \"legend-icon\");\n\n // append the legend to the corresponding divs\n iconDiv.appendChild(legend.icon);\n descriptionDiv.innerHTML = legend.label;\n\n // determine the order for left and right orientation\n if (legend.orientation == \"left\") {\n descriptionDiv.style.textAlign = \"left\";\n containerDiv.appendChild(iconDiv);\n containerDiv.appendChild(descriptionDiv);\n } else {\n descriptionDiv.style.textAlign = \"right\";\n containerDiv.appendChild(descriptionDiv);\n containerDiv.appendChild(iconDiv);\n }\n\n // append to the legend container div\n legendDiv.appendChild(containerDiv);\n\n // bind click event to this legend element.\n containerDiv.onclick = toggleGraph.bind(this, groupsData[i].id);\n }\n}\n\n/**\n * This function switchs the visible option of the selected group on an off.\n * @param groupId\n */\nfunction toggleGraph(groupId) {\n // get the container that was clicked on.\n var container = document.getElementById(groupId + \"_legendContainer\");\n // if visible, hide\n if (graph2d.isGroupVisible(groupId) == true) {\n groups.update({ id: groupId, visible: false });\n container.className = container.className + \" hidden\";\n } else {\n // if invisible, show\n groups.update({ id: groupId, visible: true });\n container.className = container.className.replace(\"hidden\", \"\");\n }\n}\n\npopulateExternalLegend();\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Graph2d | External legend Example"}'
/><input
type="hidden"
name="js"
value='// create a dataSet with groups
var names = ["SquareShaded", "Bargraph", "Blank", "CircleShaded"];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: "custom-style1",
options: {
drawPoints: {
style: "square" // square, circle
},
shaded: {
orientation: "bottom" // top, bottom
}
}
});
groups.add({
id: 1,
content: names[1],
className: "custom-style2",
options: {
style: "bar",
drawPoints: { style: "circle", size: 10 }
}
});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: "right", // right, left
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
className: "custom-style3",
options: {
yAxisOrientation: "right", // right, left
drawPoints: {
style: "circle" // square, circle
},
shaded: {
orientation: "top" // top, bottom
}
}
});
var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-12", y: 0, group: 0 },
{ x: "2014-06-13", y: 30, group: 0 },
{ x: "2014-06-14", y: 10, group: 0 },
{ x: "2014-06-15", y: 15, group: 1 },
{ x: "2014-06-16", y: 30, group: 1 },
{ x: "2014-06-17", y: 10, group: 1 },
{ x: "2014-06-18", y: 15, group: 1 },
{ x: "2014-06-19", y: 52, group: 1 },
{ x: "2014-06-20", y: 10, group: 1 },
{ x: "2014-06-21", y: 20, group: 2 },
{ x: "2014-06-22", y: 600, group: 2 },
{ x: "2014-06-23", y: 100, group: 2 },
{ x: "2014-06-24", y: 250, group: 2 },
{ x: "2014-06-25", y: 300, group: 2 },
{ x: "2014-06-26", y: 200, group: 3 },
{ x: "2014-06-27", y: 600, group: 3 },
{ x: "2014-06-28", y: 1000, group: 3 },
{ x: "2014-06-29", y: 250, group: 3 },
{ x: "2014-06-30", y: 300, group: 3 }
];
var dataset = new vis.DataSet(items);
var options = {
dataAxis: { showMinorLabels: false },
start: "2014-06-09",
end: "2014-07-03"
};
var graph2d = new vis.Graph2d(container, items, groups, options);
/**
* this function fills the external legend with content using the getLegend() function.
*/
function populateExternalLegend() {
var groupsData = groups.get();
var legendDiv = document.getElementById("Legend");
legendDiv.innerHTML = "";
// get for all groups:
for (var i = 0; i < groupsData.length; i++) {
// create divs
var containerDiv = document.createElement("div");
var iconDiv = document.createElement("div");
var descriptionDiv = document.createElement("div");
// give divs classes and Ids where necessary
containerDiv.className = "legend-element-container";
containerDiv.id = groupsData[i].id + "_legendContainer";
iconDiv.className = "icon-container";
descriptionDiv.className = "description-container";
// get the legend for this group.
var legend = graph2d.getLegend(groupsData[i].id, 30, 30);
// append class to icon. All styling classes from the vis-timeline-graph2d.min.css/vis-timeline-graph2d.min.css have been copied over into the head here to be able to style the
// icons with the same classes if they are using the default ones.
legend.icon.setAttributeNS(null, "class", "legend-icon");
// append the legend to the corresponding divs
iconDiv.appendChild(legend.icon);
descriptionDiv.innerHTML = legend.label;
// determine the order for left and right orientation
if (legend.orientation == "left") {
descriptionDiv.style.textAlign = "left";
containerDiv.appendChild(iconDiv);
containerDiv.appendChild(descriptionDiv);
} else {
descriptionDiv.style.textAlign = "right";
containerDiv.appendChild(descriptionDiv);
containerDiv.appendChild(iconDiv);
}
// append to the legend container div
legendDiv.appendChild(containerDiv);
// bind click event to this legend element.
containerDiv.onclick = toggleGraph.bind(this, groupsData[i].id);
}
}
/**
* This function switchs the visible option of the selected group on an off.
* @param groupId
*/
function toggleGraph(groupId) {
// get the container that was clicked on.
var container = document.getElementById(groupId + "_legendContainer");
// if visible, hide
if (graph2d.isGroupVisible(groupId) == true) {
groups.update({ id: groupId, visible: false });
container.className = container.className + " hidden";
} else {
// if invisible, show
groups.update({ id: groupId, visible: true });
container.className = container.className.replace("hidden", "");
}
}
populateExternalLegend();
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
.custom-style1 {
fill: #f2ea00;
fill-opacity: 0;
stroke-width: 2px;
stroke: #b3ab00;
}
.custom-style2 {
fill: #00a0f2;
fill-opacity: 0;
stroke-width: 2px;
stroke: #050092;
}
.custom-style3 {
fill: #00f201;
fill-opacity: 0;
stroke-width: 2px;
stroke: #029200;
}
path.custom-style3.fill {
fill-opacity: 0.5 !important;
stroke: none;
}
.vis-graph-group0 {
fill: #4f81bd;
fill-opacity: 0;
stroke-width: 2px;
stroke: #4f81bd;
}
.vis-graph-group1 {
fill: #f79646;
fill-opacity: 0;
stroke-width: 2px;
stroke: #f79646;
}
.vis-graph-group2 {
fill: #8c51cf;
fill-opacity: 0;
stroke-width: 2px;
stroke: #8c51cf;
}
.vis-graph-group3 {
fill: #75c841;
fill-opacity: 0;
stroke-width: 2px;
stroke: #75c841;
}
.vis-graph-group4 {
fill: #ff0100;
fill-opacity: 0;
stroke-width: 2px;
stroke: #ff0100;
}
.vis-graph-group5 {
fill: #37d8e6;
fill-opacity: 0;
stroke-width: 2px;
stroke: #37d8e6;
}
.vis-graph-group6 {
fill: #042662;
fill-opacity: 0;
stroke-width: 2px;
stroke: #042662;
}
.vis-graph-group7 {
fill: #00ff26;
fill-opacity: 0;
stroke-width: 2px;
stroke: #00ff26;
}
.vis-graph-group8 {
fill: #ff00ff;
fill-opacity: 0;
stroke-width: 2px;
stroke: #ff00ff;
}
.vis-graph-group9 {
fill: #8f3938;
fill-opacity: 0;
stroke-width: 2px;
stroke: #8f3938;
}
.vis-fill {
fill-opacity: 0.1;
stroke: none;
}
.vis-bar {
fill-opacity: 0.5;
stroke-width: 1px;
}
.vis-point {
stroke-width: 2px;
fill-opacity: 1;
}
.vis-legend-background {
stroke-width: 1px;
fill-opacity: 0.9;
fill: #ffffff;
stroke: #c2c2c2;
}
.vis-outline {
stroke-width: 1px;
fill-opacity: 1;
fill: #ffffff;
stroke: #e5e5e5;
}
.vis-icon-fill {
fill-opacity: 0.3;
stroke: none;
}
div.description-container {
float: left;
height: 30px;
width: 160px;
padding-left: 5px;
padding-right: 5px;
line-height: 30px;
}
div.icon-container {
float: left;
}
div.legend-element-container {
display: inline-block;
width: 200px;
height: 30px;
border-style: solid;
border-width: 1px;
border-color: #e0e0e0;
background-color: #ffffff;
margin: 4px;
padding: 4px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
div.legend-element-container.hidden {
background-color: #d3e6ff;
}
svg.legend-icon {
width: 30px;
height: 30px;
}
div.external-legend {
position: relative;
margin-left: -5px;
width: 900px;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | External custom legend</h2>
<div style="width:800px; font-size:14px; text-align: justify;">
This example shows how to create an external custom legend using the getLegend
function. We use normal JavaScript to show and hide the groups by updating the
dataset.
</div>
<br />
<div id="Legend" class="external-legend"></div>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="09_external_legend.html"
><div class="example-image">
<img
src="thumbnails/bd042bf9d3752ebcced07ea079259d5a6fd48fc63e6dddd7d8b12de312b25b6b.png"
alt="External legend Example"
/></div></a></span
><span class="example-link"
><div>
<a href="03_groups.html">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='// create a dataSet with groups
var names = ["SquareShaded", "Bargraph", "Blank", "CircleShaded"];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
drawPoints: {
style: "square" // square, circle
},
shaded: {
orientation: "bottom" // top, bottom
}
}
});
groups.add({
id: 1,
content: names[1],
options: {
style: "bar"
}
});
groups.add({
id: 2,
content: names[2],
options: { drawPoints: false }
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: {
style: "circle" // square, circle
},
shaded: {
orientation: "top" // top, bottom
}
}
});
var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-13", y: 60 },
{ x: "2014-06-14", y: 40 },
{ x: "2014-06-15", y: 55 },
{ x: "2014-06-16", y: 40 },
{ x: "2014-06-17", y: 50 },
{ x: "2014-06-13", y: 30, group: 0 },
{ x: "2014-06-14", y: 10, group: 0 },
{ x: "2014-06-15", y: 15, group: 1 },
{ x: "2014-06-16", y: 30, group: 1 },
{ x: "2014-06-17", y: 10, group: 1 },
{ x: "2014-06-18", y: 15, group: 1 },
{ x: "2014-06-19", y: 52, group: 1 },
{ x: "2014-06-20", y: 10, group: 1 },
{ x: "2014-06-21", y: 20, group: 2 },
{ x: "2014-06-22", y: 60, group: 2 },
{ x: "2014-06-23", y: 10, group: 2 },
{ x: "2014-06-24", y: 25, group: 2 },
{ x: "2014-06-25", y: 30, group: 2 },
{ x: "2014-06-26", y: 20, group: 3 },
{ x: "2014-06-27", y: 60, group: 3 },
{ x: "2014-06-28", y: 10, group: 3 },
{ x: "2014-06-29", y: 25, group: 3 },
{ x: "2014-06-30", y: 30, group: 3 }
];
var dataset = new vis.DataSet(items);
var options = {
defaultGroup: "ungrouped",
legend: true,
start: "2014-06-10",
end: "2014-07-04"
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Groups Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the groups functionality within Graph2d. This works in the
same way as it does in Timeline, We have however simplified the constructor to
accept groups as well to shorten the code. These groups are the method used in
Graph2d to define individual graphs. These groups can be given an individual
class as well as all the styling options you can supply to Graph2d! This
example, as well as the ones that follow will showcase a few different usages
of these options. <br />
<br />
This example also introduces the automatically generated legend. The icons are
automatically generated and the label is the content as you define it in the
groups. If you have datapoints that are not part of a group, a default group
is created with the label: &apos;default&apos;. In this example, the setting
<code>defaultGroup</code> is used to rename the default group to
&apos;ungrouped&apos;.
</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://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Graph2d | 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: sans-serif;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h2>Graph2d | Groups Example</h2>\n<div style=\"width:700px; font-size:14px; text-align: justify;\">\n This example shows the groups functionality within Graph2d. This works in the\n same way as it does in Timeline, We have however simplified the constructor to\n accept groups as well to shorten the code. These groups are the method used in\n Graph2d to define individual graphs. These groups can be given an individual\n class as well as all the styling options you can supply to Graph2d! This\n example, as well as the ones that follow will showcase a few different usages\n of these options. <br />\n <br />\n\n This example also introduces the automatically generated legend. The icons are\n automatically generated and the label is the content as you define it in the\n groups. If you have datapoints that are not part of a group, a default group\n is created with the label: &apos;default&apos;. In this example, the setting\n <code>defaultGroup</code> is used to rename the default group to\n &apos;ungrouped&apos;.\n</div>\n<br />\n\n<div id=\"visualization\"></div>\n","js":"// create a dataSet with groups\nvar names = [\"SquareShaded\", \"Bargraph\", \"Blank\", \"CircleShaded\"];\nvar groups = new vis.DataSet();\ngroups.add({\n id: 0,\n content: names[0],\n options: {\n drawPoints: {\n style: \"square\" // square, circle\n },\n shaded: {\n orientation: \"bottom\" // top, bottom\n }\n }\n});\n\ngroups.add({\n id: 1,\n content: names[1],\n options: {\n style: \"bar\"\n }\n});\n\ngroups.add({\n id: 2,\n content: names[2],\n options: { drawPoints: false }\n});\n\ngroups.add({\n id: 3,\n content: names[3],\n options: {\n drawPoints: {\n style: \"circle\" // square, circle\n },\n shaded: {\n orientation: \"top\" // top, bottom\n }\n }\n});\n\nvar container = document.getElementById(\"visualization\");\nvar items = [\n { x: \"2014-06-13\", y: 60 },\n { x: \"2014-06-14\", y: 40 },\n { x: \"2014-06-15\", y: 55 },\n { x: \"2014-06-16\", y: 40 },\n { x: \"2014-06-17\", y: 50 },\n { x: \"2014-06-13\", y: 30, group: 0 },\n { x: \"2014-06-14\", y: 10, group: 0 },\n { x: \"2014-06-15\", y: 15, group: 1 },\n { x: \"2014-06-16\", y: 30, group: 1 },\n { x: \"2014-06-17\", y: 10, group: 1 },\n { x: \"2014-06-18\", y: 15, group: 1 },\n { x: \"2014-06-19\", y: 52, group: 1 },\n { x: \"2014-06-20\", y: 10, group: 1 },\n { x: \"2014-06-21\", y: 20, group: 2 },\n { x: \"2014-06-22\", y: 60, group: 2 },\n { x: \"2014-06-23\", y: 10, group: 2 },\n { x: \"2014-06-24\", y: 25, group: 2 },\n { x: \"2014-06-25\", y: 30, group: 2 },\n { x: \"2014-06-26\", y: 20, group: 3 },\n { x: \"2014-06-27\", y: 60, group: 3 },\n { x: \"2014-06-28\", y: 10, group: 3 },\n { x: \"2014-06-29\", y: 25, group: 3 },\n { x: \"2014-06-30\", y: 30, group: 3 }\n];\n\nvar dataset = new vis.DataSet(items);\nvar options = {\n defaultGroup: \"ungrouped\",\n legend: true,\n start: \"2014-06-10\",\n end: \"2014-07-04\"\n};\nvar graph2d = new vis.Graph2d(container, dataset, groups, options);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Graph2d | Groups Example"}'
/><input
type="hidden"
name="js"
value='// create a dataSet with groups
var names = ["SquareShaded", "Bargraph", "Blank", "CircleShaded"];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
drawPoints: {
style: "square" // square, circle
},
shaded: {
orientation: "bottom" // top, bottom
}
}
});
groups.add({
id: 1,
content: names[1],
options: {
style: "bar"
}
});
groups.add({
id: 2,
content: names[2],
options: { drawPoints: false }
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: {
style: "circle" // square, circle
},
shaded: {
orientation: "top" // top, bottom
}
}
});
var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-13", y: 60 },
{ x: "2014-06-14", y: 40 },
{ x: "2014-06-15", y: 55 },
{ x: "2014-06-16", y: 40 },
{ x: "2014-06-17", y: 50 },
{ x: "2014-06-13", y: 30, group: 0 },
{ x: "2014-06-14", y: 10, group: 0 },
{ x: "2014-06-15", y: 15, group: 1 },
{ x: "2014-06-16", y: 30, group: 1 },
{ x: "2014-06-17", y: 10, group: 1 },
{ x: "2014-06-18", y: 15, group: 1 },
{ x: "2014-06-19", y: 52, group: 1 },
{ x: "2014-06-20", y: 10, group: 1 },
{ x: "2014-06-21", y: 20, group: 2 },
{ x: "2014-06-22", y: 60, group: 2 },
{ x: "2014-06-23", y: 10, group: 2 },
{ x: "2014-06-24", y: 25, group: 2 },
{ x: "2014-06-25", y: 30, group: 2 },
{ x: "2014-06-26", y: 20, group: 3 },
{ x: "2014-06-27", y: 60, group: 3 },
{ x: "2014-06-28", y: 10, group: 3 },
{ x: "2014-06-29", y: 25, group: 3 },
{ x: "2014-06-30", y: 30, group: 3 }
];
var dataset = new vis.DataSet(items);
var options = {
defaultGroup: "ungrouped",
legend: true,
start: "2014-06-10",
end: "2014-07-04"
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Groups Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the groups functionality within Graph2d. This works in the
same way as it does in Timeline, We have however simplified the constructor to
accept groups as well to shorten the code. These groups are the method used in
Graph2d to define individual graphs. These groups can be given an individual
class as well as all the styling options you can supply to Graph2d! This
example, as well as the ones that follow will showcase a few different usages
of these options. <br />
<br />
This example also introduces the automatically generated legend. The icons are
automatically generated and the label is the content as you define it in the
groups. If you have datapoints that are not part of a group, a default group
is created with the label: &apos;default&apos;. In this example, the setting
<code>defaultGroup</code> is used to rename the default group to
&apos;ungrouped&apos;.
</div>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="03_groups.html"
><div class="example-image">
<img
src="thumbnails/a7ef9d80de6343508f797737e82dab96088d65f662a4a606cf689b83ad08ccb3.png"
alt="Groups Example"
/></div></a></span
><span class="example-link"
><div>
<a href="06_interpolation.html">Interpolation</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 groups
var names = ["centripetal", "chordal", "uniform", "disabled"];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
drawPoints: false,
interpolation: {
parametrization: "centripetal"
}
}
});
groups.add({
id: 1,
content: names[1],
options: {
drawPoints: false,
interpolation: {
parametrization: "chordal"
}
}
});
groups.add({
id: 2,
content: names[2],
options: {
drawPoints: false,
interpolation: {
parametrization: "uniform"
}
}
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: { style: "circle" },
interpolation: false
}
});
var container = document.getElementById("visualization");
var dataset = new vis.DataSet();
for (var i = 0; i < names.length; i++) {
dataset.add([
{ x: "2014-06-12", y: 0, group: i },
{ x: "2014-06-13", y: 40, group: i },
{ x: "2014-06-14", y: 10, group: i },
{ x: "2014-06-15", y: 15, group: i },
{ x: "2014-06-15", y: 30, group: i },
{ x: "2014-06-17", y: 10, group: i },
{ x: "2014-06-18", y: 15, group: i },
{ x: "2014-06-19", y: 52, group: i },
{ x: "2014-06-20", y: 10, group: i },
{ x: "2014-06-21", y: 20, group: i }
]);
}
var options = {
drawPoints: false,
dataAxis: { visible: false },
legend: true,
start: "2014-06-11",
end: "2014-06-22"
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Interpolation</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
The Graph2d makes use of
<a
href="https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline"
target="_blank"
>Catmull-Rom spline interpolation</a
>. The user can configure these per group, or globally. In this example we
show all 4 possiblities. The differences are in the parametrization of the
curves. The options are <code>uniform</code>, <code>chordal</code> and
<code>centripetal</code>. Alternatively you can disable the Catmull-Rom
interpolation and a linear interpolation will be used. The
<code>centripetal</code> parametrization produces the best result (no self
intersection, yet follows the line closely) and is therefore the default
setting. <br /><br />
For both the <code>centripetal</code> and
<code>chordal</code> parametrization, the distances between the points have to
be calculated and this makes these methods computationally intensive if there
are very many points. The <code>uniform</code> parametrization still has to do
transformations, though it does not have to calculate the distance between
point. Finally, the linear interpolation is the fastest method. For more on
the Catmull-Rom method,
<a
href="https://www.cemyuksel.com/research/catmullrom_param/catmullrom.pdf"
target="_blank"
>C. Yuksel et al. have an interesting paper titled &#x2033;On the
parametrization of Catmull-Rom Curves&#x2033;</a
>.
</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://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Graph2d | Interpolation"
/>
</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":"<h2>Graph2d | Interpolation</h2>\n<div style=\"width:700px; font-size:14px; text-align: justify;\">\n The Graph2d makes use of\n <a\n href=\"https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline\"\n target=\"_blank\"\n >Catmull-Rom spline interpolation</a\n >. The user can configure these per group, or globally. In this example we\n show all 4 possiblities. The differences are in the parametrization of the\n curves. The options are <code>uniform</code>, <code>chordal</code> and\n <code>centripetal</code>. Alternatively you can disable the Catmull-Rom\n interpolation and a linear interpolation will be used. The\n <code>centripetal</code> parametrization produces the best result (no self\n intersection, yet follows the line closely) and is therefore the default\n setting. <br /><br />\n For both the <code>centripetal</code> and\n <code>chordal</code> parametrization, the distances between the points have to\n be calculated and this makes these methods computationally intensive if there\n are very many points. The <code>uniform</code> parametrization still has to do\n transformations, though it does not have to calculate the distance between\n point. Finally, the linear interpolation is the fastest method. For more on\n the Catmull-Rom method,\n <a\n href=\"https://www.cemyuksel.com/research/catmullrom_param/catmullrom.pdf\"\n target=\"_blank\"\n >C. Yuksel et al. have an interesting paper titled &#x2033;On the\n parametrization of Catmull-Rom Curves&#x2033;</a\n >.\n</div>\n<br />\n<div id=\"visualization\"></div>\n","js":"// create a dataSet with groups\nvar names = [\"centripetal\", \"chordal\", \"uniform\", \"disabled\"];\nvar groups = new vis.DataSet();\ngroups.add({\n id: 0,\n content: names[0],\n options: {\n drawPoints: false,\n interpolation: {\n parametrization: \"centripetal\"\n }\n }\n});\n\ngroups.add({\n id: 1,\n content: names[1],\n options: {\n drawPoints: false,\n interpolation: {\n parametrization: \"chordal\"\n }\n }\n});\n\ngroups.add({\n id: 2,\n content: names[2],\n options: {\n drawPoints: false,\n interpolation: {\n parametrization: \"uniform\"\n }\n }\n});\n\ngroups.add({\n id: 3,\n content: names[3],\n options: {\n drawPoints: { style: \"circle\" },\n interpolation: false\n }\n});\n\nvar container = document.getElementById(\"visualization\");\nvar dataset = new vis.DataSet();\nfor (var i = 0; i < names.length; i++) {\n dataset.add([\n { x: \"2014-06-12\", y: 0, group: i },\n { x: \"2014-06-13\", y: 40, group: i },\n { x: \"2014-06-14\", y: 10, group: i },\n { x: \"2014-06-15\", y: 15, group: i },\n { x: \"2014-06-15\", y: 30, group: i },\n { x: \"2014-06-17\", y: 10, group: i },\n { x: \"2014-06-18\", y: 15, group: i },\n { x: \"2014-06-19\", y: 52, group: i },\n { x: \"2014-06-20\", y: 10, group: i },\n { x: \"2014-06-21\", y: 20, group: i }\n ]);\n}\n\nvar options = {\n drawPoints: false,\n dataAxis: { visible: false },\n legend: true,\n start: \"2014-06-11\",\n end: \"2014-06-22\"\n};\nvar graph2d = new vis.Graph2d(container, dataset, groups, options);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Graph2d | Interpolation"}'
/><input
type="hidden"
name="js"
value='// create a dataSet with groups
var names = ["centripetal", "chordal", "uniform", "disabled"];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
drawPoints: false,
interpolation: {
parametrization: "centripetal"
}
}
});
groups.add({
id: 1,
content: names[1],
options: {
drawPoints: false,
interpolation: {
parametrization: "chordal"
}
}
});
groups.add({
id: 2,
content: names[2],
options: {
drawPoints: false,
interpolation: {
parametrization: "uniform"
}
}
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: { style: "circle" },
interpolation: false
}
});
var container = document.getElementById("visualization");
var dataset = new vis.DataSet();
for (var i = 0; i < names.length; i++) {
dataset.add([
{ x: "2014-06-12", y: 0, group: i },
{ x: "2014-06-13", y: 40, group: i },
{ x: "2014-06-14", y: 10, group: i },
{ x: "2014-06-15", y: 15, group: i },
{ x: "2014-06-15", y: 30, group: i },
{ x: "2014-06-17", y: 10, group: i },
{ x: "2014-06-18", y: 15, group: i },
{ x: "2014-06-19", y: 52, group: i },
{ x: "2014-06-20", y: 10, group: i },
{ x: "2014-06-21", y: 20, group: i }
]);
}
var options = {
drawPoints: false,
dataAxis: { visible: false },
legend: true,
start: "2014-06-11",
end: "2014-06-22"
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Interpolation</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
The Graph2d makes use of
<a
href="https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline"
target="_blank"
>Catmull-Rom spline interpolation</a
>. The user can configure these per group, or globally. In this example we
show all 4 possiblities. The differences are in the parametrization of the
curves. The options are <code>uniform</code>, <code>chordal</code> and
<code>centripetal</code>. Alternatively you can disable the Catmull-Rom
interpolation and a linear interpolation will be used. The
<code>centripetal</code> parametrization produces the best result (no self
intersection, yet follows the line closely) and is therefore the default
setting. <br /><br />
For both the <code>centripetal</code> and
<code>chordal</code> parametrization, the distances between the points have to
be calculated and this makes these methods computationally intensive if there
are very many points. The <code>uniform</code> parametrization still has to do
transformations, though it does not have to calculate the distance between
point. Finally, the linear interpolation is the fastest method. For more on
the Catmull-Rom method,
<a
href="https://www.cemyuksel.com/research/catmullrom_param/catmullrom.pdf"
target="_blank"
>C. Yuksel et al. have an interesting paper titled &#x2033;On the
parametrization of Catmull-Rom Curves&#x2033;</a
>.
</div>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="06_interpolation.html"
><div class="example-image">
<img
src="thumbnails/3a3b41ecfc7fcf9df58604976b1ea988eb85b5a4a6c7b773c77a22abea39fbce.png"
alt="Interpolation"
/></div></a></span
><span class="example-link"
><div>
<a href="13_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 container = document.getElementById("visualization");
var items = [
{ x: "2014-06-11", y: 10 },
{ x: "2014-06-12", y: 25 },
{ x: "2014-06-13", y: 30 },
{ x: "2014-06-14", y: 10 },
{ x: "2014-06-15", y: 15 },
{ x: "2014-06-16", y: 30 }
];
var dataset = new vis.DataSet(items);
var options = {
start: "2014-06-10",
end: "2014-06-18"
};
var graph2d = new vis.Graph2d(container, dataset, options);
// update the locale when changing the select box value
var select = document.getElementById("locale");
select.onchange = function() {
graph2d.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='<h2>Graph2d | Localization</h2>
<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="Graph2d | 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":"<h2>Graph2d | Localization</h2>\n\n<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 container = document.getElementById(\"visualization\");\nvar items = [\n { x: \"2014-06-11\", y: 10 },\n { x: \"2014-06-12\", y: 25 },\n { x: \"2014-06-13\", y: 30 },\n { x: \"2014-06-14\", y: 10 },\n { x: \"2014-06-15\", y: 15 },\n { x: \"2014-06-16\", y: 30 }\n];\n\nvar dataset = new vis.DataSet(items);\nvar options = {\n start: \"2014-06-10\",\n end: \"2014-06-18\"\n};\nvar graph2d = new vis.Graph2d(container, dataset, options);\n\n// update the locale when changing the select box value\nvar select = document.getElementById(\"locale\");\nselect.onchange = function() {\n graph2d.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":"Graph2d | Localization"}'
/><input
type="hidden"
name="js"
value='var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-11", y: 10 },
{ x: "2014-06-12", y: 25 },
{ x: "2014-06-13", y: 30 },
{ x: "2014-06-14", y: 10 },
{ x: "2014-06-15", y: 15 },
{ x: "2014-06-16", y: 30 }
];
var dataset = new vis.DataSet(items);
var options = {
start: "2014-06-10",
end: "2014-06-18"
};
var graph2d = new vis.Graph2d(container, dataset, options);
// update the locale when changing the select box value
var select = document.getElementById("locale");
select.onchange = function() {
graph2d.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='<h2>Graph2d | Localization</h2>
<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="13_localization.html"
><div class="example-image">
<img
src="thumbnails/e9dd78fd70340972e561d99795825919b4861785a10f83ec5d003b77cb79ac4a.png"
alt="Localization"
/></div></a></span
><span class="example-link"
><div>
<a href="08_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='var points = "none";
var interpolation = "linear";
function togglePoints() {
var pointsOptions = {};
var pointsField = document.getElementById("points");
if (points == "none") {
points = "circle";
pointsOptions = { drawPoints: { style: points } };
} else if (points == "circle") {
points = "square";
pointsOptions = { drawPoints: { style: points } };
} else if (points == "square") {
points = "none";
pointsOptions = { drawPoints: false };
}
pointsField.value = points;
graph2d.setOptions(pointsOptions);
}
function toggleInterpolation() {
var interpolationOptions = {};
var interpolationField = document.getElementById("interpolation");
if (interpolation == "linear") {
interpolation = "centripetal";
interpolationOptions = {
interpolation: { parametrization: interpolation }
};
} else if (interpolation == "centripetal") {
interpolation = "chordal";
interpolationOptions = {
interpolation: { parametrization: interpolation }
};
} else if (interpolation == "chordal") {
interpolation = "uniform";
interpolationOptions = {
interpolation: { parametrization: interpolation }
};
} else if (interpolation == "uniform") {
interpolation = "linear";
interpolationOptions = { interpolation: false };
}
interpolationField.value = interpolation;
graph2d.setOptions(interpolationOptions);
}
// create a dataset with items
var now = moment()
.minutes(0)
.seconds(0)
.milliseconds(0);
var dataset = new vis.DataSet({
type: { start: "ISODate", end: "ISODate" }
});
var startPoint = now;
var endPoint = now + 3600000 * 5000;
// create data -- this is seperated into 3 functions so we can update the span.
function createData() {
var span = document.getElementById("description");
span.innerHTML = "Generating data... (just javascript, not vis.graph2D)...";
setTimeout(generateData, 10);
}
function generateData() {
var count = parseInt(document.getElementById("count").value) || 100;
var newData = [];
var span = document.getElementById("description");
var start = now;
for (var i = 0; i < count; i++) {
var yval =
Math.sin(i / 100) * Math.cos(i / 50) * 50 + Math.sin(i / 1000) * 50;
newData.push({ id: i, x: start + 3600000 * i, y: yval });
}
span.innerHTML = "Loading data into Graph2d...";
setTimeout(function() {
loadDataIntoVis(newData);
}, 10);
}
function loadDataIntoVis(newData) {
var span = document.getElementById("description");
dataset.clear();
dataset.add(newData);
span.innerHTML = "Done!";
}
document.getElementById("draw").onclick = createData;
document.getElementById("toggleInterpolation").onclick = toggleInterpolation;
document.getElementById("togglePoints").onclick = togglePoints;
var container = document.getElementById("visualization");
var options = {
sampling: true,
drawPoints: { enabled: false, size: 3 },
interpolation: false,
start: startPoint,
end: endPoint
};
var graph2d = new vis.Graph2d(container, dataset, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
span.label {
width: 150px;
display: inline-block;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Performance</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example is a test of the performance of the Graph2d. Select the amount of
datapoints you want to plot and press draw. You can choose between the style
of the points as well as the interpolation method. This can only be toggled
with the buttons. The interpolation options may not look different for this
dataset but you can see their effects clearly in example 7.
<br /><br />
Linear interpolation and no points are the settings that will render quickest.
By default, Graph2d will downsample when there are more than 1 point per
pixel. This can be manually disabled at the cost of performance by using the
<code>sampling</code> option.
</div>
<br />
<p>
<span class="label">Number of items:</span><input id="count" value="50000" />
<input id="draw" type="button" value="draw" style="width:200px;" />
<span id="description"><b>Click the draw button to load the data!</b></span>
<br />
<span class="label">Interpolation method:</span
><input id="interpolation" value="linear" />
<input
id="toggleInterpolation"
type="button"
value="toggle Interpolation"
style="width:200px;"
/>
<br />
<span class="label">Points style:</span><input id="points" value="none" />
<input
id="togglePoints"
type="button"
value="toggle Points"
style="width:200px;"
/>
</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="Graph2d | 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}\nspan.label {\n width: 150px;\n display: inline-block;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h2>Graph2d | Performance</h2>\n<div style=\"width:700px; font-size:14px; text-align: justify;\">\n This example is a test of the performance of the Graph2d. Select the amount of\n datapoints you want to plot and press draw. You can choose between the style\n of the points as well as the interpolation method. This can only be toggled\n with the buttons. The interpolation options may not look different for this\n dataset but you can see their effects clearly in example 7.\n <br /><br />\n Linear interpolation and no points are the settings that will render quickest.\n By default, Graph2d will downsample when there are more than 1 point per\n pixel. This can be manually disabled at the cost of performance by using the\n <code>sampling</code> option.\n</div>\n<br />\n<p>\n <span class=\"label\">Number of items:</span><input id=\"count\" value=\"50000\" />\n <input id=\"draw\" type=\"button\" value=\"draw\" style=\"width:200px;\" />\n <span id=\"description\"><b>Click the draw button to load the data!</b></span>\n <br />\n\n <span class=\"label\">Interpolation method:</span\n ><input id=\"interpolation\" value=\"linear\" />\n <input\n id=\"toggleInterpolation\"\n type=\"button\"\n value=\"toggle Interpolation\"\n style=\"width:200px;\"\n />\n <br />\n <span class=\"label\">Points style:</span><input id=\"points\" value=\"none\" />\n <input\n id=\"togglePoints\"\n type=\"button\"\n value=\"toggle Points\"\n style=\"width:200px;\"\n />\n</p>\n<div id=\"visualization\"></div>\n","js":"var points = \"none\";\nvar interpolation = \"linear\";\n\nfunction togglePoints() {\n var pointsOptions = {};\n var pointsField = document.getElementById(\"points\");\n if (points == \"none\") {\n points = \"circle\";\n pointsOptions = { drawPoints: { style: points } };\n } else if (points == \"circle\") {\n points = \"square\";\n pointsOptions = { drawPoints: { style: points } };\n } else if (points == \"square\") {\n points = \"none\";\n pointsOptions = { drawPoints: false };\n }\n pointsField.value = points;\n\n graph2d.setOptions(pointsOptions);\n}\n\nfunction toggleInterpolation() {\n var interpolationOptions = {};\n var interpolationField = document.getElementById(\"interpolation\");\n if (interpolation == \"linear\") {\n interpolation = \"centripetal\";\n interpolationOptions = {\n interpolation: { parametrization: interpolation }\n };\n } else if (interpolation == \"centripetal\") {\n interpolation = \"chordal\";\n interpolationOptions = {\n interpolation: { parametrization: interpolation }\n };\n } else if (interpolation == \"chordal\") {\n interpolation = \"uniform\";\n interpolationOptions = {\n interpolation: { parametrization: interpolation }\n };\n } else if (interpolation == \"uniform\") {\n interpolation = \"linear\";\n interpolationOptions = { interpolation: false };\n }\n interpolationField.value = interpolation;\n graph2d.setOptions(interpolationOptions);\n}\n\n// create a dataset with items\nvar now = moment()\n .minutes(0)\n .seconds(0)\n .milliseconds(0);\nvar dataset = new vis.DataSet({\n type: { start: \"ISODate\", end: \"ISODate\" }\n});\n\nvar startPoint = now;\nvar endPoint = now + 3600000 * 5000;\n\n// create data -- this is seperated into 3 functions so we can update the span.\nfunction createData() {\n var span = document.getElementById(\"description\");\n span.innerHTML = \"Generating data... (just javascript, not vis.graph2D)...\";\n setTimeout(generateData, 10);\n}\n\nfunction generateData() {\n var count = parseInt(document.getElementById(\"count\").value) || 100;\n var newData = [];\n var span = document.getElementById(\"description\");\n var start = now;\n for (var i = 0; i < count; i++) {\n var yval =\n Math.sin(i / 100) * Math.cos(i / 50) * 50 + Math.sin(i / 1000) * 50;\n newData.push({ id: i, x: start + 3600000 * i, y: yval });\n }\n span.innerHTML = \"Loading data into Graph2d...\";\n setTimeout(function() {\n loadDataIntoVis(newData);\n }, 10);\n}\n\nfunction loadDataIntoVis(newData) {\n var span = document.getElementById(\"description\");\n dataset.clear();\n dataset.add(newData);\n span.innerHTML = \"Done!\";\n}\n\ndocument.getElementById(\"draw\").onclick = createData;\ndocument.getElementById(\"toggleInterpolation\").onclick = toggleInterpolation;\ndocument.getElementById(\"togglePoints\").onclick = togglePoints;\n\nvar container = document.getElementById(\"visualization\");\nvar options = {\n sampling: true,\n drawPoints: { enabled: false, size: 3 },\n interpolation: false,\n start: startPoint,\n end: endPoint\n};\n\nvar graph2d = new vis.Graph2d(container, dataset, 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":"Graph2d | Performance"}'
/><input
type="hidden"
name="js"
value='var points = "none";
var interpolation = "linear";
function togglePoints() {
var pointsOptions = {};
var pointsField = document.getElementById("points");
if (points == "none") {
points = "circle";
pointsOptions = { drawPoints: { style: points } };
} else if (points == "circle") {
points = "square";
pointsOptions = { drawPoints: { style: points } };
} else if (points == "square") {
points = "none";
pointsOptions = { drawPoints: false };
}
pointsField.value = points;
graph2d.setOptions(pointsOptions);
}
function toggleInterpolation() {
var interpolationOptions = {};
var interpolationField = document.getElementById("interpolation");
if (interpolation == "linear") {
interpolation = "centripetal";
interpolationOptions = {
interpolation: { parametrization: interpolation }
};
} else if (interpolation == "centripetal") {
interpolation = "chordal";
interpolationOptions = {
interpolation: { parametrization: interpolation }
};
} else if (interpolation == "chordal") {
interpolation = "uniform";
interpolationOptions = {
interpolation: { parametrization: interpolation }
};
} else if (interpolation == "uniform") {
interpolation = "linear";
interpolationOptions = { interpolation: false };
}
interpolationField.value = interpolation;
graph2d.setOptions(interpolationOptions);
}
// create a dataset with items
var now = moment()
.minutes(0)
.seconds(0)
.milliseconds(0);
var dataset = new vis.DataSet({
type: { start: "ISODate", end: "ISODate" }
});
var startPoint = now;
var endPoint = now + 3600000 * 5000;
// create data -- this is seperated into 3 functions so we can update the span.
function createData() {
var span = document.getElementById("description");
span.innerHTML = "Generating data... (just javascript, not vis.graph2D)...";
setTimeout(generateData, 10);
}
function generateData() {
var count = parseInt(document.getElementById("count").value) || 100;
var newData = [];
var span = document.getElementById("description");
var start = now;
for (var i = 0; i < count; i++) {
var yval =
Math.sin(i / 100) * Math.cos(i / 50) * 50 + Math.sin(i / 1000) * 50;
newData.push({ id: i, x: start + 3600000 * i, y: yval });
}
span.innerHTML = "Loading data into Graph2d...";
setTimeout(function() {
loadDataIntoVis(newData);
}, 10);
}
function loadDataIntoVis(newData) {
var span = document.getElementById("description");
dataset.clear();
dataset.add(newData);
span.innerHTML = "Done!";
}
document.getElementById("draw").onclick = createData;
document.getElementById("toggleInterpolation").onclick = toggleInterpolation;
document.getElementById("togglePoints").onclick = togglePoints;
var container = document.getElementById("visualization");
var options = {
sampling: true,
drawPoints: { enabled: false, size: 3 },
interpolation: false,
start: startPoint,
end: endPoint
};
var graph2d = new vis.Graph2d(container, dataset, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: arial, sans-serif;
font-size: 11pt;
}
span.label {
width: 150px;
display: inline-block;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Performance</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example is a test of the performance of the Graph2d. Select the amount of
datapoints you want to plot and press draw. You can choose between the style
of the points as well as the interpolation method. This can only be toggled
with the buttons. The interpolation options may not look different for this
dataset but you can see their effects clearly in example 7.
<br /><br />
Linear interpolation and no points are the settings that will render quickest.
By default, Graph2d will downsample when there are more than 1 point per
pixel. This can be manually disabled at the cost of performance by using the
<code>sampling</code> option.
</div>
<br />
<p>
<span class="label">Number of items:</span><input id="count" value="50000" />
<input id="draw" type="button" value="draw" style="width:200px;" />
<span id="description"><b>Click the draw button to load the data!</b></span>
<br />
<span class="label">Interpolation method:</span
><input id="interpolation" value="linear" />
<input
id="toggleInterpolation"
type="button"
value="toggle Interpolation"
style="width:200px;"
/>
<br />
<span class="label">Points style:</span><input id="points" value="none" />
<input
id="togglePoints"
type="button"
value="toggle Points"
style="width:200px;"
/>
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="08_performance.html"
><div class="example-image">
<img
src="thumbnails/ea8feabcf5a182fcbbfe5909bb0b8a758e5806695dbee2c414c7cfb9d51ea0ce.png"
alt="Performance"
/></div></a></span
><span class="example-link"
><div>
<a href="04_rightAxis.html">Right Axis 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 groups
var names = ["Custom1", "Custom2", "Blank", "CircleShaded"];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: "custom-style1",
options: {
drawPoints: {
style: "square" // square, circle
},
shaded: {
orientation: "bottom" // top, bottom
}
}
});
groups.add({
id: 1,
content: names[1],
className: "custom-style2",
options: {
style: "bar",
drawPoints: { style: "circle", size: 10 }
}
});
groups.add({
id: 2,
content: names[2],
options: {
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: {
style: "circle" // square, circle
},
shaded: {
orientation: "top" // top, bottom
}
}
});
var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-13", y: 30, group: 0 },
{ x: "2014-06-14", y: 10, group: 0 },
{ x: "2014-06-15", y: 15, group: 1 },
{ x: "2014-06-16", y: 30, group: 1 },
{ x: "2014-06-17", y: 10, group: 1 },
{ x: "2014-06-18", y: 15, group: 1 },
{ x: "2014-06-19", y: 52, group: 1 },
{ x: "2014-06-20", y: 10, group: 1 },
{ x: "2014-06-21", y: 20, group: 2 },
{ x: "2014-06-22", y: 60, group: 2 },
{ x: "2014-06-23", y: 10, group: 2 },
{ x: "2014-06-24", y: 50, group: 2 },
{ x: "2014-06-25", y: 30, group: 2 },
{ x: "2014-06-26", y: 20, group: 3 },
{ x: "2014-06-27", y: 60, group: 3 },
{ x: "2014-06-28", y: 10, group: 3 },
{ x: "2014-06-29", y: 85, group: 3 },
{ x: "2014-06-30", y: 30, group: 3 }
];
var dataset = new vis.DataSet(items);
var options = {
legend: { right: { position: "top-left" } },
yAxisOrientation: "right", // right, left
dataAxis: { icons: true },
start: "2014-06-10",
end: "2014-07-04",
moveable: false
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
.custom-style1 {
fill: #0df200;
fill-opacity: 0;
stroke-width: 2px;
stroke: #0df200;
}
.custom-style2 {
fill: #f23303;
fill-opacity: 0;
stroke-width: 2px;
stroke: #ff0004;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Right Axis Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the all of the graphs outlined on the right side using the
<code>yAxisOrientation</code> option. We also show a few custom styles for the
graph and show icons on the axis, which are adhering to the custom styling.
Finally, the legend is manually positioned. Both the left and right axis have
their own legend. If one of the axis is unused, the legend is not shown. The
options for the legend have been split in a <code>left</code> and a
<code>right</code> segment. Since this example shows the right axis, the right
legend is configured.
</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://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Graph2d | Right Axis 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}\n\n.custom-style1 {\n fill: #0df200;\n fill-opacity: 0;\n stroke-width: 2px;\n stroke: #0df200;\n}\n\n.custom-style2 {\n fill: #f23303;\n fill-opacity: 0;\n stroke-width: 2px;\n stroke: #ff0004;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h2>Graph2d | Right Axis Example</h2>\n<div style=\"width:700px; font-size:14px; text-align: justify;\">\n This example shows the all of the graphs outlined on the right side using the\n <code>yAxisOrientation</code> option. We also show a few custom styles for the\n graph and show icons on the axis, which are adhering to the custom styling.\n Finally, the legend is manually positioned. Both the left and right axis have\n their own legend. If one of the axis is unused, the legend is not shown. The\n options for the legend have been split in a <code>left</code> and a\n <code>right</code> segment. Since this example shows the right axis, the right\n legend is configured.\n</div>\n<br />\n<div id=\"visualization\"></div>\n","js":"// create a dataSet with groups\nvar names = [\"Custom1\", \"Custom2\", \"Blank\", \"CircleShaded\"];\nvar groups = new vis.DataSet();\ngroups.add({\n id: 0,\n content: names[0],\n className: \"custom-style1\",\n options: {\n drawPoints: {\n style: \"square\" // square, circle\n },\n shaded: {\n orientation: \"bottom\" // top, bottom\n }\n }\n});\n\ngroups.add({\n id: 1,\n content: names[1],\n className: \"custom-style2\",\n options: {\n style: \"bar\",\n drawPoints: { style: \"circle\", size: 10 }\n }\n});\n\ngroups.add({\n id: 2,\n content: names[2],\n options: {\n drawPoints: false\n }\n});\n\ngroups.add({\n id: 3,\n content: names[3],\n options: {\n drawPoints: {\n style: \"circle\" // square, circle\n },\n shaded: {\n orientation: \"top\" // top, bottom\n }\n }\n});\n\nvar container = document.getElementById(\"visualization\");\nvar items = [\n { x: \"2014-06-13\", y: 30, group: 0 },\n { x: \"2014-06-14\", y: 10, group: 0 },\n { x: \"2014-06-15\", y: 15, group: 1 },\n { x: \"2014-06-16\", y: 30, group: 1 },\n { x: \"2014-06-17\", y: 10, group: 1 },\n { x: \"2014-06-18\", y: 15, group: 1 },\n { x: \"2014-06-19\", y: 52, group: 1 },\n { x: \"2014-06-20\", y: 10, group: 1 },\n { x: \"2014-06-21\", y: 20, group: 2 },\n { x: \"2014-06-22\", y: 60, group: 2 },\n { x: \"2014-06-23\", y: 10, group: 2 },\n { x: \"2014-06-24\", y: 50, group: 2 },\n { x: \"2014-06-25\", y: 30, group: 2 },\n { x: \"2014-06-26\", y: 20, group: 3 },\n { x: \"2014-06-27\", y: 60, group: 3 },\n { x: \"2014-06-28\", y: 10, group: 3 },\n { x: \"2014-06-29\", y: 85, group: 3 },\n { x: \"2014-06-30\", y: 30, group: 3 }\n];\n\nvar dataset = new vis.DataSet(items);\nvar options = {\n legend: { right: { position: \"top-left\" } },\n yAxisOrientation: \"right\", // right, left\n dataAxis: { icons: true },\n start: \"2014-06-10\",\n end: \"2014-07-04\",\n moveable: false\n};\nvar graph2d = new vis.Graph2d(container, dataset, groups, options);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Graph2d | Right Axis Example"}'
/><input
type="hidden"
name="js"
value='// create a dataSet with groups
var names = ["Custom1", "Custom2", "Blank", "CircleShaded"];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: "custom-style1",
options: {
drawPoints: {
style: "square" // square, circle
},
shaded: {
orientation: "bottom" // top, bottom
}
}
});
groups.add({
id: 1,
content: names[1],
className: "custom-style2",
options: {
style: "bar",
drawPoints: { style: "circle", size: 10 }
}
});
groups.add({
id: 2,
content: names[2],
options: {
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: {
style: "circle" // square, circle
},
shaded: {
orientation: "top" // top, bottom
}
}
});
var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-13", y: 30, group: 0 },
{ x: "2014-06-14", y: 10, group: 0 },
{ x: "2014-06-15", y: 15, group: 1 },
{ x: "2014-06-16", y: 30, group: 1 },
{ x: "2014-06-17", y: 10, group: 1 },
{ x: "2014-06-18", y: 15, group: 1 },
{ x: "2014-06-19", y: 52, group: 1 },
{ x: "2014-06-20", y: 10, group: 1 },
{ x: "2014-06-21", y: 20, group: 2 },
{ x: "2014-06-22", y: 60, group: 2 },
{ x: "2014-06-23", y: 10, group: 2 },
{ x: "2014-06-24", y: 50, group: 2 },
{ x: "2014-06-25", y: 30, group: 2 },
{ x: "2014-06-26", y: 20, group: 3 },
{ x: "2014-06-27", y: 60, group: 3 },
{ x: "2014-06-28", y: 10, group: 3 },
{ x: "2014-06-29", y: 85, group: 3 },
{ x: "2014-06-30", y: 30, group: 3 }
];
var dataset = new vis.DataSet(items);
var options = {
legend: { right: { position: "top-left" } },
yAxisOrientation: "right", // right, left
dataAxis: { icons: true },
start: "2014-06-10",
end: "2014-07-04",
moveable: false
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
.custom-style1 {
fill: #0df200;
fill-opacity: 0;
stroke-width: 2px;
stroke: #0df200;
}
.custom-style2 {
fill: #f23303;
fill-opacity: 0;
stroke-width: 2px;
stroke: #ff0004;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Right Axis Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the all of the graphs outlined on the right side using the
<code>yAxisOrientation</code> option. We also show a few custom styles for the
graph and show icons on the axis, which are adhering to the custom styling.
Finally, the legend is manually positioned. Both the left and right axis have
their own legend. If one of the axis is unused, the legend is not shown. The
options for the legend have been split in a <code>left</code> and a
<code>right</code> segment. Since this example shows the right axis, the right
legend is configured.
</div>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="04_rightAxis.html"
><div class="example-image">
<img
src="thumbnails/c2c5641f3f2c058335bb89759cd2ba2d3119b58da4feceafa50fd3a9b519d057.png"
alt="Right Axis Example"
/></div></a></span
><span class="example-link"
><div>
<a href="18_scatterplot.html">Scatterplot</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 = [];
for (var i = 0; i < 100; i++) {
items.push({
x: new Date("2014-06-11").valueOf() + Math.floor(Math.random() * 30000),
y: 500 + Math.random() * 100
});
}
var dataset = new vis.DataSet(items);
var options = {
sort: false,
sampling: false,
style: "points",
dataAxis: {
left: {
range: {
min: 300,
max: 800
}
}
},
drawPoints: {
enabled: true,
size: 6,
style: "circle" // square, circle
},
defaultGroup: "Scatterplot",
height: "600px"
};
var graph2d = new vis.Graph2d(container, dataset, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Scatterplot</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
You can manually disable the automatic sorting of the datapoints by using the
<code>sort</code> option. You can use this with the
<code>style: &apos;points&apos;</code> option for making a scatterplot!
</div>
<pre class="prettyprint lang-js">
var options = {
sort: false,
sampling:false,
style:&apos;points&apos;
};
</pre>
<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="Graph2d | Scatterplot"
/>
</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":"<h2>Graph2d | Scatterplot</h2>\n<div style=\"width:700px; font-size:14px; text-align: justify;\">\n You can manually disable the automatic sorting of the datapoints by using the\n <code>sort</code> option. You can use this with the\n <code>style: &apos;points&apos;</code> option for making a scatterplot!\n</div>\n<pre class=\"prettyprint lang-js\">\nvar options = {\n sort: false,\n sampling:false,\n style:&apos;points&apos;\n};\n</pre>\n<br />\n<div id=\"visualization\"></div>\n","js":"var container = document.getElementById(\"visualization\");\nvar items = [];\nfor (var i = 0; i < 100; i++) {\n items.push({\n x: new Date(\"2014-06-11\").valueOf() + Math.floor(Math.random() * 30000),\n y: 500 + Math.random() * 100\n });\n}\n\nvar dataset = new vis.DataSet(items);\nvar options = {\n sort: false,\n sampling: false,\n style: \"points\",\n dataAxis: {\n left: {\n range: {\n min: 300,\n max: 800\n }\n }\n },\n drawPoints: {\n enabled: true,\n size: 6,\n style: \"circle\" // square, circle\n },\n defaultGroup: \"Scatterplot\",\n height: \"600px\"\n};\nvar graph2d = new vis.Graph2d(container, dataset, options);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Graph2d | Scatterplot"}'
/><input
type="hidden"
name="js"
value='var container = document.getElementById("visualization");
var items = [];
for (var i = 0; i < 100; i++) {
items.push({
x: new Date("2014-06-11").valueOf() + Math.floor(Math.random() * 30000),
y: 500 + Math.random() * 100
});
}
var dataset = new vis.DataSet(items);
var options = {
sort: false,
sampling: false,
style: "points",
dataAxis: {
left: {
range: {
min: 300,
max: 800
}
}
},
drawPoints: {
enabled: true,
size: 6,
style: "circle" // square, circle
},
defaultGroup: "Scatterplot",
height: "600px"
};
var graph2d = new vis.Graph2d(container, dataset, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Scatterplot</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
You can manually disable the automatic sorting of the datapoints by using the
<code>sort</code> option. You can use this with the
<code>style: &apos;points&apos;</code> option for making a scatterplot!
</div>
<pre class="prettyprint lang-js">
var options = {
sort: false,
sampling:false,
style:&apos;points&apos;
};
</pre>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="18_scatterplot.html"
><div class="example-image">
<img
src="thumbnails/52b0f0328f90fd66f7548a27cfd1186de64ff06aa2de33be739e99266255c500.png"
alt="Scatterplot"
/></div></a></span
><span class="example-link"
><div>
<a href="07_scrollingAndSorting.html">Scrolling and Sorting</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 = [
{ x: "2014-06-11", y: 10 },
{ x: "2014-06-12", y: 25 },
{ x: "2014-06-13", y: 30 },
{ x: "2014-06-14", y: 10 },
{ x: "2014-06-15", y: 15 },
{ x: "2014-06-16", y: 30 },
{ x: "2014-06-11", y: 100 },
{ x: "2014-06-12", y: 250 },
{ x: "2014-06-13", y: 300 },
{ x: "2014-06-14", y: 100 },
{ x: "2014-06-15", y: 150 },
{ x: "2014-06-16", y: 300 },
{ x: "2014-06-11", y: 400 },
{ x: "2014-06-12", y: 450 },
{ x: "2014-06-13", y: 400 },
{ x: "2014-06-14", y: 500 },
{ x: "2014-06-15", y: 420 },
{ x: "2014-06-16", y: 600 },
{ x: "2014-06-11", y: 810 },
{ x: "2014-06-12", y: 825 },
{ x: "2014-06-13", y: 830 },
{ x: "2014-06-14", y: 810 },
{ x: "2014-06-15", y: 815 },
{ x: "2014-06-16", y: 900 }
];
var dataset = new vis.DataSet(items);
var options = {
legend: true,
sort: false,
defaultGroup: "doodle",
graphHeight: "1500px",
height: "500px",
start: "2014-06-10",
end: "2014-06-18"
};
var graph2d = new vis.Graph2d(container, dataset, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Scrolling and Sorting</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
You can determine the height of the Graph2d seperately from the height of the
frame. If the <code>graphHeight</code> is defined, and the
<code>height</code> is not, the frame will auto-scale to accommodate the
graphHeight. If the <code>height</code>
is defined as well, the user can scroll up and down vertically as well as
horizontally to view the graph.
<br /><br />
Vertical scrolling is planned, though not yet available. The graphHeight also
does not conform if only the <code>height</code> is defined. <br /><br />
You can manually disable the automatic sorting of the datapoints by using the
<code>sort</code> option. However, doing so does reduce the optimization of
the drawing so if you have a lot of points, keep <code>sort</code> turned on
for the best results.
</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://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Graph2d | Scrolling and Sorting"
/>
</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":"<h2>Graph2d | Scrolling and Sorting</h2>\n<div style=\"width:700px; font-size:14px; text-align: justify;\">\n You can determine the height of the Graph2d seperately from the height of the\n frame. If the <code>graphHeight</code> is defined, and the\n <code>height</code> is not, the frame will auto-scale to accommodate the\n graphHeight. If the <code>height</code>\n is defined as well, the user can scroll up and down vertically as well as\n horizontally to view the graph.\n <br /><br />\n Vertical scrolling is planned, though not yet available. The graphHeight also\n does not conform if only the <code>height</code> is defined. <br /><br />\n You can manually disable the automatic sorting of the datapoints by using the\n <code>sort</code> option. However, doing so does reduce the optimization of\n the drawing so if you have a lot of points, keep <code>sort</code> turned on\n for the best results.\n</div>\n<br />\n<div id=\"visualization\"></div>\n","js":"var container = document.getElementById(\"visualization\");\nvar items = [\n { x: \"2014-06-11\", y: 10 },\n { x: \"2014-06-12\", y: 25 },\n { x: \"2014-06-13\", y: 30 },\n { x: \"2014-06-14\", y: 10 },\n { x: \"2014-06-15\", y: 15 },\n { x: \"2014-06-16\", y: 30 },\n { x: \"2014-06-11\", y: 100 },\n { x: \"2014-06-12\", y: 250 },\n { x: \"2014-06-13\", y: 300 },\n { x: \"2014-06-14\", y: 100 },\n { x: \"2014-06-15\", y: 150 },\n { x: \"2014-06-16\", y: 300 },\n { x: \"2014-06-11\", y: 400 },\n { x: \"2014-06-12\", y: 450 },\n { x: \"2014-06-13\", y: 400 },\n { x: \"2014-06-14\", y: 500 },\n { x: \"2014-06-15\", y: 420 },\n { x: \"2014-06-16\", y: 600 },\n { x: \"2014-06-11\", y: 810 },\n { x: \"2014-06-12\", y: 825 },\n { x: \"2014-06-13\", y: 830 },\n { x: \"2014-06-14\", y: 810 },\n { x: \"2014-06-15\", y: 815 },\n { x: \"2014-06-16\", y: 900 }\n];\n\nvar dataset = new vis.DataSet(items);\nvar options = {\n legend: true,\n sort: false,\n defaultGroup: \"doodle\",\n graphHeight: \"1500px\",\n height: \"500px\",\n start: \"2014-06-10\",\n end: \"2014-06-18\"\n};\nvar graph2d = new vis.Graph2d(container, dataset, options);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Graph2d | Scrolling and Sorting"}'
/><input
type="hidden"
name="js"
value='var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-11", y: 10 },
{ x: "2014-06-12", y: 25 },
{ x: "2014-06-13", y: 30 },
{ x: "2014-06-14", y: 10 },
{ x: "2014-06-15", y: 15 },
{ x: "2014-06-16", y: 30 },
{ x: "2014-06-11", y: 100 },
{ x: "2014-06-12", y: 250 },
{ x: "2014-06-13", y: 300 },
{ x: "2014-06-14", y: 100 },
{ x: "2014-06-15", y: 150 },
{ x: "2014-06-16", y: 300 },
{ x: "2014-06-11", y: 400 },
{ x: "2014-06-12", y: 450 },
{ x: "2014-06-13", y: 400 },
{ x: "2014-06-14", y: 500 },
{ x: "2014-06-15", y: 420 },
{ x: "2014-06-16", y: 600 },
{ x: "2014-06-11", y: 810 },
{ x: "2014-06-12", y: 825 },
{ x: "2014-06-13", y: 830 },
{ x: "2014-06-14", y: 810 },
{ x: "2014-06-15", y: 815 },
{ x: "2014-06-16", y: 900 }
];
var dataset = new vis.DataSet(items);
var options = {
legend: true,
sort: false,
defaultGroup: "doodle",
graphHeight: "1500px",
height: "500px",
start: "2014-06-10",
end: "2014-06-18"
};
var graph2d = new vis.Graph2d(container, dataset, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Scrolling and Sorting</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
You can determine the height of the Graph2d seperately from the height of the
frame. If the <code>graphHeight</code> is defined, and the
<code>height</code> is not, the frame will auto-scale to accommodate the
graphHeight. If the <code>height</code>
is defined as well, the user can scroll up and down vertically as well as
horizontally to view the graph.
<br /><br />
Vertical scrolling is planned, though not yet available. The graphHeight also
does not conform if only the <code>height</code> is defined. <br /><br />
You can manually disable the automatic sorting of the datapoints by using the
<code>sort</code> option. However, doing so does reduce the optimization of
the drawing so if you have a lot of points, keep <code>sort</code> turned on
for the best results.
</div>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="07_scrollingAndSorting.html"
><div class="example-image">
<img
src="thumbnails/ae0df2001e1d3fa095e525eb58125fd74d99822d8d4b154f6b85b406d989db6f.png"
alt="Scrolling and Sorting"
/></div></a></span
><span class="example-link"
><div>
<a href="20_shading.html">Shading 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 groups
var names = ["top", "bottom", "zero", "none", "group", "none"];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
shaded: {
orientation: "top"
}
}
});
groups.add({
id: 1,
content: names[1],
options: {
shaded: {
orientation: "bottom"
}
}
});
groups.add({
id: 2,
content: names[2],
options: {
shaded: {
orientation: "zero"
}
}
});
groups.add({
id: 3,
options: {
excludeFromLegend: true
}
});
groups.add({
id: 4,
content: names[4],
options: {
shaded: {
orientation: "group",
groupId: "3"
}
}
});
groups.add({
id: 5,
content: names[5]
});
var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-11", y: 0, group: 0 },
{ x: "2014-06-12", y: 15, group: 0 },
{ x: "2014-06-13", y: -15, group: 0 },
{ x: "2014-06-14", y: 0, group: 0 },
{ x: "2014-06-15", y: 0, group: 1 },
{ x: "2014-06-16", y: 15, group: 1 },
{ x: "2014-06-17", y: -15, group: 1 },
{ x: "2014-06-18", y: 0, group: 1 },
{ x: "2014-06-19", y: 0, group: 2 },
{ x: "2014-06-20", y: 15, group: 2 },
{ x: "2014-06-21", y: -15, group: 2 },
{ x: "2014-06-22", y: 0, group: 2 },
{ x: "2014-06-23", y: -2, group: 3 },
{ x: "2014-06-24", y: 13, group: 3 },
{ x: "2014-06-25", y: -17, group: 3 },
{ x: "2014-06-26", y: -2, group: 3 },
{ x: "2014-06-23", y: 2, group: 4 },
{ x: "2014-06-24", y: 17, group: 4 },
{ x: "2014-06-25", y: -13, group: 4 },
{ x: "2014-06-26", y: 2, group: 4 },
{ x: "2014-06-27", y: 0, group: 5 },
{ x: "2014-06-28", y: 15, group: 5 },
{ x: "2014-06-29", y: -15, group: 5 },
{ x: "2014-06-30", y: 0, group: 5 }
];
var dataset = new vis.DataSet(items);
var options = {
legend: true,
start: "2014-06-07",
end: "2014-07-03"
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Shading Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the shading functionality within Graph2d.
</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://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Graph2d | Shading 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}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h2>Graph2d | Shading Example</h2>\n<div style=\"width:700px; font-size:14px; text-align: justify;\">\n This example shows the shading functionality within Graph2d.\n</div>\n<br />\n\n<div id=\"visualization\"></div>\n","js":"// create a dataSet with groups\nvar names = [\"top\", \"bottom\", \"zero\", \"none\", \"group\", \"none\"];\nvar groups = new vis.DataSet();\ngroups.add({\n id: 0,\n content: names[0],\n options: {\n shaded: {\n orientation: \"top\"\n }\n }\n});\n\ngroups.add({\n id: 1,\n content: names[1],\n options: {\n shaded: {\n orientation: \"bottom\"\n }\n }\n});\n\ngroups.add({\n id: 2,\n content: names[2],\n options: {\n shaded: {\n orientation: \"zero\"\n }\n }\n});\n\ngroups.add({\n id: 3,\n options: {\n excludeFromLegend: true\n }\n});\n\ngroups.add({\n id: 4,\n content: names[4],\n options: {\n shaded: {\n orientation: \"group\",\n groupId: \"3\"\n }\n }\n});\n\ngroups.add({\n id: 5,\n content: names[5]\n});\n\nvar container = document.getElementById(\"visualization\");\nvar items = [\n { x: \"2014-06-11\", y: 0, group: 0 },\n { x: \"2014-06-12\", y: 15, group: 0 },\n { x: \"2014-06-13\", y: -15, group: 0 },\n { x: \"2014-06-14\", y: 0, group: 0 },\n { x: \"2014-06-15\", y: 0, group: 1 },\n { x: \"2014-06-16\", y: 15, group: 1 },\n { x: \"2014-06-17\", y: -15, group: 1 },\n { x: \"2014-06-18\", y: 0, group: 1 },\n { x: \"2014-06-19\", y: 0, group: 2 },\n { x: \"2014-06-20\", y: 15, group: 2 },\n { x: \"2014-06-21\", y: -15, group: 2 },\n { x: \"2014-06-22\", y: 0, group: 2 },\n { x: \"2014-06-23\", y: -2, group: 3 },\n { x: \"2014-06-24\", y: 13, group: 3 },\n { x: \"2014-06-25\", y: -17, group: 3 },\n { x: \"2014-06-26\", y: -2, group: 3 },\n { x: \"2014-06-23\", y: 2, group: 4 },\n { x: \"2014-06-24\", y: 17, group: 4 },\n { x: \"2014-06-25\", y: -13, group: 4 },\n { x: \"2014-06-26\", y: 2, group: 4 },\n { x: \"2014-06-27\", y: 0, group: 5 },\n { x: \"2014-06-28\", y: 15, group: 5 },\n { x: \"2014-06-29\", y: -15, group: 5 },\n { x: \"2014-06-30\", y: 0, group: 5 }\n];\n\nvar dataset = new vis.DataSet(items);\nvar options = {\n legend: true,\n start: \"2014-06-07\",\n end: \"2014-07-03\"\n};\nvar graph2d = new vis.Graph2d(container, dataset, groups, options);\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Graph2d | Shading Example"}'
/><input
type="hidden"
name="js"
value='// create a dataSet with groups
var names = ["top", "bottom", "zero", "none", "group", "none"];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
shaded: {
orientation: "top"
}
}
});
groups.add({
id: 1,
content: names[1],
options: {
shaded: {
orientation: "bottom"
}
}
});
groups.add({
id: 2,
content: names[2],
options: {
shaded: {
orientation: "zero"
}
}
});
groups.add({
id: 3,
options: {
excludeFromLegend: true
}
});
groups.add({
id: 4,
content: names[4],
options: {
shaded: {
orientation: "group",
groupId: "3"
}
}
});
groups.add({
id: 5,
content: names[5]
});
var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-11", y: 0, group: 0 },
{ x: "2014-06-12", y: 15, group: 0 },
{ x: "2014-06-13", y: -15, group: 0 },
{ x: "2014-06-14", y: 0, group: 0 },
{ x: "2014-06-15", y: 0, group: 1 },
{ x: "2014-06-16", y: 15, group: 1 },
{ x: "2014-06-17", y: -15, group: 1 },
{ x: "2014-06-18", y: 0, group: 1 },
{ x: "2014-06-19", y: 0, group: 2 },
{ x: "2014-06-20", y: 15, group: 2 },
{ x: "2014-06-21", y: -15, group: 2 },
{ x: "2014-06-22", y: 0, group: 2 },
{ x: "2014-06-23", y: -2, group: 3 },
{ x: "2014-06-24", y: 13, group: 3 },
{ x: "2014-06-25", y: -17, group: 3 },
{ x: "2014-06-26", y: -2, group: 3 },
{ x: "2014-06-23", y: 2, group: 4 },
{ x: "2014-06-24", y: 17, group: 4 },
{ x: "2014-06-25", y: -13, group: 4 },
{ x: "2014-06-26", y: 2, group: 4 },
{ x: "2014-06-27", y: 0, group: 5 },
{ x: "2014-06-28", y: 15, group: 5 },
{ x: "2014-06-29", y: -15, group: 5 },
{ x: "2014-06-30", y: 0, group: 5 }
];
var dataset = new vis.DataSet(items);
var options = {
legend: true,
start: "2014-06-07",
end: "2014-07-03"
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Shading Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the shading functionality within Graph2d.
</div>
<br />
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="20_shading.html"
><div class="example-image">
<img
src="thumbnails/072dbc8eab6f60bddf63e585e953ab7ddb4c8e8a85b3c8941c15cb6b4c522923.png"
alt="Shading Example"
/></div></a></span
><span class="example-link"
><div>
<a href="15_streaming_data.html">Streaming 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='var DELAY = 1000; // delay in ms to add new data points
var strategy = document.getElementById("strategy");
// create a graph2d with an (currently empty) dataset
var container = document.getElementById("visualization");
var dataset = new vis.DataSet();
var options = {
start: vis.moment().add(-30, "seconds"), // changed so its faster
end: vis.moment(),
dataAxis: {
left: {
range: {
min: -10,
max: 10
}
}
},
drawPoints: {
style: "circle" // square, circle
},
shaded: {
orientation: "bottom" // top, bottom
}
};
var graph2d = new vis.Graph2d(container, dataset, options);
// a function to generate data points
function y(x) {
return (Math.sin(x / 2) + Math.cos(x / 4)) * 5;
}
function renderStep() {
// move the window (you can think of different strategies).
var now = vis.moment();
var range = graph2d.getWindow();
var interval = range.end - range.start;
switch (strategy.value) {
case "continuous":
// continuously move the window
graph2d.setWindow(now - interval, now, { animation: false });
requestAnimationFrame(renderStep);
break;
case "discrete":
graph2d.setWindow(now - interval, now, { animation: false });
setTimeout(renderStep, DELAY);
break;
default:
// 'static'
// move the window 90% to the left when now is larger than the end of the window
if (now > range.end) {
graph2d.setWindow(now - 0.1 * interval, now + 0.9 * interval);
}
setTimeout(renderStep, DELAY);
break;
}
}
renderStep();
/**
* Add a new datapoint to the graph
*/
function addDataPoint() {
// add a new data point to the dataset
var now = vis.moment();
dataset.add({
x: now,
y: y(now / 1000)
});
// remove all data points which are no longer visible
var range = graph2d.getWindow();
var interval = range.end - range.start;
var oldIds = dataset.getIds({
filter: function(item) {
return item.x < range.start - interval;
}
});
dataset.remove(oldIds);
setTimeout(addDataPoint, DELAY);
}
addDataPoint();
'
/><input
type="hidden"
name="css"
value="body,
html,
select {
font: 10pt sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Streaming data</h2>
<p style="max-width: 700px;">
This example demonstrates how to apply streaming data input to the Graph2d.
The example shows two different ways to let the window move along with the new
data, and there are more strategies for that. Note also that it is possible to
disable moving and/or zooming the graph by setting options
<code>moveable</code> and <code>zoomable</code> false.
</p>
<p>
<label for="strategy">Strategy:</label>
<select id="strategy">
<option value="continuous" selected>Continuous (CPU intensive)</option>
<option value="discrete">Discrete</option>
<option value="static">Static</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="Graph2d | Streaming 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,\nselect {\n font: 10pt sans-serif;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h2>Graph2d | Streaming data</h2>\n<p style=\"max-width: 700px;\">\n This example demonstrates how to apply streaming data input to the Graph2d.\n The example shows two different ways to let the window move along with the new\n data, and there are more strategies for that. Note also that it is possible to\n disable moving and/or zooming the graph by setting options\n <code>moveable</code> and <code>zoomable</code> false.\n</p>\n\n<p>\n <label for=\"strategy\">Strategy:</label>\n <select id=\"strategy\">\n <option value=\"continuous\" selected>Continuous (CPU intensive)</option>\n <option value=\"discrete\">Discrete</option>\n <option value=\"static\">Static</option>\n </select>\n</p>\n\n<div id=\"visualization\"></div>\n","js":"var DELAY = 1000; // delay in ms to add new data points\n\nvar strategy = document.getElementById(\"strategy\");\n\n// create a graph2d with an (currently empty) dataset\nvar container = document.getElementById(\"visualization\");\nvar dataset = new vis.DataSet();\n\nvar options = {\n start: vis.moment().add(-30, \"seconds\"), // changed so its faster\n end: vis.moment(),\n dataAxis: {\n left: {\n range: {\n min: -10,\n max: 10\n }\n }\n },\n drawPoints: {\n style: \"circle\" // square, circle\n },\n shaded: {\n orientation: \"bottom\" // top, bottom\n }\n};\nvar graph2d = new vis.Graph2d(container, dataset, options);\n\n// a function to generate data points\nfunction y(x) {\n return (Math.sin(x / 2) + Math.cos(x / 4)) * 5;\n}\n\nfunction renderStep() {\n // move the window (you can think of different strategies).\n var now = vis.moment();\n var range = graph2d.getWindow();\n var interval = range.end - range.start;\n switch (strategy.value) {\n case \"continuous\":\n // continuously move the window\n graph2d.setWindow(now - interval, now, { animation: false });\n requestAnimationFrame(renderStep);\n break;\n\n case \"discrete\":\n graph2d.setWindow(now - interval, now, { animation: false });\n setTimeout(renderStep, DELAY);\n break;\n\n default:\n // 'static'\n // move the window 90% to the left when now is larger than the end of the window\n if (now > range.end) {\n graph2d.setWindow(now - 0.1 * interval, now + 0.9 * interval);\n }\n setTimeout(renderStep, DELAY);\n break;\n }\n}\nrenderStep();\n\n/**\n * Add a new datapoint to the graph\n */\nfunction addDataPoint() {\n // add a new data point to the dataset\n var now = vis.moment();\n dataset.add({\n x: now,\n y: y(now / 1000)\n });\n\n // remove all data points which are no longer visible\n var range = graph2d.getWindow();\n var interval = range.end - range.start;\n var oldIds = dataset.getIds({\n filter: function(item) {\n return item.x < range.start - interval;\n }\n });\n dataset.remove(oldIds);\n\n setTimeout(addDataPoint, DELAY);\n}\naddDataPoint();\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Graph2d | Streaming data"}'
/><input
type="hidden"
name="js"
value='var DELAY = 1000; // delay in ms to add new data points
var strategy = document.getElementById("strategy");
// create a graph2d with an (currently empty) dataset
var container = document.getElementById("visualization");
var dataset = new vis.DataSet();
var options = {
start: vis.moment().add(-30, "seconds"), // changed so its faster
end: vis.moment(),
dataAxis: {
left: {
range: {
min: -10,
max: 10
}
}
},
drawPoints: {
style: "circle" // square, circle
},
shaded: {
orientation: "bottom" // top, bottom
}
};
var graph2d = new vis.Graph2d(container, dataset, options);
// a function to generate data points
function y(x) {
return (Math.sin(x / 2) + Math.cos(x / 4)) * 5;
}
function renderStep() {
// move the window (you can think of different strategies).
var now = vis.moment();
var range = graph2d.getWindow();
var interval = range.end - range.start;
switch (strategy.value) {
case "continuous":
// continuously move the window
graph2d.setWindow(now - interval, now, { animation: false });
requestAnimationFrame(renderStep);
break;
case "discrete":
graph2d.setWindow(now - interval, now, { animation: false });
setTimeout(renderStep, DELAY);
break;
default:
// 'static'
// move the window 90% to the left when now is larger than the end of the window
if (now > range.end) {
graph2d.setWindow(now - 0.1 * interval, now + 0.9 * interval);
}
setTimeout(renderStep, DELAY);
break;
}
}
renderStep();
/**
* Add a new datapoint to the graph
*/
function addDataPoint() {
// add a new data point to the dataset
var now = vis.moment();
dataset.add({
x: now,
y: y(now / 1000)
});
// remove all data points which are no longer visible
var range = graph2d.getWindow();
var interval = range.end - range.start;
var oldIds = dataset.getIds({
filter: function(item) {
return item.x < range.start - interval;
}
});
dataset.remove(oldIds);
setTimeout(addDataPoint, DELAY);
}
addDataPoint();
'
/><input
type="hidden"
name="css"
value="body,
html,
select {
font: 10pt sans-serif;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Streaming data</h2>
<p style="max-width: 700px;">
This example demonstrates how to apply streaming data input to the Graph2d.
The example shows two different ways to let the window move along with the new
data, and there are more strategies for that. Note also that it is possible to
disable moving and/or zooming the graph by setting options
<code>moveable</code> and <code>zoomable</code> false.
</p>
<p>
<label for="strategy">Strategy:</label>
<select id="strategy">
<option value="continuous" selected>Continuous (CPU intensive)</option>
<option value="discrete">Discrete</option>
<option value="static">Static</option>
</select>
</p>
<div id="visualization"></div>
'
/></form
></span>
</div>
<a href="15_streaming_data.html"
><div class="example-image">
<img
src="thumbnails/3d4c763bb35e8989f9c9dedefa173f3dbba9c1304af4d347d4938a6920a3ff1c.png"
alt="Streaming data"
/></div></a></span
><span class="example-link"
><div>
<a href="14_toggleGroups.html">Toggle 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='// create a dataSet with groups
var names = ["SquareShaded", "Bargraph", "Blank", "CircleShaded"];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
drawPoints: {
style: "square" // square, circle
},
shaded: {
orientation: "bottom" // top, bottom
}
}
});
groups.add({
id: 1,
content: names[1],
options: {
style: "bar"
}
});
groups.add({
id: 2,
content: names[2],
options: { drawPoints: false }
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: {
style: "circle" // square, circle
},
shaded: {
orientation: "top" // top, bottom
}
}
});
var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-13", y: 60 },
{ x: "2014-06-14", y: 40 },
{ x: "2014-06-15", y: 55 },
{ x: "2014-06-16", y: 40 },
{ x: "2014-06-17", y: 50 },
{ x: "2014-06-13", y: 30, group: 0 },
{ x: "2014-06-14", y: 10, group: 0 },
{ x: "2014-06-15", y: 15, group: 1 },
{ x: "2014-06-16", y: 30, group: 1 },
{ x: "2014-06-17", y: 10, group: 1 },
{ x: "2014-06-18", y: 15, group: 1 },
{ x: "2014-06-19", y: 52, group: 1 },
{ x: "2014-06-20", y: 10, group: 1 },
{ x: "2014-06-21", y: 20, group: 2 },
{ x: "2014-06-22", y: 60, group: 2 },
{ x: "2014-06-23", y: 10, group: 2 },
{ x: "2014-06-24", y: 25, group: 2 },
{ x: "2014-06-25", y: 30, group: 2 },
{ x: "2014-06-26", y: 20, group: 3 },
{ x: "2014-06-27", y: 60, group: 3 },
{ x: "2014-06-28", y: 10, group: 3 },
{ x: "2014-06-29", y: 25, group: 3 },
{ x: "2014-06-30", y: 30, group: 3 }
];
var dataset = new vis.DataSet(items);
var options = {
defaultGroup: "ungrouped",
legend: false,
graphHeight: 200,
start: "2014-06-10",
end: "2014-07-04",
showMajorLabels: false,
showMinorLabels: false
};
var graph2d1 = new vis.Graph2d(
document.getElementById("visualization1"),
dataset,
groups,
options
);
var graph2d2 = new vis.Graph2d(
document.getElementById("visualization2"),
dataset,
groups,
options
);
var graph2d3 = new vis.Graph2d(
document.getElementById("visualization3"),
dataset,
groups,
options
);
var graph2d4 = new vis.Graph2d(
document.getElementById("visualization4"),
dataset,
groups,
options
);
var graph2d5 = new vis.Graph2d(
document.getElementById("visualization5"),
dataset,
groups,
options
);
var graph2d6 = new vis.Graph2d(
document.getElementById("visualization6"),
dataset,
groups,
options
);
graph2d1.setOptions({
groups: {
visibility: { 0: true, 1: false, 2: false, 3: false, __ungrouped__: false }
}
});
graph2d2.setOptions({
groups: {
visibility: { 0: false, 1: true, 2: false, 3: false, __ungrouped__: false }
}
});
graph2d3.setOptions({
groups: {
visibility: { 0: false, 1: false, 2: true, 3: false, __ungrouped__: false }
}
});
graph2d4.setOptions({
groups: {
visibility: { 0: false, 1: false, 2: false, 3: true, __ungrouped__: false }
}
});
graph2d5.setOptions({
groups: {
visibility: { 0: false, 1: false, 2: false, 3: false, __ungrouped__: true }
}
});
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
div.graphs {
width: 300px;
display: inline-block;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Groups Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the groups visibility functionality within Graph2d. Groups
have their own visibility option. By using this, all graph2d instances using
those groups would show or hide that group. If you have multiple instances
sharing the same data and groups, you can use the groups.visibility option to
set it on an instance level. The graphs below all share the same groups, items
and initial options. We then use a setOptions like so:
<pre class="prettyprint lang-js">
graph2d1.setOptions({
groups:{
visibility:{
0:true, // group id:0 visible
1:false, // group id:1 hidden
2:false, // group id:2 hidden
3:false, // group id:3 hidden
&quot;__ungrouped__&quot;:false // default group hidden
}
}
})
</pre
>
</div>
<br />
<div class="graphs" id="visualization1"></div>
<div class="graphs" id="visualization2"></div>
<div class="graphs" id="visualization3"></div>
<div class="graphs" id="visualization4"></div>
<div class="graphs" id="visualization5"></div>
<div class="graphs" id="visualization6"></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="Graph2d | Toggle 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: sans-serif;\n}\n\ndiv.graphs {\n width: 300px;\n display: inline-block;\n}\n","css_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.css","html":"<h2>Graph2d | Groups Example</h2>\n<div style=\"width:700px; font-size:14px; text-align: justify;\">\n This example shows the groups visibility functionality within Graph2d. Groups\n have their own visibility option. By using this, all graph2d instances using\n those groups would show or hide that group. If you have multiple instances\n sharing the same data and groups, you can use the groups.visibility option to\n set it on an instance level. The graphs below all share the same groups, items\n and initial options. We then use a setOptions like so:\n\n <pre class=\"prettyprint lang-js\">\n graph2d1.setOptions({\n groups:{\n visibility:{\n 0:true, // group id:0 visible\n 1:false, // group id:1 hidden\n 2:false, // group id:2 hidden\n 3:false, // group id:3 hidden\n &quot;__ungrouped__&quot;:false // default group hidden\n }\n }\n })\n </pre\n >\n</div>\n<br />\n\n<div class=\"graphs\" id=\"visualization1\"></div>\n<div class=\"graphs\" id=\"visualization2\"></div>\n<div class=\"graphs\" id=\"visualization3\"></div>\n<div class=\"graphs\" id=\"visualization4\"></div>\n<div class=\"graphs\" id=\"visualization5\"></div>\n<div class=\"graphs\" id=\"visualization6\"></div>\n","js":"// create a dataSet with groups\nvar names = [\"SquareShaded\", \"Bargraph\", \"Blank\", \"CircleShaded\"];\nvar groups = new vis.DataSet();\ngroups.add({\n id: 0,\n content: names[0],\n options: {\n drawPoints: {\n style: \"square\" // square, circle\n },\n shaded: {\n orientation: \"bottom\" // top, bottom\n }\n }\n});\n\ngroups.add({\n id: 1,\n content: names[1],\n options: {\n style: \"bar\"\n }\n});\n\ngroups.add({\n id: 2,\n content: names[2],\n options: { drawPoints: false }\n});\n\ngroups.add({\n id: 3,\n content: names[3],\n options: {\n drawPoints: {\n style: \"circle\" // square, circle\n },\n shaded: {\n orientation: \"top\" // top, bottom\n }\n }\n});\n\nvar container = document.getElementById(\"visualization\");\nvar items = [\n { x: \"2014-06-13\", y: 60 },\n { x: \"2014-06-14\", y: 40 },\n { x: \"2014-06-15\", y: 55 },\n { x: \"2014-06-16\", y: 40 },\n { x: \"2014-06-17\", y: 50 },\n { x: \"2014-06-13\", y: 30, group: 0 },\n { x: \"2014-06-14\", y: 10, group: 0 },\n { x: \"2014-06-15\", y: 15, group: 1 },\n { x: \"2014-06-16\", y: 30, group: 1 },\n { x: \"2014-06-17\", y: 10, group: 1 },\n { x: \"2014-06-18\", y: 15, group: 1 },\n { x: \"2014-06-19\", y: 52, group: 1 },\n { x: \"2014-06-20\", y: 10, group: 1 },\n { x: \"2014-06-21\", y: 20, group: 2 },\n { x: \"2014-06-22\", y: 60, group: 2 },\n { x: \"2014-06-23\", y: 10, group: 2 },\n { x: \"2014-06-24\", y: 25, group: 2 },\n { x: \"2014-06-25\", y: 30, group: 2 },\n { x: \"2014-06-26\", y: 20, group: 3 },\n { x: \"2014-06-27\", y: 60, group: 3 },\n { x: \"2014-06-28\", y: 10, group: 3 },\n { x: \"2014-06-29\", y: 25, group: 3 },\n { x: \"2014-06-30\", y: 30, group: 3 }\n];\n\nvar dataset = new vis.DataSet(items);\nvar options = {\n defaultGroup: \"ungrouped\",\n legend: false,\n graphHeight: 200,\n start: \"2014-06-10\",\n end: \"2014-07-04\",\n showMajorLabels: false,\n showMinorLabels: false\n};\nvar graph2d1 = new vis.Graph2d(\n document.getElementById(\"visualization1\"),\n dataset,\n groups,\n options\n);\nvar graph2d2 = new vis.Graph2d(\n document.getElementById(\"visualization2\"),\n dataset,\n groups,\n options\n);\nvar graph2d3 = new vis.Graph2d(\n document.getElementById(\"visualization3\"),\n dataset,\n groups,\n options\n);\nvar graph2d4 = new vis.Graph2d(\n document.getElementById(\"visualization4\"),\n dataset,\n groups,\n options\n);\nvar graph2d5 = new vis.Graph2d(\n document.getElementById(\"visualization5\"),\n dataset,\n groups,\n options\n);\nvar graph2d6 = new vis.Graph2d(\n document.getElementById(\"visualization6\"),\n dataset,\n groups,\n options\n);\n\ngraph2d1.setOptions({\n groups: {\n visibility: { 0: true, 1: false, 2: false, 3: false, __ungrouped__: false }\n }\n});\ngraph2d2.setOptions({\n groups: {\n visibility: { 0: false, 1: true, 2: false, 3: false, __ungrouped__: false }\n }\n});\ngraph2d3.setOptions({\n groups: {\n visibility: { 0: false, 1: false, 2: true, 3: false, __ungrouped__: false }\n }\n});\ngraph2d4.setOptions({\n groups: {\n visibility: { 0: false, 1: false, 2: false, 3: true, __ungrouped__: false }\n }\n});\ngraph2d5.setOptions({\n groups: {\n visibility: { 0: false, 1: false, 2: false, 3: false, __ungrouped__: true }\n }\n});\n","js_external":"https://visjs.github.io/vis-timeline/dist/vis-timeline-graph2d.min.js","title":"Graph2d | Toggle Groups Example"}'
/><input
type="hidden"
name="js"
value='// create a dataSet with groups
var names = ["SquareShaded", "Bargraph", "Blank", "CircleShaded"];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
drawPoints: {
style: "square" // square, circle
},
shaded: {
orientation: "bottom" // top, bottom
}
}
});
groups.add({
id: 1,
content: names[1],
options: {
style: "bar"
}
});
groups.add({
id: 2,
content: names[2],
options: { drawPoints: false }
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: {
style: "circle" // square, circle
},
shaded: {
orientation: "top" // top, bottom
}
}
});
var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-13", y: 60 },
{ x: "2014-06-14", y: 40 },
{ x: "2014-06-15", y: 55 },
{ x: "2014-06-16", y: 40 },
{ x: "2014-06-17", y: 50 },
{ x: "2014-06-13", y: 30, group: 0 },
{ x: "2014-06-14", y: 10, group: 0 },
{ x: "2014-06-15", y: 15, group: 1 },
{ x: "2014-06-16", y: 30, group: 1 },
{ x: "2014-06-17", y: 10, group: 1 },
{ x: "2014-06-18", y: 15, group: 1 },
{ x: "2014-06-19", y: 52, group: 1 },
{ x: "2014-06-20", y: 10, group: 1 },
{ x: "2014-06-21", y: 20, group: 2 },
{ x: "2014-06-22", y: 60, group: 2 },
{ x: "2014-06-23", y: 10, group: 2 },
{ x: "2014-06-24", y: 25, group: 2 },
{ x: "2014-06-25", y: 30, group: 2 },
{ x: "2014-06-26", y: 20, group: 3 },
{ x: "2014-06-27", y: 60, group: 3 },
{ x: "2014-06-28", y: 10, group: 3 },
{ x: "2014-06-29", y: 25, group: 3 },
{ x: "2014-06-30", y: 30, group: 3 }
];
var dataset = new vis.DataSet(items);
var options = {
defaultGroup: "ungrouped",
legend: false,
graphHeight: 200,
start: "2014-06-10",
end: "2014-07-04",
showMajorLabels: false,
showMinorLabels: false
};
var graph2d1 = new vis.Graph2d(
document.getElementById("visualization1"),
dataset,
groups,
options
);
var graph2d2 = new vis.Graph2d(
document.getElementById("visualization2"),
dataset,
groups,
options
);
var graph2d3 = new vis.Graph2d(
document.getElementById("visualization3"),
dataset,
groups,
options
);
var graph2d4 = new vis.Graph2d(
document.getElementById("visualization4"),
dataset,
groups,
options
);
var graph2d5 = new vis.Graph2d(
document.getElementById("visualization5"),
dataset,
groups,
options
);
var graph2d6 = new vis.Graph2d(
document.getElementById("visualization6"),
dataset,
groups,
options
);
graph2d1.setOptions({
groups: {
visibility: { 0: true, 1: false, 2: false, 3: false, __ungrouped__: false }
}
});
graph2d2.setOptions({
groups: {
visibility: { 0: false, 1: true, 2: false, 3: false, __ungrouped__: false }
}
});
graph2d3.setOptions({
groups: {
visibility: { 0: false, 1: false, 2: true, 3: false, __ungrouped__: false }
}
});
graph2d4.setOptions({
groups: {
visibility: { 0: false, 1: false, 2: false, 3: true, __ungrouped__: false }
}
});
graph2d5.setOptions({
groups: {
visibility: { 0: false, 1: false, 2: false, 3: false, __ungrouped__: true }
}
});
'
/><input
type="hidden"
name="css"
value="body,
html {
font-family: sans-serif;
}
div.graphs {
width: 300px;
display: inline-block;
}
"
/><input
type="hidden"
name="html"
value='<h2>Graph2d | Groups Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the groups visibility functionality within Graph2d. Groups
have their own visibility option. By using this, all graph2d instances using
those groups would show or hide that group. If you have multiple instances
sharing the same data and groups, you can use the groups.visibility option to
set it on an instance level. The graphs below all share the same groups, items
and initial options. We then use a setOptions like so:
<pre class="prettyprint lang-js">
graph2d1.setOptions({
groups:{
visibility:{
0:true, // group id:0 visible
1:false, // group id:1 hidden
2:false, // group id:2 hidden
3:false, // group id:3 hidden
&quot;__ungrouped__&quot;:false // default group hidden
}
}
})
</pre
>
</div>
<br />
<div class="graphs" id="visualization1"></div>
<div class="graphs" id="visualization2"></div>
<div class="graphs" id="visualization3"></div>
<div class="graphs" id="visualization4"></div>
<div class="graphs" id="visualization5"></div>
<div class="graphs" id="visualization6"></div>
'
/></form
></span>
</div>
<a href="14_toggleGroups.html"
><div class="example-image">
<img
src="thumbnails/535a128c817c124a43a7b3f3c8ca30488296955a28d81f5d006c04cda995e63f.png"
alt="Toggle Groups Example"
/></div></a
></span>
</div>
</div>
</div>
</body>
</html>