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>
Another type of chart you may want is a line chart with Y axes on both sides, as illustrated on the right. You should be careful with this chart type as it can easily lead to confusion.
This chart is made up from two line charts, one with the Y axis on the left and one on the right. The code that makes up this chart is below.
The only reason to combine line charts is to get Y axes on the left and right. If you simply want mutiple lines, you can do this without combining any charts. See the line chart example page
<script>
window.onload = function
{
line2 = new RGraph.Line('myCanvas2', [51,22,23,33,35,23,32,45]);
line2.Set('chart.hmargin', 10);
line2.Set('chart.labels', ['Kiff', 'Wayne', 'Pete', 'Lou', 'Jake', 'Jo', 'Fred', 'Bob']);
line2.Set('chart.linewidth', 3);
line2.Set('chart.shadow', true);
line2.Set('chart.shadow.offsetx', 2);
line2.Set('chart.shadow.offsety', 2);
line2.Set('chart.ymax', 65);
line2.Set('chart.units.post', 'l');
line2.Set('chart.gutter', 35);
line2.Set('chart.noxaxis', true);
line2.Set('chart.noendxtick', true);
line2.Set('chart.title', 'An example of axes both sides');
line2.Draw();
line3 = new RGraph.Line('myCanvas2', [42,50,51,23,46,48,65,11]);
line3.Set('chart.hmargin', 10);
line3.Set('chart.linewidth', 3);
line3.Set('chart.shadow', true);
line3.Set('chart.shadow.offsetx', 2);
line3.Set('chart.shadow.offsety', 2);
line3.Set('chart.yaxispos', 'right');
line3.Set('chart.noendxtick', true);
line3.Set('chart.background.grid', false);
line3.Set('chart.ymax', 65);
line3.Set('chart.colors', ['blue', 'red']);
line3.Set('chart.units.pre', '$');
line3.Set('chart.gutter', 35);
line3.Set('chart.key', ['Cost', 'Volume']);
line3.Set('chart.key.background', 'rgba(255,255,255,0.5)');
line3.Draw();
}
</script>