An SVG Horizontal Bar chart that's useful for an infographic

Summary: An SVG Horizontal Bar chart that might be used in an infographic. It's basically a Horizontal Bar chart with circles drawn at the end of the bars.

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 SVG based 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="padding: 15px">
    <div style="width: 350px; height: 500px" id="chart-container"></div>
</div>

This is the code that generates the chart: