TKK_E32210736/data.php

99 lines
3.5 KiB
PHP

<?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>