|
|
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>Graph2d | Bar Graph 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" />
- </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. If you're not using groups, you can use the
- barChart.allowOverlap option to automatically plot the bars next to eachother if they occupy the same timeslot. By default, this option is on, making the bars overlap. If the option is disabled, the overlapping
- bars are plotted side by side. Use the toggle below to switch between settings.
-
- <br /><br />
- Allow overlap: <input type="checkbox" id="allowOverlap" checked="checked">
- </div>
- <br />
-
- <div id="visualization"></div>
-
- <script type="text/javascript">
-
- var container = document.getElementById('visualization');
- var checkbox = document.getElementById('allowOverlap');
-
- 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',
- 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);
-
- checkbox.onchange = toggleOption;
-
- function toggleOption() {
- var options = {barChart:{allowOverlap:checkbox.checked}};
- graph2d.setOptions(options);
- }
-
- </script>
- </body>
- </html>
|
