An infographic SVG Horizontal Bar chart

View the bare-bones version of this demo with any interactive features or animations enabled

Here's a small Horizontal Bar chart that has had some extra work done to it so that it appears similar to what you might see used in an infographic.

It's just a case of sorting the data so that the data pieces appear in the correct order and the bars also have a bulb at the end indicating the position in the results (assuming that there was a competition of some kind). The chart is using SVG so this bulb doesn't have to be drawn in the draw event.

The raw data for the chart is sorted using the JavaScript array function sort so that the highest number is at the top. Since the array is two-dimensional a custom sort function has to be used so that the action of sorting can be stipulated. This is the call to the sort function:

data.sort(function (a, b)
{
    return b[0] - a[0];
});

The original data array is two-dimensional (as you can see below in the source code) so that after sorting it, the label and the color are still all correlated and the correct name and color are associated with the correct bar.

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="float: right">
    <div style="width: 350px; height: 300px; display: inline-block" id="chart-container"></div>
</div>

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