Google Hacks: Pacman graph with Google Charts
This link was cool, but it generates a graph like this:
With a little modification, I made this graph:
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:
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:
I almost wanted to call this post “Stupid Google Tricks.” What fun diagrams can you imagine making with the Google Chart service?
Michael D Said,
April 24, 2008 @ 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 Said,
April 24, 2008 @ 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 Said,
April 24, 2008 @ 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 Said,
April 24, 2008 @ 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 Said,
April 24, 2008 @ 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 Said,
April 24, 2008 @ 11:21 pm
Gab (sorry, the other name is too long :), this link gives the answer:
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 Said,
April 25, 2008 @ 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 Said,
April 25, 2008 @ 4:09 am
Geek
(right, now to go and make one myself :))
Brian White Said,
April 25, 2008 @ 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 Said,
April 25, 2008 @ 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 Said,
April 25, 2008 @ 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 Said,
April 25, 2008 @ 12:05 pm
… and you guys get paid … how much? O_o
I’m in the wrong industry.
Matt Cutts Said,
April 25, 2008 @ 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 Said,
April 25, 2008 @ 12:50 pm
*someone* has too much time on their hands
Matt Cutts Said,
April 25, 2008 @ 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 Said,
April 26, 2008 @ 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 Said,
April 26, 2008 @ 6:14 pm
this is SUPER-KEWWWLLL!!!
rishil Said,
April 28, 2008 @ 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 Said,
April 28, 2008 @ 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 Said,
April 29, 2008 @ 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 Said,
April 30, 2008 @ 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 Said,
April 30, 2008 @ 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 Said,
May 5, 2008 @ 11:49 am
Hi Matt
your comment system doesn’t work very well each time
take care of it, taht’s weird
Kal’oo