You can easily render 2D bar codes, known as QR Codes, with the Google Chart API, along with pie charts and bar graphs. If you haven't seen a QR Code before, you are looking at one on the right hand side (To see more, do an image search for "QR Code".)QR Codes are a popular type of two-dimensional barcode. You can encode URLs, contact information, etc. into a black-and-white image like the one on the right. A QR-Code-enabled device can later scan the image and read back the original text. Learn more about QR Codes from Google Print Ads. If you don't have a reader Google also offers a QR Code decoder library: Zebra Crossing (ZXing).
This is how you can creating these with the Google Chart API:
Simply, there is a new chart type,
qr, with attributes to tell the service what to produce:cht=qr<text> is text for the QR code. This must be url-encoded in UTF8. Note the space between
chl=<text>
choe=<output>
hello and world is written as %20 in the following example.<output> optionally specifies how the text is encoded into bytes in the QR Code. If this is not specified the default of
UTF-8 is used. Available options are: Shift_JIS, UTF-8, or ISO-8859-1.For the details, please read the full documentation.
I can't seem to get the QR code to work. No matter what info I put in the URL the QR code says:
ReplyDelete"Bad Request
Your client has issued a malformed or illegal request."
All other charts work correctly. Any thoughts?
-- Sean
You certainly miss to specify the chart size in the URL(I did the same during two minutes...).
ReplyDeleteTo use chart API, you must provide AT LEAST the following parameters:
Chart size (chs)
Chart type (cht)
Chart data (...)
Here is a working example :
http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=YouRules&choe=ISO-8859-1
Ah, the example had no chart size, thus, a malformed request. Thanks!
ReplyDelete-- Sean
This mashup http://qrmap.linkstore.ru lets you create QR-code for the selects Google map area.
ReplyDeleteIf you want to decode 2D Codes (and also 1D Barcodes) with a simple API you should check out the Snappr.net API. Still in beta but works pretty nicely.
ReplyDeleteHere's a bookmarklet to generate a QR code for the page you're currently viewing:
ReplyDeletejavascript:u=window.location.href;sz=20*Math.ceil(Math.sqrt(u.length));szp=sz+'x'+sz;window.open('http://chart.apis.google.com/chart?cht=qr&chs='+szp+'&chl='+escape(u));
Actually, my previous post was missing the final 'void 0':
ReplyDeletejavascript:u=window.location.href;sz=20*Math.ceil(Math.sqrt(u.length));szp=sz+'x'+sz;window.open('http://chart.apis.google.com/chart?cht=qr&chs='+szp+'&chl='+escape(u));void%200
here is a site that let's you generate QR Code with Google Maps and more..
ReplyDeletecheck it out: http://www.mskynet.com/static/maestro
Looks like Google has canned this product?
ReplyDeleteThis url used to work now it doesn't - what gives google?
http://chartserver.apis.google.com/chart?cht=qr&chs=300x300&chl=http://www.cognation.net
@Dean, you may have an issue in how you escaped the URL. This seems to work:
ReplyDeletehttp://chart.apis.google.com/chart?cht=qr&chs=300x300&chl=http%3A//www.cognation.net/
how to make the background of qrcode transparent? I am not talking about the margin space around qrcode. I succeeded changing background of the margin space. But I want to make the background of the actual code transparent, too.
ReplyDeleteI found that the chart api works fine with a relatively simple url but when you try to feed it something like:
ReplyDelete...com/showcaseproductdetail.htm?ID=157729&Used=1&
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 read properly, I was wondering if you had a relatively simple solution to use the google url shortener within the script (preferrably not the .qr option in the shortener as it defaults to a size too small for print).
<5cript type="text/javascript">
document.write( '<1mg src=\"http://chart.apis.google.com/chart?chs=220x220&cht=qr&chl=' + location.href + '\">' );
[some characters changed to allow me to post]