Date filter not working correctly when using MongoDB charts SDK

Hello MongoDB Developer Community,

I’m facing a problem while trying to embed some charts. I’ve been using MongoDB charts SDK a while but this is the first time using date filter on them.

I have a property dateStart in all documents of a collection called events :

I have a first filter on the property company which is an ObjectID and this filter is working fine.Note that, I’m injecting filter when instantiating the chart :

const chart = embedSdk.createChart({
        chartId,
        filter,
        height,
        showAttribution: false,
        renderingSpec: { version: 1, title: '', description: '' }
      });

But when I add my filter on dateStart, my charts are completely broken and are displaying incorrect values, zeros or nothing (blank chart). Here are queries that did not work in SDK :

  • First attempt with $and (works in aggregation pipeline, queries and query bar in MongoDB charts web interface ) :
      filter: {
        $and: [{ company: { $oid: companyId } }, { dateStart: { $gt: reportStart.toDate(), $lt: reportEnd.toDate() } }]
      }

Note that reportStart and reportEnd are Javascript Date objects obtained via moment instance but I’ve also tried directly using Javascript Date object.

  • Second attempt with (works in aggregation pipeline, queries and query bar in MongoDB charts web interface) :
      filter: {
        company: { $oid: companyId },
        dateStart: { $gt: new Date('2024-02-01'), $lt: new Date('2024-02-29') }
      }

I’ve read all blog post and even searched for Github issues that relates to my problem and none seems to solve it.

Am I missing something, how should I do to make those date filters work ?

Many thanks for your time and replies.

Hi Thomas

Sorry to hear about your issue with the date filter.

Using a JS Date() object works in the SDK filters.

For example:

const chart = embedSdk.createChart({
  chartId: "…",
  filter: { dateStart: { $gt: new Date("2024-02-01") } }
});

The second of your examples is a valid date filter example:

filter: {
        company: { $oid: companyId },
        dateStart: { $gt: new Date('2024-02-01'), $lt: new Date('2024-02-29') }
      }

If you see an empty chart, it might mean that the filter filtered all the data.
There might be no data with this company id for this period?
I would recommend to try with only a date filter and maybe use a wider range just to make sure there are documents in that timeframe.

When you use the JS date filter, do you see any errors in the browser console?
Are your filter fields (“company” and “dateStart”) allowed for embedding as this is required for using them in an embedding filter?

Another valid way to do date filters is the following:

const chart = embedSdk.createChart({
  chartId: "…",
  filter: { dateStart: { $gt: { $date: "2024-02-01" } } }
});

The aggregation example that you shared should also work if you use the “new Date()” approach or the $date approach. Note that toDate() will not work as it’s not valid JS.

I hope that helps and let us know if there is anything else we can help with.