Docs Menu

Embed Charts with the Embedding SDK

On this page

  • Installation
  • Examples

You can embed a chart into a web application with the Charts Embedding JavaScript SDK, allowing more flexible adjustments of settings and rendering.

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:

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

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:

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.

Note

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.

Give Feedback
© 2021 MongoDB, Inc.

About

  • Careers
  • Legal Notices
  • Privacy Notices
  • Security Information
  • Trust Center
© 2021 MongoDB, Inc.