
<?php
// koneksi 
    $koneksi = mysqli_connect("localhost", "root", "", "nodemcu3");

    // baca data dari tabel tb_sensor Mengambil id terbesar
    $sql_ID = mysqli_query($koneksi, "SELECT MAX(ID) FROM tb_sensor");
    // ambil data
    $data_ID = mysqli_fetch_array($sql_ID);
    // ambil data terahir
    $ID = $data_ID['MAX(ID)'];
    $ID_akhir = $data_ID['MAX(ID)'];
    $ID_awal = $ID_akhir - 4;

    // baca informasitanggal untul semua data
    // mengambil daata dan menampilkan lebih besar id awal, lebih kecil id akhir
    $tanggal = mysqli_query($koneksi, "SELECT tanggal FROM tb_sensor WHERE ID>='$ID_awal' AND ID<='$ID_akhir' ORDER BY ID ASC");
    //baca informasi dari semua data
    $detakjantung = mysqli_query($koneksi, "SELECT detakjantung FROM tb_sensor  WHERE ID>='$ID_awal' AND ID<='$ID_akhir' ORDER BY ID ASC");
    $oksigen = mysqli_query($koneksi, "SELECT oksigen FROM tb_sensor WHERE ID>='$ID_awal' AND ID<='$ID_akhir' ORDER BY ID ASC");
    // $suhu = mysqli_query($koneksi, "SELECT suhu FROM tb_sensor WHERE ID>='$ID_awal' AND ID<='$ID_akhir' ORDER BY ID ASC");
?>

<div class= "panel panel-primary">
    <div class="panel-heading">
        grafik sensor
    </div>

    <div class = "panel-body">
        <!-- canvas untuk grafik -->
        <canvas id="MyChart"></canvas>

        <!-- gambar grafik -->
        <script type="text/javascript">
            // baca id canvas tempat grafik akan diletakan
            var canvas = document.getElementById('MyChart');
            
            // letakan data tanggal dan suhu
            var data = {
                labels :[
                    <?php
                        while($data_tanggal = mysqli_fetch_array($tanggal))
                        {
                            echo '"' .$data_tanggal['tanggal']. '",' ;
                        }    
                    ?>
                ],
                datasets : [
                    {
                    label : "detakjantung", 
                    fill: true,
                    backgroundColor:"rgb(30,129,176, 0.5)",
                    borderColor : "rgb(30,129,176, 1)",
                    lineTension : 0.5 ,
                    pointRadius: 5,
                    data : [
                        <?php
                            while($data_detakjantung = mysqli_fetch_array($detakjantung))
                            {
                                echo $data_detakjantung['detakjantung']. ',' ;
                            }
                        ?>
                    ]
                },

                {
                    label : "oksigen", 
                    fill: true,
                    backgroundColor:"rgb(125,168,89, 0.5)",
                    borderColor : "rgb(125,168,89, 1)",
                    lineTension : 0.5 ,
                    pointRadius: 5,
                    data : [
                        <?php
                            while($data_oksigen = mysqli_fetch_array($oksigen))
                            {
                                echo $data_oksigen['oksigen']. ',' ;
                            }
                        ?>
                    ]
                },

            ]
            } ;

            // opsi grafik
            var option = {
                showLines : true,
                animation : {duration : 0}
            };

            // xetak kedalaam kanfas
            var myLineChart = Chart.Line(canvas, {
                data : data, 
                options : option
            });
        </script>
    </div>
</div>