Tag Archives: google chart

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 http://code.google.com/apis/chart/docs/gallery/qr_codes.html) 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=”http://chart.apis.google.com/chart?cht=qr&chs=350×350&chl=http%3A%2F%2Fwww.codeunit.co.za” />

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?

Nifty.

Online QR Code Decoder CodeUnit 22 APR 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, even Google Chart has an api for them, and to decode them you simply need a phone with a camera and a decoder app installed. But what if you don’t have a phone for testing and simply want to check that your generated QR code is correct?

Well for that you need a desktop decoder, or in our case an online decoder. Enter the poorly named ZXing project (Apparently this stands for Zebra Crossing), which is dedicated to producing a multi-format 1D/2D barcode image processing library, implemented in Java.

Anyway, they have released a very handy online decoder that allows you to either submit an URL or upload an image containing a valid QR code, which it will then decode and return its encoded contents for.

Very, very nifty.

The decoder can be found at: http://zxing.org/w/decode.jspx

Online QR Code Encoder (Generator) CodeUnit 20 APR 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, even Google Chart has an api for them, and to decode them you simply need a phone with a camera and a decoder app installed. But if you aren’t particularly computer illiterate, what is the best way to generate a QR code of your own?

Well for that you need an online encoder (or generator if you like). Enter the poorly named ZXing project (Apparently this stands for Zebra Crossing), which is dedicated to producing a multi-format 1D/2D barcode image processing library, implemented in Java.

Using the previously mentioned Google Chart API, they have released a very handy online QR code generator that allows you to enter the various bits of information you wish to encode and then spits out the generated QR code image which you can download and do whatever you want with.

Very, very nifty.

The encoder can be found at: http://zxing.appspot.com/generator/

PHP and Google Charts: Using a POST request when a GET String is too Long CodeUnit 16 JUN 2010

Google Charts is an extremely stable and reliable web-based charting engine that is perfect for dropping into any project where you quickly want to produce some high quality graphs for your end user.

The default way to generate a Google Chart is to simple create a normal image tag and set its source to the Google API script with all the chart options passed along as a GET request string.

Of course, as we all know, there is a limit to the length of a GET string and so the question is raised once you start generating bigger graphs, how do you get around this particular limitation?

Well the answer of course lies in using a POST request instead, and thanks to PHP’s explicit support for POST requestes, this becomes as easy as pie! :)

Swiping the demo code straight from Google’s documentation because I’m too lazy to paste my own development example, you can see that the PHP script which handles the generation is nothing more than a file that pushes through the appropriate image content header (in this case a png) and then makes use of the classic fopen functionality (ensure that remote URL access is enabled on your server) to pull down the generated image from Google’s Chart API, specifically setting a POST stream context to handle the chart parameters stored in the previously created data array.

The final leg of work is then of course to simply reference your PHP script as the src of an image tag on the page you want the actual graph to appear.

PHP Chart Script:

  // Create some random text-encoded data for a line chart.
  header('content-type: image/png');
  $url = 'http://chart.apis.google.com/chart';
  $chd = 't:';
  for ($i = 0; $i < 150; ++$i) {
    $data = rand(0, 100000);
    $chd .= $data . ',';
  }
  $chd = substr($chd, 0, -1);

  // Add data, chart type, chart size, and scale to params.
  $chart = array(
    'cht' => 'lc',
    'chs' => '600x200',
    'chds' => '0,100000',
    'chd' => $chd);

  // Send the request, and print out the returned bytes.
  $context = stream_context_create(
    array('http' => array(
      'method' => 'POST',
      'content' => http_build_query($chart))));
  fpassthru(fopen($url, 'r', false, $context));

HTML Page to Display Chart:


Simple, but remarkably effective and thus clever! :P

Related Link: http://code.google.com/apis/chart/docs/post_requests.html