Copy an iframe code from a Google Sheets interactive chart
Question: After you create an interactive chart or map, how do you embed the live version in a website that you control?
The full answer requires three steps:
- Create a web page that supports iframe codes
- Copy the iframe code from your visualization
- Embed (or paste) the iframe code into your web page
This tutorial focuses on the second step, and shows how to publish a Google Sheets interactive chart, and copy its iframe code. Details may differ for other visualization tools, but the general iframe concept will be similar to most cases. For steps 1 and 3, see the Create a Simple Web Page with GitHub Pages tutorial and the Embed iframe in GitHub Pages tutorial in this chapter.
Create a Google Sheets chart, which requires a free Google Drive account. Learn more in the Google Sheets Charts tutorial in this book.
Click the drop-down menu in the upper-right corner of the interactive chart and select Publish chart. Click OK on next screen.
- Select the Embed tab, select the Interactive version, and click the blue Publish button. If you make changes to the chart, they will continue to be published to the web automatically, unless you click the Stop button or checkbox at the bottom.
- Copy the iframe embed code.
No coding skills are necessary, but it helps to be code-curious. This iframe is a line of HTML code that contains these instructions:
- iframe tags to mark the beginning and end
- width and height: to display your chart in a second site, in pixels
- seamless frameborder: “0” means no border will appear around the chart in the second site
- scrolling: “no” means the chart will not include its own web scrolling feature
- src: the web address (or URL) of the visualization to be displayed in the second site
See the next tutorial in this chapter, Embed iframe in GitHub Pages, to learn how to paste the iframe into a simple web page. Or see related tutorials in this chapter to embed an iframe in other common web sites.