This blog post has charts and yours could too!

MongoDB Charts brings dynamic visualization to your data and now you can embed those live charts and graphs into web pages, apps, blogs and more. And the best part - Embedded charts are really simple to deploy.

MongoDB Charts has been out in beta for a few months now, both on Atlas and on-premises. Charts provides the simplest and fastest way to create visualizations of your data stored in MongoDB, but up until now you could only view those charts if you had access to the Charts application. That works great for small teams, but not so much in cases where you have a larger audience or if you wanted to show your charts in a specific context like in an internal business application.

Everything changes now that we’ve added Embedding to MongoDB Charts on Atlas. Once you’ve created a chart using the Charts application, you’re free to share it with anyone you want by embedding it into any web site. Like this one! Want to find out how the weather has been in Sydney, Australia (the home of the Charts team)? Well, wonder no more! The below chart is embedded directly from MongoDB Charts and contains live data.

Let’s look at what was involved in embedding this chart. Since this is a public blog post and the data is not sensitive, I used the “Unauthenticated” authentication model for the embedded chart. To embed the chart, I simply chose “Embed Chart” from the finished chart’s ellipsis menu, and enabled Unauthenticated embedding for both the data source and chart:

Charts then helpfully provides an <IFRAME> snippet with the chart’s URL, which you can copy and paste into your website. Since the embedding is unauthenticated, anyone can find the <IFRAME> code in the page source, copy it and embed the chart wherever they want (try it!).

Now, you may be thinking that you want more control over who sees your charts and where they may be embedded. That's where the Verified Signature option comes in. With this option, the embedded chart needs a signature to allow it to render and you have control over who and how users get access to that signature. The following chart has been embedded using the more secure Verified Signature option:

Using this option requires a bit of extra effort, but as the name suggests it uses a digital signature for additional security. The URL to access the chart includes a timestamp and a signature, which is generated using a secret key on the server. This means that even if someone finds the URL for the embedded chart, it will stop working after a few seconds and they won’t be able to generate a new URL without the signing key.

Embedding a chart with the Verified Signature option starts out in a similar way, with the dashboard author enabling this type of embedding for both the data source and the chart:

However rather than just copying and pasting the <IFRAME> snippet, we need to generate the required URL on the server-side. It needs to be server-side, as the secret embedding key must not be discoverable to people viewing the source of the web page. The exact approach for generating the signature will depend on your chosen backend (e.g. Node, Java, C#), but ultimately it comes down to just a few lines of code to generate a signature using the HMAC algorithm. To help you out, we’ve created a Github repo of samples for various languages. In this blog post, we’ve used MongoDB Stitch as our backend - the code for this is included in the sample repo too.

We’re really excited about the potential for our new embedding features to make MongoDB Charts useful in a variety of new scenarios. Please give it a go, and we look forward to hearing your feedback.