Data visualisation using Google Gadgets


The advertising blurb from Google...


  • 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.


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!

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 - 27 May 2009

Topic revision: r1 - 27 May 2009 - _47C_61UK_47O_61eScience_47OU_61Birmingham_47L_61ParticlePhysics_47CN_61chun_32lik_32tan?
Ideas, requests, problems regarding TWiki? Send feedback