Data visualisation using
Google Gadgets
Introduction
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
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.
HTML
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.
Python
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
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
w3schools.com. 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:
- 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.
- create and populate the data structure based on the required information (as described by the Google Visualisation APIs Data Source Python library), and
- 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