TIF_NGANJUK_E41211253/resources/views/admin/pages/coba.blade.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