Google Charts API + Prototype wrapper

Event.observe(window,”load”,function(){
var g=new GoogleChart();
g.init(“chart-01”); //Target Div ID
g.setChartType(“p3”);
g.setChartTitle(“Service Requests By Location”);
g.setChartSize(“500×200”);
g.setChartColors(“1f3c78”);
g.setChartData([[15,35,50]]);
g.setLabels(“Service Counter | Software Support | Virtual Services”);
g.drawChart();
});

A big component to any database driven website can be analyzing data collected from users. Often, this means either a very simple UI for very select queries of data (not overly useful, or graphical), or a large enterprise reporting solution (like Crystal Reports), or simply no summarization of data at all (leaving information collecting to someone who knows SQL).

That us, until Google released a URL driven API for Google Charts. The implementation couldn’t be more simple. Take a look at the documentation for Google Charts, and take it for a spin. I was able to create a chart within 5 minutes of reading the documentation.

In addition, Dragan Bajcic has released a wrapper for Google Charts for the Prototype.js framework. Its implementation is straight-forward as well, and can be used in combination with return data from AJAX requests. To implement Dragan’s solution, the code would look similar to the following (adhering to the API docs for Google Charts) :

 Event.observe(window,"load",function(){
     var g=new GoogleChart();
     g.init("chart-01"); //Target Div ID
     g.setChartType("p3");
     g.setChartTitle("Service Requests By Location");
     g.setChartSize("500x200");
     g.setChartColors("1f3c78");
     g.setChartData([[15,35,50]]);
     g.setLabels("Service Counter | Software Support | Virtual Services");
     g.drawChart();
 });

This generates a link similar to this and inserts the returned image into a container with an id of “chart-01”. This can be seen below: