Charting Scott Walker with Google Chart Tools

I recently started playing around with Google Chart Tools, and I’m really impressed.

Check out this example, which reveals how Scott Walker’s albums changed from mainstream pop hits to terrifying (and amazing) avart-garde concept albums. The JavaScript below is all that is needed to render the chart.

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart1);
function drawChart1() {
var data = new google.visualization.DataTable();
data.addColumn('string','Year');
data.addColumn('number','Score');
data.addColumn({type:'string', role:'annotation'});
data.addRows([
['1969',35,'Scott 3'],
['1969',40,'Scott 4'],
['1984',50,'Climate of Hunter'],
['1995',65,'Tilt'],
['2006',95,'The Drift'],
['2012',85,'Bish Bosch']
]);

var options = {
height: 400,
colors: ['#769dbb'],
backgroundColor: '#000000',
legend: {textStyle: {color: '#FFFFFF'}},
hAxis: { title: 'Album Release Year', titleTextStyle: {color: '#FFFFFF'}, textStyle: {color: '#767676'} },
vAxis: { title: 'Pop to Terrifying', titleTextStyle: {color: '#FFFFFF'}, textStyle: {color: '#767676'} },
};

var chart = new google.visualization.LineChart(document.getElementById('chart_div1'));
chart.draw(data, options);
}

In the example above, I’m instantiating a new DataTable object and adding columns and rows using the addColumn and addRows methods. This approach offers more control over column data types and ‘roles.’ As you can see above, I’m creating a third column with a role of ‘annotation’ to add the album names to the chart.

There is a faster way using the arrayToDataTable function. I wouldn’t be able to add the album names as notations, but for basic charts, say something like sales over year, this method works just fine. Here is what it would look like:

var data = google.visualization.arrayToDataTable([
['1969',35],
['1969',40],
['1984',50],
['1995',65],
['2006',95],
['2012',85]
]);

This page offers a good example of how to populate the chart array with JSON data using ajax and a short PHP script. If you combine this with something like the Python Requests library, you could do some cool data visualizations in little time.

Advertisements
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: