Embedding live data in an SD (graphs and spreadsheets)

Summary This module shows how to put live spreadsheet data into an SD. You get the embed code for a Google Sheets chart, or for a Google Sheet or Excel spreadsheet, and paste it into a note in the SD in code view. It has two parts: “Embedding a live graph from Google Sheets”, then “Embedding a Google Sheet or Excel spreadsheet in a note”.

Embedding a live graph from Google Sheets

Summary This part covers embedding a live, interactive graph from Google Sheets in an SD. You publish the chart from Google Sheets with the Interactive option selected, copy the embed code, and paste it into a note in the SD in code view. Once saved, the graph shows live in the SD and updates automatically when the source sheet changes.

Step 1

In your Google Sheet, click your graph to select it, then click the three dots at its top right corner. A menu opens.

Step 2

Click Publish chart. The Publish to the web box opens.

Step 3

Click the Embed tab, to the right of Link.

Step 4

To embed a live graph, keep the second dropdown set to Interactive. This means the embedded graph will update in the SD as it is updated in the sheet. If you ever want to embed the graph as an image instead, choose image from the dropdown.

Step 5

Click the green Publish button, below the dropdowns.

Step 6

A message asks if you are sure you want to publish this selection. Click OK.

Step 7

The embed code appears in a box below the dropdowns. Copy the embed code.

Adding the graph to the SD

Step 8

Go to your SD. In the row of purple buttons above the section headers, click and hold the note icon (a pencil), the second from the left, and drag it to where you want to display your graph. The New Note panel opens on the right of the screen.

Step 9

Click the code toggle button <>, the last button in the second row of formatting buttons at the top of the panel. The note editor switches to code view.

Step 10

Paste the embed code you copied into the large box below the buttons.

Step 11

Check that you are in code view: you are if you can see two small lines in the bottom right corner of the box.

Step 12

Once you have pasted your code, click Save at the bottom left of the panel.

Result. Your graph is live and showing in your SD, and it updates when the graph in the sheet changes.

Embedding a Google Sheet or Excel spreadsheet in a note

Summary This part covers embedding a live Google Sheet or Excel spreadsheet in an SD. In the spreadsheet you publish it to the web (in Excel, choose Embed) and copy the embed code. In the SD you drag in a note, switch the note editor to code view with the <> button, paste the code and save. Adding a width, height and border setting to the code makes the whole sheet visible.

Step 13

Open the spreadsheet you want to embed. The steps below are for a Google Sheet; the steps for an Excel spreadsheet are similar.

Step 14

Click File, in the menu at the top left of the sheet.

Step 15

Click Share. A small menu opens to its right.

Step 16

Click Publish to web. The Publish to the web box opens. In Excel, you would just click Embed after Share.

Step 17

Click the Embed tab, to the right of Link.

Step 18

In the dropdown, choose whether to embed the entire document or specific sheets. If the document has only one sheet, choose Entire document.

Step 19

Click Publish, below the dropdown.

Step 20

The embed code appears in a box below the dropdown. Click the code and copy it.

Step 21

Click Close, at the bottom right of the box.

Adding the spreadsheet to the SD

Step 22

Go back to your SD in PaT.

Step 23

Drag the note icon (a pencil), the second purple button from the left above the section headers, to where you want the spreadsheet, for example just under a section header. The New Note panel opens on the right.

Step 24

Switch to code view: click the toggle button <>, the last button in the second row of formatting buttons.

Step 25

Paste the embed code you copied earlier into the large box.

Step 26

Check that you are in code view: you will see two small lines in the bottom right corner of the note editor.

Step 27

When you are done, click Save at the bottom left of the panel. The spreadsheet is now embedded in the SD as a note.

Making the whole sheet visible

Step 28

If the spreadsheet isn't fully visible in the note, click edit, the small grey button at the top left of the note. The Edit Note panel opens on the right, showing the embed code.

Step 29

Click just after the last quotation mark in the code, the one after false, and paste the following: width="100%" height="800px" style="border:none;" You can tweak the width and height values to better suit your preferences.

Step 30

Check the code. Its end should now read: false" width="100%" height="800px" style="border:none;"></iframe>

Step 31

Click Save to finalise your changes.

Result. The note now shows the spreadsheet across the full width of the SD, 800 pixels high and without a border.