As soon as I read about the Google Chart API I started writing a javascript wrapper for it (I called it GChart). It’s not finished yet, but it has most functionality. The simple, text and extended encoding types are supported, as wel as datasets, size, legends, titles and different types of charts. GChart 0.1 alpha is now available for download.

GChart

To use GChart, just include gchart.js in the header of your page, and when the window’s finished loading, do something like this:

Chart.render({
	renderTo: 'div-target', 	// Target element to append the image to.
	data: [[1,10,3],[14,20,213]], 	// Two datasets.
	encoding: 't',			// Use the text encoding.
	title: 'Foo',			// Set the title of the chart.
	type: 'lc'			// Specify the type.
	axistype: 'x,y'			// Specify the axis type.
	size: '300x200'			// Specify the size of the chart.
});

Chart generated with the code above.

The type, axistype and size have default values, but I added them for illustration. This javascript appends a basic chart to ‘div-target’. The options you can pass to GChart.render() are:

/**
 * @type {String/Element} The id of the node or a DOM node that will be the container to render the chart into.
 */
renderTo: false,
/**
 * @type {String/Element} The id of the node or a DOM node corresponding to an IMG that is already present.
 */
applyTo: false,
/**
 * @type {String} Specifies the size of the chart like x (defaults to 300×200).
 */
size: ‘300×200′,
/**
 * @type {String} Specifies the type of the chart (defaults to ‘lc’).
 */
type: ‘lc’,
/**
 * @type {String} Specifies the chart encoding, can be ’simple’ or ’s’, ‘text’ or ‘t’ and ‘extended’ or ‘e’ (defaults to ’s’).
 */
encoding: ’s’,
/**
 * @type {String/Array} Dataset(s) for the chart, can be a multidimensional array or a encoded string (defaults to []).
 */
data: [],
/**
 * @type {Integer} Specifies the max value of a dataset, read  maxValue (defaults to false).
 */
max: false,
/**
 * @type {String} Image alt attribute (defaults to ”).
 */
alt: ”,
/**
 * @type {String} Chart title (defaults to null).
 */
title: null,
/**
 * @type {String/Array} Legend, can be an array or a formatted string (defaults to null).
 */
legend: null,
/**
 * @todo implement!
 * @type {String/Array} Labels for the dataset(s), can be an array or a formatted string (defaults to []).
 */
labels: [],
/**
 * @type {String} Axis type.
 */
axistype: ‘x,y’

As you can see I implemented just a few of the API supported arguments, but I expect to have implemented all arguments this weekend.

To get started, you should first get familiar with the Chart API. It’s necessary you understand the encoding types. GChart accepts all of them, but also it accepts an array of datasets and encodes it for the encoding type you specify.