Atlas Charts

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";

async function renderChart() {

  const sdk = new ChartsEmbedSDK({

    baseUrl: "https://charts.mongodb.com/TENANTNAME"

  });

  const chart = sdk.createChart({

    chartId: "CHARTID#"

  });

​

  await chart.render(document.getElementById("chart"));

  document.getElementById("refresh")?.addEventListener('click', () => {

    chart.refresh();

  });

​

  document.getElementById("my-filter")?.addEventListener('change', (event) => {

    const country = event.target.value;

​

    country

      ? chart.setFilter({ "filter-field": country })

      : chart.setFilter({});

  });

}

renderChart().catch(e => window.alert(e.message));

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";

const sdk = new ChartsEmbedSDK({

 baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // Optional: ~REPLACE~ with the Base URL from your Embed Chart dialog

});

const chart1 = sdk.createChart({

 chartId: "CHARTID#", // Optional: ~REPLACE~ with the Chart ID from your Embed Chart dialog

 height: "700px",

});

const chart2 = sdk.createChart({

 chartId: "CHARTID#", // Optional: ~REPLACE~ with the Chart ID from your Embed Chart dialog

 height: "700px",

});

const clickHandler = (payload) => {

 chart1.setHighlight(payload.selectionFilter);

 chart2.setFilter(payload.selectionFilter);

 document.getElementById(

   "filterMessage"

 ).innerText = `${payload.data.y.value} movies from the ${payload.data.color.lowerBound}s`;

};

async function renderCharts() {

 await chart1.render(document.getElementById("chart1"));

 await chart2.render(document.getElementById("chart2"));

 const options = { includes: [{ roles: ["mark"] }] };