The MongoDB Charts Embedding SDK Beta has Launched 🚀

Scott Sidwell
February 12, 2020 | Updated: February 19, 2020
#Charts

MongoDB Charts on Atlas now supports embedding using a JavaScript SDK (in beta), allowing you to programmatically create and interact with your charts in your own application.

Embedded Charts have just got an upgrade in the latest release of Charts on Atlas. The new Charts Embedding SDK allows you to render and control MongoDB Charts directly in your application via JavaScript, without needing to touch any HTML. It’s never been easier to enrich your applications with live visualizations. This has been a long-awaited feature that makes it stunningly easy to enrich your web applications with live visualizations from your data.

This beta release allows you to render unauthenticated charts with the SDK. Support for rendering authenticated charts with the SDK will be coming a bit later on. If you need a more secure embedding solution in the meantime, you can continue to use the Verified Signature option for IFrame embedded charts.

What Can You Do With the Embedding SDK?

The best way to show you is to demo it! The chart below was embedded using the Embedding SDK. Note how we are able to refresh the chart on demand and dynamically change what filters are applied to the chart using the drop-down.

Embedded MongoDB Chart Filtering — Explore this example yourself

Why Use the SDK Over the Existing IFrame Approach?

Previously, as a developer, you could only embed charts into your application by copying and pasting an IFrame snippet which you then inserted in your web application. While this worked for a number of users, others asked for a richer experience. The IFrame approach, while simple to integrate, delivers charts that can’t be programmatically controlled. For example, if you wanted to change a filter or theme after the chart was rendered on a page, you had to refresh the page to see a change in the chart. With the new SDK, not only can you now interact with a chart using JavaScript, but you will also have a better developer experience.

How Can I Get Started?

The easiest way to get started with the SDK is to include a script tag in the header of your page.

<html>
  <head>
     <script src="https://unpkg.com/@mongodb-js/charts-embed-dom@beta"></script>  
  </head>
  <body>
    <div id="chart" />
    <script>
      // use the SDK here via ChartsEmbedSDK
    </script>
  </body>
</html>

For larger projects, you can install the SDK using NPM.

npm install @mongodb-js/charts-embed-dom@beta --save

Once you’ve installed the package or added it to your page, you will need to configure it with the appropriate values for the chart you’re wishing to embed.

// when using npm:
// import ChartsEmbedSDK from '@mongodb-js/charts-embed-dom';

const sdk = new ChartsEmbedSDK({
  baseUrl: BASE_URL
});

const chart = sdk.createChart({ chartId: CHART_ID }); 
chart.render(document.getElementById('app'));

To get the ‘BASE_URL’ and ‘CHART_ID’, you’ll need to open up https://charts.mongodb.com and navigate to the ‘Embed Chart’ dialog for your chart. Here you can enable unauthenticated sharing, as well as click the ‘Javascript SDK’ tab to see the ‘Chart ID' and 'Base URL’.

Embed Charts

With these in hand, you can return to your code editor and fill in the missing pieces

// when using npm:
// import ChartsEmbedSDK from '@mongodb-js/charts-embed-dom';

const sdk = new ChartsEmbedSDK({
  baseUrl: 'https://charts.mongodb.com/charts-charts-fixture-tenant-zdvkh'
});

const chart = sdk.createChart({ chartId: '48043c78-f1d9-42ab-a2e1-f2d3c088f864' }); 
chart.render(document.getElementById('app'));

From here, you can call methods on the chart object like chart.setFilter({ ‘address.country’: 'Australia' }) to apply custom filters to your chart (assuming you’ve whitelisted the address.country field in the Embed Dialog) and chart.setRefreshInterval(1000) to set how often a chart should refresh dynamically in your application.

Give It a Try

We’d love to find out how you’re using the Charts Embedding SDK. If you have any questions, feel free to use the in-product chat, or if you have suggestions on how to improve anything in Charts, use the MongoDB Feedback Engine.

If you haven’t tried Charts yet, you can get started by signing up for MongoDB Atlas for free.

← Previous

Filter Your Dashboards with MongoDB Charts

MongoDB Charts on Atlas now supports dashboard-level filters, allowing you to quickly change the context of a single dashboard to better focus your analysis.

February 12, 2020

Next →

Introducing: Atlas Operator for Kubernetes

The MongoDB Enterprise Operator serves to automate and manage MongoDB clusters on self-managed infrastructure. While this integration has provided complete control over self-managed MongoDB deployments from a single Kubernetes control plane, we’re taking it a step further by extending this functionality to our fully-managed database—MongoDB Atlas. We’re excited to introduce the trial version of the Atlas Operator for Kubernetes. The Atlas Operator will allow you to manage all your MongoDB Atlas clusters without ever having to leave Kubernetes. Keep your workflow as seamless and optimized as possible by managing the lifecycle of your cloud-native applications from where you want most. With the trial version of this Atlas Operator, you can provision and deploy fully-managed MongoDB Atlas clusters on the cloud provider of your choice through Kubernetes. This provider is especially important for those seeking to unlock the power of multi-cloud with unique tools and services native to AWS, Google Cloud, and Azure without any added complexity to the data management experience. With this new Atlas Operator, you get the best of all clouds with multi-cloud clusters on Atlas , coupled with the freedom to run your entire stack anywhere, all while managed in one central location. The “trial version” simply means it has all the core functionality to provision fully-managed Atlas clusters, but the bells and whistles are yet to come. In addition to encapsulating core Atlas functionality, it ensures Kubernetes Secrets are created for each database user which allows for easier management of sensitive data. The Atlas Operator also allows you to create IP Bindings so your applications can securely access clusters. If you’re interested in using the trial version of the Atlas Operator today, follow our quickstart guide below to get started! Quickstart Below you’ll find the steps to create your first cluster in Atlas using the Atlas Operator. Note that you need to have a running Kubernetes cluster before deploying the Atlas Operator. Register/Login to Atlas and create API Keys for your Organization. This information together with the Organization ID will be used to configure the Atlas Operator access to Atlas. Deploy the Atlas Operator kubectl apply -f \ https://raw.githubusercontent.com/mongodb/mongodb-atlas-kubernetes/main/deploy/all-in-one.yaml Create a Secret containing connection information from step one. This Secret will be used by the Atlas Operator to connect to Atlas: kubectl create secret generic mongodb-atlas-operator-api-key \ --from-literal="orgId=<the_atlas_organization_id>" \ --from-literal="publicApiKey=<the_atlas_api_public_key>" \ --from-literal="privateApiKey=<the_atlas_api_private_key>" \ -n mongodb-atlas-system Create AtlasProject Custom Resource: cat <<EOF | kubectl apply -f - apiVersion: atlas.mongodb.com/v1 kind: AtlasProject metadata: name: my-project spec: name: Test Atlas Operator Project projectIpAccessList: - ipAddress: "0.0.0.0/0" comment: "Allowing access to database from everywhere (only for Demo!)" EOF Create AtlasCluster Custom Resource cat <<EOF | kubectl apply -f - apiVersion: atlas.mongodb.com/v1 kind: AtlasCluster metadata: name: my-atlas-cluster spec: name: "Test-cluster" projectRef: name: my-project providerSettings: instanceSizeName: M10 providerName: AWS regionName: US_EAST_1 EOF (You'll have to wait until the cluster is ready - "status" field shows "ready:true":) kubectl get atlasclusters my-atlas-cluster -o=jsonpath='{.status.conditions[?(@.type=="Ready")].status}' True Create a Secret for the password that will be used to log into Atlas Cluster Database kubectl create secret generic the-user-password \ --from-literal="password=P@@sword%" Create AtlasDatabaseUser Custom Resource (references the password Secret) cat <<EOF | kubectl apply -f - apiVersion: atlas.mongodb.com/v1 kind: AtlasDatabaseUser metadata: name: my-database-user spec: roles: - roleName: "readWriteAnyDatabase" databaseName: "admin" projectRef: name: my-project username: theuser passwordSecretRef: name: the-user-password EOF Shortly the Secret will be created by the Atlas Operator containing the data necessary to connect to the Atlas Cluster. You can mount it into your application Pod and read the connection strings from the file or from the environment variable. kubectl get secrets/test-atlas-operator-project-test-cluster-theuser \ -o=jsonpath="{.data.connectionString.standardSrv}} | base64 -d mongodb+srv://theuser:P%40%40sword%25@test-cluster.peqtm.mongodb.net Stay Tuned for More Be on the lookout for updates in future blog posts! The trial version of the MongoDB Atlas Operator is currently available on multiple marketplaces, but we’ll be looking to make enhancements in the near future. For more information, check out our MongoDB Atlas & Kubernetes GitHub page and our documentation .

April 8, 2021