A Bar chart with a vertical margin
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="700" height="250">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
// Create the data
data = [6,8,4,6];
data.forEach(function (val, idx, arr)
{
arr[idx] = [val - 1, 1];
});
bar = new RGraph.Bar({
id: 'cvs',
data: data,
options: {
colors: [
'red','white',
'#0f0','white',
'blue','white',
'#ccc','white'
],
grouping: 'stacked',
colorsSequential: true,
shadow: false,
yaxisLabels: false,
backgroundGrid: false,
hmargin: 20,
xaxisTickmarksCount: 0,
yaxisTickmarksCount: 0,
axesLinewidth: 3,
marginLeft: 5,
marginRight: 5,
marginTop: 15,
marginBottom: 5,
labelsAbove: true,
labelsAboveSize: 26,
labelsAboveUnitsPost: 'km'
}
}).draw();
</script>