GChart is a small piece of javascript (packed 2.4kb) that enables using the Google Chart API in a convenient way. GChart translates passed options to a url that can be used to request a chart from the Google Chart API. Also, it provides several ways to insert, apply or return the chart.

Getting started with GChart

The GChart object doesn’t require any javascript library and all functions are defined within the GChart ‘namespace’. It’s unlikely that GChart breaks other scripts when it’s included in a webpage. I assume you’re familiar with the arguments the Google Chart API accepts, otherwise, go read the developer’s guide for the API. So to get started, grab yourself a copy of GChart. Then place the following html between the header tags of the webpage: 

<script type="text/javascript" src="path/to/gchart-x.xyyyy.js"></script>

Now we can use functionality provide by GChart. To do a quick test and see if everything works, include this just before the closing body tag. 

<script type="text/javascript";>
GChart.render({
	renderTo: document.body,
	data: [[5,60,10,30],[50,34,28,15]],
	title: 'Solutoire.com GChart Example',
	colors: ['45330F','ACD100'],
	grid: '20,20'
});
</script>
Example chart
You should see this chart on the test page.

Now refresh your page and you should see the chart displayed above. If the chart is not rendered to the document.body, check the path to the gchart.js file. Also, you can request 50.000 charts a day from the Google Chart API. When you exceed the 50k request count (not very likely) Google refuses to return images, so keep that in mind.

GChart options

As you might have seen in the previous example, I used GChart.render() to show a chart. The only argument for this function is an object with some key:value pairs. This object is the options object and they override the default options of GChart. By passing options you can change the data and the looks of a chart. You can set the GChart options by calling GChart.setOptions({...}) or just passing the options Object to GChart.render().


Insert, apply or return charts

GChart enables you to do several things with the image retrieved from Google. Depending on which options are passed, GChart.render() inserts the chart into a DOMElement, applies the chart to an img tag in the DOM or just returns the chart. When the option renderTo is set, the image is appended to the element corresponding to that option. The renderTo option can be the ID of a DOMElement, or just the DOMElement itself: 

// renderTo can be a String...
...
renderTo: 'id-of-target-element',
...
// ... or a DOMElement:
var el = document.getElementById('id-of-target-element');
...
renderTo: el,
...

The same goes for the applyTo option. This value of this options should refer to an img tag. All it does is change the src attribute to the url generated by GChart.

When renderTo and applyTo are not set, GChart.render() returns the generated image Element. Now you can change attributes yourself, an append the element to the DOM when you’re ready. 

var chart = GChart.render({...});
chart.className = 'google-chart';
document.body.appendChild(chart);

Encodings and data

We use charts to clarify data, so it’s very important you know how to pass data to GChart. The Google Chart API accepts data in three encodings, which compress the data. GChart accepts data arrays, and convert those arrays into the encoding you choose. In the article ‘GChart: Encoding types and data’ I show some examples explaining the difference between the encodings, and how to pass data to GChart.

More about options

GChart supports all parameters the Google Chart API also supports and since it’s an extensive list, I created a different page where all parameters are explained using some examples. Go to ‘GChart: Options’ to find out how to configure your chart.

Download GChart

You can grab you copy of GChart over here. Go here if you just want to see the source.