Filter Embedded Charts
On this page
You can customize your embedded charts by appending various
query parameters to their iframe URLs or using the filter option
with the Charts Embedding SDK.
Note
To embed charts from your dashboards, you must configure embedding options on your data sources. For instructions, see:
You can filter embedded charts and charts on embedded dashboards.
Specify Filterable Fields
A chart Author specifies the fields that can be included in filters set by the embedding application code or added by chart viewers. A chart author can limit access to data by allowing only certain fields to be filtered. By default, no fields are allowed, meaning the chart cannot be filtered until you explicitly allow at least one field.
To define filterable fields:
Navigate to the dashboard that contains the chart where you wish to define filterable fields.
For the desired chart, click the button and select Embed Chart from the dropdown.
In the Allowed filter fields section, use the dropdown to select which fields chart viewers can use filter data in the chart. You can also manually type values to add fields not listed in the dropdown.
Note
This option only appears if you already have Unauthenticated or Authenticated embedding access enabled.
You can specify on which fields chart viewers can filter data by:
Using the dropdown to select the fields
Manually typing values to add fields not listed in the dropdown
Selecting Allow all fields in the data source used in this chart
When you have selected all desired fields, click Save below the dropdown.
Chart viewers and applications which render the chart can now use filters based on the specified fields to display subsets of the original chart data. If a viewer attempts to use a filter for a field not included in the Allowed filter fields list, MongoDB Charts returns an error.
Filters for Embedded Documents
When you add a field to the Allowed filter fields list whose value is an embedded document, you must also specify each individual sub-field you want to allow.
Example
Consider the following document:
{ "name": "Alice", "favorites" : { "color": "green", "animal": "turtle", "season": "autumn" } }
If you only add the favorites field to the list of allowed fields, it does
not grant viewers permission to filter upon any of the sub-fields
of favorites. Instead, you may add one or more of the sub-fields
to the list individually by specifying favorites.color,
favorites.animal, or favorites.season.
Filter Data on Charts Embedded in an iframe
Use the filter query parameter to only display data that matches a
specified MQL filter in your
chart embedded in an iframe.
You can use the filter query parameter on both
Unauthenticated
and Verified Signature charts. The filtering
behavior differs with each authentication setting:
With unauthenticated charts, the chart Author specifies the fields that can be included in filters set by the embedding application code or added by chart viewers. To learn how to specify filterable fields, see Specify Filterable Fields.
With charts which require a Verified Signature, all document fields can be filtered upon, however you must generate the filter in the server-side code and include the filter as part of your signed payload.
Filter Syntax
Select the appropriate tab to see an example of how to filter data in an Unauthenticated chart and a Verified Signature chart:
Filter Data on Charts Embedded with the SDK
You can add a filter to an embedded chart
with the filter option. Filtering allows the chart author to only display
data in the embedded chart which matches a specified MQL filter.
In the Embed Chart modal, you must specify any fields included in the filter. The Embed Chart modal contains a dropdown menu of fields on which to allow filtering.
The following uses the filter option to represent only documents in
which the total field is greater than 100:
createChart({ baseUrl: '<your-base-url>', chartId: '<your-chart-id>', width: 500, height: 500, filter: { "total": { "$gt": 100 } } })
Inject User-Specific Filters
When you embed a chart that requires Authenticated access,
you can use the Injected function setting to inject a
MongoDB filter document specific to each user who views
the chart. The function has access to your Embedding Authentication
Provider's token via context.token, and can filter the chart data
based on the token.
This filter ensures that viewers of an embedded chart see only their own data, which is useful when embedding charts with potentially sensitive information.
Note
If you use an Atlas App Services authentication provider, context.token
contains the App Services
user object to
filter. For example, if you enable
Custom User Data
for App Services users, the user object is available in
context.token.custom_data.
To inject a filter specific to each user, in the Authenticated tab of the Embed Chart dialog, set the Injected function setting to On. Specify a function and click Save.
Example
The following filter function only renders data where the
ownerId field of a document matches the value of
the Embedding Authentication Provider's token's sub field:
function getFilter(context) { return { ownerId: context.token.sub }; }