PHP: Rysowanie wykresów w PHP na przykładzie temperatury

Ta aplikacja w PHP łączy się z zewnętrzną bazą danych Microsoft SQL Server, odczytuje dane temperatur z dwóch tabel: MinskTemp oraz WarsawTemp, a następnie prezentuje je w formie interaktywnego wykresu liniowego za pomocą biblioteki Chart.js. Wykres porównuje temperatury w Mińsku i Warszawie na podstawie dat zapisanych w bazie, umożliwiając wizualną analizę zmian temperatur w obu miastach. Aplikacja działa jako pojedynczy plik PHP, który automatycznie pobiera dane z bazy przy każdym uruchomieniu i wyświetla zaktualizowany wykres w przeglądarce użytkownika.

Aplikacja jest uruchomiona i możesz sprawdzić jej działanie: https://wiki.ostrowski.net.pl/php_mysql/temp_chart.php

Dane do tej aplikacji zbiera przepływ w Node-Red.

W tej aplikacji chodzi tutaj o Mińsk Mazowiecki, nie stolicę Białorusi

<?php // Database connection settings $serverName = "localhost"; // or "IP\SQLEXPRESS" $database = "DB"; $username = "USER"; $password = "PASS"; // Connect using PDO (recommended) try { $conn = new PDO("sqlsrv:Server=$serverName;Database=$database", $username, $password); $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch (PDOException $e) { die("Błąd połączenia: " . $e->getMessage()); } // Fetch Minsk data $minskData = []; $stmt = $conn->query("SELECT DATE, TEMP FROM dbo.MinskTemp ORDER BY ID"); while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { $minskData[] = $row; } // Fetch Warsaw data $warsawData = []; $stmt = $conn->query("SELECT DATE, TEMP FROM dbo.WarsawTemp ORDER BY ID"); while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { $warsawData[] = $row; } // Close DB connection $conn = null; // Prepare labels (dates) and temperature arrays $labels = array_column($minskData, 'DATE'); $minskTemps = array_column($minskData, 'TEMP'); $warsawTemps = array_column($warsawData, 'TEMP'); ?> <!DOCTYPE html> <html> <head> <title>Temperature Chart</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <body> <h2>Temperature Comparison: Minsk vs Warsaw</h2> <canvas id="tempChart" width="800" height="400"></canvas> <script> const ctx = document.getElementById('tempChart').getContext('2d'); const tempChart = new Chart(ctx, { type: 'line', data: { labels: <?= json_encode($labels) ?>, datasets: [ { label: 'Minsk', data: <?= json_encode($minskTemps) ?>, borderColor: 'rgba(255, 99, 132, 1)', fill: false, tension: 0.1 }, { label: 'Warsaw', data: <?= json_encode($warsawTemps) ?>, borderColor: 'rgba(54, 162, 235, 1)', fill: false, tension: 0.1 } ] }, options: { responsive: true, scales: { y: { beginAtZero: false, title: { display: true, text: 'Temperature (°C)' } }, x: { title: { display: true, text: 'Date' } } } } }); </script> </body> </html>