Charts: Yet Another Google Product

As most web users these days know, Google is ubiquitous. The company runs the largest online search engine, developed the most popular smartphone software, and has gracefully adopted and led in use of “the cloud”, which is the basis of their email, calendar, and cloud storage tools. These, however, are only the most well-known tools that Google has to offer. Google also has an entire department devoted to building tools for developers to use–a manifestation of the company’s belief in open-source software. One of these many tools they offer, Charts, has endless uses. It can be used by businesses, data scientists, or even digital humanists, which is why it is going to be the primary mode of presentation for our Wordline test analysis project.

Charts home

The homepage of Google Charts

 

Google’s Charts tool is, like many of Google’s products, very simple. It is Javascript-based and runs with HTML5, which is built into every modern browser–this eliminates compatibility problems involving Adobe Flash. Let’s work through a step-by-step application of Charts by recreating part of Minard’s chart of Napoleon’s march to Moscow, one of the “best statistical drawings ever created,” step-by-step.

1. Choose your variables

Instead of tracking all the variables that Minard tracks in his chart, however, let’s stick with one. To simplify this chart, we should first determine what part of Napoleon’s march we want to show–that is, what is the most important conclusion that can be drawn concerning this military campaign? To me, the answer is simple: It was an absolute failure! Although there’s plenty of wisdom to be gleaned by studying this military endeavor, the fact that Napoleon, one of the greatest military minds of all time, failed so horribly in his invasion of Russia is astonishing. Now that we’ve decided that, what piece of data shows most clearly how horrible Napoleon’s defeat was in Russia? Looking at Minard’s graphic, the sheer change in the size of his army jumps out. So let’s track Napoleon’s army size over time!

Minard Map of Napoleon's 1812 Campaign

Minard’s Map of Napoleon’s Russian Campaign of 1812

2. Gather your data

Obviously, if we’re going to graph something, we need something to graph. So let’s collect some data! We can look at Minard’s chart to get data about Napoleon’s army size, but unfortunately, time is only listed for the army’s return journey, and it isn’t listed consistently. For the sake of simplicity, let’s just map the army’s size on the return trip from Moscow, and only use the size for every date listed by Minard. Cool? Cool. This data would be much easier to see and use if we put it into a table. Let’s do that using another Google tool, Sheets.

 

Table

A chart showing Napoleon’s Army size versus time (the year is listed as 2015, but since we know the return trip was in 1812 and we’ll be transcribing these values again, this doesn’t matter too much)

3. Choose your chart

So now we have our numbers! Since our project involves tracking change over time, a line graph is likely the best option for us. However, in order to show a little more information, it could be helpful for viewers if we inserted explanations concerning events that occurred over the course of Napoleon’s march to Moscow–for this, the annotation chart is the best option, since it allows you to insert annotations at certain points in the graph. The increases in army size, for example, should probably be explained to avoid confusion. These happened when other flanking armies which had broken off rejoined the main army on the return trip–so these will be our two annotations.

Chart types

The list of chart types available

Annotation Chart

Google’s example Annotation Chart

 

 

 

 

 

 

 

 

4. Adjust the Javascript to fit the data we’ll be putting in

Here comes the biggest step: formatting the chart to work with our data. If you click the “Code in JSFiddle” button below the example chart, you should see this:

Code1

The code used to create the example Annotation Chart shown above

This code for the chart made by Google has a few things we need to change: first off, let’s remove the line for the Gliese 163 mission–after all, we’ll only need to show one line. This can be done just by deleting all the text in lines 8-10.

Done? Perfect. Now since we only have one line, we should delete all the data that was associated with the second line. This is included in the “rows” section of the code, conveniently visible after “data.addRows” in line 11:

[new Date(2314, 2, 15), 12400, undefined, undefined,
10645, undefined, undefined],
[new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
12374, undefined, undefined],
[new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
15766, 'Gallantors', 'First Encounter'],
[new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
34334, 'Gallantors', 'Statement of shared principles'],
[new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
66467, 'Gallantors', 'Mysteries revealed'],
[new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
79463, 'Gallantors', 'Omniscience achieved']

You can see that we have the date listed in there (don’t remove this since we’ll need a date for our graph!), and then six more values, included in each set of brackets. The first three of these correspond to the Kepler 22-b mission values: these are, respectively, the y-value for that date, the title of the annotation for that date, and the annotation text for that date. The second three are the same, but linked to the Gliese mission–let’s delete these for each set of brackets listed in there.

Now your code should look like this:

 google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Kepler-22b mission');
data.addColumn('string', 'Kepler title');
data.addColumn('string', 'Kepler text');
data.addRows([
[new Date(2314, 2, 15), 12400, undefined, undefined],
[new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter'],
[new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall'],
[new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!'],
[new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties'],
[new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost']
]);

var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

var options = {
displayAnnotations: true
};

chart.draw(data, options);
}

While we’re at it, let’s get rid of line 6, too. This line just tells the computer to look for a title for the annotation associated with each data point. Since we only have one line, now, we don’t really need a title anymore. All our annotations will be related to our line of Napoleon’s army size, as well, so we should change the names to refer to that instead of to the Kepler-22b mission.

 google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', '1812 Campaign');
data.addColumn('string', 'text');
data.addRows([
[new Date(2314, 2, 15), 12400, undefined],
[new Date(2314, 2, 16), 24045, 'First encounter'],
[new Date(2314, 2, 17), 35022, 'They are very tall'],
[new Date(2314, 2, 18), 12284, 'Attack on our crew!'],
[new Date(2314, 2, 19), 8476, 'Heavy casualties'],
[new Date(2314, 2, 20), 0, 'All crew lost']
]);

var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

var options = {
displayAnnotations: true
};

chart.draw(data, options);
}

So now our chart has a single line, called “1812 Campaign”, which has a date, number value, and annotation text associated with every point. If you’ve made it this far, you’re doing well! Just one small step left.

5.  Insert your data and annotations into the chart

Now all we have to do to finish the chart is insert our own data into it! Just substitute the correct dates from the table we made earlier (the year being 1812 instead, of course), put in the army size on each date, and, for those dates where smaller armies joined the main army, write a little explanation. For those which don’t have annotations, you can just type “undefined” without the quotes!

Once you’ve finished this, you should have code looking something like this:

 google.setOnLoadCallback(drawChart);

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', '1812 Campaign');
data.addColumn('string', 'text');
data.addRows([
[new Date(1812, 9, 18), 100000, undefined],
[new Date(1812, 10, 9), 37000, undefined],
[new Date(1812, 10, 14), 24000, undefined],
[new Date(1812, 10, 24), 50000, 'Joined by flanking army'],
[new Date(1812, 10, 27), 28000, undefined],
[new Date(1812, 11, 1), 12000, undefined],
[new Date(1812, 11, 6), 12000, undefined],
[new Date(1812, 11, 7), 8000, undefined],
[new Date(1812, 11, 13), 10000, 'Joined by flanking army']
]);

var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

var options = {
displayAnnotations: false
};

chart.draw(data, options);
}

You may have noticed a few strange things in this code. First, the months are listed as one month prior to what they actually are (“9” for October, “10” for November)–this is because computers always begin counting at zero. So January is month 0 instead of month 1. I also changed a value in line 23 from “true” to “false”. This just prevents the chart from showing annotations along the right side, which is just a personal decision.
So if you click the “run” button at the top, and you’ve done everything right, you should get to the final step!

6. Admire your creation!

Congratulations! You’ve successfully created an annotated chart showing the size of Napoleon’s army during his unsuccessful 1812 campaign to Moscow!

Final chart

The completed annotation chart!

This chart can be embedded in your own website or shared with people using the button at the top! Now, you’re well on your way to becoming a chart-making master. Feel free to experiment and explore charts that may come in handy for other projects of yours! Google’s official documentation is available here, and contains a whole lot of useful info for the more complicated parts of Charts. Here is a more advanced tutorial showing you how to use Google Charts or Google Visualization to post a static or interactive chart, respectively, on your own website. Go forth and graph away!

pallavkumar

3 Comments

  1. Great tutorial! The images were descriptive and your tutorial was easy to follow. The code seems to be weirdly formatted at some places, but it didn’t affect my overall experience with following the steps.

  2. Pallav,

    You’ve really nailed how to write effectively for the web, and this tutorial — as with your other recent posts — is clearly organized, engagingly written, and effectively illustrated. I really like how you took us on a deep dive through a tool your group is using for its final project, and I love that you used Minard’s map as your test case! This is the hacking mentality in practice at its best: start with someone else’s open source code and modify it to fit your needs, then share both the results and the knowledge of how to do it with others.

    I love that your post included code examples, but like Quang I found the code formatting distracting. I edited your post slightly to make these display better. HTML5 convention is to wrap code in both <pre> and <code> tags, and I installed the Prettify Code Syntax plugin on our site to add color coding. I wrapped each of your code blocks in <pre class=”prettyprint linenums”>, which not only color codes them and makes them pretty, but adds line numbers so your reference to line 6 is easier to follow!

    Great tutorial — thanks for sharing.

Leave a Reply to Austin Cancel reply

Your email address will not be published. Required fields are marked *