QR Code with Google Chart API

In this tutorial, I’m going to demonstrate how to add a dynamic QR code image to your web pages with a simple API (Application Programming Interface) from Google Chart, just like the one we have on the NerdyFace.com sidebar. This allows your website viewers to access your pages through their mobile devices and tablet PCs.

What is a QR code?

QR code is short for Quick Response codes, which is a 2 dimensional barcode that can be scanned by your mobile phone using tiny applications available on most mobile operating systems.

A QR code can hold alphanumeric data of up to 4,296 characters that contain text, URLs, Maps and any type of info that you want to apply.

How does it work?

By simply scanning a QR code using your mobile phone, tablet PC or other smart devices (with a camera), you will be directed to the relevant URL or map or shown some plain text.

This code can be put on your business card, website, magazine ad or even a billboard! We’ve seen how many companies are approaching mobile users through such codes in their offline ads.

There are many applications that you can download on your phone to scan QR codes (if it didn’t already come with one) like Google goggles for Android and iPhone.

You can also find various tools online that would allow you to create your own QR codes and save images of them. A very famous and promising tool is the Google URL shortener Goo.gl that gives you a QR code for every URL that you shorten on it. Google promised that they’ll be releasing an API for Goo.gl soon. Another quick trick that Goo.gl allows you to do is to add “.qr” at the end of a shortened URL to link up to the QR Code for it.

But all those tools are for static URLs and QR codes, let’s take a look at how you can create dynamic QR codes using a very simple API by Google.

What is Google Chart?

Google Chart is an API provided by Google Code, that allows to dynamically create charts using a URL structure to embed online or offline. It offers lots of chart types from bar charts to pie charts to many more complicated ones, and of course, a QR “chart”.

Here’s a very simple example of how you can use Google Char, this code will lead to an image that has a pie chart with a few variables that we set:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250×100&chl=Hello|World

And here’s how it translates:

Try toying about with the parameters in the above link; you should be able to change labels and numbers on this chart. You can also try using the Chart Wizard to create your custom charts, but that’s not really the focus of this article now is it?

Give me my QR code!

Here’s a simple link to a QR code generated with Google Chart:

http://chart.apis.google.com/chart?chs=220×220&cht=qr&chl=http://www.nerdyface.com

And here’s the result image:

And again here’s what it translates into:

Notice that the link uses only 3 variables this time:

chs: chart size or dimensions in pixels
cht: chart type, in this case must be set to qr
chl: chart label, in this case contains text in proper UTF-8 URL coding

Making a dynamic QR code image:

You must have noticed that till now, we’re still using static URLs to display our QR codes. As seen in the above examples, the only part that you practically need to change in those links is the chl (Chart Label) variable.

There are many ways to do this, depending on the language that your website uses. I decided to go with JavaScript, an easy and a quick solution to get this done in one code that i can simply paste as a widget on the sidebar, that changes automatically depending on the URL, using the location.href parameter in JavaScript.

Here’s the code:

<script type="text/javascript">

    document.write( '<img src=\"http://chart.apis.google.com/chart?chs=220x220&cht=qr&chl=' + location.href + '\">' );

</script>

As you can see, the code is simply an <img> tag, that uses JavaScript to set the chl parameter to the location.href property, resulting in this HTML code:

<img src=http://chart.apis.google.com/chart?chs=220x220&cht=qr&chl=CURRENT_PAGE_URL_WILL_APPEAR_HERE>

Bottom line:

You might think QR codes aren’t really that important, but think again. Many major companies have realised the importance of mobile internet access, and more people are using their smart phones and tablets to access the internet, you and your website should be ready for these changes.

It’s just a simple code to add, but i believe we’ll be seeing it more often online and offline.