A combined Bar and Line chart

A demonstration of how you can combine the different RGraph chart types onto a single svg tag. Here a Bar chart is being combined with a filled Line chart - a common combination. Both charts are using the labelsAbove option and they both also have a center x-axis.

The Line chart marginInner property has been set such that the points on the Line chart line up with the center of each section of bars.

The Line chart is filled with a semi-opaque color so that you can see the bars behind the line.

Both the Line and Bar have the labelsAbove property stipulated so that there are labels above each point/bar that show you the exact value.

When the screen size is smaller the size of the text is reduced and the css float on the svg tag is removed.

This goes in the documents header:

<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.bar.js"></script>
<script src="RGraph.svg.line.js"></script>

, Put this where you want the chart to show up:

<div style="float: right">
    <div style="width: 650px; height: 250pt" id="chart-container"></div>
</div>

This is the code that generates the chart - it should be placed AFTER the div tag:

<script>
    responsiveConf = [
        {maxWidth:null,width:650,height:250,options: {textSize: 12,labelsAboveSize: 10},parentCss:{'float':'right',textAlign:'none'}},
        {maxWidth:900, width:400,height:200,options: {textSize: 8,labelsAboveSize: 8},parentCss:{'float':'none',textAlign:'center'}}
    ];



    // Create a Bar chart which has the X-axis positioned in the center. Because
    // it's created first the Bar chart will appear at the back of the Line chart.
    // Here the maximum and minimum Y values are set to 100 and -100 manually.
    new RGraph.SVG.Bar({
        id: 'chart-container',
        data: [[-43,14],[57,-44],[-64,-16],[56,-36],[21,-89],[-39,-41],[-78,-10]],
        options: {
            yaxisLabelsCount: 10,
            yaxisScaleMin: -100,
            yaxisScaleMax: 100,
            marginInner: 10,
            colors: ['rgba(255,0,0,0.2)','rgba(0,200,200,0.2)'],
            marginLeft: 50,
            labelsAbove: true
        }
    // Draw the chart and add a responsive configuration that resizes the chart when you use a
    // smaller screen
    }).draw().responsive(responsiveConf);








    // Create the Line chart that's drawn on top of the Bar chart. The minimum
    // and maximum Y values are, like the Bar chart, set at -100 and 100. The
    // Line chart is configured to be filled with a semi-transparent color so
    // that the Bar chart can be seen behind it. No background grid or axes
    // are drawn by the Line chart.
    new RGraph.SVG.Line({
        id: 'chart-container',
        data: [19,-88,71,66,93,-96,55],
        options: {
            spline: true,
            backgroundGrid: false,
            marginLeft: 50,
            yaxisScaleMax: 100,
            yaxisScaleMin: -100,
            yaxis:false,
            yaxisScale: false,
            xaxis: false,
            marginInner: 40,
            filled: true,
            filledColors: ['rgba(0,200,200,0.25)'],
            colors: ['#0bb'],
            linewidth: 3,
            tickmarksStyle: 'filledcircle',
            labelsAbove: true
        }
    // Draw the chart and add a responsive configuration that resizes the chart when you use a
    // smaller screen
    }).draw().responsive(responsiveConf);
</script>