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 ()
{
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, tooltips)');
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.contextmenu', [
['Menu item 1', function () {alert('Menu item 1')}],
['Menu item 2', function () {alert('Menu item 2')}]
]);
// 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.colors', ['red', 'green', '#ccc']);
line.Set('chart.key', ['Jane', 'Fred', 'Barney']);
line.Set('chart.key.shadow', true);
line.Set('chart.key.shadow.offsetx', 0);
line.Set('chart.key.shadow.offsety', 0);
line.Set('chart.key.shadow.blur', 20);
line.Set('chart.key.shadow.color', 'rgba(128,128,128,0.5)');
line.Set('chart.key.background', 'white');
line.Set('chart.xaxispos', 'center');
line.Set('chart.tickmarks', 'circle');
// This would all be done programmatically normally, and linked to the key, so that if you change a name in the key,
// it changes in all of the tooltips too
line.Set('chart.tooltips', [
'<b>January</b><br /><div id="red"></div>Jane: -1<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>Barney: 4',
'<b>February</b><br /><div id="red"></div>Jane: -6<br /><div id="green"></div>Fred: 6<br /><div id="gray"></div>Barney: 5',
'<b>March</b><br /><div id="red"></div>Jane: -4<br /><div id="green"></div>Fred: 7<br /><div id="gray"></div>Barney: 3',
'<b>April</b><br /><div id="red"></div>Jane: -3<br /><div id="green"></div>Fred: 9<br /><div id="gray"></div>Barney: 4',
'<b>May</b><br /><div id="red"></div>Jane: -2<br /><div id="green"></div>Fred: 7<br /><div id="gray"></div>Barney: 1',
'<b>June</b><br /><div id="red"></div>Jane: -1<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>Barney: 2',
'<b>July</b><br /><div id="red"></div>Jane: -4<br /><div id="green"></div>Fred: 6<br /><div id="gray"></div>Barney: 6',
'<b>Aug</b><br /><div id="red"></div>Jane: -5<br /><div id="green"></div>Fred: 3<br /><div id="gray"></div>Barney: 5',
'<b>September</b><br /><div id="red"></div>Jane: -2<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>Barney: 8',
'<b>October</b><br /><div id="red"></div>Jane: -3<br /><div id="green"></div>Fred: 2<br /><div id="gray"></div>Barney: 4',
'<b>November</b><br /><div id="red"></div>Jane: -8<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>Barney: 9',
'<b>December</b><br /><div id="red"></div>Jane: -8<br /><div id="green"></div>Fred: 1<br /><div id="gray"></div>Barney: 4',
'<b>January</b><br /><div id="red"></div>Jane: -1<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>Barney: 4',
'<b>February</b><br /><div id="red"></div>Jane: -6<br /><div id="green"></div>Fred: 6<br /><div id="gray"></div>Barney: 5',
'<b>March</b><br /><div id="red"></div>Jane: -4<br /><div id="green"></div>Fred: 7<br /><div id="gray"></div>Barney: 3',
'<b>April</b><br /><div id="red"></div>Jane: -3<br /><div id="green"></div>Fred: 9<br /><div id="gray"></div>Barney: 4',
'<b>May</b><br /><div id="red"></div>Jane: -2<br /><div id="green"></div>Fred: 7<br /><div id="gray"></div>Barney: 1',
'<b>June</b><br /><div id="red"></div>Jane: -1<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>Barney: 2',
'<b>July</b><br /><div id="red"></div>Jane: -4<br /><div id="green"></div>Fred: 6<br /><div id="gray"></div>Barney: 6',
'<b>August</b><br /><div id="red"></div>Jane: -5<br /><div id="green"></div>Fred: 3<br /><div id="gray"></div>Barney: 5',
'<b>September</b><br /><div id="red"></div>Jane: -2<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>Barney: 8',
'<b>October</b><br /><div id="red"></div>Jane: -3<br /><div id="green"></div>Fred: 2<br /><div id="gray"></div>Barney: 4',
'<b>November</b><br /><div id="red"></div>Jane: -8<br /><div id="green"></div>Fred: 5<br /><div id="gray"></div>Barney: 9',
'<b>December</b><br /><div id="red"></div>Jane: -8<br /><div id="green"></div>Fred: 1<br /><div id="gray"></div>Barney: 4'
]);
line.Set('chart.tooltips.highlight', false);
// No need to call Draw() - the bar chart will do it
// Add the line graph to the bar chart
bar.Set('chart.line', line);
// Draw the bar chart, which in turn draws the line graph for us
bar.Draw();
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>
Tooltips
You can have tooltips, as above, on the Line chart by setting chart.tooltips.highlighting to false, like below. The order in which you create the graphs is also important, you must define the Bar chart first, and subsequently the Line chart.
line.Set('chart.tooltips.highlighting', false);
Because the tooltips are only triggered by the Line chart, you should put all of the information, for both the Line and the Bar chart, in the tooltips.
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>