We were working on a project that needed to visualize a population pyramid. We were already working with the Google Chart Tools and the therefore we tried to create a population pyramid with it.And after some trial & error we succeeded and you can see the result. Below is explanation how it’s done.
First we need some data, so let’s create some.
var dataArray = [ ['Age', 'Male', 'Female'], ['0-4 years', 106, -104], ['5-9 years', 91, -86 ], ['10-14 years', 79, -77 ], ['15-19 years', 68, -64 ], ['20-24 years', 62, -58 ], ['25-29 years', 56, -53 ], ['30-34 years', 51, -46 ], ['35-39 years', 48, -41 ], ['40-44 years', 43, -35 ], ['45-49 years', 39, -30 ], ['50-54 years', 33, -27 ], ['55-59 years', 32, -25 ], ['60-64 years', 27, -20 ], ['64-69 years', 19, -16 ], ['70-74 years', 13, -12 ], ['75-79 years', 8, -7 ], ['80-84 years', 3, -3 ], ['85-89 years', 1, -1 ], ['90-94 years', 0, 0 ], ['95+ years', 0, 0 ] ]; |
Note that the ages for the second data column (Female) are negative. This will give a nice pyramid shape, with one column on the left side of the y-axis and the other one on the right side.
A population pyramid is a typical Google Barchart so we are going to use that one. We need to convert the array to a data table that can be used by the chart tool. Then we need to create the chart and draw it.
var data = google.visualization.arrayToDataTable(dataArray);
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
Drawing this results in an upside down pyramid, not quite what we wan but we are getting there.
First we need to stack the bars, so that they line up nice. We also need to put the chart upside down. Fortunately the API provides us with some options, so let’s use them.
isStacked: true, // stacks the bars vAxis: { direction: -1 // reverses the chart upside down } |
Rendering the image show we are almost there.
It’s close now, the only problem now is that the females show a negative number and there is no such thing as a negative number of females. Luckily it’s possible to format the text of the horizontal axis. Add the following in options:
hAxis: { format: ';' } |
And the result is a nice looking population pyramid with positive numbers on the left and right side of the y-axis. But on mouseover it still shows the negative numbers. We can fix this too with the same formatting principle. Just before drawing the chart, enter the following:
var formatter = new google.visualization.NumberFormat({ pattern: ';' }); formatter.format(data, 2) |
And now you have a complete population pyramid with the Google Chart Tool.
Below is the complete source code:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(chart);
function chart()
{
//var data = new google.visualization.DataTable();
var dataArray = [
['Age', 'Male', 'Female'],
['0-4 years', 106, -104],
['5-9 years', 91, -86 ],
['10-14 years', 79, -77 ],
['15-19 years', 68, -64 ],
['20-24 years', 62, -58 ],
['25-29 years', 56, -53 ],
['30-34 years', 51, -46 ],
['35-39 years', 48, -41 ],
['40-44 years', 43, -35 ],
['45-49 years', 39, -30 ],
['50-54 years', 33, -27 ],
['55-59 years', 32, -25 ],
['60-64 years', 27, -20 ],
['64-69 years', 19, -16 ],
['70-74 years', 13, -12 ],
['75-79 years', 8, -7 ],
['80-84 years', 3, -3 ],
['85-89 years', 1, -1 ],
['90-94 years', 0, 0 ],
['95+ years', 0, 0 ]
];
var data = google.visualization.arrayToDataTable(dataArray);
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
var options = {
isStacked: true,
hAxis: {
format: ';'
},
vAxis: {
direction: -1
}
};
var formatter = new google.visualization.NumberFormat({
pattern: ';'
});
formatter.format(data, 2)
chart.draw(data, options);
}
</script>
</head>
<div id="chart_div" style="width: 600px; height: 600px;"></div>
</body>
</html> |