An infographic SVG Horizontal Bar chart

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.

<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.hbar.js"></script>

<div style="padding: 15px">
    <div style="width: 350px; height: 500px" id="chart-container"></div>
</div>