diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2016-10-28 13:31:36 -0700 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2016-10-28 13:31:36 -0700 |
| commit | 05e761abca3ff42dbba371af0560b82707dfe7c0 (patch) | |
| tree | 268cc06b931357a0ffad684961ff6d24eeec3b4b /www/lib/vis/examples/graph2d/11_barsSideBySideGroups.html | |
| parent | 55a9e628760dc31400457099e4aaabc767beed70 (diff) | |
updated vis
Diffstat (limited to 'www/lib/vis/examples/graph2d/11_barsSideBySideGroups.html')
| -rw-r--r-- | www/lib/vis/examples/graph2d/11_barsSideBySideGroups.html | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/www/lib/vis/examples/graph2d/11_barsSideBySideGroups.html b/www/lib/vis/examples/graph2d/11_barsSideBySideGroups.html new file mode 100644 index 00000000..945fd30a --- /dev/null +++ b/www/lib/vis/examples/graph2d/11_barsSideBySideGroups.html @@ -0,0 +1,88 @@ +<!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.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 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>
\ No newline at end of file |