An SVG Bar/HBar combo chart

A Bar chart showing the earnings of Britains richest woman. She founded Bet365 - an online gambling firm. Who would have guessed that gambling could be so profitable?! Ok perhaps everyone in the world! Personally though, if a company that I started earned just (?) five million pounds - I'd retire!

The chart itself is quite straightforward with a single solid color for the bars, a small marginInner setting and large text. Being like this though makes the clarity of the chart quite good.

It also uses the labelsAbove setting to show the exact figures that the bars represent.

For smaller screens, the chart is switched from being a Bar chart to a Horizontal Bar chart. There's another, canvas example of this in the download archive called bar-hbar-responsive.html

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.hbar.js"></script>

Put this where you want the chart to show up:

<div style="float: right">
    <div style="width: 600px; height: 250px;" id="chart-container1"></div>
    <div style="width: 350px; height: 650px;" id="chart-container2"></div>
</div>

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

<script>

    //
    // These are used by both charts
    //
    data   = [6,5,13,30,54,199,220,320,469,300];
    labels = ['2012','2013','2014','2015','2016','2017','2018','2019','2020','2021'];

    //
    // These functions are called to draw the charts. Both
    // charts are drawn straight-away but each is alternatively
    // hidden based on the size of the screen.
    //
    drawBar();
    drawHbar();


    //
    // This function draws the Bar chart
    //
    function drawBar()
    {
        new RGraph.SVG.Bar({
            id: 'chart-container1',
            data: data,
            options: {

                // Add labelsAbove and color them turquoise like the bar color
                labelsAbove: true,
                labelsAboveSize: 12,
                labelsAboveColor: '#1280A1',
                labelsAboveBold: true,

                // Give the bars a turqoise color
                colors: ['#1280A1'],
                
                // Only horizontal grid lines are shown
                backgroundGridBorder: false,
                backgroundGridVlines: false,
                
                // Disable both of the X and Y axes (but there are still some
                // X-axis labels given)
                xaxis: false,
                yaxis: false,
                xaxisLabels: labels,

                // The base size of the text on the chart is slightly larger
                // than normal
                textSize: 14,

                marginLeft: 85,
                marginBottom: 45,
                marginInner: 5,
                
                // Give the Y-axis labels some units that are both prepended
                // and appended to the numbers
                yaxisScaleUnitsPost: 'm',
                yaxisScaleUnitsPre: '$',
                responsive: [
                    {maxWidth: null, parentCss:{'float': 'right', textAlign: 'none'}, callback: function () {setTimeout(function (){document.getElementById('chart-container1').style.display = 'inline-block';document.getElementById('chart-container2').style.display = 'none';},50)}},
                    {maxWidth: 800,  parentCss:{'float': 'none',  textAlign: 'center'}, callback: function () {setTimeout(function () {document.getElementById('chart-container1').style.display = 'none';document.getElementById('chart-container2').style.display = 'inline-block';}, 50)}}
                ]
            }
        //
        // Draw the chart immediately. The SVG tags that the
        // charts are drawn on are alternatively hidden and
        // shown by the responsive callback functions. Also,
        // the SVG tag is centered for a small screen and
        // floated right for a larger screen.
        //
        // The hiding/showing of each SVG tag is delayed by
        // 50ms using setTimeout() to skirt some drawing
        // irregularities.
        //
        }).draw();
    }




    //
    // This function draws the HBar chart
    //
    function drawHbar ()
    {
        new RGraph.SVG.HBar({
            id: 'chart-container2',
            data: RGraph.SVG.arrayClone(data),
            options: {
                labelsAbove: true,
                labelsAboveUnitsPost: 'm',
                labelsAboveColor: '#1280A1',
                labelsAboveBold: true,
                labelsAboveSize: 16,
                colors: ['#1280A1'],
                backgroundGridBorder: false,
                backgroundGridHlines: false,
                xaxis: false,
                yaxis: false,
                yaxisLabels: labels,
                textSize: 16,
                marginLeft: 85,
                marginRight: 55,
                marginBottom: 45,
                marginInner: 5,
                yaxisScaleUnitsPost: 'm',
                yaxisScaleUnitsPre: '�'
            }
        }).draw();
    }
</script>