This is an example of combining Bar and Line charts. It's quite straight-forward, and the code here shows you how it can be achieved.
If the values for the line and bar result in different Y scales you may need to specify the chart.ymax property for each graph so that the scales are the same. The line turns off Y labels so as not to overwrite the Bars labels.
The code that produces this graph is:
<script>
window.onload = function ()
{
// Define the line first so that it can be added to the bar chart
var line = new RGraph.Line('myCanvas', [-1,-6,-4,-3,-2,-1,-4,-5,-2,-3,-8,-8], [5,6,7,9,7,5,6,3,5,2,5,1]);
line.Set('chart.linewidth', 2);
line.Set('chart.shadow', true);
line.Set('chart.shadow.offsetx', 2);
line.Set('chart.shadow.offsety', 2);
line.Set('chart.colors', ['red', 'green', '#ccc']);
line.Set('chart.key', ['Jane', 'Fred', 'Barney']);
line.Set('chart.key.shadow', true);
line.Set('chart.key.background', '#fff');
line.Set('chart.xaxispos', 'center');
line.Set('chart.tickmarks', 'arrow');
// No need to call Draw() - the bar chart will do it
var bar = new RGraph.Bar('myCanvas', [4,5,3,4,1,2,6,5,8,4,9,4]);
bar.Set('chart.gutter', 35);
bar.Set('chart.xaxispos', 'center');
bar.Set('chart.title', 'A bar chart with an over-layed line chart & context menu');
bar.Set('chart.ymax', 15);
bar.Set('chart.text.angle', 45);
bar.Set('chart.colors', ['#ccc']);
bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
bar.Set('chart.line', line); // Add the line graph to the bar chart
bar.Set('chart.contextmenu', [
['Menu item 1', function () {alert('Menu item 1')}],
['Menu item 2', function () {alert('Menu item 2')}]
]);
// Draw the bar chart, which in turn draws the line graph for us
bar.Draw();
}
</script>