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

Question

Я пытаюсь отобразить 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());
}

?>

2-й 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>

Answer 1

Сохраните первый график как есть и попробуйте использовать его для второго графика

window.onload = function () {

var chart_sec = 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_sec.render();

}