Charts for the Web has always been a hassle: get the data, validate it, use graphical libraries, work out the axis, render data on screen. Etc.

Now there's an elegant alternative in the Google Chart API.

The **Google Chart API** allows any developer to produce a chart by submitting a URL. The result is a nifty image of your data that can be embedded in any webpage. Cool.

Somehow, the server *automagically* knows how to parse the data values on the URL and does a pretty good job at returning a well formed IMG object.

Click here to jump to an example of a Lissajous Curve generator.

Click here to jump to an example of a Spyrograph-like application.

We could think of countless uses for this API in business intelligence and dashboarding scenarios.

As usual in Google-land, documentation tends to be written as *we don't want to keep you from hacking by reading too much stuff.*

So we started looking at unusual properties that could be used for educational amusement.

The XY line chart is a good candidate â€“unusually for an automated chart, it allows full addressing in both axis. Closed surfaces, like circles and polygons, can be drawn by using the appropriate data.

This is a gadget that does basic closed surfaces: the *Radius* and *Steps* fields can modify the shape of the curves from the list (except the *Random Doodle*, which is not modifiable)

The setting of *Circle* also lets you visualise regular polygons, when the value of *Steps* is between 3 and 20 or so.

A ZIP of this project can be found here.

The next experiment involves a rendering of the **Lissajous Curves**, an interesting set of harmonic curves with a strange, mathematical sort of beauty. Some corporate logotypes -like the one for the Australian Broadcasting Company- are Lissajous curves.

Follow these links to read more:

http://en.wikipedia.org/wiki/Lissajous_curve

http://xahlee.org/SpecialPlaneCurves_dir/Lissajous_dir/lissajous.html

These were our sources of formulae for the example.

In a Lissajous system, the curve will be fairly symmetrical if *Alpha* and *Beta* can be divided as a rational number -otherwise, the result will be a never-ending mesh. In this latter case, the mesh will be open-ended.

Try several combinations of values for *Alpha* and *Beta* and play a little with the *Delta* selection -which changes the angle of the harmonics.

A determined hacker can even use this toy as a basis for a RSS-driven reader that returns the output in some weird and oscilloscopic way.

A ZIP of this project can be found here.

For the last example of *educational undocumented fun*, we were inspired by a classical graphing toy, that besides its registered trademark of "Spyrograph", is also known as a **Hypergraph**.

Mathematically speaking, the graph is produced by a smaller circle (the planet) rotating around a larger circle (the sun). If the planet rotates on the outside edge of the sun, the curve is a *epicycloid*; if the planet revolves along the inside edge of the sun then it is a *hypocycloid*.

The *Offset* is the position of the plotter, relative to the diameter of the planet.

All the values for the fields are expressed in pixels and as in the Lissajous example above, if the Sun and the Planet are divisible, the result will be an even, symmetrical graph. Otherwise, the output will be an intricate mesh-like curve, much like the ones you obtain with a Hypergraph toy.

Try experimenting with different combinations of values and in particular, with cases where the *Offset* is larger than the *Planet*, as the designs tend to be more appealing.

Follow these links to read more:

http://en.wikipedia.org/wiki/Hypocycloid

http://en.wikipedia.org/wiki/Epicycloid

The archive for this project can be found here.

Project: 200802B