如果我在foreach下拉列表中选择了一个ID，该如何显示图表

Question

我想在下拉列表中选择咖啡的种类，并通过它在图表中显示或显示统计信息。我有3张桌子。希望您能帮我解决这个问题。问题是我无法显示所选咖啡的相应图表。它是具有3个不同数据的折线图。

这是html代码     

    @foreach($roast as $key => $roast)
    <option value="{{ $roast->coffee_id }}">{{ $roast->coffeeName }}</option>
    @endforeach

/ *数据库连接设置* /

$mysqli = new mysqli($host,$user,$pass,$db) or die($mysqli->error);

 $time = '';
$s01 = '';
$s02 = '';
$s03 = '';

//query to get data from the table
$sql = "SELECT * FROM `coffee_temperature` ";
$result = mysqli_query($mysqli, $sql);

//loop through the returned data
while ($row = mysqli_fetch_array($result)) {

    $time = $time . '"'. $row['time'].'",';
    $s01 = $s01 . '"'. $row['s01'].'",';
    $s02 = $s02 . '"'. $row['s02'] .'",';
    $s03 = $s03 . '"'. $row['s03'] .'",';
}

 $time = trim($time.",");
$s01 = trim($s01,",");
$s02 = trim($s02,",");
$s03 = trim($s03,",");



            var ctx = document.getElementById("chart").getContext('2d');
            var myChart = new Chart(ctx, {
            type: 'line',
            data: 
            {
                labels: [<?php echo $time; ?>],
                datasets: 
                [{
                    label: 'Sensor01',
                    data: [<?php echo $s01; ?>]
                },

                {
                    label: 'Sensor02',
                    data: [<?php echo $s02; ?>]
                },
                {
                    label: 'Sensor03',
                    data: [<?php echo $s03; ?>] 
                }]
            },


            options: 
            {
                responsive: true,
                scales:{
                    yAxes: [{beginAtZero: false, setinterval: 3000}],
                    xAxes: [{autoskip: true, maxTicketsLimit: 20}]

            },
                tooltips:{mode: 'index'},
                legend:{display: true, position: 'bottom', labels: {fontColor: 'black', fontSize: 16}}
            }
        });