A Bar/Line chart using a negative hmargin
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>
<script src="RGraph.line.js"></script>
<script src="RGraph.drawing.yaxis.js"></script>
Put this where you want the chart to show up:
<div style="padding: 15px">
<canvas id="cvs" width="750" height="500">[No canvas support]</canvas>
</div>
This is the code that generates the chart:
<script>
bar = new RGraph.Bar({
id: 'cvs',
data: [[4,8],[6,5],[5,4],[1,9],[4,8],[8,6]],
options: {
hmarginGrouped: -15,
hmargin: 30,
colors: ['red','gray'],
backgroundGridHlines: false,
backgroundGridBorder: false,
backgroundGridDashed: true,
axes: false,
yaxisLabels: false,
yaxisScaleMax: 20,
yaxisScaleUnitsPost: '%',
xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']
}
}).draw();
line = new RGraph.Line({
id: 'cvs',
data: [
[14,18,16,12,15,13],
[10,16,13,19,16,20]
],
options: {
spline: true,
backgroundGrid: false,
tickmarksStyle: 'filledcircle',
shadow: false,
linewidth: 5,
marginBottom: 35,
axes: false,
yaxisLabels: false,
colors: ['#0c0', 'gray'],
yaxisScaleMax: 20,
yaxisLabels: false,
hmargin: 55
}
}).draw();
axes = new RGraph.Drawing.YAxis({
id: 'cvs',
x: 725,
options: {
yaxisScaleMax: 10,
yaxisScaleAlign: 'right',
yaxisScaleUnitsPost: 'ma',
colors: ['#0c0'],
linewidth: 3,
marginBottom: 35
}
}).draw();
axes2 = new RGraph.Drawing.YAxis({
id: 'cvs',
x: 25,
options: {
yaxisScaleMax: 20,
yaxisScaleUnitsPost: 'ma',
colors: ['red'],
linewidth: 3,
marginBottom: 35
}
}).draw();
</script>