Computers, Software, Web

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:

Advertisements

3 thoughts on “Google Charts API + Prototype wrapper

  1. Yeah man, I really enjoyed the API docs (very clean) and using it. I am planning on using Google Charts in Harbor as much as possible where useful.

    Like I said, I’ll show you something tangible soon 🙂

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s