RGraph: Combining Bar & Line charts

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>