Creating QR Codes and Charts with Google

| No Comments | No TrackBacks
Although the web has come a long way in displaying and rendering data and content, there's one area that has been missing, and this is the ability to display charts and graphs easily. Developers can easily display tabular data, well-formed content with styling, and map locations, but little has been done in the area of charts and graphs.

Google have developed a solution to fill this need, which is explained in the Google Chart API: http://code.google.com/apis/chart/docs/making_charts.html

With this tool, developers can create different types of charts and style them. This can be done through passing parameters in the URL. The following parameters can be passed in the query string, separated by the ampersand symbol, to create the chart:

  • cht: Chart type. (For example, lc for a line chart or p3 for a three-dimensional pie chart)
  • chd: Chart data. 
  • chs: Chart size. (For example, 200x350)
  • chl: Chart labels.
Here is an example Google chart in theory: https://chart.googleapis.com/chart?cht=p&chd=t:10,30,5,18,20,2&&chdl=April|May|June|July|August|September&chs=300x300&chco=FFFF10,F22432,012333,CC0012,234FCD,644CCC

As you can see, we have specified a pie chart with five data. The 'chdl' tag represents the style of label for the chart. The additional tag 'chco' specifies the colour for each chart item.

In addition to the graphical charts, developers can also create a QR (Quick Response) code for their website or marketing materials. (I've written a few articles on QR codes in the past in this blog.) An example QR code for my website can be found here:
https://chart.googleapis.com/chart?cht=qr&chd=http://www.almostafternoon.com&chs=300x300&

Each type of chart comes with its variations and styling parameters; visit the Google Chart API for more detail about the different types of charts so that you can start developing your own.

No TrackBacks

TrackBack URL: http://almostafternoon.com/cgi-bin/mt5/mt-tb.cgi/255

Leave a comment

Archives

OpenID accepted here Learn more about OpenID