When searching for online tools to complete a task, you’re eventually going to come across something with Google’s fingerprints on it. Data visualization is no exception, with Google Charts being Google’s answer to this growing interest.
Like with D3, charts are rendered in your browser using HTML and SVG. Unlike D3, however, you don’t have to build everything from scratch. Google Charts gives you a fairly large, pre-built set to work with; all you have to do is provide the data.
In a nutshell, using Google Charts can be broken down into four main steps:
- Load the Google Visualization API into your HTML file. This can only be done once, but you can load as many packages as you need when doing so.
- Create a data set. This is done using the Visualization API’s DataTable class. DataTable is a two dimensional table: columns define data type (e.g., string, number, etc.) and data labels, and rows define the actual data. Data in each column must be the same data type.
- Draw the chart. This is done through the API’s draw() method. This method takes two values: your DataTable, and customizable chart options. The options piece is not required, but can be used to customize charts if you want to change the default colors, add a title, or specify the chart’s size.
- Create an HTML element (typically a <div> tag) to hold your chart.
To see all this in action, copy and paste the following code into an HTML file. Once saved, you won’t need a Web server to view it; you can just open the file.
Code taken from https://developers.google.com/chart/interactive/docs/quick_start
Here’s the result that appears when viewing the file.
Here are a few additional notes about the above code. We used the corechart package, which includes the following charts:
- Stepped area
- Scatter charts
In other words, this will cover you in most cases. However, there are other packages to choose from. To see a full list of charts and what packages are required to use them, click here, and check out the documentation for each chart type.
Switching between charts is easy. Suppose you want to use a bar chart instead. To do so, go to the above code, and replace
To avoid truncating “slices” in the legend, also change the ‘width’ in your options variable from 400 to 500. Here’s the result.
And that’s it! As you can see, you may need to slightly change the display, but no need to specially tailor your DataTable when switching between charts.
Google Charts offers plenty of basic charts that will meet most visualization needs. While its customization isn’t as robust as D3 and Flex, it’s easier to learn, and building charts and graphs is much quicker. All in all, Google Charts is a good solution for simple visualization that doesn’t require too much customizing.
There’s more than what I’ve discussed in this post, so if you’re interested in learning more, click here.
Charts. (n.d.). In Google Developers. Retrieved March 2, 2016, from https://developers.google.com/chart/
Sumanth, K. (2014, September 11). D3.js v/s Google Charts: A Data Scientist’s Review. In Socialcops. Retrieved March 4, 2016, from http://blog.socialcops.com/engineering/d3-js-versus-google-charts