Mon 21 Jul 22:43:21 CEST 2025

2025-07-21 22:53:03 +02:00 · 2025-07-21 22:53:03 +02:00 · 3e3bd15b56
commit 3e3bd15b56
parent e473ba9b83
1 changed files with 75 additions and 0 deletions
--- a/js/dos/ext/vis/examples/graph2d/10_barsSideBySide.html
+++ b/js/dos/ext/vis/examples/graph2d/10_barsSideBySide.html
@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Bar Graphs Side by Side Example</title>
+
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+    </style>
+
+    <script src="../../dist/vis.js"></script>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+<body>
+<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>
+
+<script type="text/javascript">
+
+    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);
+    }
+
+</script>
+</body>
+</html>