How to Generate QR code using Google Chart API

All about QR Codes

Have you ever wondered the possibility of storing the huge amount of data say a movie in a single A4 sheet paper? In this digital world, everything is possible or will be made possible SOON.

QR code is nothing but the next generation of Bar Codes (or Two dimensional Bar codes). QR stands for Quick Response Code, they are depicted in a square box showcasing black and white pixels in it. We can store data inside this 2 dimensional square box and read them using QR readers similar to Bar code scanners. You can easily store your name or address or VCF Card or website url, etc., easily in this square box, but remember that there is a limitation to the amount of the data that it can hold.

QR code size is represented in rows and columns (QR codes will contain equal number of rows and columns). 40 different versions of QR codes are available starting from 21 rows x 21 columns as Version 1, 25 x 25 pixels as Version 2, 29 x 29 pixels to 177 x 177 pixels as Version 40.

Version1 can encode upto 25 alphanumeric characters and encoding length increases to the succeeding versions. Version 40 can encode upto 4,296 alphanumeric characters.

Smartphone App for QR Reader

We need to have QR Scanner to interpret the QR pixel image. Checkout in Apple iTunes or Google Playstore to download suitable QR Code Scanner Apps.

QR Code Scanner App for Apple iOS:

  • QR Code Reader by Scan,Inc – This is widely used QR Code scanner for Apple iOS platform and often comes as a built-in scanner for iPhone, iPad and iPod devices.
  • QR Reader for iPhone by TapMedia Ltd – Free scanner that can be used to scan words, QR Codes, Bar codes and it also provides the option to save it as PDF files.

QR Code Scanner for Andriod:

  • QR Code Reader By Scan, Inc – This is the best QR Code Scanner available for Andriod and often comes as a default scanner built-in with Andriod smartphones.
  • Google Goggles By Google Inc– This is a multipurpose app that can be used to scan popular images, product image,known landmarks, QR Codes, Bar Codes, etc., and if a match is found in its database, it provides relevant information of the scanned item.

Make QR code using Google Chart API

How to Generate QR code
Generate QR code – Google API

Best rated QR Code readers can read up to Version 40 QR codes. But most of the mobile QR codes are able to read only up to Version 4 QR codes. So, if we are generating for Small or Medium business entities, we need to try providing smaller character set. This is because QR code version is decided by Google API based on the size of the input data.

We can generate simple QR codes easily by sending input parameters to this Google Chart API url https://chart.googleapis.com/chart.

We will see the three mandatory Parameters that needs to be send as an input.

  • Cht – It is used to determine the type of Google Chart API. We need to set this as ‘qr’ to generate QR codes.
  • Chs – Output QR Image Size in Pixels <width>x<height> ( i.e., 150×150)
  • Chl – This should be the data to be encoded.

Sample Data:

https://chart.googleapis.com/chart?cht=qr&choe=UTF-8&chs=150×150&chl=http%3A%2F%2Fofficetricks.com

Note: For more details on the parameters and its usage, check out the Google API Developers Guide for QR Codes.

How to Make a QR Code

Lets test the Google Chart API for generating QR Codes using few lines of HTML and Javascript code.

<html>
<script>
function generateQRCode(){
this.qrImage.style.display ='none';
this.qrImage.src="https://chart.googleapis.com/chart?cht=qr&choe=UTF-8&chs=150x150&chl="
+encodeURIComponent(QRCode.value.trim());
this.qrImage.style.display ='inline';
}
</script>
<body>
<form method="post" id="qrForm">
<center>
<h1> Tips and Tricks from Officetricks.com<h1>
<h2>Generate QR Code using Google Chart API<h2>
<br><br>
Type Website URL: <input type="QRCode" id="QRCode" value="http://officetricks.com" size="20">
<br><br>
<input type="button" value="Make QR Code" onclick="javascript:generateQRCode();"><br>
<h3>Output QR Image:</h3>
<img id='qrImage' style='display:inline;' 
src='https://chart.googleapis.com/chart?cht=qr&choe=UTF-8&chs=200x200&chl=http%3A%2F%2Fofficetricks.com'/>
<p>
For more Tips and Queries, logon to <a href="http://officetricks.com" target="blank">
http://officetricks.com<a> or email to <a href="mailto:officetricks123@gmail.com">officetricks123@gmail.com</a>.
</p>
</center>
</form>
</body>
</html>

Just save the code as QRTest.html and open it in the browser. Type any website url say “http://buddingday.com” and click on Make QR Code button. You could see the QR Image generated using Google API displayed in the same page.

Now, you can easily scan the image using QR Scanner app installed in your smartphone and website url will be displayed. It will also prompt you to open the given website url.

Note: For explanation purpose, website url is considered as an input here. But, it can take any type of input, like numeric digits or alphanumeric characters(0-9,a-z,A-Z,special characters) and correspondingly QR Code can be generated for it.

Leave a Reply