Filter Embedded Charts

Specify Filterable Fields

A chart Author specifies the fields that can be included in pre-filters and 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 pre-filtered or filtered. By default, no fields are allowed, meaning the chart cannot be pre-filtered or filtered until you explicitly allow at least one field.

To define filterable fields for pre-filters and filters:

1. Navigate to the dashboard that contains the chart where you wish to define filterable fields.

2. For the desired chart, click the button and select Embed Chart from the dropdown.

3. 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.

   To specify on which fields chart viewers can pre-filter or filter data, you can:

   • Use the dropdown to select the fields.

   • Manually type values to add fields not listed in the dropdown.

   • Select Allow all fields in the data source used in this chart.

4. When you have selected all desired fields, click Save below the dropdown.

Chart viewers and applications which render the chart can now use pre-filters and 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, Atlas Charts returns an error.

{
  "name": "Alice",
  "favorites" :
  {
    "color": "green",
    "animal": "turtle",
    "season": "autumn"
  }
}

Pre-Filter Data on Charts Embedded in an iframe

Use pre-filters for embedded charts and dashboards with large numbers of collections. Pre-filters run at an earlier stage in the embedded chart's pipeline and allow you to do the following:

• Filter the data early, to reduce the query running time.

• Apply filters before the query execution for chart queries that contain aggregations.

Pre-filters behave exactly as filters and use the same syntax. Their only difference is that they run after the chart views and before the start of the charts queries and filters. To learn more about the order of pipeline segments, see aggregation pipeline.

Use the preFilter query parameter to filter data before the chart query starts running, for the chart embedded in an iframe.

You can specify an MQL document as your preFilter query parameter provided that the fields used in your filter are in the list of allowed filterable fields.

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.

https://charts.mongodb.com/charts-atlasproject1-piocy/embed/charts?
id=93584ddb-1115-4a12-afd9-5129e47bbb0d&
filter={"imdb.rating":%20{$gte:%208}}&
autoRefresh=60

{"imdb.rating": {$gte: 8}}

{ "quantity": { $gte: 20 } }

{ $or: [ { quantity: { $lt: 20 } }, { price: 10 } ] }

https://charts.mongodb.com/charts-atlasproject1-piocy/embed/charts?
id=93584ddb-1115-4a12-afd9-5129e47bbb0d&
timestamp=1564156636&
expires-in=300&
filter=%7B%22imdb.rating%22%3A%20%7B%24gte%3A%208%7D%7D&
autoRefresh=60&
signature=8e0d92b33934c928f6c6974e2f0102ace77f56d851cb0d33893e84c359ab1043

{"imdb.rating": {$gte: 8}}

Pre-Filter Data on Charts Embedded with the SDK

You can add a preFilter to an embedded chart with the preFilter option. Pre-filtering allows the chart author to run a filter after the chart views and before the chart query execution and chart's filters.

In the Embed Chart modal, you must specify fields you want to include in the pre-filter. The Embed Chart modal contains a dropdown menu of fields on which to allow filtering.

The following uses the preFilter option to represent only documents in Australia:

createChart({
  baseUrl: '<your-base-url>',
  chartId: '<your-chart-id>',
  width: 500,
  height: 500,
  preFilter: { "address.country": "Australia" }
})

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 fields you want to include 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 } }
})

function getFilter(context) {
  return { ownerId: context.token.sub };
}