This page describes how to take existing charts from Google Sheets and add them to Google Slides presentations.
Adding charts to a presentation can help create more impact and make data meaningful to your audience. Charts are uniquely powerful tools for showing patterns or trends in a data set, and can help you communicate clearly about quantitative data.
The above video discusses how to generate slides from spreadsheet data. It includes a complete example (Python) that adds a chart to a slide, and also imports spreadsheet cell data into a table.
About adding charts
Whenever you're presenting quantitative information, data charts can enhance your presentation. The Slides API lets you include any chart that you can create in Google Sheets: bar charts, line charts, pie charts, and many more.
As shown in the diagram above, you must first create the chart in Google Sheets. Once the chart exists, you can embed it into your presentation.
The general process for managing charts in your presentation is:
- Create a chart in Google Sheets.
- Use the Sheets API to read the chart ID of the resulting EmbeddedChart.
- Use CreateSheetsChartRequest once to add it to a slide.
- Use RefreshSheetsChartRequest as needed to sync it to the source data.
Static vs linked charts
When you use the API to add a chart to your presentation, one parameter that you specify is the LinkingMode. This determines whether the chart is added as a static image or as an object that can be refreshed in the future.
Use LINKED
mode if:
- You want to refresh the chart in the future, reflecting changes in the underlying data.
- You want collaborators to have a link to the spreadsheet containing the source chart.
Use NOT_LINKED_IMAGE
(static) mode if:
- You want the chart never to change in the future.
- You do not want collaborators to see a link to the source spreadsheet.
Scopes for accessing Google Sheets
When you add a chart to your slide, the Slides API needs to access it in Google Sheets. This means your request must use one of the following scopes:
https://www.googleapis.com/auth/spreadsheets.readonly
(preferred)https://www.googleapis.com/auth/spreadsheets
https://www.googleapis.com/auth/drive.readonly
https://www.googleapis.com/auth/drive
The spreadsheets.readonly
scope is generally the best to use, because it is
the most restrictive. However, if your app already uses one of the other scopes
listed above, then just use that scope.
Adding a chart
To add a chart, you'll need to know the spreadsheet ID and chart ID of the
chart in Google Sheets. Then you call the batchUpdate
method, using the
CreateSheetsChartRequest
once to add the chart.
The following example takes the a chart and adds it to a slide as LINKED
so
that it can be refreshed later.
Apps Script
/** * Embed a Sheets chart (indicated by the spreadsheetId and sheetChartId) onto * a page in the presentation. Setting the linking mode as 'LINKED' allows the * chart to be refreshed if the Sheets version is updated. * @param {string} presentationId * @param {string} pageId * @param {string} shapeId * @param {string} sheetChartId * @returns {*} */ function createSheetsChart(presentationId, pageId, shapeId, sheetChartId) { const emu4M = { magnitude: 4000000, unit: 'EMU' }; const presentationChartId = 'MyEmbeddedChart'; const requests = [{ createSheetsChart: { objectId: presentationChartId, spreadsheetId: shapeId, chartId: sheetChartId, linkingMode: 'LINKED', elementProperties: { pageObjectId: pageId, size: { height: emu4M, width: emu4M }, transform: { scaleX: 1, scaleY: 1, translateX: 100000, translateY: 100000, unit: 'EMU' } } } }]; // Execute the request. try { const batchUpdateResponse = Slides.Presentations.batchUpdate({ requests: requests }, presentationId); console.log('Added a linked Sheets chart with ID: %s', presentationChartId); return batchUpdateResponse; } catch (err) { // TODO (Developer) - Handle exception console.log('Failed with error: %s', err.error); } };
Go
// Embed a Sheets chart (indicated by the spreadsheetId and sheetChartId) onto // a page in the presentation. Setting the linking mode as "LINKED" allows the // chart to be refreshed if the Sheets version is updated. emu4M := slides.Dimension{Magnitude: 4000000, Unit: "EMU"} presentationChartId := "MyEmbeddedChart" requests := []*slides.Request{{ CreateSheetsChart: &slides.CreateSheetsChartRequest{ ObjectId: presentationChartId, SpreadsheetId: spreadsheetId, ChartId: sheetChartId, LinkingMode: "LINKED", ElementProperties: &slides.PageElementProperties{ PageObjectId: pageId, Size: &slides.Size{ Height: &emu4M, Width: &emu4M, }, Transform: &slides.AffineTransform{ ScaleX: 1.0, ScaleY: 1.0, TranslateX: 100000.0, TranslateY: 100000.0, Unit: "EMU", }, }, }, }} // Execute the requests. body := &slides.BatchUpdatePresentationRequest{Requests: requests} response, _ := slidesService.Presentations.BatchUpdate(presentationId, body).Do() fmt.Printf("Added a linked Sheets chart with ID %s", presentationChartId)
Java
import com.google.api.client.googleapis.json.GoogleJsonError; import com.google.api.client.googleapis.json.GoogleJsonResponseException; import com.google.api.client.http.HttpRequestInitializer; import com.google.api.client.http.javanet.NetHttpTransport; import com.google.api.client.json.gson.GsonFactory; import com.google.api.services.slides.v1.Slides; import com.google.api.services.slides.v1.SlidesScopes; import com.google.api.services.slides.v1.model.AffineTransform; import com.google.api.services.slides.v1.model.BatchUpdatePresentationRequest; import com.google.api.services.slides.v1.model.BatchUpdatePresentationResponse; import com.google.api.services.slides.v1.model.CreateSheetsChartRequest; import com.google.api.services.slides.v1.model.Dimension; import com.google.api.services.slides.v1.model.PageElementProperties; import com.google.api.services.slides.v1.model.Request; import com.google.api.services.slides.v1.model.Size; import com.google.auth.http.HttpCredentialsAdapter; import com.google.auth.oauth2.GoogleCredentials; import java.io.IOException; import java.util.ArrayList; import java.util.Collections; import java.util.List; /* Class to demonstrate the use of Slides Create Chart API */ public class CreateSheetsChart { /** * Adds chart from spreadsheet to slides as linked. * * @param presentationId - id of the presentation. * @param pageId - id of the page. * @param spreadsheetId - id of the spreadsheet. * @param sheetChartId - id of the chart in sheets. * @return presentation chart id * @throws IOException - if credentials file not found. */ public static BatchUpdatePresentationResponse createSheetsChart( String presentationId, String pageId, String spreadsheetId, Integer sheetChartId) throws IOException { /* Load pre-authorized user credentials from the environment. TODO(developer) - See https://developers.google.com/identity for guides on implementing OAuth2 for your application. */ GoogleCredentials credentials = GoogleCredentials.getApplicationDefault() .createScoped(Collections.singleton(SlidesScopes.PRESENTATIONS)); HttpRequestInitializer requestInitializer = new HttpCredentialsAdapter( credentials); // Create the slides API client Slides service = new Slides.Builder(new NetHttpTransport(), GsonFactory.getDefaultInstance(), requestInitializer) .setApplicationName("Slides samples") .build(); // Embed a Sheets chart (indicated by the spreadsheetId and sheetChartId) onto // a page in the presentation. Setting the linking mode as "LINKED" allows the // chart to be refreshed if the Sheets version is updated. List<Request> requests = new ArrayList<>(); Dimension emu4M = new Dimension().setMagnitude(4000000.0).setUnit("EMU"); String presentationChartId = "MyEmbeddedChart"; requests.add(new Request() .setCreateSheetsChart(new CreateSheetsChartRequest() .setObjectId(presentationChartId) .setSpreadsheetId(spreadsheetId) .setChartId(sheetChartId) .setLinkingMode("LINKED") .setElementProperties(new PageElementProperties() .setPageObjectId(pageId) .setSize(new Size() .setHeight(emu4M) .setWidth(emu4M)) .setTransform(new AffineTransform() .setScaleX(1.0) .setScaleY(1.0) .setTranslateX(100000.0) .setTranslateY(100000.0) .setUnit("EMU"))))); BatchUpdatePresentationResponse response = null; try { // Execute the request. BatchUpdatePresentationRequest body = new BatchUpdatePresentationRequest().setRequests(requests); response = service.presentations().batchUpdate(presentationId, body).execute(); System.out.println("Added a linked Sheets chart with ID " + presentationChartId); } catch (GoogleJsonResponseException e) { // TODO(developer) - handle error appropriately GoogleJsonError error = e.getDetails(); if (error.getCode() == 404) { System.out.printf("Presentation not found with id '%s'.\n", presentationId); } else { throw e; } } return response; } }
JavaScript
function createSheetsChart(presentationId, pageId, shapeId, sheetChartId, callback) { // Embed a Sheets chart (indicated by the spreadsheetId and sheetChartId) onto // a page in the presentation. Setting the linking mode as "LINKED" allows the // chart to be refreshed if the Sheets version is updated. const emu4M = { magnitude: 4000000, unit: 'EMU', }; const presentationChartId = 'MyEmbeddedChart'; const requests = [{ createSheetsChart: { objectId: presentationChartId, spreadsheetId: shapeId, chartId: sheetChartId, linkingMode: 'LINKED', elementProperties: { pageObjectId: pageId, size: { height: emu4M, width: emu4M, }, transform: { scaleX: 1, scaleY: 1, translateX: 100000, translateY: 100000, unit: 'EMU', }, }, }, }]; // Execute the request. try { gapi.client.slides.presentations.batchUpdate({ presentationId: presentationId, requests: requests, }).then((batchUpdateResponse) => { console.log(`Added a linked Sheets chart with ID: ${presentationChartId}`); if (callback) callback(batchUpdateResponse.result); }); } catch (err) { document.getElementById('content').innerText = err.message; return; } }
Node.js
/** * Embeds a Sheets chart onto a page in a presentation. * @param {string} presentationId The presentation ID. * @param {string} pageId The page ID. * @param {string} spreadsheetId The spreadsheet ID. * @param {string} sheetChartId The sheet's chart ID. */ async function createSheetsChart( presentationId, pageId, spreadsheetId, sheetChartId, ) { const {GoogleAuth} = require('google-auth-library'); const {google} = require('googleapis'); const auth = new GoogleAuth({ scopes: 'https://www.googleapis.com/auth/presentations', }); const service = google.slides({version: 'v1', auth}); // Embed a Sheets chart (indicated by the spreadsheetId and sheetChartId) onto // a page in the presentation. Setting the linking mode as "LINKED" allows the // chart to be refreshed if the Sheets version is updated. const emu4M = { magnitude: 4000000, unit: 'EMU', }; const presentationChartId = 'MyEmbeddedChart'; const requests = [ { createSheetsChart: { objectId: presentationChartId, spreadsheetId: spreadsheetId, chartId: sheetChartId, linkingMode: 'LINKED', elementProperties: { pageObjectId: pageId, size: { height: emu4M, width: emu4M, }, transform: { scaleX: 1, scaleY: 1, translateX: 100000, translateY: 100000, unit: 'EMU', }, }, }, }, ]; // Execute the request. try { const batchUpdateResponse = await service.presentations.batchUpdate({ presentationId, resource: { requests, }, }); console.log(`Added a linked Sheets chart with ID: ${presentationChartId}`); return batchUpdateResponse.data; } catch (err) { // TODO (developer) - Handle exception throw err; } }
PHP
use Google\Client; use Google\Service\Drive; use Google\Service\Slides; use Google\Service\Slides\Request; function createSheetsChart($presentationId, $pageId, $spreadsheetId, $sheetChartId) { /* Load pre-authorized user credentials from the environment. TODO(developer) - See https://developers.google.com/identity for guides on implementing OAuth2 for your application. */ $client = new Google\Client(); $client->useApplicationDefaultCredentials(); $client->addScope(Google\Service\Drive::DRIVE); $slidesService = new Google_Service_Slides($client); // Embed a Sheets chart (indicated by the spreadsheet_id and sheet_chart_id) onto // a page in the presentation. Setting the linking mode as "LINKED" allows the // chart to be refreshed if the Sheets version is updated. try { //creating new presentaion chart $presentationChartId = 'MyEmbeddedChart'; $emu4M = array('magnitude' => 4000000, 'unit' => 'EMU'); $requests = array(); $requests[] = new Google_Service_Slides_Request( array( 'createSheetsChart' => array( 'spreadsheetId' => $spreadsheetId, 'chartId' => $sheetChartId, 'linkingMode' => 'LINKED', 'elementProperties' => array( 'pageObjectId' => $pageId, 'size' => array( 'height' => $emu4M, 'width' => $emu4M ), 'transform' => array( 'scaleX' => 1, 'scaleY' => 1, 'translateX' => 100000, 'translateY' => 100000, 'unit' => 'EMU' ) ) ) )); // Execute the request. $batchUpdateRequest = new Google_Service_Slides_BatchUpdatePresentationRequest(array( 'requests' => $requests )); $response = $slidesService->presentations->batchUpdate($presentationId, $batchUpdateRequest); printf("Added a linked Sheets chart with ID: %s\n", $response->getPresentationId()); return $response; } catch (Exception $e) { echo 'Message: ' . $e->getMessage(); } }
Python
from __future__ import print_function import google.auth from googleapiclient.discovery import build from googleapiclient.errors import HttpError def create_sheets_chart(presentation_id, page_id, spreadsheet_id, sheet_chart_id): """ create_sheets_chart the user has access to. Load pre-authorized user credentials from the environment. TODO(developer) - See https://developers.google.com/identity for guides on implementing OAuth2 for the application. """ creds, _ = google.auth.default() # pylint: disable=maybe-no-member try: slides_service = build('slides', 'v1', credentials=creds) # Embed a Sheets chart (indicated by the spreadsheet_id and # sheet_chart_id) onto a page in the presentation. # Setting the linking mode as "LINKED" allows the # chart to be refreshed if the Sheets version is updated. emu4m = { 'magnitude': 4000000, 'unit': 'EMU' } presentation_chart_id = 'MyEmbeddedChart' requests = [ { 'createSheetsChart': { 'objectId': presentation_chart_id, 'spreadsheetId': spreadsheet_id, 'chartId': sheet_chart_id, 'linkingMode': 'LINKED', 'elementProperties': { 'pageObjectId': page_id, 'size': { 'height': emu4m, 'width': emu4m }, 'transform': { 'scaleX': 1, 'scaleY': 1, 'translateX': 100000, 'translateY': 100000, 'unit': 'EMU' } } } } ] # Execute the request. body = { 'requests': requests } response = slides_service.presentations().batchUpdate( presentationId=presentation_id, body=body).execute() print(f"Added a linked Sheets chart with ID: {presentation_chart_id}") return response except HttpError as error: print(f"An error occurred: {error}") return error if __name__ == '__main__': # Put the presentation_id, Page_id of slides # spreadsheet_id and sheet_chart_id to be submitted. create_sheets_chart("10QnVUx1X2qHsL17WUidGpPh_SQhXYx40CgIxaKk8jU4", "FIRSTSLIDE", "17eqFZl_WK4WVixX8PjvjfLD77DraoFwMDXeiHB3dvuM", "1107320627")
Ruby
# Embed a Sheets chart (indicated by the spreadsheet_id and sheet_chart_id) onto # a page in the presentation. Setting the linking mode as "LINKED" allows the # chart to be refreshed if the Sheets version is updated. emu4M = { magnitude: 4000000, unit: 'EMU' } presentation_chart_id = 'my_embedded_chart' requests = [{ create_sheets_chart: { object_id_prop: presentation_chart_id, spreadsheet_id: spreadsheet_id, chart_id: sheet_chart_id, linking_mode: 'LINKED', element_properties: { page_object_id: page_id, size: { height: emu4M, width: emu4M }, transform: { scale_x: 1, scale_y: 1, translate_x: 100000, translate_y: 100000, unit: 'EMU' } } } }] # Execute the request. req = Google::Apis::SlidesV1::BatchUpdatePresentationRequest.new(requests: requests) response = slides_service.batch_update_presentation(presentation_id, req) puts "Added a linked Sheets chart with ID: #{presentation_chart_id}"
Refreshing a chart
If you embedded a LINKED
chart in your presentation, then you can refresh it
at any time using
RefreshSheetsChartRequest.
This updates the chart to bring it in sync with the underlying Sheets chart and
data that it's based on.
The following example refreshes an existing chart:
Apps Script
/** * Refresh the sheets charts * @param {string} presentationId * @param {string} presentationChartId * @returns {*} */ function refreshSheetsChart(presentationId, presentationChartId) { const requests = [{ refreshSheetsChart: { objectId: presentationChartId } }]; // Execute the request. try { const batchUpdateResponse = Slides.Presentations.batchUpdate({ requests: requests }, presentationId); console.log('Refreshed a linked Sheets chart with ID: %s', presentationChartId); return batchUpdateResponse; } catch (err) { // TODO (Developer) - Handle exception console.log('Failed with error: %s', err.error); } };
Go
requests := []*slides.Request{{ RefreshSheetsChart: &slides.RefreshSheetsChartRequest{ ObjectId: presentationChartId, }, }} // Execute the requests. body := &slides.BatchUpdatePresentationRequest{Requests: requests} response, _ := slidesService.Presentations.BatchUpdate(presentationId, body).Do() fmt.Printf("Refreshed a linked Sheets chart with ID %s", presentationChartId)
Java
import com.google.api.client.googleapis.json.GoogleJsonError; import com.google.api.client.googleapis.json.GoogleJsonResponseException; import com.google.api.client.http.HttpRequestInitializer; import com.google.api.client.http.javanet.NetHttpTransport; import com.google.api.client.json.gson.GsonFactory; import com.google.api.services.slides.v1.Slides; import com.google.api.services.slides.v1.SlidesScopes; import com.google.api.services.slides.v1.model.BatchUpdatePresentationRequest; import com.google.api.services.slides.v1.model.BatchUpdatePresentationResponse; import com.google.api.services.slides.v1.model.RefreshSheetsChartRequest; import com.google.api.services.slides.v1.model.Request; import com.google.auth.http.HttpCredentialsAdapter; import com.google.auth.oauth2.GoogleCredentials; import java.io.IOException; import java.util.ArrayList; import java.util.Collections; import java.util.List; /* Class to demonstrate the use of Slides Refresh Chart API */ public class RefreshSheetsChart { /** * Refresh the sheets charts. * * @param presentationId - id of the presentation. * @param presentationChartId - id of the presentation chart. * @return presentation chart id * @throws IOException - if credentials file not found. */ public static BatchUpdatePresentationResponse refreshSheetsChart( String presentationId, String presentationChartId) throws IOException { /* Load pre-authorized user credentials from the environment. TODO(developer) - See https://developers.google.com/identity for guides on implementing OAuth2 for your application. */ GoogleCredentials credentials = GoogleCredentials.getApplicationDefault() .createScoped(Collections.singleton(SlidesScopes.PRESENTATIONS)); HttpRequestInitializer requestInitializer = new HttpCredentialsAdapter( credentials); // Create the slides API client Slides service = new Slides.Builder(new NetHttpTransport(), GsonFactory.getDefaultInstance(), requestInitializer) .setApplicationName("Slides samples") .build(); List<Request> requests = new ArrayList<>(); // Refresh an existing linked Sheets chart embedded a presentation. requests.add(new Request() .setRefreshSheetsChart(new RefreshSheetsChartRequest() .setObjectId(presentationChartId))); BatchUpdatePresentationResponse response = null; try { // Execute the request. BatchUpdatePresentationRequest body = new BatchUpdatePresentationRequest().setRequests(requests); response = service.presentations().batchUpdate(presentationId, body).execute(); System.out.println("Refreshed a linked Sheets chart with ID " + presentationChartId); } catch (GoogleJsonResponseException e) { // TODO(developer) - handle error appropriately GoogleJsonError error = e.getDetails(); if (error.getCode() == 400) { System.out.printf("Presentation chart not found with id '%s'.\n", presentationChartId); } else if (error.getCode() == 404) { System.out.printf("Presentation not found with id '%s'.\n", presentationId); } else { throw e; } } return response; } }
JavaScript
function refreshSheetsChart(presentationId, presentationChartId, callback) { const requests = [{ refreshSheetsChart: { objectId: presentationChartId, }, }]; // Execute the request. try { gapi.client.slides.presentations.batchUpdate({ presentationId: presentationId, requests: requests, }).then((batchUpdateResponse) => { console.log(`Refreshed a linked Sheets chart with ID: ${presentationChartId}`); if (callback) callback(batchUpdateResponse.result); }); } catch (err) { document.getElementById('content').innerText = err.message; return; } }
Node.js
/** * Refreshes an embedded sheet chart. * @param {string} presentationId The presentation ID. * @param {string} presentationChartId The presentation's chart ID. */ async function refreshSheetsChart(presentationId, presentationChartId) { const {GoogleAuth} = require('google-auth-library'); const {google} = require('googleapis'); const auth = new GoogleAuth({ scopes: 'https://www.googleapis.com/auth/presentations', }); const service = google.slides({version: 'v1', auth}); const requests = [ { refreshSheetsChart: { objectId: presentationChartId, }, }, ]; // Execute the request. try { const batchUpdateResponse = await service.presentations.batchUpdate({ presentationId, resource: { requests, }, }); console.log( `Refreshed a linked Sheets chart with ID: ${presentationChartId}`, ); return batchUpdateResponse.data; } catch (err) { // TODO (developer) - Handle exception throw err; } }
PHP
use Google\Client; use Google\Service\Drive; use Google\Service\Slides; use Google\Service\Slides\BatchUpdatePresentationRequest; function refreshSheetsChart($presentationId, $presentationChartId) { /* Load pre-authorized user credentials from the environment. TODO(developer) - See https://developers.google.com/identity for guides on implementing OAuth2 for your application. */ $client = new Google\Client(); $client->useApplicationDefaultCredentials(); $client->addScope(Google\Service\Drive::DRIVE); $slidesService = new Google_Service_Slides($client); try { $requests = array(); $requests[] = new Google_Service_Slides_Request(array( 'refreshSheetsChart' => array( 'objectId' => $presentationChartId ) )); // Execute the request. $batchUpdateRequest = new Google_Service_Slides_BatchUpdatePresentationRequest(array( 'requests' => $requests )); $response = $slidesService->presentations->batchUpdate($presentationId, $batchUpdateRequest); printf("Refreshed a linked Sheets chart with ID: %s\n", $response->getPresentationId()); return $response; } catch (Exception $e) { echo 'Message: ' . $e->getMessage(); } }
Python
from __future__ import print_function import google.auth from googleapiclient.discovery import build from googleapiclient.errors import HttpError def refresh_sheets_chart(presentation_id, presentation_chart_id): """ refresh_sheets_chart the user has access to. Load pre-authorized user credentials from the environment. TODO(developer) - See https://developers.google.com/identity for guides on implementing OAuth2 for the application. """ creds, _ = google.auth.default() # pylint: disable=maybe-no-member try: slides_service = build('slides', 'v1', credentials=creds) # Refresh an existing linked Sheets chart embedded in a presentation. requests = [ { 'refreshSheetsChart': { 'objectId': presentation_chart_id } } ] # Execute the request. body = { 'requests': requests } response = slides_service.presentations().batchUpdate( presentationId=presentation_id, body=body).execute() print(f"Refreshed a linked Sheets chart with ID:{presentation_chart_id}") return response except HttpError as error: print(f"An error occurred: {error}") return error if __name__ == '__main__': # Put the presentation_id, presentation_chart_id # to be submitted. refresh_sheets_chart("10QnVUx1X2qHsL17WUidGpPh_SQhXYx40CgIxaKk8jU4", "1107320627")
Ruby
# Refresh an existing linked Sheets chart embedded in a presentation. requests = [{ refresh_sheets_chart: { object_id_prop: presentation_chart_id } }] # Execute the request. req = Google::Apis::SlidesV1::BatchUpdatePresentationRequest.new(requests: requests) response = slides_service.batch_update_presentation(presentation_id, req) puts "Refreshed a linked Sheets chart with ID: #{presentation_chart_id}"