How to Generate a URL containing QR code using Google Charts API CodeUnit 18 MAY 2011

QR codes are slowly, slowly gaining more traction, despite the fact that they are pretty much only useful little beasts when it comes to directing smartphone users to some or other web content URL. Generating them is pretty easy, hell, Google Chart has an API for them (which is exactly what we are going to leverage in a minute), and to decode them you simply need a phone with a camera and a decoder app installed. So let’s do this.

If you are already familiar with using the classic Google Chart API to generate graphs, then you will know that creating a graph image is pretty much hitting a Google-supplied URL and providing certain required paramters as specified by the Chart API. Because QR codes essentially work the same way as graphs do, i.e. they are produced based on the passed information, it was a fairly simple task to incorporate them into the API. One or two minor parameters added and removed (as laid out by and you’re good to go.

To actually see this in action, let’s generate a QR code which is nothing more than an encoded URL (if hit by a smartphone, the phone should attempt to redirect to the encoded URL):

<img src=”×350&” />

As you can see above, only three parameters are required to generate our desired QR code. cht is to tell Google that it is a QR code, chs defines the size and chl contains the data to be encoded, in this case a URL. Note that the data needs to be URL encoded before being passed to the API.

And the result?


Related Posts:

About Craig Lotter

South African software architect and developer at Touchwork. Husband to a cupcake baker and father to two little girls. I don't have time for myself any more.

  • Fzrd400

    I found that the chart api works fine with a relatively
    simple url but when you try to feed it something like:


    it will not encode the whole address resulting in the wrong
    qr code. Rather than attempt to convert the longer url’s to UTF-8, which
    presents a risk of not being re-encoded properly, I was wondering if anyone had a
    relatively simple solution to use the google url shortener within the script below (preferrably not the .qr option in the shortener as it defaults to a size too
    small for print).


    document.write( ” );

  • Pingback: qr code generator()