METHOD 1 I am trying to embed a chart from MongoDB using the following code, which was adapted from documentation from MongoDB and NPM.
<script src="https://unpkg.com/@mongodb-js/charts-embed-dom"></script>
<script>
const ChartsEmbedSDK = window.ChartsEmbedSDK;
const sdk = new ChartsEmbedSDK({
baseUrl: "https://charts.mongodb.com/charts-webscraping-ciaso-ercot-wnjhz",
});
const chart = sdk.createChart({
chartId: "62d7224c-79ab-41ca-83f6-690f4ab86869",
});
chart.render(document.getElementById('chart'));
</script>
</body>
The error I’m getting is “TypeError t is null”
Near as I can tell that might mean that whatever is supposed to be imported from https://unpkg.com/@mongodb-js/charts-embed-dom is not coming through so the sdk and the chart aren’t getting created properly. Hence why the chart comes up null when it trys to getElementById.
METHOD 2 I also tried a different method. What you see below is directly copied from Mongo’s documentation. I got an error that “relative references must begin with /, ./, or ../”.
<script type=module> /*did that to avoid error cannot import outside a module*/
import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom"; //error: relative references must begin with /, ./, or ../
//import ChartsEmbedSDK from "https://unpkg.com/@mongodb-js/charts-embed-dom" // Ambiguous indirect export: default
// import ChartsEmbedSDK from "/unpkg.com/@mongodb-js/charts-embed-dom" //error not found.
//import 'https://unpkg.com/@mongodb-js/charts-embed-dom'; // TypeError: t is null (same as other method)
const sdk = new ChartsEmbedSDK({
baseUrl: "https://charts.mongodb.com/charts-webscraping-ciaso-ercot-wnjhz",
});
const chart = sdk.createChart({
chartId: "62d7224c-79ab-41ca-83f6-690f4ab86869",
height: "700px",
// Additional options go here
});
chart.render(document.getElementById("chart"));
</script>
You can see I also tried a few other things (commented out).
I think that for method 2 a possible reason it’s not working is that I wasn’t able to install the @mongodb-js/charts-embed-dom package correctly. When I tried to install using npm this is what I saw: screenshot of error with npm
I did some looking into this problem but was never able to resolve it.
Overall it seems like I'm not able to properly import the charts-embed-dom. It seems to me like method 1 only has one problem to fix, whereas method 2 has possibly 2 or more layers of problems, so I’m hoping there is a relatively simple solution to method 1.
I know another solution would be to use an iframe. I've gotten that to work, but it just doesn't seem to be versatile enough to do what I need (drop down boxes, dynamic filtering)
