Tim Brockman . com

Google Chart API rules for generating QR codes

• Tim Brockman
• @ 3:51 pm

Link to Google QR code documentation

Google Chart API has a number of great tools for data visualization. Check it out at http://code.google.com/apis/chart/ when you have a chance. They also have slick tools for pointers, (like thought bubbles) and easily adding properly formatted equations to the web, (great for awkward things like summations, fractions, etc.) If that wasn't enough, they have the easiest QR encoding you can imagine.. In fact, if you can embed an image in a web page you can embed a QR code.

<-- This square made up of little staticy black squares is a QR code. For those of you wondering.. QR stands for Quick Response. It is an easier to scan 2d matrix version of the familiar, omnipresent bar code. You can encode text, numbers, binary, Kanji, code snippets, URLs or more binary as a QR code. The amount of info you are able to store in the square depends on the amount of staticy pixels. If you need to learn more about what QR codes are about read the Wikipedia entry.

QR codes can be read by almost any mobile phone or device with a camera. If you need to download the reader software http://reader.kaywa.com/ is a good free service, but there are a plethora of other apps.

Now for the easy QR Code Generation step-by-step:

1. Decide what you want to encode and if it is possible.. if it is short and simple the answer is likely yes. If not, think URL shortening like t.co or goo.gl.
2. Build a proper image tag. It would be a good idea to include title, alt, height, and width but you need src. Here is the img tag for the above QR code with the src value starred out.
   

   <img title="qr_codes" src="****" alt="QR encoded link to Google Chart API QR code documentation." width="120" height="120">

3. All of the action happens between the quotes of the src attribute and Google's magical servers. To get things started replace the first star with:
   

   http://chart.apis.google.com/chart?

   Which is the URL base you use for public Google Chart API functions.

4. Replace the second star(*) with:
   

   cht=qr

   Which tells Google Chart API to use the QR Code function.

5. Replace the third star(*) with:
   

   &chl=yourURLorWhatever

   The & tells Google Chart API to expect the next argument and chl=yourURLorWhatever tells Google Chart API what to data to turn into a QR Code. For the example image, I used &chl=http://code.google.com/apis/chart/infographics/docs/qr_codes.html to remind you where to find the documentation.

6. Replace the last star(*) with:
   

   &chs=120x120

   This is the last of the 3 required arguments being sent to the Google Chart API when you request a QR Code image. It specifies the size of the png in pixels and the Google servers generate your custom QR Code on the fly.

7. If you used the same URL I did in the above image the final result should be identical to mine. Here is the complete image tag. (You may notice an optional "&choe=UTF-8" which, can be investigated at your leisure. )
   

   <img title="qr_codes" src="http://chart.apis.google.com/chart?cht=qr&chl=http://code.google.com/apis/chart/infographics/docs/qr_codes.html&choe=UTF-8&chs=120x120" alt="QR encoded link to Google Chart API QR code documentation." width="120" height="120">

Next time you need a QR Code for a mobile web accessible inventory tracking system or feel the need to lemon party some products at Walmart, Google Chart API makes it all easy. Bobs yer abracadabra.