Embedding Google Charts Into Your Website

By March 17, 2015 5 Comments

Google Sheets is one of my favorite web applications. It’s quick, lightweight, and easy to use. For those of you not familiar with Google Sheets, it’s Google’s web-based spreadsheet application. While creating tabular data is the main function of this application, did you know that you can also create dynamic, embeddable charts based on these data values? Let’s take a look.

Creating a spreadsheet in Google Sheets

Hopefully, if you’ve worked with Excel or any other spreadsheet program entering data and creating tables is nothing new. Typically, your table might contain row and/or column headers and data cells. Let’s look at this example table:

Labor Force Data

July 2014

Aug 2014

Sept 2014

Oct 2014

Nov 2014

Dec 2014

Civilian Labor Force (1)







Employment (1)







Unemployment (1)







(1) In Thousands

Generating the chart

Generating a chart based on your table requires a few simple steps:

Select the rows and columns you would like included in your chart

Google Sheet

Click the chart icon in the header of Google Sheets

Chart creator button

Select which chart type you would like to use (Google will recommend several chart types based on your selected data but if you don’t see your type listed click the More ›› link)

Google Chart editor

In some cases you will also need to tick the option “Switch rows / columns” and/or “Use row 1 as headers”.

Click the Insert button to add the chart to your sheet.

If the chart still doesn’t look right, you can modify the settings by right-clicking the chart and selecting Advance Edit.

Chart dropdown

Customizing the chart

Customizing your chart is a very easy task in Google Sheets. Let’s say you want to change the colors of the chart, the font size, or swap the axis, simply right-click the chart, select Advance Edit and click on the Customize tab.

Chart configuration

To update the line, bar, or pie colors, scroll down to the Series section, click the drop-down, and change the color.

Chart color picker

Embedding the chart

Now that you’ve finished making your design and data adjustments, let’s embed your chart on your website.

The first thing that you should do is update your share options for this Sheet document.

Click the share button, and select the Advance link.

Sheet sharing preference popup

Click the Change link, and select “On – Public on the web”. This will allow that data to be accessed by anyone (This will be very important when we embed the chart into our website).

Public setting popup

Click Save to make your changes permanent and then click Done.

Now, click the down arrow on the right side of the chart, and select Publish Chart.

Publish chart dropdown

Click the Embed tab, and click the Publish button.  You should now see an embeddable iframe code snippet. Copy this iframe code, and navigate to your website.

iframe code

 Paste this code into an HTML/source view, and click save. You should now see your chart load directly within your website.

If, for any reason, you need to update the data within the spreadsheet, your changes will automatically be reflected in your chart. Pretty cool, huh?

Executive's Guide to Web Development

80 pages of topics and tips to navigate your way to a better website.

Join the discussion 5 Comments

  • James Iliff says:

    Question. When I add the publish code to a website then make changes to the chart back in Google Apps, should I expect that the code in the website will update automatically?

  • kekern says:

    I have successfully embedded my Google charts on my website, but the font changes (from sans-serif to a serif font) and it doesn’t look as clean as I want it to. Actually, it seems to have done the same in your demonstration above. Is there any way to fix that?

  • adil says:

    hi, thanks for your post.
    charts (from spreadsheet) embedded in my website are shown well on pc web browser but in mobile, they don’t fit to page. embedded charts seems to be not mobile friendly. is there any idea to fix that?

Leave a Reply