A basic SVG HBar chart

This goes in the documents header:

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

Put this where you want the chart to show up:

<div style="padding: 15px">
    <div style="width: 700px; height: 500px" id="chart-container"></div>
</div>

This is the code that generates the chart:

<script>
    data     = [16944000, 16918000, 16029000, 12830000, 12534000, 10842000, 10185000, 4398000, 3656000, 3606000];
    tooltips = [];
    labels   = [
        'Eaton Square (SW1W)',
        'Grovenor Crescent (SW1X)',
        'Ilchester Place (W148)',
        'Lansdowne Road (W112)',
        'Chester Square (SW1W)',
        'Lansdowne Crescent (W112)',
        'Kensington Road (W85N)',
        'Coombe Park (KT27)',
        'The Green (TW91)',
        'Ham Common (TW10)'
    ];

    bar = new RGraph.SVG.HBar({
        id: 'chart-container',
        data: RGraph.SVG.arrayClone(data),
        options: {
            title: 'Average house price (GBP), Jan 2011 - Oct 2016',
            xaxis: false,
            yaxis: false,
            xaxisLabelsCount: 2,
            textSize: 12,
            gutterRight: 50,
            backgroundGridHlines: false,
            backgroundGridBorder: false,
            colors: ['#80004D'],
            yaxisLabels: labels,
            highlightFill: 'rgba(255,255,255,0.25)'
        }
    }).grow({frames: 60, callback: function ()
    {
        RGraph.SVG.redraw();
    }});
    
    labels.forEach(function (v,k,arr)
    {
        tooltips[k] = '{1}
{2}'.format(
            v,
            RGraph.SVG.numberFormat({
                object: bar,
                num: data[k]
            })
        );
    });
    
    bar.set('tooltips', tooltips);

    RGraph.SVG.tooltips.style.backgroundColor = 'black';
    RGraph.SVG.tooltips.style.color           = 'white';
    RGraph.SVG.tooltips.style.boxShadow       = '';
    RGraph.SVG.tooltips.style.textAlign       = 'left';
</script>

« Back