How to visualize your MongoDB data with Chartbrew

Last updated on Mar 4, 2024

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

Select the MongoDB connection from the list on the connection page:

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: 89.39.106.86

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

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:

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"

After we configure the dataset, we need to make a request so that Chartbrew can fetch some data for us. Click the "Get data" button and select the MongoDB Atlas connection we created above. Next, we are going to write a query in the code editor, run the query, and then, once satisfied with the data, press Build the chart.

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 liking. 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 Chart colors 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.

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

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: