The need for an insightful dashboard, giving a bird’s eye view to stakeholders, has always been a welcoming deal for any organisation.
However, creating one that looks appealing in a short span of time, without writing any of that front-end & back-end code, seems like a dream.
Imagine you have a collection of restaurants, servings a myriad of cuisines to please your palate, American, Turkish, Irish and many more spread across the state. Now, if you are asked to present a visual representation of your data stored in MongoDB, on a dashboard, answering the following questions:
- How many restaurants are situated in the Manhattan Area?
- How many of these restaurants serve 🍕?
- Rating of restaurants based on different localities?
- Which are the top 15 most served cuisines?
- Comparison of most craved food items like 🍕,🍔, 🍩?
A plausible solution that comes to us in general is :
- Design & expose a set of optimized back-end APIs, triggering queries to your MongoDB collection.
- Choose a charting library.
- Write UI code to communicate with your back-end service.
- Operate on the data received from the back-end to an object data model as required by the charting library.
Considering all these points, you finally propose an estimate & prepare yourself to code, but suddenly some additional features are thrown your way:
- Implement drag-configurable UI.
- Implement role/permission-based access to your dashboard.
An instant reaction would be
Wouldn’t it be great if we could get a solution to all these statements with ZERO Code & lay down a beautiful
- Auto-updating
- Secured with role-based permissions
- Configurable layout
dashboard in just a few clicks.
I know you like the sound to it, so let’s get rolling.
Quickly hop on to MongoDB Atlas,sign-up if you haven’t & you will be logged on to a console which should look like below. Click on the charts option to the left of the screen.
In most cases, you will have your own existing data-set. If not, don’t worry, use the below command to get access to a huge data-set to play with MongoDB Charts.
wget -q -O- https://raw.githubusercontent.com/mongodb/docs-assets/primer-dataset/primer-dataset.json | mongoimport — host vision01-shard-00–00-r55zf.gcp.mongodb.net:27017,vision01-shard-00–01-r55zf.gcp.mongodb.net:27017,vision01-shard-00–02-r55zf.gcp.mongodb.net:27017 — ssl — authenticationDatabase admin — username <YOUR-USERNAME> — password <YOUR-PASSWORD> — db <DATABASE-NAME> — collection <COLLECTON-NAME> — type json
This command uses a utility Wget 1.20 for windows, which you can download here, this will import the data-set directly to your MongoDB instance based on the connection string.
Let’s start with adding the above collection as the data source for our dashboard. I will be choosing the ‘restaurants’ collections.
Move on to the ‘Data Sources’ tab & click on ‘New Data Source’.
Once you have it in place, click on the ‘Dashboard’ tab to add your first chart, to display the total number of restaurants ‘situated in the Manhattan area’.
- Select the chart type as ‘Text’ with ‘Number’ to display the total count.
- Drag the field ‘borough’ from the field list on the left to the aggregation column on it’s right.
- Select the aggregation option as ‘count’.
- You will have the view of your first chart updated instantly. You will notice that it’s depicting the complete count of restaurants in our collection, however, we wanted only the ones in Manhattan.
The favorite feature for me in MongoDB charts is the ability to write custom filters, so, let’s filter the restaurants that are located only in Manhattan.
{‘borough’:’Manhattan’}
- Add the title as ‘Situated In Manhattan Area’ & click on ‘Save and Close’.
Voila, we have our very first chart-representation in just under a minute.
On similar lines, we can prepare our second representation to depict the count of restaurants ‘serving pizza’ with a slight variation to our filter.
{‘cuisine’:’Pizza’}
Simple isn’t ?
Hope you would have liked the warm-up, let’s…
It will take some interesting work to build the representation for ‘Ratings Of Restaurants In All Locations’.
Here in our collection, we have a set of ‘grades’ as A, B, C, P, Z & with each ‘grade’, there is ‘score ’associated. We need to group all these data points together based on all distinct locations available.
We will be using the $unwind aggregation concept here.
- Choose the chart type as ‘Column’ with ‘Grouped’ representation.
- Bring all the localities i.e. ‘borough’ field on to the x-axis.
- Now we need separate documents as per the score field. Expand the grades array & drag the score field to the right panel, to plot the y-axis.
- Choose the unwind operation as the array reduction option & aggregate based on distinct fields.
- Drag the grades field to the ‘series ’option on the right, to unwind the array displaying all the grades/ratings of restaurants available at a location.
MongoDB charts also give you a bunch of customization options.
- Change the label names on the x & y-axis as ‘Localities ‘ & ‘Scores ‘respectively.
- You will notice, there are some ‘Localities’ with names as ‘Missing’ & few ‘Grade’ field values as ‘Not Yet Graded’.
- We will apply a quick filter to remove such irrelevant data to give some final touch up to our chart.
{
$and: [ { borough:{ $ne: 'Missing' }}, { 'grades.grade':{ $nin: ['Not Yet Graded'] }} ]
}
Let’s tackle one more interesting scenario to depict the ‘Top 15 Most Served Cuisines’ from our restaurant data-set.
- Choose the chart type as ‘Bar’ with ‘Stacked’ representation.
- Drag the ‘id’ field on to the right panel with the aggregate option as ‘Count’ to plot on the x-axis.
- Drag the ‘cuisine’ field on to the y-axis. You will see the chart updates instantly, with the count of all the different cuisines in our collection.
However, we need only the top 15.
- Toggle the ‘Limit Result’ radio & enter a value as 15.
- Perform a cleanup on the data by adding the below filter & customize the labels.
There you have it, one more beautiful chart in almost no time.
{ cuisine: { $nin: [‘Not Listed/Not Applicable’, ‘Other’] } }
Time for something sweet.
Here I will create a quick donut-chart representing ‘Comparison Of Popular Food Items’ using the below filter.
{cuisine:{$in:[‘Pizza’, ‘Hamburgers’, ‘Donuts’, ‘Hotdogs’]}}
Customize The Dashboard Layout
MongoDB Charts also offers a quick drag customization option, which you can utilize to create the dashboard layout that suits your visual design the most.
Can you lock down dashboard, according to roles or permission?
Yes, definitely.
MongoDB Charts give you full flexibility to allow certain folks in your team to make changes to your dashboard & others can be granted a readers-only role.
Set up Dashboard permissions, following this simple documentation.
MongoDB Charts, open a whole new dimension for creating stunning dashboards, not only for developers but also for management & administration teams in the organization with simple configurations & no code in quickest time.
When I started on with MongoDB charts, there were not much resources to follow, apart from some official documentation & personal understanding. However, now, kudos to MongoDB team for this cool video.
Do explore more & expand with your awesome use cases.
Hope you enjoyed reading & learned something new.
Don't’ feel shy to appreciate with some claps.
See you soon.
…
Like to learn through efficient hacks? We might use your quirky mind in our team! Join us in making the next life-centric digital solutions
