1

My file directory is:

  • chartTesting
    • index.html
    • chart1.js
    • chart2.js

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());
veipunii
  • 11
  • 2

0 Answers0