You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
3.0 KiB
88 lines
3.0 KiB
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>Graph2d | Bar Graphs Side by Side Example with Groups</title>
|
|
|
|
<style type="text/css">
|
|
body, html {
|
|
font-family: sans-serif;
|
|
}
|
|
</style>
|
|
|
|
<script src="../../dist/vis.js"></script>
|
|
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
<body>
|
|
<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>
|
|
|
|
<script type="text/javascript">
|
|
|
|
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);
|
|
}
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|