Google Charts API + Prototype wrapper

var g=new GoogleChart();
g.init(“chart-01”); //Target Div ID
g.setChartTitle(“Service Requests By Location”);
g.setLabels(“Service Counter | Software Support | Virtual Services”);

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) :

     var g=new GoogleChart();
     g.init("chart-01"); //Target Div ID
     g.setChartTitle("Service Requests By Location");
     g.setLabels("Service Counter | Software Support | Virtual Services");

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:



  1. Matt Todd says:

    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 🙂


  2. Kelner says:

    Matt was showing this off to me the other day. Pretty fucking badass.


  3. Brian says:

    Does VS really have that many service requests? Wow I did not think we had that many when I worked there.


Leave a Comment

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

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

Facebook photo

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

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.