Here at Mother Jones, our reporters, editors, and army of fact-checkers hoard more troves of chart-tastic data than our 2.5-person interactive team can keep up with. We love quality charts and take great pride in those we've produced before—our visualizations of income inequality from March 2011 are still in our all-time biggest traffic items. But our booming daily content calls for a charting method that allows for faster, easier collaboration across the newsroom, and our go-to solutions—Illustrator and Excel—don't always cut it.
So in June, our interactive editor Tasneem Raja asked me to dig into Google's Chart Tools API. Two nice things about this approach: first, our reporters and editors already know and love Google Doc's collaborative editing features. And second, since Chart Tools can hook into a Google spreadsheet, a reporter can easily update a chart visualization themselves by simply changing the data in the underlying spreadsheet. The API also comes with a suite of configuration options that allows you to customize your chart's font, colors, and dimensions to better match your existing site styles (to an extent—more on that later).
Here's how we got it working for us.
After some preliminary Googling, I found a Google bar chart example that used the Fusion Table API, and, even better, included some sample code. As you can see below, the chart mostly runs on JavaScript, pulling data from a Fusion Table and applying some basic queries and layout.
<html> <head>
<meta charset="UTF-8">
<title>Fusion Tables API Example: Google Chart Tools Bar Chart</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['corechart'] });
function drawVisualization() {
google.visualization.drawChart({
containerId: 'visualization',
dataSourceUrl: 'http://www.google.com/fusiontables/gvizdata?tq=',
query: 'SELECT Year, Austria, Bulgaria, Denmark, Greece FROM 18k8XNgsc5ktLP2EHMCpoKIwymsVlzVV-xVuceA',
chartType: 'BarChart',
options: {
title: 'Yearly Coffee Consumption by Country',
vAxis: {
title: 'Year'
},
hAxis: {
title: 'Cups'
}
}
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="visualization"></div>
</body> </html>
[Read more in the Mixed Media blog]