Google Hacks: Pacman graph with Google Charts

April 24, 2008

in Gadgets/Hack, Google/SEO

This link was cool, but it generates a graph like this:

Pacman graph with cyan in the wrong direction

With a little modification, I made this graph:

Pacman graph pointing the right way with light gray and yellow

I like my picture a little better. It was quite simple to make this diagram, and Google provides a free graph-drawing tool that you can use on your own site with a single url — no account or login is needed! Let’s break down how I made this image:

http://chart.apis.google.com/chart? Loads an image from Google Chart

cht=p Chart type is a pie chart

&chtt=Percentage%20of%20Google%20Chart%20Which%20Resembles%20Pac-man Chart title

&chs=550×250 Chart size

&chd=t:10,80,10 Chart data. This is the only tricky bit. The pie chart starts from the “x-axis” of the pie. The “t:” means that the data is in text format with numbers between 0.0 and 100.0. Going clockwise, the pie chart is 10 units of non-Pacman, then 80 units of Pacman, then another 10 units of non-Pacman. The Google Graph API guide adds “Note: For text encoding, scale your data by converting it into percentages of the largest value in your data set.”

You don’t have to scale your max value to 100, but let’s do it for fun. My maximum value is 80, so to scale 80 to 100 I’d multiply my numbers by 1.25. I tried a value of “12.5,100,12.5″ and it generated an identical Pacman graph. You can even make a funky graph using 12.5 for gray, then use eight yellow slices of 12.5 units each (which add up to 100), and then finish off with a final 12.5 of gray:

Pacman graph pointing the right way with light gray and yellow

I like using the values 10,80,10 more. If your numbers add up to 100 then the data points are just the percentage of the pie chart: 10%, then 80%, then 10%. So 20% of the graph is gray and 80% is yellow. That’s easier for me to remember. Okay, I geeked out a bit there, sorry. Back to the graph. :)

&chco=FAFAFA,FFFF00,FAFAFA Chart colors. The non-Pacman bits are the color #FAFAFA, while the Pacman color is #FFFF00.

&chl=Does%20not%20resemble%20Pac-man|Resembles%20Pac-man Chart labels

I really like this graph-drawing service because anyone on the web can use it for free without even registering. For example, I used a Google-o-meter graph in a recent post:

Google-o-meter

I almost wanted to call this post “Stupid Google Tricks.” :) What fun diagrams can you imagine making with the Google Chart service?

{ 28 comments… read them below or add one }

Michael D April 24, 2008 at 9:26 pm

I was looking for something like this to use in blog posts. After checking the developers guide I see there are a ton more options than making pac-man styled charts, very cool. So far, I think I like the maps best.

Mark Lancaster April 24, 2008 at 9:54 pm

http://chart.apis.google.com/chart?cht=p&chtt=People%20Who%20Do%20Not%20Like%20Pie&chs=550×250&chd=t:45,10,45&chco=FFFFFF,BB0099,FFFFFF&chl=People%20Who%20Ate%20This%20Pie%7cDo%20Not%20Like%20Pie

People who do not like Pie vs People who like pie.

Edit by Matt: Mark Lancaster, it looks like the ‘|’ character needed to be escaped to be %7C in the url you cut/paste. I edited it above, and it makes an image like this:

Matt Cutts April 24, 2008 at 10:13 pm

Michael D, that’s right. You can make line graphs, bar charts, pie charts, scatter plots, venn diagrams, radar plots, and all kinds of maps (world, U.S., etc.). It’s a pretty complete set of tools for free, and the graph team listens for feedback on new features to add.

Google Unveils The Source of Site SERPs In Its Index April 24, 2008 at 10:23 pm

I don’t get it. How does this fit with Google’s strategy? Besides being a fun project for employees, how does this add value/strengthen Google/work as an asset? Is the point to build a user base/take away Microsoft’s?

Google Unveils The Source of Site SERPs In Its Index April 24, 2008 at 10:24 pm

p.s. Sorry if I’m being cynical, this just doesn’t seem to fit directly with search so I’m a little confused.

Matt Cutts April 24, 2008 at 11:21 pm

Gab (sorry, the other name is too long :) , this link gives the answer:

So why is Google offering this service? What’s in it for you?

We built the service originally as an internal tool to support rapid embedding of charts within our own applications (like Google Finance for example). We figured it would be a useful tool to open up to web developers.

I can vouch that it was a well-used internal Google service before it opened up to the public. This is a neat tool that doesn’t make Google any money or give us any special advantage, but that’s okay. It makes the web a better place, and that’s good enough in my opinion.

Carlos Cruz April 25, 2008 at 2:49 am

Just the other day I was scratching my head trying to figure out how to display a graph in a forum that I participate on. I ended up creating the graph in excel, snapping a screenshot, pasting it into powerpoint, saving it as a picture, uploading the jpg to my website and then finally was able to display the graph in my forum thread.

This new tool is a considerably more efficient method for generating graphs for the web…especially since it can be done on the fly. Thanks for sharing it with the general public and I plan on making good use of it in the future.

Ian M April 25, 2008 at 4:09 am

Geek :D

(right, now to go and make one myself :) )

Brian White April 25, 2008 at 6:15 am

I would repurpose the “a lot” meter chart to describe the amount of alcohol it would take to name your child “Google Unveils The Source of Site SERPs In Its Index…”

Thomas Guest April 25, 2008 at 9:35 am

As a really stupid trick, convert an image into the url of a google scatter chart which looks like the original image.

More details on my website: http://wordaligned.org/articles/scatter-pictures-with-google-charts

Gab April 25, 2008 at 10:11 am

My bad on the other name, that was pre-saved by Firefox and I didn’t notice.

Cool to hear that you guys were using this before, btw, and thanks for responding to my questions Matt. Not sure about “or give us any special advantage” in the long run, but that’s obviously open to debate ;) .

Ghosty April 25, 2008 at 12:05 pm

… and you guys get paid … how much? O_o

I’m in the wrong industry.

Matt Cutts April 25, 2008 at 12:45 pm

Ghosty, it’s my personal blog, so I don’t mind throwing up fun/geeky posts. I have used the Chart API for a 20% project and it’s pretty neat, so I figured other people might want to know of its existence. :)

John A. Davis April 25, 2008 at 12:50 pm

*someone* has too much time on their hands

Matt Cutts April 25, 2008 at 3:24 pm

John A. Davis, I blame the person who made the original Pacman graph.

But I think we’re on the leading edge of a mini-phenomenon. Matt Mullenweg, the WordPress founder, had a keynote at Web 2.0 right after me and he showed a Pacman graph in his talk, completely independently. :)

Tim Wintle April 26, 2008 at 4:50 am

I guess google charts is the new LOLCats then?

We’ve been using charts for a little while at work – there’s a nice open source python wrapper to it around (the urls get quite complicated when you have loads of data), and we’ve written a zope product based on it to create charts really easily in zope templates (I think it’s going to / has been released as GNU, but I can’t find the link now). If anyone is interested then contact me (contact details via the link on my name), and I’ll try to bug the developer.

p.s. Matt – how about an article on Google App engine (or whatever it’s called). Haven’t been able to get a log-in yet, but it looks remarkably similar to turbogears.

Chintan April 26, 2008 at 6:14 pm

this is SUPER-KEWWWLLL!!!

rishil April 28, 2008 at 6:50 am

ummm Matt do you really need link bait? ;) This would have been an awesome way to generate link bait, but oh well… time to checkout what other silly things you can do with google apps… hmmm

@Gab – lol.

Jeffrey Smith April 28, 2008 at 8:37 am

We know who had an Atari back in the day now!

The piece of pie image sort of reminds me of a Gestalt Principle called closure. Even with the piece of pie, you still see pack man.

Definition of Closure:

Closure occurs when an object is incomplete or a space is not completely enclosed. If enough of the shape is indicated, people perceive the whole by filling in the missing information.

http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm

Matt you crack me up, this is my favorite post next to the iPhone docking with anything and everything, classic!

Naruto Episodes April 29, 2008 at 2:09 pm

That post is hilarious! I also can’t believe people still remember Pac-Man!! I loved Pac-Man when I was a little kid.

Anyways back to the post, I have to disagree with the first post. I’d say all of it is Pac-Man, just the purple part is what Pac-Man is eating. :)

Gecko April 30, 2008 at 6:55 am

That yellow gave me a headache. It really did. I wished I had my old monitor back instead of this giant flat screen deal. Uhh, my head hurts…

Judd Exley April 30, 2008 at 7:51 pm

That. Is. Awesome.

I’m off to find out what percentage of me can’t stop thinking about pie while making these graphs… *hint:like 100% or something*

kaloo May 5, 2008 at 11:49 am

Hi Matt
your comment system doesn’t work very well each time
take care of it, taht’s weird

Kal’oo

One Year Millionaire May 18, 2008 at 3:26 pm

OMG. Pacman is my favorite video game of all time… console or arcade… its just so addictive… Sweet post!

fedmich June 6, 2008 at 9:00 am

Cool. I’m pacman / pizza fan myself :)

Brisbane SEO consultant June 26, 2008 at 3:42 am

So how are Google apps going? I haven’t heard too much in the Australian press lately over the last 6 months.

The apps I use are the calendar (love the SMS reminders each week to put out the garbage), and Google Desktop which I use every day.

What’s your favourite Google app, not including search?

Chicago SEO Company February 12, 2010 at 12:35 pm

Amazing! I’m going to go and make one for myself now:)

Thomas Guest March 9, 2010 at 3:37 pm

I just took another look at the Google Chart API and discovered that it’s bigger and better than ever. My latest trick is to use the new dynamic icons feature to generate some classic cycling scenes from the Tour de France. More details on my website: http://wordaligned.org/articles/bike-charts.

Leave a Comment

If you have a question about your site specifically or a general question about search, your best bet is to post in our Webmaster Help Forum linked from http://google.com/webmasters

If you comment, please use your personal name, not your business name. Business names can sound salesy or spammy, and I would like to try people leaving their actual name instead.

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post: