<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="position: relative; padding: 15px; display: inline-block; width: 750px; height: 300px"> <div style="width: 750px; height: 300px; top: 0; left: 0; position: absolute" id="chart-container1"></div> &ly;div style="width: 750px; height: 300px; top: 0; left: 0; position: absolute" id="chart-container2"></div> </div>This is the code that generates the chart:
<script> var bar1 = new RGraph.SVG.Bar({ id: 'chart-container1', data: [5,4,1,3,5,2,1], options: { gutterLeft: 75, yaxis: false, xaxis: false, yaxisScale: false, backgroundGrid: false, hmargin: 5 } }).draw(); for (var i=1; i<=5; ++i) { var y = bar1.getYCoord(i); RGraph.SVG.create({ svg: bar1.svg, type: 'path', attr: { d: 'M0 ' + y + ' L750 ' + y, stroke: 'white', 'stroke-width': 8, 'shape-rendering': "crispEdges" } }); } var bar2 = new RGraph.SVG.Bar({ id: 'chart-container2', data: [0,0,0,0,0,0,0], options: { gutterLeft: 75, yaxisMax: 5, yaxisLabelsOffsety: 25, yaxisFormatter: function (obj, num) { if (!num) { return ''; } return 'Level ' + num; }, hmargin: 20, xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'], title: 'A segmented Bar chart', } }).draw(); // Need to change the container positions to absolute bar1.container.style.position = 'absolute'; bar2.container.style.position = 'absolute'; </script>