Tvorba grafov pomocou knižnice Chart. js a PHP

1. augusta 2025 07:14, Prečítané 652x, janvarga, PHP, prípadová štúdia

V tomto článku si ukážeme, ako vytvoriť dynamické grafy pomocou knižnice Chart.js a PHP. Chart.js je jednoduchá knižnica na tvorbu grafov v JavaScripte, ktorá umožňuje vizualizáciu údajov v rôznych formátoch, ako sú stĺpcové grafy, čiarové grafy, koláčové grafy a ďalšie. Síce samozrejmosť ale pre istotu: údaje sú uložené v MySQL databáze 🙂

Vytvoríme HTML stránku s plátnom (canvas) pre graf a odkazmi na potrebné knižnice.

<!DOCTYPE html>
<html>
<head>
    <title>Chart.js and PHP Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div style="width: 75%; margin: auto;">
        <canvas id="myChart"></canvas>
    </div>
    <script>
        async function fetchData() {
            const response = await fetch('data.php');
            const data = await response.json();
            return data;
        }

        async function createChart() {
            const data = await fetchData();

            const ctx = document.getElementById('myChart').getContext('2d');
            const myChart = new Chart(ctx, {
                type: 'bar', // typ grafu
                data: {
                    labels: data.labels,
                    datasets: [{
                        label: 'Sample Data',
                        data: data.values,
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        createChart();
    </script>
</body>
</html>

Vytvoríme PHP skript data.php, ktorý bude poskytovať údaje pre náš graf. Tento skript bude získavať údaje z databázy a vráti ich vo formáte JSON.

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "chart_data";

// Vytvorenie pripojenia
$conn = new mysqli($servername, $username, $password, $dbname);

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

// Získanie údajov z databázy
$sql = "SELECT label, value FROM chart";
$result = $conn->query($sql);

$labels = [];
$values = [];

if ($result->num_rows > 0) {
    // Načítanie údajov z riadkov
    while($row = $result->fetch_assoc()) {
        $labels[] = $row['label'];
        $values[] = $row['value'];
    }
} else {
    echo "0 results";
}

$conn->close();

// Vrátenie údajov vo formáte JSON
echo json_encode(['labels' => $labels, 'values' => $values]);
?>

Naše údaje budú uložené v MySQL databáze. Vytvoríme databázu a tabuľku pre naše údaje.

CREATE DATABASE chart_data;

USE chart_data;

CREATE TABLE chart (
    id INT AUTO_INCREMENT PRIMARY KEY,
    label VARCHAR(255) NOT NULL,
    value INT NOT NULL
);

INSERT INTO chart (label, value) VALUES
('January', 10),
('February', 20),
('March', 30),
('April', 40),
('May', 50),
('June', 60),
('July', 70);

Kompletný PHP skript data.php pre získanie údajov z databázy a ich vrátenie vo formáte JSON

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "chart_data";

// Vytvorenie pripojenia
$conn = new mysqli($servername, $username, $password, $dbname);

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

// Získanie údajov z databázy
$sql = "SELECT label, value FROM chart";
$result = $conn->query($sql);

$labels = [];
$values = [];

if ($result->num_rows > 0) {
    // Načítanie údajov z riadkov
    while($row = $result->fetch_assoc()) {
        $labels[] = $row['label'];
        $values[] = $row['value'];
    }
} else {
    echo "0 results";
}

$conn->close();

// Vrátenie údajov vo formáte JSON
echo json_encode(['labels' => $labels, 'values' => $values]);
?>