Populate (Bind) multiple Chart based on GridView row selection using ChartJS in ASP.Net

I have some chart in chartjs code. And I want to show them on one page. my problem is: if I want to show one chart I didn't have any problem. but if I want to show more than one chart, no charts are displayed.

this is sql sample data:

this is my code:

                        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
                            <Columns>
                                <asp:BoundField DataField="Id" HeaderText="Id" SortExpression="Id" />
                                <asp:BoundField DataField="primaryID" HeaderText="primaryID" SortExpression="primaryID" />
                                <asp:BoundField DataField="ExFIleName" HeaderText="ExFIleName" SortExpression="ExFIleName" />
                                <asp:BoundField DataField="ExFilePath" HeaderText="ExFilePath" SortExpression="ExFilePath" />
                                <asp:BoundField DataField="SimeFileName" HeaderText="SimeFileName" SortExpression="SimeFileName" />
                                <asp:BoundField DataField="SimeFilePath" HeaderText="SimeFilePath" SortExpression="SimeFilePath" />
                                <asp:TemplateField>
                                    <ItemTemplate>
                                        <asp:LinkButton ID="lnkShowChrt" Text="ShowCharts" CommandArgument='<%# Eval("ExFilePath") %>' runat="server" />
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>
                        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:CostThesisConnectionString %>" SelectCommand="SELECT * FROM [MyFile]"></asp:SqlDataSource>

     <div>
            <div>
                <canvas id="MonthlyCost" width="400" height="400"></canvas>
            </div>
            <div>
                <canvas id="budget" width="400" height="400"></canvas>
            </div>
            <div>
                <canvas id="totalcost" width="400" height="400"></canvas>
            </div>
            <div>
                <canvas id="cost" width="400" height="400"></canvas>
            </div>
        </div>

       <script src="JS/MonthlyCost.js"></script>
       <script src="JS/Budget.js"></script>
       <script src="JS/TotalCost.js"></script>
       <script src="JS/Cost.js"></script>
       <script src="JS/MonthlyCost.js"></script>
       <script src="JS/Budget.js"></script>
       <script src="JS/TotalCost.js"></script>
       <script src="JS/Cost.js"></script>
       <script>
            $(function () {
                $('[id*=lnkShowChrt]').on('click', function () {
                    var ctxMonthCost = document.getElementById('MonthlyCost').getContext('2d');
                    MonthlyCostConfig.options.plugins.datasource.url = "." + $(this).closest('tr').find('td').eq(3).html();
                    window.MonthlyCost = new Chart(ctxMonthCost, MonthlyCostConfig);
                    //** Budget **//
                    var ctxBudget = document.getElementById('Budget').getContext('2d');
                    BudgetConfig.options.plugins.datasource.url = "." + $(this).closest('tr').find('td').eq(3).html();
                    window.Budget = new Chart(ctxBudget, BudgetConfig);
                    //** Cost **//
                    var ctxCost = document.getElementById('Cost').getContext('2d');
                    CostConfig.options.plugins.datasource.url = "." + $(this).closest('tr').find('td').eq(3).html();
                    window.Cost = new Chart(ctxCost, CostConfig);
                    //** TotalCost **//
                    var ctxTcost = document.getElementById('TotalCost').getContext('2d');
                    TotalCostConfig.options.plugins.datasource.url = "." + $(this).closest('tr').find('td').eq(3).html();
                    window.TotalCost = new Chart(ctxTcost, TotalCostConfig);
                    return false;
                });
            });
        </script>

MonthlyCost.js

var MonthlyCostConfig = {
    type: 'bar',
    data: {
        datasets: [{

            barPercentage: 0.5,

            backgroundColor: 'rgb(196, 230, 255)',
            borderColor: 'transparent',
            borderWidth: 1
        },
        ]

    },
    plugins: [ChartDataSource],
    options: {
        //maintainAspectRatio :false,
        legend: { display: true },
        title: {
            display: true,
            text: 'Monthly Cost'
        },

        scales: {
            xAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Month'
                }
            }],
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Value'
                }
            }]
        },
        plugins: {
            datasource: {
                type: 'sheet',
                url: '',
                rowMapping: 'index',
                datasetLabels: 'Monthly Cost!B2',
                indexLabels: 'Monthly Cost!A3:A',
                data: 'Monthly Cost!B3:B'
            }
        }
    }
};

Budget.js

var BudgetConfig = {
    type: 'bar',
    data: {
        datasets: [{
            barPercentage: 0.5,
            backgroundColor: 'rgb(196, 230, 255)',
            borderColor: 'transparent',
            borderWidth: 1
        },
        ]
    },
    plugins: [ChartDataSource],
    options: {
        legend: { display: true },
        title: {
            display: true,
            text: 'Budget'
        },

        scales: {
            xAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Month'
                }
            }],
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Value'
                }
            }]
        },
        plugins: {
            datasource: {
                type: 'sheet',
                url: '',
                rowMapping: 'index',
                datasetLabels: 'Budget!B2',
                indexLabels: 'Budget!A3:A',
                data: 'Budget!B3:B'
            }
        }
    }
};
// window.onload = function () {
//     var ctx1 = document.getElementById('Budget').getContext('2d');
//     window.Budget = new Chart(ctx1, config1);
// };

TotalCost.js

var TotalCostConfig = {
    type: 'bar',
    data: {
        datasets: [{
            barPercentage: 0.5,
            backgroundColor: 'rgb(196, 230, 255)',
            borderColor: 'transparent',
            borderWidth: 1
        },
        ]
    },
    plugins: [ChartDataSource],
    options: {
        legend: { display: true },
        title: {
            display: true,
            text: 'Total Cost'
        },

        scales: {
            xAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Day'
                }
            }],
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Value'
                }
            }]
        },
        plugins: {
            datasource: {
                type: 'sheet',
                url: '',
                rowMapping: 'index',
                datasetLabels: 'Total Cost!B2',
                indexLabels: 'Total Cost!A3:A',
                data: 'Total Cost!B3:B'
            }
        }
    }
};

Cost.js

var CostConfig = {
    type: 'bar',
    data: {
        datasets: [{
            barPercentage: 0.5,
            backgroundColor: 'rgb(196, 230, 255)',
            borderColor: 'transparent',
            borderWidth: 1
        },
        ]
    },
    plugins: [ChartDataSource],
    options: {
        legend: { display: true },
        title: {
            display: true,
            text: 'Cost'
        },

        scales: {
            xAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Day'
                }
            }],
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Value'
                }
            }]
        },
        plugins: {
            datasource: {
                type: 'sheet',
                url: '',
                rowMapping: 'index',
                datasetLabels: 'Cost!B2',
                indexLabels: 'Cost!A3:A',
                data: 'Cost!B3:B'
            }
        }
    }
};

How can I show more than one chart in my page?