I’m building a program that will display different economic data charts for different countries (currently between Canada and US). I was hoping to have one canvas for each type of chart and change it depending on what button the user clicks on. For example, I would have one canvas that displays Gross Domestic Product for US when the user clicks on the US button and Canada when the user clicks on the Canada button. I am planning on doing this for multiple canvases (Inflation Rate, Retail Sales, etc.) but right now I only have the one for GDP. The problem I’m having is that when I load the webpage, it displays the default country I selected but it doesn’t change when I click on the other button. I saw that there was a similar issue but I haven<t been able to make the solution work for me.

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div>
    <div style="height:40vh; width:80vw">
        <canvas id="realGDP"></canvas>
    </div>
</div>

Javascript functions that get called when the user clicks a button

async function display_real_gdp_ca()
{
    let real_gdp = await eel.get_real_gdp_ca()();
    var json_real_gdp = JSON.parse(real_gdp);
    var report_date = json_real_gdp.map(function(e) {
        return e.ReportDate;
        });
    var gdp = json_real_gdp.map(function(e) {
        return e.Actual;
        });
    const ctx = document.getElementById('realGDP');

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: report_date,
            datasets: [{
            label: 'Real GDP',
            data: gdp
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

async function display_real_gdp_us()
{
    let real_gdp = await eel.get_real_gdp_us()();
    var json_real_gdp = JSON.parse(real_gdp);
    var report_date = json_real_gdp.map(function(e) {
        return e.ReportDate;
        });
    var gdp = json_real_gdp.map(function(e) {
        return e.Actual;
        });
    const ctx = document.getElementById('realGDP');

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: report_date,
            datasets: [{
            label: 'Real GDP',
            data: gdp
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }

    });
}

I know that I’m duplicating code in my javascript functions and should probably just use one function to create the chart and pass it the data but I’ll clean it up later.

Any ideas would be helpful.
Thanks