Kacper's Wiki

Ta strona jest tylko do odczytu. Możesz wyświetlić źródła tej strony ale nie możesz ich zmienić.
====== 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

{{url>https://wiki.ostrowski.net.pl/php_mysql/temp_chart.php 50%, 500px}}

Dane do tej aplikacji zbiera [[narzedzia:node_red_temperature_collector|przepływ]] w Node-Red.

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


<code php temp_chart.php>
<?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>

</code>
Kacper's Wiki

Narzędzia użytkownika

Narzędzia witryny

Narzędzia strony
