Google Chart Examples

What is it?

The Google Charts API provides code for many charts, graphs and maps. With a little JavaScript and data knowledge, you can make them interactive and integrate into your sites.

Why should I learn it?

These examples will show you how you can add interactivity to charts, but allowing users to input data or filtering with a dropdown.

What can I do with it?

Feel free to modify and customize any of these scripts for your own purposes.

How long will it take?

You already know all the JavaScript you need to be able to apply these concepts. Start incorporating charts, graphs and maps into your projects.

Getting Started

This isn't an exercise as much as it is a series of completed examples using some different Google Charts. I don't have step-by-step videos or instructions for these, but you should now be able to make changes to code for your own purposes. Put the code for each in an html file and open in a browser to see them in action. Look through the extensive Google Chart Gallery for ideas about charts you'd might be able to use.

Pie Chart User Input

Google Charts can be used with JavaScript to pass values into charts based on user input or JSON data. This example shows how to get a user's input from a form and have it create a Pie Chart.

How many hours do you spend:

Working:
Eating:
Commuting:
Watching tv:
Sleeping: Other:

Pie Chart - User Input

Pie Chart with Dropdown

This example shows how to change the data from JSON that is used in a pie chart based on a user's dropdown selection.

Pie Chart with Dropdown/JSON

Bar Chart with Dropdown/JSON

This example demonstrates how to change a bar chart with JSON data based on the user's selection from a dropdown. For a bar chart, the bars are horizontal.

If you want a chart with vertical bars, simply change the following line to request ColumnChart:

var chart = new google.visualization.ColumnChart(document.getElementById('div_chart'));

Bar Chart with Dropdown/JSON

Google Map with Dropdown

You can provide location information to create a Google Map. This example shows how the map can also be filtered based on a user's dropdown selection. The map data is stored in origData, but the selection of the dropdown creates a newData array that is invoked for the map.

If your map does not show when you upload to your domain, it is probably because you need a Google Maps API. You need to create one by going to the Google API Console and getting an API key. Set up a project for your site.

Your code will look something like this. Include it at the bottom of your html page.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE" async defer></script>

Search for trailheads with picnic locations.

Google Map with Dropdown

Now You Try

See the code at the right. Find the appropriate code to create a line chart visualization that will place a line chart in the div named line_chart. Put that where indicated in the code. Then create the if statement where indicated to pull the data from the json into the chart.

Try a Line Chart

Moving On

All these exercises demonstrate practical use of the features we have discussed, this time incorporating the Google Maps library. Work on adding interactive features for charts, graphs and maps on your own sites. 

© 2016 CodeActually · cindy@codeactually.com