Navigation

Embed Charts with an iframe

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.

1

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

2

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

3

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
Embed unauthenticated chart
5
6

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

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

8
  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

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

10

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.

Give Feedback