Php İle Veritabanı Destekli Dinamik İstatistik Grafiği Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce geliştirme ortamınızın güncel olduğundan emin olmalısınız. 2026 standartlarına uygun olarak PHP 8.2 veya üzeri bir sürüm kullanmanız önerilir. İhtiyacınız olan temel araçlar şunlardır:

• PHP 8.2+: Modern sözdizimi ve performans iyileştirmeleri için gereklidir.
• MySQL/MariaDB: Verilerin depolanacağı ilişkisel veritabanı yönetim sistemi.
• Chart.js (CDN): İstemci tarafında grafikleri çizmek için kullanılan hafif ve güçlü bir kütüphane.
• PDO (PHP Data Objects): Veritabanı işlemlerini güvenli ve veritabanından bağımsız yapmak için kullanılan standart arayüz.

Güvenlik Uyarısı: Veritabanı bağlantılarınızda mutlaka PDO kullanın ve "prepared statements" (hazırlanmış ifadeler) yöntemini tercih ederek SQL Injection saldırılarına karşı tam koruma sağlayın.

Veritabanı Yapısının Kurulması

Dinamik bir grafik oluşturmanın ilk adımı, verilerin tutarlı bir şekilde saklanmasıdır. Örneğin, bir e-ticaret sitesinin aylık satış verilerini görselleştireceğimizi varsayalım. Aşağıdaki SQL sorgusu ile gerekli tabloyu oluşturabilirsiniz.

CREATE TABLE satislar (
    id INT AUTO_INCREMENT PRIMARY KEY,
    ay VARCHAR(20) NOT NULL,
    miktar INT NOT NULL,
    tarih TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

INSERT INTO satislar (ay, miktar) VALUES ('Ocak', 150), ('Şubat', 200), ('Mart', 350), ('Nisan', 280);

Bu tablo, grafik eksenlerinde kullanacağımız 'ay' ve değerleri temsil eden 'miktar' sütunlarını içermektedir. Veritabanı yapınız ne kadar temiz olursa, PHP ile veri çekme işleminiz o kadar hızlı olacaktır.

PHP ile Veritabanından Veri Çekme

Verileri veritabanından JSON formatında çekmek, JavaScript'in bu veriyi kolayca işlemesini sağlar. Aşağıdaki kod bloğu, veritabanına bağlanır ve verileri bir diziye aktarır.

Burada json_encode fonksiyonu, PHP dizisini JavaScript'in doğrudan anlayabileceği bir formata dönüştürür. Hata yönetimi için try-catch bloğu kullanmak, üretim ortamında oluşabilecek bağlantı sorunlarını yakalamanıza yardımcı olur.

Chart.js ile Grafik Oluşturma

Verileri PHP'den aldıktan sonra, bunları HTML şablonuna yerleştirip Chart.js ile görselleştireceğiz. JavaScript tarafında veriyi işlemek için PHP değişkenini bir değişken ataması olarak HTML içine gömmek en pratik yöntemdir.

    const hamVeri = ;
    const aylar = hamVeri.map(item => item.ay);
    const miktarlar = hamVeri.map(item => item.miktar);

    new Chart(document.getElementById('satisGrafigi'), {
        type: 'bar',
        data: {
            labels: aylar,
            datasets: [{
                label: 'Aylık Satış Miktarı',
                data: miktarlar,
                backgroundColor: 'rgba(54, 162, 235, 0.5)'
            }]
        }
    });

Bu kod, canvas elementini hedef alarak verileri çubuk grafik (bar chart) formatında ekrana basar. map fonksiyonu, veritabanından gelen nesne dizisini, grafiğin ihtiyaç duyduğu basit dizi formatına dönüştürür.

Grafik Yöntemlerinin Karşılaştırılması

İstatistik grafikleri oluştururken farklı yaklaşımlar mevcuttur. İhtiyacınıza en uygun olanı seçmek için aşağıdaki tabloyu inceleyebilirsiniz.

Güvenlik ve Performans Optimizasyonu

Dinamik grafikler oluştururken veri güvenliğini ve performansını göz ardı etmemelisiniz. Özellikle çok büyük veri setlerinde, tüm veriyi tek seferde JSON ile çekmek yerine, belirli aralıklarla (örneğin AJAX ile) veri çekmek daha sağlıklıdır.

Önemli Uyarı: Yazılım geliştirme sürecinde, veritabanı kimlik bilgilerinizi (root, şifre) asla doğrudan kod içerisinde tutmayın. Bunları bir .env dosyasında saklayın ve sunucunuzda bu dosyanın erişime kapalı olduğundan emin olun.

Performans için veritabanı sorgularınızda INDEX kullanmayı unutmayın. 'ay' sütunu gibi sorgularda sıkça kullanılan alanlar için indeks oluşturmak, grafik yüklenme süresini milisaniyelere indirecektir.

Sıkça Sorulan Sorular

Grafiğim neden boş görünüyor?

Genellikle PHP'den gelen JSON verisinin formatı ile JavaScript'in beklediği formatın uyuşmamasından kaynaklanır. Tarayıcınızın "Console" sekmesini kontrol ederek bir JS hatası olup olmadığına bakın.

Veritabanındaki veriler güncellendiğinde grafik otomatik değişir mi?

Yukarıdaki örnek sayfa yenilendiğinde güncellenir. Eğer sayfa yenilenmeden güncellenmesini istiyorsanız, JavaScript ile fetch() kullanarak belirli aralıklarla (örneğin 5 saniyede bir) veritabanından yeni veriyi çeken bir API endpoint'i oluşturmalısınız.

Chart.js yerine başka kütüphane kullanabilir miyim?

Elbette, ApexCharts veya D3.js gibi kütüphaneler de kullanılabilir. Ancak Chart.js, öğrenme eğrisi ve dokümantasyon kalitesi açısından yeni başlayanlar için en ideal tercihtir.

SQL Injection'dan nasıl korunurum?

Her zaman PDO veya MySQLi kullanın ve kullanıcıdan gelen verileri asla doğrudan sorguya dahil etmeyin. Hazırlanmış ifadeler (prepared statements) kullanmak bu riski tamamen ortadan kaldırır.

Grafik renklerini nasıl özelleştirebilirim?

Chart.js dokümantasyonunda belirtilen backgroundColor, borderColor ve hoverBackgroundColor gibi özellikleri kullanarak CSS ile uyumlu renk paletleri oluşturabilirsiniz.

İleri Seviye Veri Filtreleme ve AJAX Entegrasyonu

Grafiklerinizi statik bir yapıdan kurtarıp kullanıcı etkileşimli hale getirmek için AJAX (Asynchronous JavaScript and XML) teknolojisini kullanmak en profesyonel yaklaşımdır. Bu sayede sayfa yenilenmeden veritabanından güncel verileri çekebilir ve grafiği anlık olarak güncelleyebilirsiniz.

Aşağıdaki örnekte, kullanıcının bir tarih aralığı seçtiğini ve bu seçime göre grafiğin yeniden çizildiğini varsayalım:

// fetch_data.php dosyası
header('Content-Type: application/json');
$pdo = new PDO('mysql:host=localhost;dbname=test', 'user', 'pass');

$start = $_GET['start'] ?? date('Y-m-01');
$end = $_GET['end'] ?? date('Y-m-t');

$stmt = $pdo->prepare("SELECT tarih, satis_miktari FROM satislar WHERE tarih BETWEEN ? AND ?");
$stmt->execute([$start, $end]);
echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));

Frontend tarafında ise JavaScript ile bu veriyi çekip Chart.js nesnesini güncelleyebilirsiniz:

function updateChart(startDate, endDate) {
    fetch(`fetch_data.php?start=${startDate}&end=${endDate}`)
        .then(response => response.json())
        .then(data => {
            myChart.data.labels = data.map(item => item.tarih);
            myChart.data.datasets[0].data = data.map(item => item.satis_miktari);
            myChart.update();
        });
}

Büyük Veri Setlerinde Performans Optimizasyonu

Veritabanınızda binlerce veya milyonlarca kayıt varsa, tüm veriyi tek seferde çekmek hem tarayıcıyı dondurur hem de sunucu üzerinde aşırı yük oluşturur. Bu durumu engellemek için şu stratejileri uygulayabilirsiniz:

• Veri Agregasyonu (Gruplama): SQL sorgularınızda GROUP BY kullanarak verileri günlük, haftalık veya aylık bazda özetleyin. Örneğin, SUM(satis_miktari) ile toplamları alarak veri setini küçültün.
• Sunucu Tarafında Önbellekleme (Caching): Çok sık değişmeyen istatistikler için sonuçları Redis veya basit bir JSON dosyası üzerinde 1 saat boyunca saklayın.
• İndeksleme: Sorgularda WHERE koşulunda kullandığınız sütunlara (örneğin tarih sütunu) mutlaka INDEX ekleyin.

İpucu: SQL sorgularınızda SELECT * yerine sadece ihtiyacınız olan sütunları (örneğin SELECT tarih, satis_miktari) seçmek, bellek kullanımını ciddi oranda düşürür.

Hata Ayıklama ve Loglama Süreçleri

Dinamik grafiklerde hata ayıklama genellikle iki aşamalıdır: PHP tarafındaki veri üretim hatası ve JavaScript tarafındaki render hatası. Hataları tespit etmek için şu yöntemleri izleyin:

1. Network Sekmesi: Tarayıcı geliştirici araçlarında (F12) "Network" sekmesine giderek fetch_data.php dosyasının 200 OK dönüp dönmediğini ve dönen JSON'un yapısını kontrol edin.
2. PHP Hata Günlükleri: error_log() fonksiyonunu kullanarak kritik sorguların sonuçlarını sunucu günlüklerine yazdırın.
3. JSON Validasyonu: PHP'den dönen verinin geçerli bir JSON formatında olduğundan emin olmak için json_last_error() fonksiyonunu kullanın.

Eğer grafik hala boş görünüyorsa, tarayıcı konsolunda Chart is not defined veya Cannot read property 'data' of undefined gibi hatalar olup olmadığını kontrol edin. Bu hatalar genellikle grafik nesnesi tam olarak oluşturulmadan veri güncelleme fonksiyonunun tetiklendiğini gösterir.

Sonuç

PHP ile veritabanı destekli dinamik istatistik grafiği oluşturmak, veriyi anlamlı bir hikayeye dönüştürmenin en etkili yoludur. Bu rehberde, veritabanı bağlantısından başlayarak, verilerin JSON formatına dönüştürülmesi ve Chart.js ile görselleştirilmesine kadar olan süreci tamamladık. Bir sonraki adım olarak, grafiği bir AJAX isteği ile dinamik hale getirmeyi ve kullanıcının tarih aralığı seçerek grafiği filtrelemesini sağlayan bir arayüz eklemeyi deneyebilirsiniz. Yazılım geliştirme sürecinizde her zaman temiz kod yazmaya ve güvenliği ön planda tutmaya özen gösterin.

Yasal Sorumluluk Reddi: Bu makalede yer alan kod örnekleri eğitim amaçlıdır. Uygulamanızın üretim ortamına (production) taşınmadan önce, profesyonel güvenlik testlerinden geçirilmesi ve veritabanı yetkilendirmelerinin "en az ayrıcalık" prensibine göre yapılandırılması kullanıcının sorumluluğundadır.