How to run multiple charts in chartjs

I am creating a bar graph with a dropdown menu at the top and how can i do it, In my localhost the code works but when uploaded online only the gender chart is working how can i fix this.You’r help is much appreciated

It works in the localhost but not when i uploaded it in a server only the gender chart is working and the others are not .

 <?php
            //gender graph 
                if(@$_GET['q']==10) {

                    include_once 'dbConnection.php';
                    $query = $con->query("
                    SELECT gender, COUNT(*) as total
                    FROM rank
                    GROUP BY gender;
                    ");

                foreach($query as $data)
                {
                    $gender[] = $data['gender'];
                    $total[] = $data['total'];
                }
                echo '<div style="width: 900px; margin: auto; padding-top: 100px; text-align: center;">';
                echo '
                <select onchange="location = this.value;">
                <option value="superadmin.php?q=10">Gender</option>
                <option value="superadmin.php?q=11">Age</option>
                <option value="superadmin.php?q=12">Strand</option>
               </select>

               <canvas id="myChart"></canvas>
               </div>';
            }
            ?>
            <script>
                // === include 'setup' then 'config' above ===
                const labels = <?php echo json_encode($gender) ?>;
                const data = {
                    labels: labels,
                    datasets: [{
                    label: 'Gender',
                    data: <?php echo json_encode($total) ?>,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.5)',
                        'rgba(255, 159, 64, 0.5)',
                        'rgba(255, 205, 86, 0.5)',
                        'rgba(75, 192, 192, 0.5)',
                        'rgba(54, 162, 235, 0.5)',
                        'rgba(153, 102, 255, 0.5)',
                        'rgba(201, 203, 207, 0.5)'
                    ],
                    borderColor: [
                        'rgb(255, 99, 132)',
                        'rgb(255, 159, 64)',
                        'rgb(255, 205, 86)',
                        'rgb(75, 192, 192)',
                        'rgb(54, 162, 235)',
                        'rgb(153, 102, 255)',
                        'rgb(201, 203, 207)'
                    ],
                    borderWidth: 2
                    }]
                };

                const config = {
                    type: 'bar',
                    data: data,
                    options: {
                    scales: {
                        y: {
                        beginAtZero: true
                        }
                    }
                    },
                };

                var myChart = new Chart(
                    document.getElementById('myChart'),
                    config
                );
                </script>


            <?php
            //age graph
                if(@$_GET['q']==11) {

                    include_once 'dbConnection.php';
                    $query = $con->query("
                    SELECT age, COUNT(*) as total
                    FROM rank
                    GROUP BY age;
                    ");

                foreach($query as $data)
                {
                    $age[] = $data['age'];
                    $total[] = $data['total'];
                }
                echo '<div style="width: 900px; margin: auto; padding-top: 100px; text-align: center;">';

                echo '
                <select onchange="location = this.value;">
                <option value="superadmin.php?q=11">Age</option>
                <option value="superadmin.php?q=10">Gender</option>
                <option value="superadmin.php?q=12">Strand</option>
               </select>

               <canvas id="myChart2"></canvas>
               </div>';
            }
            ?>
            <script>
                // === include 'setup' then 'config' above ===
                const labels = <?php echo json_encode($age) ?>;
                const data = {
                    labels: labels,
                    datasets: [{
                    label: 'Age',
                    data: <?php echo json_encode($total) ?>,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.5)',
                        'rgba(255, 159, 64, 0.5)',
                        'rgba(255, 205, 86, 0.5)',
                        'rgba(75, 192, 192, 0.5)',
                        'rgba(54, 162, 235, 0.5)',
                        'rgba(153, 102, 255, 0.5)',
                        'rgba(201, 203, 207, 0.5)'
                    ],
                    borderColor: [
                        'rgb(255, 99, 132)',
                        'rgb(255, 159, 64)',
                        'rgb(255, 205, 86)',
                        'rgb(75, 192, 192)',
                        'rgb(54, 162, 235)',
                        'rgb(153, 102, 255)',
                        'rgb(201, 203, 207)'
                    ],
                    borderWidth: 2
                    }]
                };

                const config = {
                    type: 'bar',
                    data: data,
                    options: {
                    scales: {
                        y: {
                        beginAtZero: true
                        }
                    }
                    },
                };

                var myChart = new Chart(
                    document.getElementById('myChart2'),
                    
                );
                </script>