My file directory is:
I am trying to desplay the chart in my website using mongodb chart embedding sdk, I have index.html, chart1.js and chart2.js file in same folder. I have been stuck in this problem for days, I have change the script src in many different ways. thanks for helping:
index.html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<div id="chart1"></div>
<button id="refresh1">Refresh this chart</button>
<script src="chart1.js"></script>
</div>
<div>
<div id="chart2"></div>
<button id="refresh2">Refresh this chart</button>
<script src="chart2.js"></script>
</div>
</body>
</html>
chart1.js code
import ChartsEmbedSDK from '@mongodb-js/charts-embed-dom';
const sdk = new ChartsEmbedSDK({
baseUrl: "https://charts.mongodb.com/charts-project-0-qumgu"
});
const chart1 = sdk.createChart({
chartId: "1e32b53f-6de2-45d2-863d-025b85c8bec9",
weidth: 400,
height: 650,
});
chart1.render(document.getElementById('chart1'));
document
.getElementById('refresh1')
.addEventListener('click', () => chart.refresh());
`
chart2.js code
import ChartsEmbedSDK from '@mongodb-js/charts-embed-dom';
const sdk = new ChartsEmbedSDK({
baseUrl: 'https://charts.mongodb.com/charts-project-0-qumgu',
});
const chart = sdk.createChart({
chartId: '98a3a7ad-8ddd-4f7e-971e-586157ec9379',
});
// render the chart into a container
chart
.render(document.getElementById('chart2'))
.catch(() => window.alert('Chart failed to initialise'));
// refresh the chart whenenver #refreshButton is clicked
document
.getElementById('refresh2')
.addEventListener('click', () => chart.refresh());