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 chart so that the scales are the same. The line turns off Y labels so as not to overwrite the Bars labels.
TooltipsYou can have tooltips on the Line and Bar chart by setting chart.tooltips.highlight to false, as shown. The order in which you create the charts is also important, you must define the Bar chart first, and subsequently the Line chart.
You can now have tooltips on both the Line chart and the Bar chart, as is shown in the chart here. Keep in mind that you will need to have highlighting turned off on both chart types - chart.tooltips.highlight.
<script>
line.Set('chart.tooltips.highlight', false);
bar.Set('chart.tooltips.highlight', false);
</script>
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.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.key', ['Cost', 'Volume']);
line3.Set('chart.key.background', 'rgba(255,255,255,0.5)');
line3.Draw();
}
</script>