Embed Charts with the Embedding SDK¶
Features of the embedding SDK include:
- Add filters dynamically
- Change the size and style of the chart
- Refresh on demand
To embed a chart with the SDK, you need to:
- Enable embedding for the chart.
- Allow embedded chart filtering on certain fields by specifying filterable fields. Do not include fields that may reveal sensitive data.
- Have the chart ID and base URL strings.
If you have a simple web app, you can reference the Embedding SDK from a
script tag, and no installation is needed. You can use the UMD to run
directly in the browser.
If you are building a more complex web app and are using
yarn, you can install the Embedding SDK so that it can be used
directly from your script files.
To install the embedding SDK with
npm, use the following command:
npm install @mongodb-js/charts-embed-dom
To install with
yarn add @mongodb-js/charts-embed-dom
An example app using
the embedding SDK can be found at
codesandbox.io. The example app
demonstrates some of the interactive features available to the embedding
SDK, including an interactive filter and a manual refresh button.
The example app is configured with a chart ID and base URL which are particular to the app. Be sure to configure your own apps with the correct chart ID and base URL.
The example app uses two SDK methods:
Reloads the chart with the latest data from its data source.
Other examples are available in the MongoDB Embedding SDK Examples GitHub repository.