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