A basic horizontal bar chart

[No canvas support]

This goes in the documents header: 
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.hbar.js"></script>
Put this where you want the chart to show up: 
<canvas id="cvs" width="600" height="450">
    [No canvas support]
</canvas>
This is the code that generates the chart: 
<script>
    data1 = [1,3,2,4,5,6,8,9,5,2,6,3,4,3,2,2,1];
    data2 = [9,5,5,5,5,5,3,2,1,3,3,8,8,6,9,9,10];
    
    data1.forEach (function (v, k, arr)
    {
        arr[k] = [v, data2[k] ];
    });


    new RGraph.HBar({
        id: 'cvs',
        data: data1,
        options: {
            labels: ['Bob','Fred','Lucy','Jim','Pob','Lou','Joe','Fred','Hal','Gaz','Ken','Kev','Will','Ray','Jay','Fliss','Gary'],
            gutterLeftAutosize: true,
            grouping: 'stacked',
            colors: ['red','rgba(0,0,255,0.25)'],
            key: ['1997','2007'],
            keyPosition: 'gutter',
            title: '10 year difference of Cochlea implant rates (%)',
            gutterTop: 50,
            unitsPost: '%',
            noxaxis: true,
            backgroundGridHlines: false,
            backgroundGridBorder: false
        }
    }).draw();
</script>

« Back