Personalize your Embedded Charts with Custom Filters

MongoDB Charts now allows developers to embed charts with customizable filters, resulting in more personalized visualizations for users.

A couple of months ago we introduced embedding in MongoDB Charts, and I showed you how to use both anonymous and verified signature authentication modes to put some snazzy visualizations into a blog post. Since then we’ve seen many great examples of developers adding beautiful charts to their applications with next to no coding effort required. However one big limitation with Charts embedding was that every user loading an embedded chart always saw the exact same information. There wasn’t any way to provide users with a personalized view of data based on their identity or their preferences.

Today we are excited to show off some improvements to embedding in MongoDB Charts that make it possible to build a much more personalized experience. First and foremost, a developer can now specify a custom filter to use when rendering an embedded chart, telling Charts to load a subset of the available data that is appropriate for the current user. Here are just a few examples of how you could use this:

  • Showing a user’s own personal fitness data, from a collection containing data for many users
  • Showing a sales rep just the data pertaining to their own region, from a collection containing data for multiple regions
  • Showing a user some data for a specific time period, chosen by the user from a dropdown control.

Here’s an example of the third scenario, where you as the user can decide what date range you want to see from this dataset tracking the temperature in Sydney.

Number of days to show:

​

The crux of this feature is that the embedding URL loaded into the IFRAME can now specify a filter query string parameter whose value is an MQL filter document, like { userId: ‘tomh’ }. This filter (in addition to any filters baked into the chart definition) is applied at the time the chart is rendered. For security reasons, we only allow this feature to be used with the Verified Signature authentication model. If it were enabled for Unauthenticated embedded charts, anyone could apply whatever filters they wanted to a chart, potentially uncovering sensitive details from seemingly benign aggregated data. By requiring the Verified Signature model, you can make sure that users can only filter the chart in a way that you allow, or not at all.

Another limitation of the initial release of embedding was that there was no way of refreshing a chart without reloading the entire IFRAME. We’ve also addressed this in our newest release, by allowing developers to specify an optional autorefresh query parameter in the IFRAME URL. If set to a number greater than or equal to 10, the chart will automatically reload after the specified number of seconds have elapsed. Unlike the filter parameter, autorefresh can be used with Unauthenticated charts as well as with the Verified Signature model.

A Deeper Dive

The Verified Signature authentication model for Charts embedding is designed to ensure that the IFRAME URL for a chart was generated by the developer’s code and not tampered with by an end user. It works by generating an HMAC digital signature for the URL, signed using the Embedding Key that is available in the Charts Admin Settings page. For this method to be secure, the Embedding Key must never be available to the client, so the signing must be done in server-side code.

To implement custom filters on an embedded chart, you need to extend the server-side code to add the MQL filter document to your query string, before that payload is digitally signed with the Embedding Key. To maintain security, you should not accept complete query documents from the browser. Instead, you should either create the full query document on the server, such as filtering based on the user ID of the logged in user, or generate a document from sanitized user input.

In the example embedded in this article, the dropdown control provides options controlling the number of days of weather data to view. The chosen value is passed to the backend function which generates the signed URL—in this case I’m using a MongoDB Stitch function, but you’re free to use your choice of backend. The backend function then validates that the number of days is within the expected range, and if so creates a filter document like this:

const FILTER_DOCUMENT = { observationDate : { $gte: { $date: new Date(new Date() - numDays * 24 * 60 * 60 * 1000).getTime()}}};

That filter document is then URL encoded, appended to the end of the query string, and the entire URL is then signed using the Embedding Key and returned back to the browser to load into an IFRAME.

To see complete examples of how to use both filtering and autorefresh with embedding, the Charts Embedding Examples have been updated, with samples available for Node.js, C#, Python, Java, PHP and MongoDB Stitch. We hope you find these updates a great addition to embedding in MongoDB Charts!

← Previous

BI Connector: Mapping Document Structures to Relational Schema - Part 1

Take control of the BI Connector and take control of your document/relational mapping with this introduction to how BI Connector translates your rich documents into rigid SQL schemas.

August 8, 2019
Next →

Building a Culture of Growth: SVP Simon Eid on MongoDB's Massive Opportunity in APAC

Simon Eid is Senior Vice President Asia-Pacific (APAC) at MongoDB and leads the sales teams across Australia and New Zealand, India, ASEAN, and Japan. Simon's go-to-market organisation in APAC is growing rapidly and has nearly tripled in size in the past three years. They are hiring in all regions . In this article, Simon discusses MongoDB’s opportunity in APAC and how he builds a culture of growth and accountability. Simon Eid, SVP APAC, MongoDB (left) and Anoop Dhankar, RVP ANZ, MongoDB (right) MongoDB's opportunity in Asia-Pacific Out of the top 13 economies by GDP in the world , five of them are located in APAC: China, Japan, Australia, India, and South Korea. And that's to say nothing of the ASEAN countries which alone have more than 650 million inhabitants. Combine this with the worldwide database market, one of the largest markets in the software industry. IDC estimates that it will grow to $137B in 2027, and MongoDB has just reached $1B in ARR. This gives you a sense of the massive market opportunity we have globally. Regardless of industry, product, or service, almost every company is becoming a technology company, which means that every company is becoming a data company. We believe MongoDB is the Developer Data Platform that is best placed to support and accelerate that trend. We’ve already captured thousands of customers around the globe, but it’s important to keep in mind that our world is still in the early stages of shifting to the cloud and changing how applications are built and run. Compared to other software, what's special about the market we play in is that the database is not a “nice-to-have”; it’s mission-critical for organisations. As our world continues to undergo this digital transformation, we have the opportunity to transform how our customers use software and data to innovate, create, and disrupt industries. For example, look at Cathay Pacific , Hong Kong's home airline carrier operating in more than 60 destinations worldwide. The company's digital team turned to MongoDB on their journey to become one of the first airlines to create a truly paperless flight deck. Flight Folder, their application built on MongoDB, consolidates dozens of different information sources into one place. Since the Flight Folder launch, Cathay Pacific has completed more than 340,000 flights with full digital integration in the flight deck. Their innovation is enabled by MongoDB. Building a team across regions and cultures Our team in APAC is unique because of the different markets and cultures within the region. What this means is that we go to market differently in India than we do in Australia, in Singapore than we do in South Korea, and so on. Each market is completely different, but within all of them, there is a huge opportunity. Different from many of our peers, in APAC we've established business leaders who run regionalized teams in India, ASEAN, and ANZ with all functions reporting to them. These teams essentially operate as their own business and implement local best practices into their strategy. But, it doesn’t mean they’re operating in a silo. At the leadership level, there is an immense amount of collaboration and sharing of experiences to identify what’s working and what isn’t within each region. We also have a fantastic global sales organisation that rolls out extensive training and best practices to help enable our local teams to best help our customers and grow the business. Members of our APAC team at a recent offsite in Phuket Culture The most important thing is culture. We have a very high standard around everything we do and how we interact with each other. We don’t entertain politics. You can teach someone new skills and coach them on how to be successful in a new role, but if they’re not aligned with the culture, they will not be a fit. It’s a non-negotiable for me and why the most important aspect of the hiring process is the cultural aspect. If you get the culture right, everything else starts to fall into place. What I hear at MongoDB and from the teams I've built at other companies is that this is the kind of culture they can really thrive and grow. At MongoDB, our culture is defined and shaped by six core values . One of the values that’s most important to my team is “Embrace the Power of Differences”. Within APAC, there are a variety of cultural identities and nuances that can often be difficult to navigate, whether it is cultural values, beliefs, or go-to-market strategy. It’s important that everyone who joins my team is respectful of each other’s regional culture. What we’ve done within the APAC region, and with teams across the globe, is take everyone on a journey to understand and embrace these cultural differences. Our role as leaders is to develop our teams, from the bottom all the way up, which is part of MongoDB’s BDR to CRO career development initiative. We need to develop the next wave of leaders so that they’re prepared to step up when the time comes. For APAC, this means that regardless of where someone is from, each team member has been coached and developed on the cultural nuances so that they can lead people and go to market in each of the different regions. It’s also important that each team member contributes to a culture of psychological safety. Being part of a high-growth tech company requires taking risks and making mistakes. We have a high standard and we hold each other accountable, but it never comes at the cost of creating an environment where people are afraid to fail. When someone faces setbacks, I encourage them to share those experiences so that we can collectively learn. Through mutual support, we foster a stronger team capable of delivering exceptional results. The future of MongoDB in Asia-Pacific For any organisation to be successful, I believe it’s critically important for the entire ecosystem to act as one. As I mentioned earlier, at MongoDB the whole country ecosystem is aligned around one set of goals, so it's not a case of different teams running off in different directions. The teams are willing to lean in and do what's required to help each other build a great business. I can confidently say that in APAC, we are one team. This means sales, marketing, customer success, solutions consulting, and professional services all working together to focus on three things: making customers successful, building technical champions, and driving new workloads. As we continue to grow our team and MongoDB’s footprint in the region, these are the three things that will drive our success. As I mentioned earlier, there's a huge opportunity for MongoDB in APAC. Despite hiring slowing down or stopping completely at many other organisations, we're continuing to invest heavily in the region. To give you a sense of that - we've nearly tripled the size of our APAC go-to-market team in the past three years, and we've got more open roles across the different functions and regions. If you want to be part of this journey, there are three things I want to reiterate: First, we are extremely passionate about our culture, from the field level up to the leadership level. As a team, this is the brand we bring to the market. Second, the opportunity here is massive based on the total addressable market and our current share. And third, we place critical importance on development. By joining this team, I can promise that you’ll be provided with countless opportunities to develop your career and make an impact. I’m confident in my team and the leadership we have in place who are ready to take MongoDB APAC to the next level. Join us !

September 28, 2023