Simple play icon Course
Skills Expanded

Creating Interactive Dashboards with Google Charts

by Greg Sommerville

This course will show you how to create an interactive web dashboard using Google Charts and JavaScript, including using customized HTML tooltips, drilling down into data, using filter controls to restrict the data charted, and much more.

Preview this course

What you'll learn

Web dashboards are tremendously helpful; they give immediate access to timely data and are often displayed in a way that reveals new insights. In this course, Creating Interactive Dashboards with Google Charts, you'll learn how to use the free JavaScript framework called Google Charts to create powerful, interactive web dashboards.

The dashboard you'll create will include several different types of interactivity, including:

  • Detailed tooltips that contain secondary charts
  • Popups that show drill-down details
  • Filter controls that allow the user to control which data series are charted over which range
Beyond that, you will explore different layout approaches, including responsive design so the dashboard is usable from a phone or a tablet. By the time the course is complete, you'll know much more about what you need to create a powerful and attractive dashboard with lots of useful interactive features.

Table of contents

Course Overview
1min
Everything You Need to Know About Google Charts
44mins
Drilling Down: Detailed Views of Selected Data
31mins
Filtering Data with Controls
28mins
Combining Charts into a Dashboard
31mins
User Customizations, Data Export, and Startup Animations
20mins

Course FAQ

What exactly is Google Charts?

Google Charts is a free, open-source JavaScript framework with powerful and easy to use tools for creating interactive charts, graphs, and data tools.

What will I learn in this course?

This course will teach you how to create an interactive web dashboard using Google Charts and JavaScript. Some topics covered include:

  • A quick introduction to Google Charts
  • Loading dynamic data
  • Getting detailed views of selected data
  • Handling chart events
  • Filtering data with controls
  • Combining charts into a dashboard
  • User-driven chart customizations
  • Much more
Who is this course for?

This course is for anyone who wants to learn how to use Google Charts and JavaScript to create a customized and interactive web dashboard. If you need to provide immediate access to timely data, then this tutorial will be beneficial to you.

Are there prerequisites to this course?

This Google Charts course does not require any existing experience with the framework, but you will want to have some intermediate JavaScript skills. If you've used jQuery or Bootstrap, you'll definitely be ready for the course material.

About the author

Greg Sommerville

Greg Sommerville is an experienced software developer who has worked in a wide variety of business domains, including health care research, medical devices, enterprise-level software ordering and licensing, environmental science, and online banking. He specializes in web and mobile development using JavaScript, jQuery, Bootstrap, C#, SQL Server, Entity Framework, and ASP.NET. He is also deeply interested in UI design (UX, these days) and usability. He can be reached through his blog at http://gr... more

See more courses by Greg Sommerville
Ready to upskill? Get started