How to embed my own chart to my own html/js? #103

anu120 · 2025-01-05T06:23:54Z

anu120
Jan 5, 2025

Hello,
I have a html interface that uses JS buttons. when the button is pressed the chart in my MongoAtlas database has to appear on the .html. I followed all the steps as per but unable to make the chart appear on my .html page. Is there anything that I am missing? Do I need to keep a server.js enabled or something?

khanguslee · 2025-01-05T22:04:24Z

khanguslee
Jan 5, 2025
Collaborator

Hello @anu120! Is it possible to share any code snippets that you have? It is hard to tell what is wrong exactly given your description.

I followed all the steps as per but unable to make the chart appear on my .html page.

Can you tell me which steps you followed exactly?

I would first try and focus on rendering the chart without the "JS buttons" first just so you know that the Chart can be rendered. Looking at the most basic example should help you here. Please reach out if you require more help!

0 replies

anu120 · 2025-01-06T02:06:00Z

anu120
Jan 6, 2025
Author

Hello,
Thanks for your prompt response.
The most basic example you mentioned is the one that I was following as well.
This time, I followed it for my own data without doing any modifications to the interface and the chart rendered perfectly. (This is the first time I ran it as is without changing the interface).

Below is the code snippet for .js for my case of rendering upon a button click

import "regenerator-runtime/runtime";
import $ from "jquery";
import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
async function renderChart() {
  const sdk = new ChartsEmbedSDK({
    baseUrl: "https://charts.mongodb.com/xxx/xxx", // ~REPLACE~ with the Base URL from your Embed Chart dialog.
  });
  const chart = sdk.createChart({
    chartId: "xxxxxxxxxxx", // ~REPLACE~ with the Chart ID from your Embed Chart dialog.
    height: "700px",
    // Additional options go here
  });
  await chart.render(document.getElementById("chart"));

  $("#Mongo-button").on("click", () => {
    chart.refresh();
  });

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

Below is the snippet that I entered in my .html (showing only the changes related to this)

<head>
   <script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.6.0/stitch.js"></script>
   <script src="https://unpkg.com/@mongodb-js/charts-embed-dom"></script>
</head>
<main>
<body>
   <button id="Mongo-button">Cloud DataBase</button>
    <div id="chart"></div>
 
    <script src="/path/to//mongobtn.js"></script>

</body>
</main>

As I was writing this answer I replaced my .js (above snippet) with the index.js as per the reference document and then tried launching the .html, but the chart did not render.
Unable to figure out what I am doing wrong. Any help would be appreciated.

2 replies

khanguslee Jan 6, 2025
Collaborator

Hello! Have you verified that jquery works on your application? What error message are you seeing?

More importantly, in your snippet, I don't see a call to grab/load the jquery CDN alongside your other <script> calls. So I suspect that your issue is not related to Charts.

<script type="text/javascript" src="jquery-3.5.1.min.js"> </script>

If you wanted to conditionally load a chart, you would want the await chart.render( ... ) call inside the click handler as this is when we render the chart at the provided element.

anu120 Jan 7, 2025
Author

Hi, I had jquery a different version I replaced with the script you gave above. And used npx http-server to launch the .html. I corrected the .js as well to have chart rendering. I even initiated a server.js to connect to Mongo Atlas collection thinking that the .html is unable to directly launch the URL of the chart. However, still I see no chart. I inspected the console and I see this error. Uncaught TypeError: Failed to resolve module specifier "jquery". Relative references must start with either "/", "./", or "../".

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to embed my own chart to my own html/js? #103

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How to embed my own chart to my own html/js? #103

anu120 Jan 5, 2025

Replies: 2 comments · 2 replies

khanguslee Jan 5, 2025 Collaborator

anu120 Jan 6, 2025 Author

khanguslee Jan 6, 2025 Collaborator

anu120 Jan 7, 2025 Author

anu120
Jan 5, 2025

Replies: 2 comments 2 replies

khanguslee
Jan 5, 2025
Collaborator

anu120
Jan 6, 2025
Author

khanguslee Jan 6, 2025
Collaborator

anu120 Jan 7, 2025
Author