MOON

File: //home/jibhires/brightsolutionsindia.com/dashboard
<?php
header("Refresh:5");
$servername = "localhost:3306";
$username = "jibhires_s";
$password = "P@jy$550SK190";
$dbname = "jibhires_HUMTEMP";
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT B.dev_loc, ROUND(A.loc_temp, 1) AS loc_temp, ROUND(A.loc_hum, 0) AS loc_hum,
               B.t1, B.t2, B.h1, B.h2
        FROM hum_temp_data A 
        INNER JOIN dev_loc B ON A.dev_id = B.id 
        WHERE A.dev_id < 41 AND (A.dev_id, A.read_timestamp) IN (
            SELECT dev_id, MAX(read_timestamp) AS TT FROM hum_temp_data GROUP BY dev_id
        ) 
        ORDER BY A.dev_id";

$data = [];
if ($result = $conn->query($sql)) {
    while ($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
    $result->free();
}
$conn->close();

// Data for bar graphs
$temp_data = [];
$hum_data = [];
foreach ($data as $row) {
    $temp_color = ($row['loc_temp'] < $row['t1'] || $row['loc_temp'] > $row['t2']) ? 'red' : 'green';
    $hum_color = ($row['loc_hum'] < $row['h1'] || $row['loc_hum'] > $row['h2']) ? 'red' : 'green';
    
    $temp_data[] = ["label" => $row['dev_loc'], "value" => $row['loc_temp'], "color" => $temp_color];
    $hum_data[] = ["label" => $row['dev_loc'], "value" => $row['loc_hum'], "color" => $hum_color];
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Temperature and Humidity Bar Graph</title>
    <script src="js/chart.js"></script>
    <script src="js/chartjs-plugin-datalabels.min.js"></script>
    <style>
        body {
            background: #000;
            color: #fff;
            font-family: Arial, sans-serif;
        }
        canvas {
            display: block;
            margin: auto;
        }
        .chart-container {
            width: 90%;
            height: 400px;
            margin: auto;
        }
    </style>
</head>
<body>
    <h1 style="text-align:center;">Live Temperature and Humidity</h1>
    <div class="chart-container">
        <canvas id="tempChart"></canvas>
    </div>
    <div class="chart-container" style="margin-top: 50px;">
        <canvas id="humChart"></canvas>
    </div>

    <script>
        const tempData = <?php echo json_encode($temp_data); ?>;
        const humData = <?php echo json_encode($hum_data); ?>;

        // Configure Temperature Chart
        const tempChart = new Chart(document.getElementById('tempChart'), {
            type: 'bar',
            data: {
                labels: tempData.map(item => item.label),
                datasets: [{
                    label: 'Temperature (°C)',
                    data: tempData.map(item => item.value),
                    backgroundColor: tempData.map(item => item.color)
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true
                    },
                    title: {
                        display: true,
                        text: 'Temperature by Location'
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.raw + ' °C';
                            }
                        }
                    },
                    datalabels: {
                        color: '#fff',
                        anchor: 'end',
                        align: 'top',
                        formatter: function(value) {
                            return value + ' °C';
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            },
            plugins: [ChartDataLabels]
        });

        // Configure Humidity Chart
        const humChart = new Chart(document.getElementById('humChart'), {
            type: 'bar',
            data: {
                labels: humData.map(item => item.label),
                datasets: [{
                    label: 'Humidity (%)',
                    data: humData.map(item => item.value),
                    backgroundColor: humData.map(item => item.color)
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true
                    },
                    title: {
                        display: true,
                        text: 'Humidity by Location'
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.raw + ' %';
                            }
                        }
                    },
                    datalabels: {
                        color: '#fff',
                        anchor: 'end',
                        align: 'top',
                        formatter: function(value) {
                            return value + ' %';
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            },
            plugins: [ChartDataLabels]
        });
    </script>
</body>
</html>