Top of the Charts

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.

Charting Experiment I, closed surfaces

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.

Charting Experiment II, Lissajous curves

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.

Charting Experiment III, a Hypergraph sketcher

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.

The archive for this project can be found here.

Disclaimer: This code is posted "as is", with a Creative Commons license and neither Carlos Labs nor any of its representatives guarantee the suitability of this script, or assume any responsibility for your actions.
This script is free to use on any software project, free or otherwise, provided you credit Carlos Labs and you do not remove the header in the script.
Project: 200802B