Untitled

<?php
include "../config.php";

//$sql = "SELECT country.name, country.population FROM country";

$sql = "SELECT country.name as name,((sum(report.deaths)/sum(report.confirmed)*100)) as ratio from country JOIN report ON country.id=report.id_country GROUP BY
country.id ORDER BY ratio DESC";

$result = mysqli_query($db, $sql);

$country_name = array();
$country_pop = array();

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while ($row = mysqli_fetch_assoc($result)) {
        array_push($country_name, $row["name"]);
        array_push($country_pop, $row["ratio"]);
    }
} else {
    echo "0 results";
}

$dropdown = "SELECT country.name FROM country";
$dropdown_result = mysqli_query($db, $dropdown);


?>


<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
    <script>
        var myChart = new Chart(ctx, {...});
    </script>


</head>
<body>

<form method="post" action=" ">

    <label>Krajina</label>

    <select name="subject_names">
        <option>Vyber si krajinu</option>
        <?php while ($row = mysqli_fetch_array($dropdown_result)) { ?>
            <option value="<?php echo $row['name']; ?>"> <?php echo $row['name']; ?>
            </option>
        <?php } ?>
    </select>
</form>


<canvas id="myChart" width="400" height="300"></canvas>

<script>
    var dataname = <?php echo json_encode($country_name); ?>;
    var datapop = <?php echo json_encode($country_pop); ?>;

    var ctx = document.getElementById('myChart');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: dataname,
            datasets: [{
                barThickness: 3,
                minBarLength: 3,
                label: 'Počet nových prípadov',
                xAxisID: 'A',
                data: datapop,
            }, {
                label: 'Počet vyliečených prípadov',
                xAxisID: 'B',
                data: datapop,
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    id: 'A',
                    position: 'bottom',
                    type: 'category',
                },
                    {
                        id: 'B',
                        position: 'top',
                        type: 'category',
                    }]
            }
        }
    });
</script>

</body>
</html>