Easy QR Code Generation With Google Charts API

26th April 2012

When I found about the ability to create QR codes using the Google Charts API I decided to sit down and create a little tool that would generate QR codes for me. I've had this tool for a while and I recently noticed that the QR code mechanism has become depricated. The API will still work for a couple of years so I thought it was worth posting this. Creating a static QR code using Google Charts is quite easy, all you need to do is create an image. For instance, to create a QR code for the #! code address I would do the following.

  1.  

Which creates the following image.

So to add a little bit of automation to this I created a HTML page with a textarea and an image. This forms the basis of the tool that will create QR codes.

  1. <textarea id="inputtext" cols="100"></textarea><img id="qrcode" src="" />

To keep things easy I decided to use jQuery to interact with the elements on the page, so I created an include for that using another Google service for including JavaScript frameworks called Google Ajax. I then wrote a little function that would update the source of the image every time text was entered into the textarea.

  1. $(document).ready(function(){
  2. $('textarea#inputtext').keydown(function(e) {
  3. $('img#qrcode').attr('src', 'https://chart.googleapis.com/chart?chs=177x177&cht=qr&chl=' + $('textarea#inputtext').val() + '&choe=UTF-8');
  4. });
  5. });

This code works, but if you are tying in anything into the textarea a lot of requests are made to Google and the image is updated lots of times. To stop this I introduced a small timeout so that the image update function would only be run every second, rather than immediately.

  1. <script type="text/javascript">
  2. <!--//--><![CDATA[// ><!--
  3.  
  4. $(document).ready(function(){
  5. var timeout;
  6. $('textarea#inputtext').keydown(function(e) {
  7. if (timeout) {
  8. window.clearTimeout(timeout);
  9. }
  10. timeout = window.setTimeout(function() {
  11. $('img#qrcode').attr('src', 'https://chart.googleapis.com/chart?chs=177x177&cht=qr&chl=' + $('textarea#inputtext').val() + '&choe=UTF-8');
  12. }, 1000);
  13. });
  14. });
  15.  
  16. //--><!]]>
  17. </script>

After this, I extended the tool to allow for the size of the QR code to be changed. This involved adding a simple select element to the form so that I now had the following.

  1. 2957177500

I then incorporated this select element into the jQuery so that the size is incorporated into the QR code call. I also added a clause that runs the keydown() event on the textarea so that the QR code gets updated when a new size is selected.

  1. <script type="text/javascript">
  2. <!--//--><![CDATA[// ><!--
  3.  
  4. $(document).ready(function(){
  5. var timeout;
  6. $('textarea#inputtext').keydown(function(e) {
  7. if (timeout) {
  8. window.clearTimeout(timeout);
  9. }
  10. timeout = window.setTimeout(function() {
  11. var qrsize = $('select#qrsize').val();
  12. $('img#qrcode').attr('src', 'https://chart.googleapis.com/chart?chs=' + qrsize + 'x' + qrsize + '&cht=qr&chl=' + $('textarea#inputtext').val() + '&choe=UTF-8');
  13. }, 1000);
  14. });
  15. $('select#qrsize').change(function(e) {
  16. $('textarea#inputtext').keydown();
  17. });
  18. });
  19.  
  20. //--><!]]>
  21. </script>

If you want to view the tool in action have a look at the QR Code Generator Tool.

Comments

Permalink
Is there an easy EAN13 generation with Google Charts API? Sounds like an article that worths writing :)

esteban briceño (Thu, 10/12/2017 - 15:53)

Add new comment

The content of this field is kept private and will not be shown publicly.