This is an example of a basic Horizontal Bar chart that's grouped. It also uses the marginInnerTop
and marginInnerBottom
options so the bars and the tickmarks have a vertical margin.
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.bar.js"></script>Put this where you want the chart to show up:
<div style="padding: 15px"> <div style="width: 350px; height: 500px" id="chart-container"></div> </div>This is the code that generates the chart:
<script> new RGraph.SVG.HBar({ id: 'chart-container', data: [[5,4,8],[8,4,6],[6,2,9],[8,8,9],[4,6,3],[8,4,1],[6,5,6]], options: { yaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'], xaxis: false, backgroundGridHlines: false, backgroundGridBorder: false, title: 'A grouped HBar chart', marginInner: 10, marginInnerTop: 50, marginInnerBottom: 50 } }).draw(); </script>