Dashboard filtering not working in SDK

MongoDB Atlas MongoDB Charts
1

Hello,

Here is my code:

<!-- Include the MongoDB Charts Embedding SDK -->
<script src="https://unpkg.com/@mongodb-js/charts-embed-dom@3.1.0/dist/charts-embed-dom.umd.min.js"></script>
<script>
    async function renderDashboard() {
      const sdk = new ChartsEmbedSDK({
        baseUrl: 'https://charts.mongodb.com/charts-project-0-kuacs', // Replace with your base URL
      });
    
      const dashboard = sdk.createDashboard({
        dashboardId: '6483b793-7171-4c2e-8dea-122ef63e26a0', // Replace with your dashboard ID
        // other options
      });

      // Extract brand and model from the URL
      const pathArray = window.location.pathname.split('/');
      const brand = pathArray[2];
      const model = pathArray[3];

      // Set the filter
      const collectionName = brand + " " + model;
      console.log("collectionName: " + collectionName);
      const filter = { 'collection': collectionName };
      dashboard.setFilter(filter);


      
    
      await dashboard.render(document.getElementById('dashboard'));
    }
    
    // Call renderDashboard after the window has loaded
    window.onload = function() {
      renderDashboard();
    };
</script>

I checked the console log it is right. I have allowed the filter in the dashboard.

What is wrong?

2

Hi @Vivien_Richaud -

Can you describe/show the behaviour you are seeing?

Tom

3

I have found the solution:

<script>
    async function renderDashboard() {

    // Extract brand and model from the URL
      const pathArray = window.location.pathname.split('/');
      const brand = decodeURIComponent(pathArray[2]);
      const model = decodeURIComponent(pathArray[3]);

      // Set the filter
      const collectionName = brand + " " + model;
      console.log("collectionName: " + collectionName);


      const sdk = new ChartsEmbedSDK({
        baseUrl: 'https://charts.mongodb.com/charts-project-0-kuacs', // Replace with your base URL
      });
    
      const dashboard = sdk.createDashboard({
        dashboardId: '6483b793-7171-4c2e-8dea-122ef63e26a0', // Replace with your dashboard ID
        // other options
        filter: {'collection': collectionName }
      });


    
      await dashboard.render(document.getElementById('dashboard'));
    }
    
    // Call renderDashboard after the window has loaded
    window.onload = function() {
      renderDashboard();
    };
</script>