This is an example of a Bar chart combined with a Line chart. The source code is documented to make it easier for you to copy and paste it if you wish.
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.line.js"></script> <script src="RGraph.bar.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="250"> [No canvas support] </canvas>This is the code that generates the chart:
<script> /** * The order in which you create the charts is important - the Line chart must be last. If you create the Bar chart object * second, it will be drawn "on top" of the Line. */ var bar = new RGraph.Bar({ id: 'cvs', data: [143,140,141,135,136,132,129,125,126,127,127,129], options: { } }); var line = new RGraph.Line({ id: 'cvs', data: [14,35,15,36,37,26,28,18,38,17,9,14], options: { backgroundGrid: false, axes: false, linewidth: 3, tickmarksStyle: 'endcircle', yaxisPosition: 'right', yaxisScaleMax: 50, title: 'A combined Bar and Line chart', tooltips: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], tooltipsEvent: 'mousemove' } }); /** * Some Bar chart configuration */ bar.set({ yaxisScaleMax: 250, marginLeft: 50, marginRight: 5, colors: ['yellow'], colorsStroke: '#ddd', xaxisLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], shadow: false, tooltips: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }); /** * These margins determine the correct placement of the Line chart */ line.set('marginLeft', bar.get('marginLeft') + ((line.canvas.width - bar.get('marginLeft') - bar.get('marginRight')) / 24)) line.set('marginRight', ((line.canvas.width - bar.get('marginLeft') - bar.get('marginRight')) / 24) + bar.get('marginRight')); /** * Don't show Y labels on the Line chart */ line.set('yaxisLabels', false); /** * Now draw both of the charts. Bar chart first, then the Line chart is drawn on top of it */ RGraph.redraw(); </script>