The groups have some options that only apply to groups and cannot be set globally. These are listed below.
<preclass="prettyprint lang-js">
var groups = new vis.DataSet();
groups.add({
id: 1,
content: 'Group 1',
options: {
slots: { slot: 1, total: 3}
}
});
</pre>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
<tr>
<td>slots.slot</td>
<td>Number</td>
<td></td>
<td>The slot the bar chart is plotted in. This has to be used in combination with slots.total. See <ahref="../examples/graph2d/11_barsSideBySideGroups.html">example 11</a> for more information.</td>
</tr>
<tr>
<td>slots.total</td>
<td>Number</td>
<td></td>
<td>The total amount of slots available. This has to be used in combination with slots.slot. See <ahref="../examples/graph2d/11_barsSideBySideGroups.html">example 11</a> for more information.</td>
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.
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.
<preclass="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/>
<divid="visualization"></div>
<scripttype="text/javascript">
var container = document.getElementById('visualization');