How to visualize your MongoDB data with Chartbrew
7 min read

How to visualize your MongoDB data with Chartbrew

Chartbrew is an open source visualization platform where you can pull data from different sources and create insightful dashboards. With Chartbrew you can connect to your MongoDB database and create charts that tell you more about your data.
How to visualize your MongoDB data with Chartbrew

This tutorial will walk you through the how-to process and show you real examples of charts that you can interact with right here in this blog post. All the charts are generated from a sample database hosted on MongoDB Atlas. Let's get started!

Connecting to your database

In the connections screen, we'll need to select the MongoDB connection from the list.

Chartbrew data source list
The connection list
MongoDB data connection form
The MongoDB connection form

The next step is to enter the connection details for your MongoDB database. It can be different depending on where you host your database, so we are going to look at three different use-cases below:

  • VPS (for example, DigitalOcean, Hetzner, Vultr)
  • Heroku with ObjectRocket
  • MongoDB Atlas

MongoDB hosted on a VPS

You might have a DigitalOcean droplet or your server rack in the closet and you are running your MongoDB database from there. For starters, it is recommended to create a new user with read-only access to your database. Log in to your database using the mongo command and create a new user like below:

use <your_db_name>
db.createUser(
  {
    user: "chartbrewUser",
    pwd: passwordPrompt(),  // or cleartext password
    roles: [{ role: "read", db: "<your_db_name>" }]
  }
)
Official MongoDB resource about creating users

Now that we have the new user, we can determine the connection string that we can use to query for the chart data. The string has the following format:

mongodb://chartbrewUser:<chartbrewUser_password>@mongo.example.com:27017/<your_db_name>

Enter this connection string in the Chartbrew form above and proceed to test the connection. If successful, press Save connection and jump to the next step in the tutorial.

You might need to allow remote connections to your database so that Chartbrew can reach it. Please read the article below that explains all the steps you need to know about allowing remote connections. Chartbrew's IP address from which the queries are made is: 188.226.145.211

How To Configure Remote Access for MongoDB on Ubuntu 20.04 | DigitalOcean
This tutorial walks you through configuring a MongoDB installation to securely allow access from a trusted remote computer. This will involve updating your firewall rules to provide the remote server access to MongoDB’s default port and changing Mongo’s configuration file to update its IP binding se…

MongoDB with ObjectRocket on Heroku

Using the ObjectRocket dashboard you can create a new user for your database. Ensure this user has read-only access to your database so that there is no risk of modifying the data in any way.

You can open your database dashboard using Heroku's CLI tool:

heroku addons:open ormongo

Once you have your new user or if you want to use an existing one, you can get your connection string with the following command:

heroku config:get ORMONGO_RS_URL

The command above will print a string in your terminal. Copy this and place in the Chartbrew connection form. Also, double-check to see if the user credentials are correct and they are from a read-only user. The final connection string should look similar to the following:

mongodb://chartbrewUser:[email protected]:12345/example_db?ssl=true

MongoDB on Atlas

Before we start, let's make sure we have a read-only user for your cluster that we can use with Chartbrew. Head over to your Atlas dashboard and create a new user from the Database Access section:

MongoDB to Chartbrew user
Create a read-only user in the Atlas dashboard

Next up, we want to make sure that Chartbrew can access your MongoDB database. This can be done by whitelisting Chartbrew's IP address from the Network Access section in your Atlas dashboard. The IP address you have to enter there is 188.226.145.211

Chartbrew connecting to MongoDB Atlas

After we have the user and the network configuration in place, we can proceed to get the connection details:

Connect to MongoDB cluster
Press the "Connect" for your desired cluster
MongoDB connect application
Select the 2nd option (recommended) to get the connection string
MongoDB connection string
And lastly, copy the connection string

Now that we have the connection string, we need to change it to contain the correct password and database name. Copy this string in Chartbrew's connection form and test the connection.

Testing the MongoDB connection

Once you have your connection string by following one of the methods above, you can test the connection directly in Chartbrew. Take a look at the screenshot below to see how it looks like when the connection is successful:

MongoDB dashboard connection
Successfully connecting to a MongoDB database

Once the connection is successful, press Save Connection and let's start visualizing!

Creating your first MongoDB chart

We have a connection, now let's query for some data and create our first chart. For this tutorial, the data comes from the sample data provided by MongoDB Atlas.

Create a chart with Chartbrew
Click "Create a chart" and write a summary for your visualization

Once we create the chart, we have to add at least one dataset to our visualization. The power of Chartbrew is that it allows you to add as many datasets to one single chart as you wish. These datasets can connect to different data sources, so you can visualize data from different databases and APIs on a single chart. This is powerful when you want to compare data from multiple sources.

Visualize datasets with Chartbrew
Creating a dataset named "Scrapes" and selecting our connection

After we configure the dataset, we need to make a request so that Chartbrew fetches some data for us. Click Make request and write your specific query in the code editor, run the query, and then, once you are satisfied with your data, press Done.

Query and visualize your MongoDB data

After Chartbrew has some data to work with, you can proceed to configure your visualization. Chartbrew tries to create a visualization for you, but you can change the X & Y Axes to your linking. You can select which operation you want on the Y-axis and filter the data directly in the interface if you haven't done so through the queries.

A timeseries MongoDB visualization in Chartbrew
A time-series MongoDB visualization in Chartbrew

From the Appearance tab, you can change the color of the dataset and you can further customize the look of the chart from the Chart settings panel on the left. Once your chart is ready, you can toggle the draft status off and head over to your dashboard to see your new chart.

Creating KPI charts

Key Performance Indicator (KPI) charts are useful when you want to see a quick view of your product or business metrics. You might want to see the total number of users, what's your revenue, or how many people engaged with your newsletter. In Chartbrew, you can create these types of charts.

The previous chart was a time series from the sample data showing when data was scraped. For the KPI chart, we are going to show how many of these have at least 3 beds.

MongoDB charts, KPI and metrics
Creating a KPI chart in Chartbrew

Notice that in this example, we used the filter to make sure we only get the listings that have at least 3 beds. Afterward, we need to switch the view in the upper-left corner to KPI View to get a raw number instead of the chart. Lastly, to get the right value, we need to accumulate the data using the Accumulation mode near the chart types. The KPI charts are displaying the last value in the chart, hence we always need to accumulate the data to get the sum of the values.

MongoDB visualization dashboard

For the final result, we can head over to the Dashboard to see our charts. Take a look at the screenshot below to see the charts we created in this tutorial, plus some extra ones to get more insights.

MongoDB visualization dashboard
Final MongoDB visualization dashboard

All these charts were made public and you can see them live in the public dashboard below:

Chartbrew - Visualize your data in one place
Chartbrew allows you to connect all your databases and APIs to create beautiful live charts and visualize your data
Public dashboard

Even more, you can embed these charts on other sites like blogs, Notion documents, custom websites, and more. Check out the live chart we built above:

Next steps

In this tutorial, we went through how to connect your MongoDB database to Chartbrew through different means, and how to create two different charts. The real power of Chartbrew is to combine the data from multiple sources into a single dashboard. Try connecting to APIs and other databases along with your MongoDB and see what cool insights you can get!


Do you have a Chartbrew account? Try it now for free and create your perfect dashboard:

Chartbrew - Visualize your data in one place
Chartbrew allows you to connect all your databases and APIs to create beautiful live charts and visualize your data