vis-timeline
Version:
Create a fully customizable, interactive timeline with items and ranges.
1,182 lines (1,124 loc) • 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.getElementByI