Embed Charts with an iframe

Select a dashboard.

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

Select a chart.

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

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.

Select the Unauthenticated tab in the dialog window.

click to enlarge

Toggle Enable unauthenticated access to On.

(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.

Alternatively, you can specify all the fields in your chart by selecting Allow all fields in the data source used in this chart.

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

Select the panel labeled Iframe.

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

Set options.

1. The refresh 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.

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.

(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.

Go to Charts.

If Atlas Charts is not already displayed, click the Charts tab in the Atlas UI.

Atlas launches an instance of Charts linked to your project.

Select a dashboard.

From your dashboard page, select the dashboard containing the chart for which you want to enable embeddings.

Select a chart.

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

Enable external sharing on the data source.

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

Enabled signed authentication.

1. Select the Verified Signature tab in the dialog box.

2. Toggle Enable signed authentication access to On.

The HTML code that appears in the modal window shows the required parameters for sharing a chart with authentication enabled. To use this code, you must continue with the subsequent steps to enable authenticated access.

Go to the Embedding page.

Click Embedding under the Development heading in the sidebar.

The Embedding page displays.

Go to the Authentication Settings view.

Click the Authentication Settings tab.

The Authentication Settings tab displays.

Generate an embedding key.

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

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:

• Node.js

• C#

• Java

• Python

• MongoDB Stitch