Visualizing Data with Google Charts

A 3 minute read written by Amar April 4, 2016

Image of a simple bar graph

Charts can be a valuable asset when attempting to visualize data in an easy to understand format. Creating these charts in a web application can be a tricky challenge to overcome, especially when custom implementations are required. Fortunately, Google offers its charting framework to make this task less of a headache. Let’s see how we can leverage Google Charts to create implementation friendly and highly customizable data visualizations.

The first decision that needs to be made when implementing data visualizations is how we want the data to be visualized. Does the data make more sense to be plotted on a line graph, or does it convey the trend more effectively with a bar chart? Google offers many different types of charts, all showcased in their chart gallery. For the sake of this article, let’s focus on the column chart.

Secondly, the data for the chart needs to be assembled and formatted in such a way that the charting framework can consume it. Google Charts can use data from a variety of sources including a direct database connection, or even a Google Sheets file. For the sake of simplicity, I used DataTables in this example which are outlined here. For performance reasons, the data assembly occurs on the backend in my implementation, and returns a JSON string to the front end (where Google Charts lives). The JSON string parses into an object which is detailed below.

[
    {
        x: 3.65,     // the x position of the column
        y: 1,        // the y position of the column
        low: 2.4,    // the x position of the lower label
        high: 4.9    // the x position of the higher label
    }
    ...
]

Now is where the fun begins. We need to define the columns for our DataTable which tell the framework how to render the chart.

var data = new google.visualization.DataTable();

data.addColumn('number', 'Reading Ease');    //x axis
data.addColumn('number', 'Pages');        //y axis
data.addColumn({ type: "string", role: "tooltip" });    //tooltip text
data.addColumn({ type: "string", role: "style" });    //column styling

Now that our DataTable has columns, we need to add in some rows (the actual data). The implementation I required was non-traditional in the sense that a column represented an amount of pages between two values. This meant that I needed to place the columns in the chart between the labels, instead of having a label underneath each column. Luckily, because Google Charts treats labels separately from the data in some circumstances, my design was feasible. This is where the “high” and “low” properties of the JSON object are needed.

var labels = [];
//iterate through data
for (var i = 0; i < jsonData.length; i++) {        
    //add a row for each piece of data
    data.addRow([                                
        jsonData[i].x,
        jsonData[i].y,
        //tooltip text
        jsonData[i].y + " pages between " + jsonData[i].low + " and " + jsonData[i].high, 
        //color each column blue
        "color: #0083b9"                        
    ]);
    //add lower x axis label for each piece of data (this will add every label except for the last one)
    labels.push(jsonData[i].low);    
}
//add in the last label for max value of x axis
labels.push(jsonData[jsonData.length - 1].high);

Now it’s as simple as defining some chart wide options, telling the framework where to draw the chart, and then calling draw(), as demonstrated.

var options = {
    hAxis: {
        title: ‘Reading Ease’,
        ticks: labels
    },
    vAxis: {
        title: 'Pages'
    },
    legend: {
        position: 'none'
    },
    bar: {
        groupWidth: '75%'
    },
    chartArea: {
        top: 20,
        width: '85%',
        height: '75%'
    }
};
var chart = new google.visualization.ColumnChart(document.getElementById(‘chartDiv’);
chart.draw(data, options);

This will now render out the full chart using all of the options that were provided. From here we can add listeners to the chart, such as a “select” listener that fires when a column is clicked (perhaps to make the chart interactive). The entire selection of listeners are listed in the Events section of the documentation. The final result is shown below.

A screenshot showing the result of the above Google Charts example
A screenshot showing the result of the above Google Charts example

As is evident here, Google Charts provides a highly customizable and easy to understand framework for visualizing data on the web. With the help of excellent documentation, implementation of any of the several types of charts becomes much less of a daunting task. Have any other tips for data visualization? Leave them in the comments!