ASP.Net Core Razor Pages: Populate CanvasJS Chart using Model

Dear All,

I have a razor page with 2 methods inside.

public void OnGet()
{
    GetExternalPercentageReportData();
    getInCompleteTransfersCount();
}

I have 2 canvas.

<div class="box-body">
    <canvas id="myChart" style="width: 500px !important; height: 400px !important"></canvas>
</div>

<div class="box-body">
    <canvas id="myChart1" style="width: 500px !important; height: 400px !important"></canvas>
</div>

<script src="~/ChartJS/Chart.bundle.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        var ctx = document.getElementById('myChart');
        var myChart = new Chart(ctx, @Html.Raw(Model.ChartJson) );
    });
    document.addEventListener('DOMContentLoaded', (event) => {
        var ctx = document.getElementById('myChart1');
        var myChart = new Chart(ctx, @Html.Raw(Model.ChartJson) );
    });
</script>

I want to load the first canvas with 1st method data and 2 canvas with 2 method data. can you please let me know how to do it.

Thanks in advance.