Navigation

Embed Charts with an iframe

On this page

You can embed a chart into a web application with an iframe and specify settings such as height, width, refresh interval, and display theme.

Charts embedded within an iframe may be either:

  • Unauthenticated, in which case they are viewable by anyone.

  • Authenticated with a Verified Signature.

    Note

    Authentication with a Verified Signature is deprecated. The Embedding Charts SDK offers authentication through several authentication providers.

Prerequisites

Procedure

1

Select a dashboard.

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

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 Unauthenticated tab in the dialog window.

Embed unauthenticated chart
5

Toggle Enable unauthenticated access to On.

6

(Optional) Specify filterable fields for your chart.

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

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

7

Select the panel labeled Iframe.

Selecting the Iframe panel reveals the iframe embedding code and allows you to set autorefresh and display theme options.

8

Set options.

  1. The autorefresh interval determines how often your chart refreshes with new data, if any, from your data source.
  2. You can select the Light or Dark display theme for your chart.
9

Copy the iframe embedding code.

The iframe embedding code contains your chart’s base URL and chart ID, as well as any options you have set.

10

(Optional) Set additional options.

You can edit the iframe code manually to set several other chart options, including height, width, and border radius. See Embedded Chart Options for more information about chart options.

Important

Using a Verified Signature for authentication is deprecated. Instead, refer to the Authenticated Embedding tab for instructions on securing your charts.

1

Select a dashboard.

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

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 Verified Signature tab in the dialog window.

5

Toggle Enable signed authentication access to On.

6

Toggle the switch marked Enable signed authentication access to On.

The HTML code which appears in the modal window shows the parameters which are required to share a chart with authentication enabled, but it is not usable as-is. Continue with the subsequent steps to enable authenticated access.

7

Go to Charts Settings to acquire an embedding key.

Click the Charts Settings link below the HTML code snippet in the modal window.

Note

You must be a Project Owner to access the Charts Settings page. For users with the Project Owner role, the Charts Settings link appears in the top right corner of the MongoDB Charts UI. As a non-admin user, you can still use embedded charts, but you will need to ask a Project Owner for a key.

8

Generate an embedding key.

Click the Generate New Key button to create a new embedding key. Store the key in a safe place.

Warning

If you generate a new key, any previous keys become invalid. Ensure that all the existing shared charts that use the old key are updated to use the new key.

9

Create the server-side code necessary for a verified signature.

Generating a verified signature to accompany data requests from shared charts with authentication enabled requires server-side code. The verified signature creates a payload by generating a HMAC from your embedding key, a timestamp, and identifying data from your chart. The verified signature is valid for a limited time period specified in your server-side code.

Code examples demonstrating how to generate a verified signature are available for the following languages and platforms:

10

(Optional) Set additional options.

You can edit the iframe code manually to set several other chart options, including height, width, and border radius. See Embedded Chart Options for more information about chart options.

After your iframe code is ready with any options you’ve set, you can place it in a web page to display your chart.