The Google team announced the release of the Chart API for dynamically generating charts for embedding in Web pages. According to Steve Crossan:
The API is relatively straightforward to use. For example , this http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=InfoQ|Rocks creates a two segment, 3D pie-chart in png format. Trivial to then embed in an img tag. More complex pie charts are logical extensions of this approach. The current release supports quite a nice range of different chart types, including line charts, bar charts, Venn diagrams, scatter plots; plus other effects are supported. Not bad for an initial release that was done on the teams "off" time!
As the documentation illustrates, it is very simple to embed images within html as well as JavaScript:
We actually built this originally to use internally - we use it on Google Video and Google Finance for example. It seemed like it would be a good thing to open up to other users too.Plus, this is an example of the output from the "20% time" Google offer to their developers!
The API is relatively straightforward to use. For example , this http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=InfoQ|Rocks creates a two segment, 3D pie-chart in png format. Trivial to then embed in an img tag. More complex pie charts are logical extensions of this approach. The current release supports quite a nice range of different chart types, including line charts, bar charts, Venn diagrams, scatter plots; plus other effects are supported. Not bad for an initial release that was done on the teams "off" time!
As the documentation illustrates, it is very simple to embed images within html as well as JavaScript:
It's a nice, simple and yet powerful API that opens up some interesting possibilities. Being dynamic also means that there's potential for (relatively) real-time updates of information.var simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
function simpleEncode(values,maxValue) {
var chartData = ['s:'];
for (var i = 0; i < values.length; i++) {
var currentValue = values[i];
if (!isNaN(currentValue) && currentValue >= 0) {
chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) * currentValue / maxValue)));
}
else {
chartData.push('_');
}
}
return chartData.join('');
}