Generate QR Codes On-the-Fly With the Google Chart API

You’ve probably seen a QR code before, even if you didn’t know what it was at the time. It’s a little square matrix barcode that can be read by either a specialized scanner or a cellphone with the right software. UPS puts QR codes on their packages for tracking purposes, and many Android phones come with QR readers preinstalled for easily sharing links to apps.

A QR code can contain any sort of textual information, which will be decoded by a QR reader. A web address, a simple message, a phone number, etc.. A good QR reader should figure out what the decrypted data is and act upon it accordingly. If it’s a web address, it will display the web page. If it’s a phone number, it should display the number and offer to call it.

Users of the iPhone or fourth-generation iPod Touch can use a free app like QR Reader to scan QR codes.

What can you use a QR code for? There are plenty of possible applications. Magazines could print QR codes that let you quickly jump to a web page. (Anyone remember the CueCat?) Advertisements could have QR codes that offer more information. You could put a QR on your business card. Want to move a web page you’re reading from your computer to your phone? Create a quick QR matrix and scan it right off the screen!

Now for the fun part… How do you make your own QR codes?

Google has a nifty API for dynamically generating charts. A simple (if messy-lookig) URL request will instantly generate an image containing a pie chart or a line graph. While QR codes aren’t exactly charts, the service has an option to generate them all the same. All you have to do is use a URL like this:

http://chart.apis.google.com/chart?cht=qr&chs=500x500&choe=UTF-8&chld=H&chl=http://www.webmaster-source.com

If you visit the above URL in your web browser, you should see a huge 500×500 pixel QR code that will take you to Webmaster-Source if you scan it. You could easily copy and save the image, print it, or embed it in a web page by using the URL in an <img> tag.

The key/value parameters in the URL are as follows.

  • cht=qr — This tells the API that we’re creating a QR code instead of a pie chart or whatever.
  • chs=500×500 — The size of the chart, in pixels. (I imagine “chs” stands for “CHart Size.”) 500×500 seems to be the maximum size.
  • choe=UTF-8 — The content encoding. You should probably leave this as-is.
  • chld=H — This seems to set the type of QR code. If you remove it, a different pattern will be used. I would recommend keeping the default unless you know what you’re doing.
  • chl=[…] — The data you want to create a QR code for, such as a web address. If it is a URL, just paste it verbatim after the equality sign.

The beauty of the API is it’s simplicity. If you know you’re building some sort of web app, you could easily use your language of choice to mash your data up into a URL request and spit out an image tag with a QR code. Google already does this with their Goo.gl URL shortener. If you look at one of their URL info pages, it displays a small QR code and a link to a larger one. (Actually, adding “.qr” to the end of any Goo.gl URL will display the QR code.) It’s a very easy way to get a quick QR.

  • JDE Source

    Excellent Thanks for the info. Helped identify a generic solutino for QR