|
|
- <!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. Since groups are plotted one at a time, the allowOverlap option does
- not work here. For groups you can use the "slots" option.
-
- <pre class="prettyprint lang-js">
- var options = {
- slots: {
- slot: 1,
- total:3
- }
- };
- </pre>
-
- <br /><br />
- The slots tell the group where to plot it's bar. Each group is given a slot and the total amount of slots. Using this, the bars are plotted side by side neatly.
- </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", options: {slots:{slot:1,total:3}}})
- groups.add({id: 1, content: "group1", options: {slots:{slot:2,total:3}}})
- groups.add({id: 2, content: "group2", options: {slots:{slot:3,total:3}}})
-
- 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'}, // align: left, center, right
- drawPoints: true,
- dataAxis: {
- icons:true
- },
- orientation:'top',
- start: '2014-06-10',
- end: '2014-06-18'
- };
- var graph2d = new vis.Graph2d(container, items, options,groups);
-
- </script>
- </body>
- </html>
|
