Visualizing Data with Google Charts

If you can type a URL in your browser, you can create a quick chart with the help of Google.

Just when you thought Google had made your life easy enough, you stumble upon Google Charts. Never again will you draw a Venn Diagram by hand. Plotting out a line graph in Excel? Nope! The Google Charts API has been around since 2007. You might have seen it used on some of Google’s analytical services, or perhaps some other sites using their code, but you don’t have to be a web developer to take advantage of it! Google provides a very easy to use Chart Wizard to create the following types of charts:

Bar Graphs

Sample Bar GraphThe wizard for making bar graphs is very user-friendly and straight-forward. Start by giving your graph a title. You can easily define the font color, size, spacing and size of the graph. Data sets can be entered in a text area, using spaces to separate each bar on the graph. Adjustments can be made to the scale, color and positioning of the legend. Additions and customizations can be made to the X and Y axes. Being able to see the chart take shape in real-time, as adjustments are made, is a big advantage. It really can’t get much easier!

Line Graphs

Sample Line GraphLine graphs are created with essentially the same attributes and options as the bar graphs. Both are generated as an “image” with the following basic elements passed into the URL:

-chart type (cht)
-chart size (chs)
-chart data string (chd)
-visible axes (chxt)
-axis label styles (chxs)

You can play with the full parameter list on the Live Chart Playground page if you please, but if you’re using the GUI interface of the Chart Wizard, you certainly don’t need to remember all these elements and their specific format for passing data. But it’s good to know how the URLs are structured and where to make changes if the dataset for the chart should change, without having to go back to the Wizard interface.

Pie Charts

Sample Pie ChartA simple pie chart can can make a huge difference when talking percentages, votes or any other numerical proportions. When a pie chart is added to a page full of text, it allows the reader to scan though and quickly extract and absorb the data. This is where the labels and legends can really be helpful as a means to visually summarize data. The options for pie charts in Google allow for colored-coded legends as well as arrows pointing directly to the individual slices. Pie charts can be displayed in 2D, 3D and other display configurations.

Venn Diagrams

Sample Venn DiagramVenn Diagrams are best used to show relations between sets of data. The Chart Wizard for creating them is a little bit different than the others, but fewer options makes it a little bit more straight-forward to configure. All that’s needed is a size for each of the circles, and a value for where they intersect each other.

When you’re ready to share your chart, just grab the link or the image HTML displayed in the sidebar of the Google Charts Wizard. You can view the rest of the Google Charts here.

About the Author


Jeffrey Stevens

Jeff Stevens is the Assistant Web Manager for UF Health Web Services. He focuses on user experience, information architecture, content strategy, and usability.

Read all articles by Jeffrey Stevens