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:

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'));

If you want a line chart, simply change the following to request LineChart

var chart = new google.visualization.LineChart(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

Using Multiple Charts on a Page

The above methods work great when you just have one chart on a page. But what if you wanted to use multiple charts on the same page? You must include the script references, the function and the html for the form and chart drawing elements in the appropriate places on the page. So, take your time and place the items in the proper areass. Then there are a few things that need to be adjusted to allow multiple charts to function on a page.

  • The most important thing to change is the name of the function for each chart. Your code will get confused if you have multiple functions named drawChart, so go through and uniquely name each function.
  • Your dropdowns need to have unique ids as well (remember, an id is only supposed to be used once on a page anyway), so the script won't get confused about which input should be used.
  • Only need to load the packages line once, if you are using the same package, i.e. "corechart." If you are using multiple packages, i.e. "corechart" and "maps", you can include them on two separate lines or combine them as follows:
    google.charts.load('current', {'packages':['corechart', 'map']});

  • You need to set the callback for all the charts you want to draw when the site loads, so you can use multiple lines for these, as such. google.charts.setOnLoadCallback(drawChart); google.charts.setOnLoadCallback(drawChart2);

That's it. If you give the functions and dropdowns unique names, the script will find the proper JSON, data and chart options for that operation. As with any of these charts, you may need to adjust the styles or include them in their own divs to achieve your desired layout. But think carefully about what each part of the script is doing, and you will be able to use multiple charts on your pages.

Using Multiple Charts on a Page

Another Exercise

Find the JSON data to the right. It is Austin Housing Data by Zipcode found at the city's data portal. It includes Median Income, Median Home Value, and then percentages of units that different people can afford to either own or rent - Service/Retails Workers, Artists, Tech Workers. Make the following charts first on separate pages.

  1. Make a line chart that shows all zipcodes and allows you to chart between median income and median home value with a dropdown.
  2. Make a column chart that shows all zipcodes and allows you to see what percentage of units can be owned by each of the groups - service, artist, tech. User should choose Service, Artist and Tech from the dropdown.
  3. Make a column chart that shows all zipcodes and allows you to see what percentage of units can be rented by each of the groups - service, artist, tech. User should choose Service, Artist and Tech from the dropdown.
  4. Now make one column chart that shows both own and rent on the same chart (each zip cod will display two columns instead of one
  5. Combine the 1st and last charts on one page. Make the necessary changes to the script to allow multiple charts to display.

Another Exercise

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.