QR Codes are a popular type of 2-dimensional bar code and are also known as physical world links. In this article, we will see how to generate a simple QR Code using Google Chart API.
QR Codes store up to 4,296 alphanumeric characters of arbitrary text.
Google QR Codes
Table of Contents
Introduction
The QR can be of anything for example Link, Text, Email, Location, Phone, SMS, WhatsApp, Skype, Zoom, WiFi, V-Card, Event, PayPal, BitCoin, etc.
One of the best sites that offer FREE services for creating high-quality and creative QR codes is QR Code Panda. It offers tons of features to design custom QR codes with logos and multiple options.
This article mainly consists of 3 parts, so this is a bonus article:
Let’s dive into the QR Code using Google Chart API tutorial in depth.
1. Google Chart API
The generation of QR Code using Google Chart API supports both GET and POST methods, however, the POST request is required when the string size is more than 2000 bytes (including the API URL), otherwise, we usually use the GET request.
The URL for Google Chart API is: https://chart.googleapis.com/chart?
The Google Chart API URL supports the following query parameters:
cht
=qr
(required param, defines to have a type as QR code)chs
=width x Height
(it is also a required param and defines the image size to generate)chl
=data
(required param, have data in the form of a string)choe
=<outputEncode>
(optional parameter and have a default value UTF-8)chld
=<errorCorrection>
(optional parameter and may have values L, M, Q, H). The default is L which allows recovery for up to 7% data loss
How to generate a QR Code using Google Chart API
To take an example of the text “w3programmings.com”, we will generate a QR Code using Google Chart API using the following script:
<?php // take a string in a variable $string = "w3programmings.com"; // add the string in the Google Chart API URL $google_chart_api_url = "https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=".$string."&choe=UTF-8"; // let's display the generated QR code echo "<img src='".$google_chart_api_url."' alt='".$string."'>"; ?>
The output of the above code is:

How to improve load time when we have multiple QR codes on the same page
In case, if you have a couple of QR codes to display on a page it is fine to use the standard URL https://chart.googleapis.com/chart?. However, when you have multiple QR codes to generate on a single page then Google recommends using a number from 0-9 as a prefix of API URL for example:
- https://0.chart.googleapis.com/chart?
- https://1.chart.googleapis.com/chart?
- https://2.chart.googleapis.com/chart?
- …
- https://9.chart.googleapis.com/chart?
2. How to download a generated QR code
Now write some PHP scripts.
Create a file download-qr-code.php
and add the following code:
<?php // take URL from GET method $url = $_GET['url']; // define file transfer header('Content-Description: File Transfer'); // define content type as PNG image header("Content-type: image/png"); // define unique file name and tell that it is an attachment header("Content-disposition: attachment; filename= qrcode_".time().".png"); // read and file readfile($url); ?>
Now create a functions.php
file and add the following piece of code:
<?php // create a function to encode the URL function encodeURIComponent($str){ $revert = array('%21'=>'!', '%2A'=>'*', '%27'=>"'", '%28'=>'(', '%29'=>')'); return strtr(rawurlencode($str), $revert); } ?>
Create index.php
and call the function that we have created and force the QR code to download:
<?php // include the functions file include "functions.php"; // define QR code $qr_code = "https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=w3programmings.com&choe=UTF-8"; // create download button echo '<a href="download-qr-code.php?url='.encodeURIComponent($qr_code).'" class="btn btn-md btn-success" download>Download</a>'; ?>
3. How to open a generated QR code for print
Let’s create an index.html
file and add the following code:
<!-- create anchor link with reference for Google Chart API --> <a onclick="PrintImage('https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=w3programmings.com&choe=UTF-8')" class="btn btn-xs btn-info" print><i class="fa fa-print"> Print</a>
Now write some JavaScript code in the index.html
file:
<script type="text/javascript"> // print an image function ImagetoPrint(source){ return "<html><head><script>function step1(){\n" + "setTimeout('step2()', 10);}\n" + "function step2(){window.print();window.close()}\n" + "</scri"+"pt></head><body onload='step1()'>\n" + "<img src='" + source + "'/></body></html>"; } function PrintImage(source){ Pagelink = "about:blank"; var pwa = window.open(Pagelink, "_new"); pwa.document.open(); pwa.document.write(ImagetoPrint(source)); pwa.document.close(); } </script>
When the print button is clicked it will open the generated QR code on a new page and will also prompt for print.
Testing and Tweaking: Making Sure It Works
Before using this in your actual PHP projects, it’s important to test your QR Code using Google Chart API function thoroughly. Make sure it works accurately and adjust the logic if needed for different situations.
Conclusion
You have successfully created a script for a QR Code using Google Chart API. Integrate it into your applications to enhance the features and functionality.