Easy Data Visualization with Google Charts and JavaScript

Posted on by

Looking for an easy and free way to visualize data to gain insight? Google has provided a JavaScript programming interface so that you can integrate Google Charts in your applications. To my surprise, I found it is very easy to build interactive Google Charts that use data from Google Sheets too.

Using our sense of sight, we can naturally find patterns and outliers in data quickly. Interactive data visualization tools are designed to turn your data into insightful pictures. If you’re not familiar with creating charts in Google Sheets, check out this brief video introduction by John Calvert.

To introduce the Google Charts programming interface, I wanted to share a Google Motion Chart showing trends of population and vehicle count over time in various countries. We will briefly introduce how we built this chart.

Your Data in JavaScript code

The following HTML/Javascript code implements a Google Motion Chart by describing the information in JavaScript code.









The following code imports Google JavaScript code library. The “google.load” function loads the Google Motion Chart into memory.




Data from a Spreadsheet



In the "drawChart" function, we use the Query object to reference the URL of our Google Sheet. When the query is sent, we specify a call back function called "handleQueryResponse." Once the data arrives, the "handleQueryResponse" function will complete the drawing.


function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}

var data = response.getDataTable();
var chart2 = new google.visualization.MotionChart(document.getElementById('chart_div'));
chart2.draw(data, {width: 600, height:300});
}

If you're interested in learning more about programming Google Charts, check out the following links:

Google Charts Playground: https://code.google.com/apis/ajax/playground/?type=visualization
Google Charts Quick start: https://developers.google.com/chart/interactive/docs/quick_start

Data visualization is a pretty fun area. We love to hear from our readers. What are some of your favorite tools visualizing data? Leave us a comment below!

InspiredToEducate.NET Posts