<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Highcharts Spline Chart</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="container" style="width: 100%; height: 400px;"></div>
<script>
        setTimeout(function() {
            location.reload(); // Refresh halaman setelah 5 detik
        }, 5000); // Waktu dalam milidetik (5 detik)
</script>
    <script>
        Highcharts.chart('container', {
            chart: {
                type: 'spline'
            },
            title: {
                text: 'Monitoring Ketinggian Air'
            },
            subtitle: {
                text: 'Source: ESP8266 Wemos D1 Mini'
            },
            xAxis: {
                categories: [<?php  include "koneksi.php";
                                $sql_jam = "SELECT * FROM tbl_water ORDER BY no DESC LIMIT 10"; 
                                $result = $conn->query($sql_jam);
                                    if ($result->num_rows > 0) {
                                        while($row = $result->fetch_assoc()) {
                                        echo "\"".$row["tinggi_air"]."\",";
                                                }
                                            };
                            ?>]
            },
            yAxis: {
                title: {
                    text: 'Ketinggian Air (cm)'
                }
            },
            tooltip: {
                valueSuffix: ' cm'
            },
            series: [{
                name: 'Alat 1 - Tinggi Air',
                data: [<?php  $sql_jumlah = "SELECT * FROM tbl_water ORDER BY no DESC LIMIT 10"; 
                            $result1 = $conn->query($sql_jumlah);
                            if ($result1->num_rows > 0) {
                                while($row1 = $result1->fetch_assoc()) {
                                    echo $row1["tinggi_air"].",";
                                    }
                                };
                        ?>]
            }]
        });
    </script>
</body>
</html>