Embed Dynamic Google Charts in Your Website

Embed dynamic Google Charts in your website using data from Google Sheets

A great way to visualize data on your website is to use Google Charts. Google Charts is an easy and powerful tool to build charts and graphs using data from Google Sheets or any other source. The charts are interactive and can even be animated. And since Google Charts use HTML5/SVG technology, the charts are both cross-browser and mobile compatible.

In this example below, we'll use Javascript, the Google Charts library and Visualization API to embed a Pie Chart in a website. The data for the chart will be stored in Google Sheets, but you can use other data sources as well. We'll be following the Google Charts guide which you can find here.

First, we need to load the AJAX API.

Then we can load the Visualization API/corechart package.

Once the Visualization API is loaded, we can call the function drawChart to begin building the Pie Chart with data from Google Sheets.

To query the data from Google Sheets, we need the url of the sheet as well as the gid. The gid specifies which sheet in a multi-sheet document to link to and can be found in the url of that sheet. You could also use the sheet name.

The url + '/gviz/tq?gid=' + gid allows us to query the data from the sheet that stores the data. If the sheet has lots of data we can also add query parameters but for this example let's assume the only data in the sheet is what we need for this chart.

The getDataTable() function will do all the work for us in organizing the data for our chart.

Let's design a simple Pie Chart with a donut hole and labels with lines leading to them. Here's the Google documentation to customize your own chart.

Now that we have the data and the design ready, all we have to do now is instantiate the chart object, select the div by id and draw the chart.

And that's it. Here is the result. To see a live example, check out the full code here.

© 2018  Proudly created with Wix.com