99 lines
3.5 KiB
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>
|