eCommerce

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?

© 2008 rossboardman.com.