flot.pyramid is a flot plugin wich can be used to plot population pyramids with ease.
You can check the source code on GitHub: asis/flot-pyramid
For a step by step explanation, check the annotated source code.
This is an example showing the Spanish population pyramid, male vs. female (source: U.S. Census Bureau, International Data Base).
And this is the relevant code (the tooltips generation stuff is not shown here; just check js/example.js):
var pseries = [
{
label: 'Men',
data: [ ['0-4',1302329], ['5-9',1225196], ['10-14',1090872],
['15-19',1158983], ['20-24',1339972], ['25-29',1667557], ['30-34',2072016],
['35-39',2117802], ['40-44',1945472], ['45-49',1746832], ['50-54',1521581],
['55-59',1282107], ['60-64',1173175], ['65-69',990405], ['70-74',800274],
['75-79',732383], ['80-84',477597], ['85-89',241915], ['90-94',69987],
['95-99',15332], ['100+',2060] ] },
{
label: 'Women',
data: [ ['0-4',1224757], ['5-9',1129454], ['10-14',1030163],
['15-19',1084773], ['20-24',1220879], ['25-29',1527463], ['30-34',1960767],
['35-39',2043411], ['40-44',1904849], ['45-49',1747880], ['50-54',1551797],
['55-59',1330712], ['60-64',1262386], ['65-69',1107169], ['70-74',980444],
['75-79',994168], ['80-84',764408], ['85-89',475115], ['90-94',171929],
['95-99', 40284], ['100+',5498] ],
pyramid: {
direction: 'L'
}
}
];
$.plot($('#pyramid'), pseries, {
series: {
pyramid: {
show: true
},
},
xaxis: {
tickFormatter: function(v) {
return v == 0 ? 0 : v/1000 + " K";
}
}
});
You can download this project in either zip or tar formats.
You can also clone the project with Git by running:
$ git clone git://github.com/asis/flot-pyramid