Navigation
This documentation refers to the MongoDB Charts service in MongoDB Atlas. Read the on-premises documentation to learn how to use the MongoDB Charts on site.

Embed a Chart Authenticated with Google Sign-In

This tutorial shows you how to configure a sample application to render an embedded, Google-authenticated chart on a web page.

Users must sign in with their Google account to view the chart. If a user doesn’t sign in with Google, Charts doesn’t render the authenticated chart view.

Prerequisites

Procedures

Enable Authenticated Embedding for your Chart

Enable authenticated embedding to generate a chart ID and Charts Base URL. You will need your chart ID and Charts Base URL to display your chart on a web page.

1

Select a dashboard.

From your dashboard page, select the dashboard containing the chart you wish to embed.

2

Select a chart.

From the dashboard, click ellipsis icon at the top-right of the chart to access its embedding information. Select Embed Chart from the dropdown menu.

3

Enable external sharing on the data source

If you have already enabled external sharing on the data source this chart uses, skip this step. If you haven’t yet enabled embedding on the data source, you can do so now. Click the Configure external sharing link.

4

Select the Authenticated tab in the dialog window.

Embed authenticated chart
5

Toggle Enable authenticated access to On.

6

(Optional) Specify a filter function to inject per user.

You can specify a function to inject a MongoDB filter document for each user who views the chart. The function has access to your Embedding Authentication Provider’s token via context.token, and can filter the chart data based on the token.

This filter ensures that viewers of an embedded chart see only their own data, which is useful when embedding charts with potentially sensitive information.

Example

The following filter function only renders data where the ownerId field of a document matches the value of the Embedding Authentication Provider’s token’s sub field:

function getFilter(context) {
  return { ownerId: context.token.sub };
}
7

(Optional) Specify filterable fields for your chart.

Specify the fields on which chart viewers can filter data. By default, no fields are whitelisted, meaning the chart cannot be filtered until you explicitly whitelist at least one field.

To learn more about filterable fields, see Specify Filterable Fields.

8

Copy the Chart ID and Chart Base URL

Use these values in your application code together with your Embedded Authentication Provider attributes to embed your chart.

Create a Google Client ID

Create a Google API Console project to generate a Google Client ID. You will need your Google Client ID to configure Charts to use Google Sign-In.

To create a Google API Console project, see Integrating Google Sign-In into your web app.

Configure Charts to use Google Sign-In

1
2

From the Embedding Authentication Providers section, click Add New Provider.

3

In the Name field, enter a descriptive name for the provider.

4

From the Provider list, select Google.

5

In the Google Client Id field, enter the Google Client ID you created.

6

Click Save.

Create a Web App to Display Your Chart

MongoDB offers a pre-built example app that shows how to use the Embedding SDK to display an embedded chart using Google authentication.

To run the example app, clone the MongoDB Charts Embedding Example - Google Authentication repository from GitHub and follow the instructions in the Readme file to begin using the app. You can run the app as-is with a sample chart, or you can customize it to use an existing chart.

Customize the Node.js App

All the lines you need to edit are marked with a comment containing ~REPLACE~.

After you finish customizing the app, it’s ready to run.

1

Open the file index.html in a text editor.

The file index.html is located in the root directory of the authenticated-google project.

2

Enter your Google Client ID

Replace the existing Google Client ID with your Google Client ID.

<!-- Optional: ~REPLACE~ content with your Google Client ID -->
<meta
  name="google-signin-client_id"
  content="012345678910-ifpoccch8js9srh9obfdn683h1iss2ag.apps.googleusercontent.com"
/>

Your Google Client ID is visible after creating a Google API Console project. See Create a Google Client ID for instructions on creating a Google Client ID.

3

Enter your Charts Base URL

Replace the existing baseUrl with the Base URL of the chart you want to display.

const sdk = new ChartsEmbedSDK({
  baseUrl: "https://charts-dev.mongodb.com/charts-exampleproject-fjotk", // Optional: ~REPLACE~ with your Charts URL
  getUserToken: () => id_token
});

Your Charts Base URL is visible in the embedding options modal window. See Embed Charts with the Embedding SDK for detailed instructions on enabling embedding for a chart.

4

Enter your chart ID

Replace the existing chartId with the ID of the chart you want to display.

const chart = sdk.createChart({
  chartId: "example-acaf-4af0-8320-5099bfebd1bd", // Optional: ~REPLACE~ with your Chart ID
});

Your chart ID is visible in the embedding options modal window. See Embed Charts with the Embedding SDK for detailed instructions on enabling embedding for a chart.