Google Hacks: Pacman graph with Google Charts

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?

29 Responses to Google Hacks: Pacman graph with Google Charts (Leave a comment)

  1. 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.

  2. Mark Lancaster

    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:

  3. 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.

  4. 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?

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

  6. 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.

  7. 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.

  8. Ian M

    Geek :D

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

  9. 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…”

  10. 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

  11. Gab

    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 ;).

  12. … and you guys get paid … how much? O_o

    I’m in the wrong industry.

  13. 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. :)

  14. John A. Davis

    *someone* has too much time on their hands

  15. 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. :)

  16. 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.

  17. this is SUPER-KEWWWLLL!!!

  18. 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.

  19. 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!

  20. 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. :)

  21. 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…

  22. 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*

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

    Kal’oo

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

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

  26. 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?

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

  28. 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.

  29. Just seen the pacman game on the Google home, I bet that puts productivity down in the UK by 10%.

Leave a Comment

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

*

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 may 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>

css.php