# A HBar chart showing contributions to the EU

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="900" height="900">
        [No canvas support]
    </canvas>

This is the code that generates the chart:

    <script>
        source_data = [
            ['Germany',29.37616,13.05616],
            ['France',23.2916,14.23932],
            ['Italy',17.16792,12.55426],
            ['UK',17.06837,6.30829],
            ['Spain',11.36872,13.75218],
            ['Netherlands',6.55214,2.26407],
            ['Belgium',5.29076,7.20947],
            ['Poland',4.21444,16.17946],
            ['Sweden',4.21148,1.661],
            ['Austria',3.19142,1.86196],
            ['Denmark',2.89935,1.43476],
            ['Finland',2.15909,1.49678],
            ['Greece',1.90644,7.21455],
            ['Portugal',1.79296,6.16278],
            ['Ireland',1.73123,1.87429],
            ['Czech Republic',1.61663,4.89312],
            ['Romania',1.47429,5.56058],
            ['Hungary',1.01109,5.90983],
            ['Slovakia',0.79935,2.02608],
            ['Bulgaria',0.47756,1.97686],
            ['Slovenia',0.42562,0.8136],
            ['Lithuania',0.40477,1.88121],
            ['Luxembourg',0.3218,1.59824],
            ['Latvia',0.26901,1.06321],
            ['Croatia',0.23824,0.28996],
            ['Estonia',0.21195,0.97333],
            ['Cyprus',0.18483,0.22707],
            ['Malta',0.08642,0.1737]
        ];

        labels = [];
        data   = [];

        // Create the separate data and labels arrays
        for (var i=0; i<source_data.length; ++i) {
            labels[i] = source_data[i][0];
              data[i] = [source_data[i][1], source_data[i][2]];
        }

        new RGraph.HBar({
            id: 'cvs',
            data: data,
            options: {
                labels: labels,
                gutterLeftAutosize: true,
                vmargin: 10,
                backgroundGridHlines: false,
                backgroundGridBorder: false,
                backgroundGridAutofitNumvlines: 13,
                noaxes: true,
                xlabelsCount: 13,
                xmax: 32.5,
                scaleDecimals: 1,
                colors: ['#7CB5EC','#B03060'],
                titleXaxis: 'Contributions / receipts (ebn)',
                titleXaxisY: 910,
                titleXaxisColor: '#aaa',
                key: ['Money contributed in 2013','Money received in 2013'],
                keyPosition: 'gutter',
                keyTextBold: true
            }
        }).grow({frames: 60});

        node = RGraph.text2.find({
            id: 'cvs',
            text: /ebn/
        });

        node[0].innerHTML = node[0].innerHTML.replace('ebn', '&euro;bn');
    </script>