Data Visualization using Google Charts

It may be too early to be brainstorming ideas on what to present during our cohort’s science fair, but I have given it a lot of thought in the past few days hoping to come up with an idea that I can build upon with forthcoming labs and projects. Although it will probably take me a couple more projects (and blog posts) to arrive at an idea that sticks, I do see myself using data graphics to communicate effectively and give depth to what I eventually end up building. It was thus a very pleasant surprise to learn about the Google Charts API which is a relatively easy tool for visualizing data with javascript.

Sports is always a good place for finding data, so I decided to use this tool to compare and visualize the offensive statistics of some the most popular basketball players of recent times. Let’s get into it.

views

• As seen in lines 3 and 4, the first requirement for using the API is to load its library. The library only needs to loaded once within your directory, after which you can call on the google.charts.load function to load packages for particular chart types. In this case, I used the default package, ‘corechart’ in the ‘current’ library of google charts. This consists of the most commonly used charts such as bar, line, area, bubble, pie, donut, histogram, scattergrams etc. Other packages include the ‘table’ and ‘sankey’ packages which contain varied chart types under their respective categories. The google.charts.setOnLoadCallback(drawSeriesChart) line calls on the drawSeriesChart , a JavaScript function which will be defined later in your webpage. The callback instantiates and populates the data table that is called when the Google Visualization API is loaded in the next step.

• The next step is to call on the Google Visualization class itself and prepare the data variable which the class works on to create your chart. The datatable is a two dimensional table of rows and columns made using arrays. The elements of the first array define the column headers, while the elements of all subsequent arrays are placed in the same index as the column header they are meant to conform to. It is important to organize the datatable in a format, i.e. number of rows and columns that your chart expects. Because I planned on drawing a bubble chart with 10 instances, I created adatatable of 11 arrays each with a length of 5.

• Once the datatable has been prepared, you can use the tool’s customizable functions, which is defined using the key-to-value format, to describe your chart and give it the aesthetic you want. In this case I simply gave the chart a title, named my axes and specified the font size. However, there are options available that let you set other properties of your chart such as background color, chart area, axes and bubble color/size etc.
• The final step is to actually draw the chart by instantiating the bubble chart class with the codegoogle.visualization.BubbleChart, passing in a reference to the chart as an argument and assigning it an id. The assignment in my example is made with the code document.getElementById('ballers') When calling on the chart within forthcoming <div> elements, any use of the'ballers' id will then be replaced with the chart. The chart can also be sized as you like within these <div> elements.

All together:

So whose the GOAT?? Let’s view the stats:

Conclusion

This is a very simple example of how the Google Charts API can be used, however it contains much more sophisticated functionality for giving thoroughness and analytical depth to applications that use and display data. It can also be used in Ruby! To do so, one simply needs to install the google charts library in the command line by entering gem install googlecharts and requiring the library in your directory; require 'gchart'.

Other popular data visualization toolkits include:

• Timetric
• Tioga
• JFreeChart
• Gunplot
• R

Going forward, I plan on using a bigger and more robust data set, employing SQL and Active Record to gain a deeper understanding of data visualization in Ruby specifically. I find it to be very transparent and easy to use and highly recommend for building simple web applications on a limited budget and timeframe.