Building a Data Dashboard with Google BigQuery - Data Just Right: Introduction to Large-Scale Data and Analytics - page 81

Adding Visualization
We've already demonstrated how to use BigQuery for processing a query: initiating
a query job via API call and retrieving the result. At this point, our dashboard simply
retrieves a JSON object. Sure, a lot of people consider a raw JSON object a beautiful
thing, but it may be a bit more useful to display this resulting data in a format that is
easier to interpret. Let's add a visualization to our dashboard.
Because BigQuery is accessed via an online API, there are many existing visualiza-
tion software tools, both commercial and open-source, that can connect natively to the
service. In this case, let's create a simple table using Google Charts, a service for creat-
ing client-side graphs. Using Google Chart Tools simply requires adding a few lines
of JavaScript to our existing application code. Listing 6.5 demonstrates how to use the
Google Chart Tools library to display BigQuery results in a tabular format.
Listing 6.5 Visualizing BigQuery results using the Google Charts API
<!-- Include the Google Charts Tool libraries -->
<script type='text/javascript'
src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
</script>
<script>
// drawTable takes a BigQuery result object
// and draws a Google Charts Table
function drawTable(queryResults) {
var data = new google.visualization.DataTable();
// Retrieve column names from BigQuery result schema
$.each(queryResults.schema.fields, function(i, item) {
data.addColumn('string', item.name);
});
// Push each row of data into a data table
$.each(queryResults.rows, function(i, item) {
var rows = new Array();
for (var i=0;i<item.f.length;i++) {
rows.push(item.f[i].v)
}
data.addRows([rows]);
});