Growth Hacker

Internet marketing is my area of expertise. Past consulting clients include eBay, CafePress, DocuSign, myfab, and DeepDyve. Visit my consulting site at Market Extend.
← Back to blog
Google Chart API Tutorial – Learn Really Fast!
November 11, 2009 Jamie Shiller Create Charts

So you want to add some nice charts to your blog post? Can’t be bothered to take a screen shot from MS Excel and upload the image? You should give the Google Chart API a try.

The Google Chart API returns a PNG-format image in response to a URL. Several types of image can be generated, including line, bar, and pie charts. For each image type, you can specify attributes such as size, colors, and labels

First skim the Google Chart Basics. Then take a look at a few chart generators that will build charts for you. My favorite Google Chart generators are Google Chart Generator and Google Chart Creator.

Let’s say you want to make this chart:

(fyi, this is the chart used in my post on randomized controlled experiments for data analysis)

Head over to Google Chart Generator and paste the sample data below into the corresponding input boxes. You’ll see how easy it is to create a line chart with three data sets (the output is three lines).

Each data set defines the points of one line on the graph. The chart legend titles are rendered in the order of the data sets. For example data set 1 (a dark blue line) has the title “Control” on the legend of my example.

Take note of the axis labels. Typically you would label each axis with the appropriate scale numbers. In this case I did not want to provide the scale. Instead I just used the labels to provide a title for each axis. That is why you see a space between the pipe delimiters in the example below for axis labels.

You can leave the axis to show option blank as we’re only working with the x,y axes, and they are the default. The other settings don’t matter too much for this example.

Paste away!

Data Set 1: 9,10,12,14,14,15,14,13
Pick Chart Color: 3333FF
Data Set 2: 9,11,12,13,15,14,14,12
Pick Chart Color: 00FFFF
Data Set 3: 9,13,13,15,17,17,17,16
Pick Chart Color: FF33FF
Legend Title: Control|Lower Price|Show Value
Axis Labels: 0:| | |Day| | |1:| | | Daily Sales| |

The end result you’re after can be pasted into your blog to render a chart.

View comments →