Trying to use multiple async function but only one shows the result-CodePudding

I am trying to read multiple text file and which is storing integer data and then trying to print those data in different graph for different file. I have used async function but I can't print multiple graph. I am new to JS.

This is the code I wrote.

<!DOCTYPE html>
<html>

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>


<body>
    <div id="myPlot" style="width:100%;max-width:700px"></div>
    <script>
        async function getNumbers(file) {
            var result = await fetch(file)
            var text = await result.text()
            var bruh = String(text).split('\n')
            return bruh.map(a => parseFloat(a))
        }

        getNumbers('sample.txt').then(rArray => {
            console.log(rArray);
            //
            var xArray = ["A", "B"];
            var yArray = [];
            yArray.push(rArray[0]);
            yArray.push(rArray[1]);
            console.log(yArray);

            var layout = {
                title: "Test"
            };
            var data = [{
                labels: xArray,
                values: yArray,
                type: "pie"
            }];
            Plotly.newPlot("myPlot", data, layout);

        });
    </script>
    <script>
        async function getNumbers(file) {
            var result = await fetch(file)
            var text = await result.text()
            var bruh = String(text).split('\n')
            return bruh.map(a => parseFloat(a))
        }

        getNumbers('sample.txt').then(rArray => {
            console.log(rArray);
            //
            var xArray = ["A", "B"];
            var yArray = [];
            yArray.push(rArray[0]);
            yArray.push(rArray[1]);
            console.log(yArray);

            var layout = {
                title: "Test"
            };
            var data = [{
                labels: xArray,
                values: yArray,
                type: "pie"
            }];
            Plotly.newPlot("myPlot", data, layout);

        });
    </script>
</body>

</html>

This is what I wrote but it is printing only one graph. I am not getting what I am missing. Please help me with this I am doing it for my project and I have started learning JavaScript recently.

CodePudding user response：

You use

Plotly.newPlot("myPlot", data, layout);

twice
meaning both plots are created in the #myPlot(ie <div id="myPlot">) element
meanind the second plot overrides the first one