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: