Embedding SDK
On this page
You can embed a chart or dashboard into a web application with the Embedding SDK, allowing more flexible adjustments of settings and rendering.
To learn more, see Get Started with the Embedding SDK.
Install the Embedding SDK
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 @mongodb-js/charts-embed-sdk
directly in the browser.
<script src="https://unpkg.com/@mongodb-js/charts-embed-dom"></script>
If you are building a more complex web app and are using npm or
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:
yarn add @mongodb-js/charts-embed-dom
Examples
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 or dashboard ID and base URL.
The example app uses two SDK methods:
Method | Description | Args | Returns |
|---|---|---|---|
refresh() | Reloads the chart with the latest data from its
data source. | none | Promise<void> |
setFilter() | Filters your embedded chart based on a specified MQL filter document. Any fields included in the filter must be specified in the Embed Chart modal. See Filter Embedded Charts with the SDK. | filter object | Promise<void> |
Other examples are available in the MongoDB Embedding SDK Examples GitHub repository.