A thin grouped Bar chart

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.csv.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<div style="width: 950px; height: 350px; display: inline-block" id="chart-container"></div>

This is the code that generates the chart:

<script>
    csv = "`87 Q1,-0.1\n`87 Q2,-1.6\n`87 Q3,-1.8\n`87 Q4,-3\n`88 Q1,-3.3\n`88 Q2,-3.3\n`88 Q3,-3.3\n`88 Q4,-5.1\n`89 Q1,-4.2\n`89 Q2,-4.6\n`89 Q3,-4.9\n`89 Q4,-3.8\n`90 Q1,-4.3\n`90 Q2,-4.1\n`90 Q3,-2.4\n`90 Q4,-2.5\n`91 Q1,-1.8\n`91 Q2,-1\n`91 Q3,-1.5\n`91 Q4,-1.1\n`92 Q1,-1.3\n`92 Q2,-1.7\n`92 Q3,-1.9\n`92 Q4,-1.6\n`93 Q1,-1.3\n`93 Q2,-1.8\n`93 Q3,-1.3\n`93 Q4,-1.2\n`94 Q1,-0.5\n`94 Q2,-0.9\n`94 Q3,-0.2\n`94 Q4,-0.3\n`95 Q1,0.4\n`95 Q2,-1.5\n`95 Q3,-1.2\n`95 Q4,-0.5\n`96 Q1,-0.7\n`96 Q2,-0.5\n`96 Q3,-0.6\n`96 Q4,-0.5\n`97 Q1,-0.3\n`97 Q2,-0.2\n`97 Q3,0.7\n`97 Q4,-1\n`98 Q1,-1\n`98 Q2,-1.3\n`98 Q3,0.8\n`98 Q4,-0.2\n`99 Q1,-2.7\n`99 Q2,-2.2\n`99 Q3,-2.6\n`99 Q4,-2.1\n`00 Q1,-2.1\n`00 Q2,-2.5\n`00 Q3,-2.2\n`00 Q4,-1.9\n`01 Q1,-1.6\n`01 Q2,-2.3\n`01 Q3,-2.1\n`01 Q4,-1.8\n`02 Q1,-2\n`02 Q2,-2.6\n`02 Q3,-1.6\n`02 Q4,-1.7\n`03 Q1,-0.9\n`03 Q2,-2\n`03 Q3,-2.3\n`03 Q4,-1.3\n`04 Q1,-1.8\n`04 Q2,-1.7\n`04 Q3,-2.8\n`04 Q4,-0.8\n`05 Q1,-1.3\n`05 Q2,-0.1\n`05 Q3,-1.7\n`05 Q4,-1.6\n`06 Q1,-2.1\n`06 Q2,-1.4\n`06 Q3,-2.8\n`07 Q1,-2.6\n`07 Q2,-1.5\n`07 Q3,-3.1\n`07 Q4,-2.5\n`08 Q1,-3.2\n`08 Q2,-3.9\n`08 Q3,-3.1\n`08 Q4,-3.9\n`09 Q1,-4.6\n`09 Q2,-3.9\n`09 Q3,-1.5\n`09 Q4,-1.9\n`10 Q1,-2.5\n`10 Q2,-2.1\n`10 Q3,-3.5\n`10 Q4,-2.8\n`11 Q1,-1\n`11 Q2,-0.2\n`11 Q3,-3\n`11 Q4,-2.9\n`12 Q1,-2.8\n`12 Q2,-4.1\n`12 Q3,-3.5\n`12 Q4,-4.3\n`13 Q1,-3.7\n`13 Q2,-3.2\n`13 Q3,-4.7\n`13 Q4,-6\n`14 Q1,-4.7\n`14 Q2,-3.9\n`14 Q3,-4.6\n`14 Q4,-5.4\n`15 Q1,-5.4\n`15 Q2,-4.7\n`15 Q3,-4.4\n`15 Q4,-7\n`16 Q1,-5.7\n`16 Q2,-5.9"

    new RGraph.CSV('str:' + csv, function (csv)
    {
        var labels   = csv.getCol(0),
            data     = csv.getCol(1),
            colors   = [],
            tooltips = [];

        data.forEach(function (v,k,arr)
        {
            colors[k] = v > 0 ? '#7CB5EC' : '#B03060';
        });
        
        var crlf = false;

        labels.forEach(function (v,k,arr)
        {
            tooltips[k] = '{2}

Current account deficit: {1}'.format(
                data[k],
                labels[k]
            );

            if (k % 8 !== 0) {
                labels[k] = '';
            }
        });

        new RGraph.SVG.Bar({
            id: 'chart-container',
            data: data,
            options: {
                yaxis:false,
                ylabelsOffsetx: -10,
                yaxisMin: -8,
                yaxisMax: 2,
                xaxis: false,
                xaxisLabels: labels,
                xaxisLabelsOffsety: 10,

                tooltips: tooltips,
                tooltipsEvent: 'mouseover',
                tooltipsEffect: 'none',

                textSize: 9,
                textColor: 'gray',

                title: 'Britain\'s current account deficit is bigger than at the height of the Lawson boom',
                titleSize: 12,
                titleBold: true,

                backgroundGridVlines: false,
                backgroundGridBorder: false,

                gutterLeft: 50,
                gutterBottom: 50,

                colors: colors,
                colorsSequential: true,

                hmargin: 2
            }
        }).on('tooltip', function (obj)
        {
            var tooltip = RGraph.SVG.REG.get('tooltip');
            var index   = tooltip.__index__;

            if (data[index] > 0) {
                tooltip.style.borderColor = 'blue';
            }
        }).grow({frames: 60});



        RGraph.SVG.tooltips.style.textAlign       = 'left';
        RGraph.SVG.tooltips.style.border          = '1px solid red';
        RGraph.SVG.tooltips.style.backgroundColor = 'white';
        RGraph.SVG.tooltips.style.padding         = '10px';
    });
</script>

« Back