A combined Bar and Line chart

[No canvas support]

This demo is an example of a combined Bar and Line chart. In this case the Line is a spline but it certainly does have to be. In fact there's a button beneath the chart that you can use to toggle whether its a spline (curvy) or a regular angular Line chart. All thi button does is toggle the spline setting and then redraw the canvas.

In RGraph combining a Bar and Line chart is made easy by the CombinedChart class. You can see this being used in the code below. It simply takes the Bar and the Line chart objects and sets the correct settings on them and then draws the chart. But normally you would want only one set of labels (ie the Bar chart or the Line chart) drawn, however here the Bar chart labels are on one side and the Line chart labels are on the other. So after the combo class is drawn the Y labels are turned back on on the Line chart object and everything is redrawn. You can see how this is done in the code below.

The CombinedChart class is freely usable by yourself in a very similar way to the other RGraph classes. It's created in the same way and you pass it an array of objects - which usually is a Bar chart and a Line chart. You can give it more chart types if you want.

Apart from this the chart has "larger than the default" text and the Bar chart uses a gradient for the fill color: (Gradient(#A18AC5:#D1AAF5)

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>
<script src="RGraph.line.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="900" height="250" style="background-color: #555; border: 5px solid black; border-radius: 7px; box-shadow: 2px 2px 3px gray">
    [No canvas support]
</canvas><br />
<button style="border-radius: 5px; font-size: 20px; margin: 10px; padding: 7px" onclick="line.set('spline', !line.get('spline')); RGraph.redraw()">Toggle spline</button>
This is the code that generates the chart:
<script>
    var bar = new RGraph.Bar({
        id: 'cvs',
        data: [81,90,75,85,90,78,61],
        options: {
            ymax: 100,
            backgroundGridVlines: false,
            backgroundGridBorder: true,
            backgroundGridColor: '#999',
            numyticks: 12,
            labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            hmargin: 20,
            gutterLeft: 55,
            gutterRight: 55,
            gutterBottom: 45,
            colors: ['Gradient(#A18AC5:#D1AAF5)'],
            textColor: '#ccc',
            axisColor: '#999',
            numxticks: 0,
            numyticks: 0,
            shadowColor: 'black',
            shadowOffsetx: 0,
            shadowOffsety: 0,
            shadowBlur: 15,
            scaleZerostart: true,
            strokestyle: 'rgba(0,0,0,0)',
            combinedchartEffect: 'wave',
            combinedchartEffectOptions: '{frames: 30}',
            textSize: 18
        }
    });



    var line = new RGraph.Line({
        id: 'cvs',
        data: [150,255,566,542,588,122,131],
        options: {
            ymax: 600,
            noaxes: true,
            backgroundGrid: false,
            linewidth: 7,
            colors: ['#d00'],
            yaxispos: 'right',
            axisColor: '#999',
            textColor: '#ccc',
            gutterLeft: 45,
            gutterRight: 45,
            tickmarks: null,
            spline: true,
            combinedchartEffect: 'trace',
            textSize: 18
        }
    });
    
    var combo = new RGraph.CombinedChart([bar, line])
        .draw();
    
    // Because the combo class turns the line chart labels off,
    // turn them back on
    line.set({
        ylabels: true
    });

    RGraph.redraw();
</script>