A combined SVG Bar and Line chart

If you like RGraph please share it:

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="padding: 15px; display: inline-block">
    <div style="width: 750px; height: 300px" id="chart-container"></div>
</div>
This is the code that generates the chart:
<script>
    new RGraph.SVG.Bar({
        id: 'chart-container',
        data: [[8,8,8],[8,6,5],[4,9,9],[5,8,6],[7,6,8],[5,6,7],[5,4,6]],
        options: {
            gutterBottom: 35,
            yaxis: false,
            yaxisMax: 15,
            hmargin: 25,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            colors: ['#ccf','#c00','green   '],
            xaxisTickmarksCount: 7,
            xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            textSize: 14,
            tooltips: [
                'Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday',
                'Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday',
                'Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'
            ]
        }
    }).grow({frames: 30});



    new RGraph.SVG.Line({
        id: 'chart-container',
        data: [
            [1.5,2.6,2.3,8.4,6.2,5.4,9.9],
            [9.5,4.6,8.3,5.4,1.2,8.4,3.9]
        ],
        options: {
            yaxisMax: 15,
            backgroundGrid: false,
            linewidth: 5,
            xaxis: false,
            yaxis: false,
            yaxisLabels: false,
            hmargin: 50,
            shadow: true,
            shadowOpacity: .25,
            shadowBlur: 2,
            tickmarksStyle: 'circle',
            tickmarksSize: 9,
            tickmarksLinewidth: 3,
            spline: true,
            colors: ['black','red'],
            tooltips: [
                'M','T','W','T','F','S','S',
                'M','T','W','T','F','S','S'
            ]
        }
    }).trace({frames: 30});


    new RGraph.SVG.Pie({
        id: 'chart-container',
        data: [42,47,49],
        options: {
            radius: 30,
            textSize: 10,
            textBold: true,
            labels: ['John','Ruby','Grant'],
            colors: ['#ccf','#c00','green', 'pink', 'blue', 'red'],
            centerx: 110,
            centery: 60,
            exploded: [5],
            shadow: true,
            shadowOpacity: 0.25
        }
    }).roundRobin();
</script>

« Back