An SVG HBar chart with a highlighted bar using the wave effect

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: 450px; height: 500px" id="chart-container"></div>
</div>

This is the code that generates the chart:

<script>
    new RGraph.SVG.HBar({
        id: 'chart-container',
        data: [0.1,0.2,0.3,3.2,0.2,0.5,0.5,0.2,0.4,0.8,0,0.1],
        options: {
            backgroundGrid: false,
            xaxisMax: 3.5,
            xaxis: false,
            xaxisScale: false,
            colors: ['#164366','#164366','#164366','#FDB515','#164366'],
            colorsSequential: true,
            yaxisLlabels: ['Norway','Australia','Netherlands','United States','New Zealand','Canada','Ireland','Germany','Sweden','Switzerland','Japan','England and Wales'],
            yaxisLabels: ['January','February','March','April','May','June','July','August','September','October','November','December'],
            labelsAbove: true,
            labelsAboveDecimals: 1,
            yaxisTickmarks: false
        }
    }).wave();
</script>

« Back