javascript — проблема в отображении нескольких графиков с помощью Php mysql

Я пытаюсь отобразить 2 разных круговой диаграммы, которая принимает значение из базы данных php. но проблема в том, что когда я делаю вторую круговую диаграмму, первая круговая диаграмма не будет отображаться, но будет отображать вторую круговую диаграмму, это означает, что она работает 1 в то время.

Где ошибка?

1-й код для круговой диаграммы

?php


$dataPoints = array();
//Best practice is to create a separate file for handling connection to database
try{
// Creating a new connection.
// Replace your-hostname, your-db, your-username, your-password according to your database
$link = new \PDO(   'mysql:host=localhost;dbname=OISC;charset=utf8mb4', //'mysql:host=localhost;dbname=canvasjs_db;charset=utf8mb4',
'root', //'root',
'', //'',
array(
\PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
\PDO::ATTR_PERSISTENT => false
)
);

$handle = $link->prepare("SELECT Gender, COUNT(Gender) AS totalUser FROM register GROUP By Gender");
$handle->execute();
$result = $handle->fetchAll(\PDO::FETCH_OBJ);

foreach($result as $row){
array_push($dataPoints, array("x"=> $row->Gender, "y"=> $row->totalUser));
}
$link = null;
}

catch(\PDOException $ex){
print($ex->getMessage());
}

?>

1 JavaScript для круговой диаграммы

<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
exportEnabled: true,
theme: "light1", // "light1", "light2", "dark1", "dark2"title:{
text: "Gender Pie Chart"},
data: [{
type: "pie", //change type to bar, line, area, pie, etc
dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
}]
});
chart.render();

}
</script>

HTML

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

2-й php код для круговой диаграммы

<?php


$dataPoints = array();
//Best practice is to create a separate file for handling connection to database
try{
// Creating a new connection.
// Replace your-hostname, your-db, your-username, your-password according to your database
$link = new \PDO(   'mysql:host=localhost;dbname=OISC;charset=utf8mb4', //'mysql:host=localhost;dbname=canvasjs_db;charset=utf8mb4',
'root', //'root',
'', //'',
array(
\PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
\PDO::ATTR_PERSISTENT => false
)
);

$handle = $link->prepare("SELECT BasedAt, COUNT(BasedAT) as TotalImmigrant FROM register GROUP By BasedAt");
$handle->execute();
$result1 = $handle->fetchAll(\PDO::FETCH_OBJ);

foreach($result1 as $row){
array_push($dataPoints, array("x"=> $row->BasedAt, "y"=> $row->TotalImmigrant));
}
$link = null;
}

catch(\PDOException $ex){
print($ex->getMessage());
}

?>

Второй JS для круговой диаграммы

<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer1", {
animationEnabled: true,
exportEnabled: true,
theme: "light1", // "light1", "light2", "dark1", "dark2"title:{
text: "Location Pie Chart"},
data: [{
type: "pie", //change type to bar, line, area, pie, etc
dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
}]
});
chart.render();

}
</script>

HTML

<div id="chartContainer1" style="height: 370px; width: 100%;"></div> <!--Location Chart-->
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>