122 lines
4.0 KiB
PHP
122 lines
4.0 KiB
PHP
@extends('admin.layout.main')
|
|
|
|
@section('content')
|
|
<main id="main" class="main">
|
|
<figure class="col-lg-6">
|
|
<div id="container" style="width: 100%; height: 400px;"></div> <!-- Styling elemen -->
|
|
</figure>
|
|
<script src="https://code.highcharts.com/highcharts-more.js"></script>
|
|
|
|
<script>
|
|
// Inisialisasi chart
|
|
const chart = Highcharts.chart('container', {
|
|
chart: {
|
|
type: 'gauge',
|
|
plotBackgroundColor: null,
|
|
plotBorderWidth: 0,
|
|
plotShadow: false,
|
|
height: '50%'
|
|
},
|
|
title: {
|
|
text: 'Pressure'
|
|
},
|
|
pane: {
|
|
startAngle: -90,
|
|
endAngle: 90,
|
|
background: null,
|
|
center: ['50%', '75%'],
|
|
size: '90%'
|
|
},
|
|
yAxis: {
|
|
min: 0,
|
|
max: 16,
|
|
tickPixelInterval: 72,
|
|
tickPosition: 'inside',
|
|
tickColor: Highcharts.defaultOptions.chart.backgroundColor || '#FFFFFF',
|
|
tickLength: 8,
|
|
tickWidth: 1,
|
|
minorTickInterval: null,
|
|
labels: {
|
|
distance: 10,
|
|
style: {
|
|
fontSize: '10px'
|
|
}
|
|
},
|
|
lineWidth: 0,
|
|
plotBands: [{
|
|
from: 0,
|
|
to: 10,
|
|
color: '#55BF3B',
|
|
thickness: 8,
|
|
borderRadius: '50%'
|
|
}, {
|
|
from: 13,
|
|
to: 16,
|
|
color: '#DF5353',
|
|
thickness: 8,
|
|
borderRadius: '50%'
|
|
}, {
|
|
from: 10,
|
|
to: 13,
|
|
color: '#DDDF0D',
|
|
thickness: 8
|
|
}]
|
|
},
|
|
series: [{
|
|
name: 'Pressure',
|
|
data: [{{ $latestPressure->pressure ?? 0 }}], // Menggunakan data awal
|
|
tooltip: {
|
|
valueSuffix: ' bar'
|
|
},
|
|
dataLabels: {
|
|
format: '{y} bar',
|
|
borderWidth: 0,
|
|
color: '#333333',
|
|
style: {
|
|
fontSize: '12px'
|
|
}
|
|
},
|
|
dial: {
|
|
radius: '60%',
|
|
backgroundColor: 'gray',
|
|
baseWidth: 6,
|
|
baseLength: '0%',
|
|
rearLength: '0%'
|
|
},
|
|
pivot: {
|
|
backgroundColor: 'gray',
|
|
radius: 3
|
|
}
|
|
}]
|
|
});
|
|
|
|
// Fungsi untuk memperbarui chart dengan data dari database
|
|
function updateChart() {
|
|
console.log('Updating chart...'); // Log saat fungsi dipanggil
|
|
fetch('/sensor-data')
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log('Data fetched:', data); // Log data yang diterima
|
|
const newVal = parseFloat(data.pressure); // Mengonversi ke angka
|
|
if (!isNaN(newVal)) {
|
|
const point = chart.series[0].points[0];
|
|
point.update(newVal);
|
|
console.log('Chart updated with new value:', newVal); // Log nilai baru
|
|
} else {
|
|
console.error('Invalid pressure value:', newVal);
|
|
}
|
|
})
|
|
.catch(error => console.error('Error fetching sensor data:', error));
|
|
}
|
|
|
|
// Jalankan updateChart setiap 3 detik
|
|
setInterval(updateChart, 3000);
|
|
</script>
|
|
</main>
|
|
@endsection
|