Including charts and diagrams

Sometimes you want to include charts or diagrams in your assignments. You can of course create such an object with you favorite drawing program, create an image from it, and then include the image. However, if you use Google Sheets and/or Google Drawings this is a lot easier. Both can be downloaded from the chrome web store and used for free for personal use. Businesses get them when they use Google Suite.

Using Google Sheets

Google Sheets is a full blown spreadsheet program. In the section on including documents it was already shown how to include a complete spreadsheet. Here we show how to include a single chart from the spreadsheet. For this you proceed as follows.

Create a Google Sheets spreadsheet, include some data and insert a chart (e.g. a bar chart, or a line chart). Check the documentation on Google Sheets on how to do this. Once you are satisfied with your chart, select it and go to the drop-down menu at the top-right of the diagram. Click on the option Publish chart. Click on the Publish button if you have not published the chart before. Make sure you are at the Link tab. You now have two options: interactive or image.

Interactive. In this case you will get an interactive chart that the user can hover over to get additional information. An interactive charts must be placed in an iframe. Copy the indicated link and place it in your text as follows:

```iframe
    url: https://docs.google.com/spreadsheets/d/e/2PACX-1vQ8TQEoG1PL5M3_oa_TD_WIwSJCAHPJdIWm4WKr_aJnjJd0axDtMKnqY_0Oya5LFo9_BZcqZq_BZl04/pubchart?oid=796192565&format=interactive
```

For more information on using iframes and additional options, see the help on including external content.

Image. In this case the link creates an image. You can include it in the same way as you include an image:

```image
    url: https://docs.google.com/spreadsheets/d/e/2PACX-1vQ8TQEoG1PL5M3_oa_TD_WIwSJCAHPJdIWm4WKr_aJnjJd0axDtMKnqY_0Oya5LFo9_BZcqZq_BZl04/pubchart?oid=796192565&format=image
```

Including images gives you a number of option on the size of the image. Check out the help on including an image.

Note that in both cases it is essential that you do not remove or change the spreadsheet. Each time somebody inspect the assignment, the image or interactive chart is recreated. If this is a problem, the alternative is that you download the chart as png or svg file using the Download command in the pop-up menu. Next you can upload that file to your assignment and display it.

Using Google Drawings

Google Drawing is an online drawing program that is in particular good in creating diagrams. Here you proceed as follows. First create a nice diagram. Make sure the page fits good around the diagram. Now go the the File menu. Here there is an option to Publish on the Internet. Select the Link tab and press the Publish button if the diagram is not yet published. Choose the required size and next select the link. As this generates an image, it must be included in the same way you include an image:

```image
    url: https://docs.google.com/drawings/d/e/2PACX-1vSls8omyIZaIUggSttZFTW-gemhXbHSe9gRFA4jUTIsOFi2ZbT4eHrK5WG8qDXbnGr9qdtBku_vHVoJ/pub?w=417&h=222
```

Note that the selected size is actually in the url. So you can change the size in any way you like.

Note that again it is essential that you do not remove or change the drawing. Each time somebody inspect the assignment, the image is recreated. If this is a problem, the alternative is that you download the drawing as png or svg file using the  Download command in the File menu. Next you can upload that file to your assignment and display it.

Still need help? Contact Us Contact Us