An orange/blue SVG Bar 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: 850px; height: 500px" id="chart-container"></div>
</div>

This is the code that generates the chart:

<script>
    new RGraph.SVG.HBar({
        id: 'chart-container',
        data: [[-.27,-.21],[.06,.07],[0,.07],[.03,.03],[.03,.05],[.04,.06],[-.31,.38],[.09,.08],[-.02,.10],[.12,.11],[.22,.32],[.12,.1]],
        options: {
            hmargin: 20,
            yaxisLabels: [
                'Food and non-alcoholic beverages',
                'Alcohol and tobacco',
                'Clothing and footwear',
                'Housing and household services',
                'Furniture and household goods',
                'Health',
                'Transport',
                'Communication',
                'Recreation and culture',
                'Education',
                'Restaurants and hotels',
                'Miscellaneous goods and services'
            ],
            title: 'Contributions to the CPI 12-month rate: November 2015 and November 2016',
            yaxisColor: '#aaa',
            xaxisMin: 'mirror',
            xaxisMax: .5,
            xaxisDecimals: 1,
            xaxisLabelsCount: 10,
            backgroundGridHlines: false,
            backgroundGridBorder: false,
            xaxis: false,
            textColor: 'gray',
            textSize: 9,
            colors: ['#274796','#F5942F'],
            titleColor: 'gray',
            vmargin: 5,
            attributionX: 5,
            attributionY: '-5',
            attributionHalign: 'left',
            attributionValign: 'bottom'
        }
    }).grow();
</script>

« Back