TWiki> Computing Web>GoogleGadgetsVisualisation (22 Jun 2009, _47C_61UK_47O_61eScience_47OU_61Birmingham_47L_61ParticlePhysics_47CN_61chun_32lik_32tan? ) EditAttach
Data visualisation using Google Gadgets


The advertising blurb from Google...

Gadgets are simple HTML and JavaScript applications that can be embedded in webpages and other apps.

  • Simple to build Built-in JavaScript libraries make it easy to create gadgets that include tabs, Flash content, persistent storage, dynamic resizing, and more. Use the Google Gadgets Editor to build gadgets quickly and easily.

  • Multiple sites Your gadget can run on multiple sites and products including iGoogle, Google Maps, Orkut, or any webpage. Write your gadget once, and with minor changes it can run in multiple places.

  • Reach millions of users Many gadgets are viewed millions of times per week and generate significant traffic for their authors. When users add your gadget to their iGoogle homepage for instance, they'll see your content each time they visit Google.

Background programming requirements

The Google Gadgets API consists of a few simple building blocks: XML, HTML, and JavaScript. To get started, all you need is a basic understanding of HTML. We will teach you all you need to know about XML to write gadgets. Later, as you write more sophisticated gadgets (e.g. visualisation gadgets), you will probably want to learn some JavaScript if you're not familiar with it already.


XML is a general purpose markup language. It describes structured data in a way that both humans and computers can read and write. XML is the language you use to write gadget specifications. A gadget is simply an XML file, placed somewhere on the internet where Google can find it. The XML file that specifies a gadget contains instructions on how to process and render the gadget. The XML file can contain all of the data and code for the gadget, or it can have references (URLs) for where to find the rest of the elements.


You should be farmiliar with HTML as it is the markup language used to format pages on the internet. The static content of a gadget is typically written in HTML. HTML looks similar to XML, but it's used to format web documents rather than to describe structured data.


For the purpose of this project, Python is required to write the CGI script that will accept a query, filter the data and package it in a suitable format for the Google Gadget and Visualisation API. Google provides a Data Source Python library to facilitate the creation of a suitable data structure and generating the appropriate query response.


JavaScript is a scripting language you can use to add dynamic behavior to your gadgets. There are MANY JavaScript tutorials and online references available. A good source can be found at You should be at least familiar with all information provided in this Basic section. Also check out these examples and their explanations.

Essential reading and tutorials

Google Gadgets

From the Google Gadgets homepage, in the How do I start? section, read (1), (2, refer to the legacy developers guide) and eventually check your code using (3). In the [More Information] section, read Concepts and Examples. Under Resources, check out both the Google Gadgets Editor and the Gadget Checker.

Google Visualisation API

From the Google Visualisations API homepage, in the How do I start? section, read (1) and (2). Read (4) as well if you decide to create your own visualisations. The rest of the material in this section is a little more advanced but interesting nevertheless!

Data Source Python Library

The DataTable object is used to hold the data passed into a visualization. A DataTable is a basic two-dimensional table. You can code this object by hand or you can use a helper Python library.

Summer student project specifics

This section is not complete and will be added to as required.

Available data sources

Grid Observatory

  • The Grid Observatory publishes the required data on a weekly basis i.e. data is always a week old. Data arranged in directories and the constituent files contain information on each Workload Management Service (WMS) per day.
  • Interactive data retrieval via the browser only. Other means of automated data retrieval not supported.
  • Online account registration, no special requirements.

Database hosted at Imperial College

  • Source database for Grid Observatory. Data is organised similarly.
  • GridFTP access (requires grid certificate). Automated data retrieval possible.
  • Daily updates

Data Acquisition

For the purpose of this project, it is assumed that all required raw data (i.e. data from Imperial College) will be locally present. The data acquisition mechanism should be implemented as a Python script that will have the ability to:

  1. accept a query (from a Google gadget) - refer to the Python CGI package. This script will be placed in the cgi-bin/ directory of our group web server.
  2. create and populate the data structure based on the required information (as described by the Google Visualisation APIs Data Source Python library), and
  3. return a suitable response to the calling gadget (functionality provided by the Data Source Python Library).

Additional documentation

A weekly blog is to be maintained for the sole purpose of documenting technical progress and issues and may include code snippets, design/implementation ideas, mock-ups, etc. This blog can/should form the basis of the project report.

The student should be aware that this project blog may be added to the GridPP blogs area.

Blogger is recommended.

Other references

  • The iGoogle Developer Forum is the official discussion group for development of Google Gadgets on iGoogle. You can exchange ideas and information with other gadget developers, create your own gadgets using the API, and share your experiences.

-- ChunLikTan - 22 Jun 2009

Edit | Attach | Watch | Print version | History: r3 < r2 < r1 | Backlinks | Raw View | WYSIWYG | More topic actions
Topic revision: r3 - 22 Jun 2009 - _47C_61UK_47O_61eScience_47OU_61Birmingham_47L_61ParticlePhysics_47CN_61chun_32lik_32tan?
This site is powered by the TWiki collaboration platform Powered by Perl This site is powered by the TWiki collaboration platformCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback