Working with the Google Chart (Visualization) JavaScript APIs

For a current project at my workplace I need a good charting solution. I need a pie chart for now, on which people can actually click and interact. I found a few tools and went for the Google Visualization APIs. The APIs are a set of JS libraries which let you build quick charts and graphics out of data tables. I started trying the sample codes on the Google Ajax playground and quickly understood which way to go to get things right. First I must make it clear that, I’m no Javascript pro. I have coded with jQuery a few times before and I have no real experience with JS until today. It is just today I spent a good amount of time with the Facebook JS APIs. Who knows if it’s the brilliant documentation at the Google Code or my fast learning ability, it took me just one hour to learn the Visualization APIs and cook something up from scratch.

Here’s the source code:

It’s very simple and easy. First we include the root javascript from: http://google.com/jsapi and then put the above codes in a script tag inside head.

We use the google loader to load the visualization package and then use it to build a PieChart. When the loading is done, the setOnLoadCallback() method invokes another function to proceed with further execution. We packed our main code inside a drawChart() function and set it as the callback.

To assemble the data, we first need a DataTable. A data table is an object with virtual columns and rows. First, we need to define the columns. We do that by calling the addColumn() method. The first parameter is the data type and the second one is the name. In our example, we added two columns.

Next, we call the addRows() passing an integer as the only parameter. This method creates “filler” or empty sets for putting data into.

Then, we use the setValue() call to insert/update data. The first parameter is the row number counted from 0. The second one is the index of column. Remember the sequence of the column definitions? Yes, follow that sequence. The first column is the index 0. The 3rd parameter is the actual value for that row and column.

The above call will insert the string “meaow” into the second column of the 3rd row. It’s easy! 🙂
PS: Please be aware of the data type of the column while inserting/updating data.

Now that we have a DataTable at our disposal, all we need to do is feed this data to a PieChart and draw it up. First, we created a new div with the id “chart”. This div will be holding the chart. Then we call the PieChart constructor with this div element. Then we call the draw() method of the chart object to paint it on the screen. The first parameter is the datatable and the second one is an object (dictionary/associative array like) defining the look and feel of the charts.

That draws the chart alright. But I need to let the users interact with the chart. So, I added a Listener to listen to any “select” events and call the handler function back. We get a event object but for select events, they don’t have any properties. That is they don’t tell you what the user clicked. You have to get the data by calling the getSelection() method of the chart. The returned object will have “row” and “column” values. For PieChart, alone the row value does the job. We get the row index. Then call the getValue() method of the data table to get the value of a certain column in a row. In this case, I just iterated over both columns. Built a text string out of the data and dynamically updated a div with that!

It’s pretty simple. It’s powerful and user friendly as well.

PS: I really liked the Google Ajax Playground. I am gonna play a lot in there from now on 🙂
I just realized I’m becoming a good coder as well. I wrote the above codes without any pretty printer or code formatter. It looks well indented to me 😀