Summary
RGraph demo page: A combined SVG Bar and Line chart

A combined SVG Bar and Line chart

A combined Bar and Line chart. The Bar chart uses the wave effect and the Line chart uses the Wave effect. The Bar chart is grouped and both charts are arranged to have the X axis in the middle.

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="width: 650px; height: 250px" id="chart-container"></div>
This is the code that generates the chart:
<script>
    new RGraph.SVG.Bar({
        id: 'chart-container',
        data: [[60,5],[84,98],[-20,-23],[-16,24],[72,35],[49,-22],[-15,15]],
        options: {
            colors: ['#FF6384','#4BC0C0'],
            yaxisMax: 100,
            yaxisMin: -75,
            yaxis: false,
            yaxisLabelsCount: 7,
            backgroundGridHlinesCount: 7,
            hmargin: 10,
            gutterLeft: 31
        }
    }).wave();

    new RGraph.SVG.Line({
        id: 'chart-container',
        data: [35,89,53,16,56,40,18],
        options: {
            tickmarksStyle: 'circle',
            tickmarksSize: 4,
            linewidth: 2,
            hmargin: 38,
            colors: ['#36A2EB'],
            spline: true,
            backgroundGrid: false,
            yaxis: false,
            yaxisMax: 100,
            yaxisMin: -75,
            yaxisScale: false,
            xaxis: false
        }
    }).trace({frames: 30});
</script>

« Back