JavaScript ile Etkileşimli Grafikler Oluşturma Rehberi

3. JavaScript Kodu ile Grafiği Nasıl Tanımlarsınız?

Şimdi sıra, app.js dosyanızda grafiği oluşturacak JavaScript kodunu yazmaya geldi. İşte temel bir çubuk grafik için gerekli kod:

// app.js dosyası
document.addEventListener('DOMContentLoaded', function() {
    // 1. Canvas elementini seçin
    const ctx = document.getElementById('myChart').getContext('2d');

    // 2. Grafik verilerinizi hazırlayın
    const labels = ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran'];
    const data = {
        labels: labels,
        datasets: [{
            label: 'Aylık Satışlar', // Grafik başlığı
            data: [1200, 1900, 3000, 5000, 2300, 3200], // Veri noktaları
            backgroundColor: [ // Her çubuk için farklı renkler
                'rgba(255, 99, 132, 0.6)',
                'rgba(54, 162, 235, 0.6)',
                'rgba(255, 206, 86, 0.6)',
                'rgba(75, 192, 192, 0.6)',
                'rgba(153, 102, 255, 0.6)',
                'rgba(255, 159, 64, 0.6)'
            ],
            borderColor: [ // Çubuk kenarlık renkleri
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1 // Çubuk kenarlık genişliği
        }]
    };

    // 3. Grafik yapılandırma seçeneklerini belirleyin
    const config = {
        type: 'bar', // Grafik tipi: 'bar', 'line', 'pie', vb.
        data: data,
        options: {
            responsive: true, // Grafiğin kapsayıcıya göre boyutlanmasını sağlar
            plugins: {
                title: {
                    display: true,
                    text: '2023 Yılı İlk Yarısı Aylık Satış Verileri', // Grafiğin genel başlığı
                    font: {
                        size: 18
                    }
                },
                legend: {
                    display: true, // Legend'i göster
                    position: 'top' // Legend'i üstte göster
                }
            },
            scales: {
                y: {
                    beginAtZero: true, // Y eksenini sıfırdan başlat
                    title: {
                        display: true,
                        text: 'Satış Miktarı (₺)'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Aylar'
                    }
                }
            }
        }
    };

    // 4. Yeni bir Chart örneği oluşturun ve grafiği çizin
    new Chart(ctx, config);
});

Yukarıdaki kodda sırasıyla şu adımları izledik:

1. DOMContentLoaded event listener'ı ile HTML içeriği yüklendikten sonra kodun çalışmasını sağladık.
2. elementini id ile seçip onun 2D çizim bağlamını (context) aldık.
3. Grafikte gösterilecek verileri (labels ve data) tanımladık. datasets dizisi, birden fazla veri serisi eklemenize olanak tanır.
4. Grafiğin nasıl görünmesi gerektiğini belirleyen config nesnesini oluşturduk. Burada grafik tipini (type: 'bar'), veri kaynağını (data) ve çeşitli görünüm seçeneklerini (options) ayarladık. responsive: true seçeneği, grafiğin kapsayıcısının boyutuna göre otomatik olarak ayarlanmasını sağlar ki bu, mobil uyumluluk için çok önemlidir.
5. Son olarak, new Chart(ctx, config); ile yeni bir Chart örneği oluşturarak grafiği Canvas üzerine çizdirdik.

Bu temel örnekle, JavaScript ve Chart.js kullanarak nasıl kolayca bir veri görselleştirmesi oluşturabileceğinizi görmüş olduk. Artık verilerinizi dinamik olarak bu yapıya entegre edebilir ve daha karmaşık grafik türlerine geçiş yapabilirsiniz.

Farklı Grafik Türleri ve Kullanım Alanları: Hangi Grafiği Ne Zaman Kullanmalı?

Veri görselleştirmenin gücü, doğru veriyi doğru grafik türüyle eşleştirmekten gelir. Her grafik türü, belirli bir türdeki bilgiyi en etkili şekilde iletmek için tasarlanmıştır. İşte en yaygın grafik türleri, kullanım alanları ve ne zaman tercih edilmeleri gerektiği:

1. Çizgi Grafikler (Line Charts): Trendleri ve Değişimi Göstermek İçin

Çizgi grafikler, zaman içindeki veri değişimlerini veya farklı kategoriler arasındaki sürekli eğilimleri göstermek için idealdir. Genellikle yatay eksende zaman (gün, ay, yıl) ve dikey eksende ölçülen değer (satış, sıcaklık, hisse senedi fiyatı) bulunur. Örneğin, bir şirketin son beş yıldaki gelir artışını, bir ürünün aylık kullanıcı sayısındaki değişimi veya hava sıcaklığının gün içindeki dalgalanmalarını göstermek için çizgi grafikler tercih edilir. Çok sayıda veri noktası içeren veya sürekli veri akışını izleyen senaryolarda özellikle etkilidirler. Birden fazla çizgi ile farklı veri setlerini aynı grafik üzerinde karşılaştırmak da mümkündür.

const lineChartConfig = {
    type: 'line',
    data: {
        labels: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs'],
        datasets: [{
            label: 'Ürün A Satışları',
            data: [65, 59, 80, 81, 56],
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }, {
            label: 'Ürün B Satışları',
            data: [28, 48, 40, 19, 86],
            borderColor: 'rgb(255, 99, 132)',
            tension: 0.1
        }]
    },
    options: { /* ... */ }
};

2. Pasta Grafikler (Pie Charts): Oranları ve Parçaların Bütüne Oranını Göstermek İçin

Pasta grafikler, bir bütünün parçalarını veya kategorik verilerin oranlarını görselleştirmek için kullanılır. Her dilim, toplamın bir yüzdesini temsil eder. Örneğin, pazar paylarını, anket sonuçlarındaki oy oranlarını veya bir bütçenin farklı kalemlere nasıl dağıldığını göstermek için pasta grafikler idealdir. Ancak, çok fazla dilim olduğunda veya dilimler arasındaki farklar çok küçük olduğunda okunması zorlaşabilirler. Genellikle 5-7'den fazla kategori olmadığında en etkili olurlar. Aynı zamanda "donut" (halka) grafikleri de aynı amaca hizmet eder ancak ortasında boş bir alan bırakarak daha fazla bilgi veya metin eklemeye olanak tanır.

const pieChartConfig = {
    type: 'pie',
    data: {
        labels: ['Elektronik', 'Giyim', 'Ev Eşyaları', 'Kitap'],
        datasets: [{
            data: [300, 50, 100, 70],
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0']
        }]
    },
    options: { /* ... */ }
};

3. Çubuk Grafikler (Bar Charts): Kategorik Verileri Karşılaştırmak İçin

Daha önce basit bir örneğini gördüğümüz çubuk grafikler, farklı kategoriler arasındaki değerleri karşılaştırmak için mükemmeldir. Yatay veya dikey olabilirler. Örneğin, farklı ürünlerin satış miktarlarını, bölgelere göre gelirleri veya anketlerdeki farklı seçeneklerin cevap sayılarını karşılaştırmak için kullanılırlar. Çubuk grafikler, pasta grafiklerin aksine, daha fazla kategori ile başa çıkabilir ve değerler arasındaki farkları daha net bir şekilde gösterir.

4. Dağılım Grafikleri (Scatter Plots): İki Değişken Arasındaki İlişkiyi Göstermek İçin

Dağılım grafikleri, iki sayısal değişken arasındaki ilişkiyi veya korelasyonu göstermek için kullanılır. Her nokta, iki değişkenin bir çiftini temsil eder. Örneğin, öğrenci ders çalışma süresi ile sınav notu arasındaki ilişkiyi, reklam harcamaları ile satış gelirleri arasındaki bağı veya bir popülasyondaki yaş ile boy arasındaki ilişkiyi görselleştirmek için dağılım grafikleri tercih edilir. Bir trend çizgisi eklenerek ilişkinin yönü ve gücü daha belirgin hale getirilebilir.

5. Radar Grafikler (Radar Charts): Çok Boyutlu Verileri Karşılaştırmak İçin

Radar grafikler veya ağ grafikleri, bir veya daha fazla grubun birden fazla boyuttaki performansını karşılaştırmak için kullanılır. Her bir eksen bir özelliği veya boyutu temsil eder. Örneğin, farklı ürünlerin özelliklerini (fiyat, kalite, tasarım, dayanıklılık) veya bir futbolcunun çeşitli beceri setlerini (hız, pas, şut, savunma) karşılaştırmak için idealdir. Çok sayıda boyutu tek bir grafikte özetleyebilirler, ancak çok fazla veri serisi olduğunda okunması zorlaşabilir.

Doğru grafik türünü seçmek, verilerinizi anlamlı hale getirmenin ilk adımıdır. Her grafik türünün kendine özgü avantajları ve dezavantajları olduğunu unutmayın. Amacınız, verilerinizin hikayesini en net ve anlaşılır şekilde anlatmaktır.

İleri Düzey: Dinamik Veri ve Etkileşim Nasıl Sağlanır?

Statik grafikler güzeldir, ancak gerçek dünya uygulamalarında genellikle dinamik veri akışına ve kullanıcı etkileşimine ihtiyaç duyarız. Bir dashboard'un canlı satış verilerini göstermesi, bir hisse senedi uygulamasının fiyat değişimlerini anında güncellemesi veya kullanıcının belirli bir zaman dilimini seçerek verileri filtrelemesi, ileri düzey JavaScript grafik uygulamalarının temelini oluşturur. Bu bölümde, dinamik verilerle çalışma ve kullanıcı etkileşimini grafiklerinize nasıl entegre edeceğinizi keşfedeceğiz.

1. API'den Dinamik Veri Çekme ve Grafikleri Güncelleme

Gerçek zamanlı veya güncel verileri görselleştirmek için genellikle bir API'den veri çekmemiz gerekir. JavaScript'in Fetch API'si, bu işlem için modern ve güçlü bir yöntem sunar. Örneğin, bir sunucudan JSON formatında veri çekip Chart.js grafiğimizi güncelleyebiliriz:

async function fetchSalesData() {
    try {
        const response = await fetch('https://api.example.com/sales-data'); // Örnek API adresi
        if (!response.ok) {
            throw new Error(HTTP hata kodu: ${response.status});
        }
        const apiData = await response.json();

        // API'den gelen verileri Chart.js formatına dönüştür
        const labels = apiData.map(item => item.month); // Veri örneği: [{ month: 'Ocak', sales: 1500 }, ...]
        const sales = apiData.map(item => item.sales);

        // Mevcut grafik örneğini bulun veya yeni bir tane oluşturun
        const ctx = document.getElementById('myDynamicChart').getContext('2d');
        let myChart = Chart.getChart('myDynamicChart'); // Var olan grafiği bulmaya çalış

        if (myChart) {
            // Grafik zaten varsa, verilerini güncelle
            myChart.data.labels = labels;
            myChart.data.datasets[0].data = sales;
            myChart.update(); // Grafiği yeniden çiz
        } else {
            // Grafik yoksa, yeni bir tane oluştur
            myChart = new Chart(ctx, {
                type: 'line', // Veya 'bar'
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Dinamik Satışlar',
                        data: sales,
                        borderColor: 'rgba(75, 192, 192, 1)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    // ... diğer seçenekler ...
                }
            });
        }
    } catch (error) {
        console.error('Veri çekme veya grafik güncelleme hatası:', error);
    }
}

// Sayfa yüklendiğinde veya belirli aralıklarla veriyi çekin
document.addEventListener('DOMContentLoaded', fetchSalesData);
// setInterval(fetchSalesData, 60000); // Her 60 saniyede bir güncelle

Bu örnekte, bir API'den veri çektik, bu veriyi Chart.js'in beklediği formata dönüştürdük ve ardından mevcut bir grafiği myChart.update() metoduyla güncelledik. Eğer grafik daha önce oluşturulmamışsa, yeni bir Chart örneği oluşturulur. Bu yaklaşım, canlı veri akışı olan uygulamalar için hayati öneme sahiptir.

2. Kullanıcı Etkileşimleri ve Filtreleme

Grafiklerinizi daha etkileşimli hale getirmenin bir yolu, kullanıcıların verilerle doğrudan etkileşim kurmasını sağlamaktır. Bu, örneğin bir zaman aralığı seçici, bir kategori filtresi veya bir veri noktasının üzerine gelindiğinde ayrıntı gösteren araç ipuçları (tooltip) ile yapılabilir.

Chart.js, options içinde birçok etkileşim özelliği sunar. Örneğin, araç ipuçlarını ve üzerlerine gelindiğinde (hover) davranışları özelleştirebilirsiniz. Daha karmaşık etkileşimler için, HTML form elemanları (düşen menüler, tarih seçiciler) kullanarak kullanıcılardan giriş alabilir ve bu girişe göre grafiğin verilerini veya ayarlarını değiştirebilirsiniz.

// Örnek: Yıl seçimine göre grafiği güncelleme
const yearSelector = document.getElementById('yearSelect');
yearSelector.addEventListener('change', async function() {
    const selectedYear = this.value;
    // API'den seçilen yıla göre veri çekme
    const response = await fetch(https://api.example.com/sales-data?year=${selectedYear});
    const apiData = await response.json();

    // Verileri güncelle ve grafiği yeniden çiz
    myChart.data.labels = apiData.map(item => item.month);
    myChart.data.datasets[0].data = apiData.map(item => item.sales);
    myChart.update();
});

3. Kapsamlı Özelleştirme ve Performans: D3.js ve Plotly.js

Chart.js çoğu temel ve orta düzey grafik ihtiyacını karşılarken, bazı projeler benzersiz özelleştirme yetenekleri veya çok yüksek performans gerektirebilir. Bu durumlarda, D3.js veya Plotly.js gibi kütüphaneler devreye girer.

• Uzman İpucu: D3.js, öğrenme eğrisi yüksek olsa da, web standartlarına (SVG, Canvas, HTML) tam erişim sağlayarak neredeyse hayal edebileceğiniz her türlü görselleştirmeyi oluşturmanıza olanak tanır. Verilerle DOM öğeleri arasında doğrudan bir bağ kurar ve son derece özelleştirilebilir. Eğer veri görselleştirme sizin için bir sanat biçimi ise ve sıfırdan her detayı kontrol etmek istiyorsanız, D3.js'i keşfetmelisiniz.
• Plotly.js: Bilimsel ve analitik görselleştirmeler için tasarlanmıştır. 2D, 3D ve istatistiksel grafikler dahil olmak üzere geniş bir grafik yelpazesi sunar. Etkileşim özellikleri (yakınlaştırma, kaydırma, veri noktası bilgisi) yerleşik olarak gelir ve büyük veri setleriyle iyi performans gösterir. Python ve R gibi dillerle de entegre çalışabilir, bu da veri bilimcileri arasında popülerliğini artırır. Eğer karmaşık bilimsel verileri veya 3D modelleri görselleştirmeniz gerekiyorsa, Plotly.js güçlü bir seçenektir.

Bu ileri düzey teknikler ve kütüphaneler, JavaScript ile grafik oluşturma yeteneklerinizi bir sonraki seviyeye taşıyarak, sadece görsel değil, aynı zamanda işlevsel ve etkileşimli veri görselleştirme çözümleri geliştirmenize olanak tanır.

Mobil Uyumlu Grafikler: Her Cihazda Harika Görünüm Nasıl Elde Edilir?

Günümüz internet trafiğinin büyük bir kısmı mobil cihazlar üzerinden gerçekleştiğinden, web sitelerinizin ve dolayısıyla grafiklerinizin mobil uyumlu (responsive) olması artık bir zorunluluktur. Mobil uyumlu grafikler, ekran boyutu ne olursa olsun okunabilir, erişilebilir ve kullanışlı olmalıdır. JavaScript ile grafik oluştururken, bu uyumluluğu sağlamak için atabileceğiniz birkaç önemli adım vardır.

1. Viewport Meta Etiketi: Temel Adım

Her responsive web sayfasında olduğu gibi, mobil uyumlu grafikler için de HTML dosyanızın bölümüne viewport meta etiketini eklemek zorunludur. Bu etiket, tarayıcılara sayfanın cihazın genişliğine göre ölçeklenmesi gerektiğini bildirir:

Bu etiket olmadan, mobil tarayıcılar sayfanızı masaüstü görünümünde render edebilir ve ardından küçültebilir, bu da grafiklerinizin okunaksız hale gelmesine neden olur.

2. Esnek Kapsayıcılar ve Responsive Kütüphaneler

JavaScript grafik kütüphanelerinin çoğu, özellikle Chart.js gibi popüler olanlar, responsive tasarım için yerleşik destek sunar. Grafiğinizi barındıran veya elementini esnek bir kapsayıcı (genellikle bir

const config = {
    type: 'bar',
    data: data,
    options: {
        responsive: true, // Kapsayıcıya göre otomatik boyutlanma
        maintainAspectRatio: false, // En boy oranını korumaz, kapsayıcıya tamamen uyar
        plugins: {
            // ...
        },
        scales: {
            // ...
        }
    }
};

/* styles.css */
.chart-container {
    width: 90%; /* Kapsayıcının %90 genişlikte olmasını sağlar */
    max-width: 900px; /* Maksimum 900px genişliğe ulaşır */
    margin: auto; /* Ortalamak için */
    height: 400px; /* Belirli bir yükseklik ayarlayabilirsiniz */
}

/* styles.css */
/* Varsayılan stil (masaüstü için) */
.chart-title {
    font-size: 24px;
    text-align: center;
}
.chart-legend {
    display: block; /* Legend'i göster */
}

/* Küçük ekranlar (mobil cihazlar) için stil */
@media (max-width: 768px) {
    .chart-container {
        height: 300px; /* Mobilde daha az yükseklik */
        width: 95%;
    }
    .chart-title {
        font-size: 18px; /* Başlık boyutunu küçült */
    }
    /* Chart.js opsiyonlarında da benzer değişiklikler yapmanız gerekebilir */
    /* Örneğin, legend'i mobil cihazlarda gizlemek için Chart.js yapılandırmasını JavaScript ile değiştirebilirsiniz */
}

function getChartOptions() {
    const isMobile = window.innerWidth <= 768; // Mobil cihaz kontrolü
    return {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: !isMobile, // Mobilde legend'i gizle
                position: 'bottom'
            },
            title: {
                display: true,
                text: 'Satış Verileri',
                font: {
                    size: isMobile ? 16 : 24
                }
            }
        },
        scales: {
            x: {
                ticks: {
                    maxRotation: isMobile ? 90 : 0, // Mobilde etiketleri döndür
                    minRotation: isMobile ? 90 : 0
                }
            }
        }
    };
}

// Grafiği oluştururken bu seçenekleri kullanın
// new Chart(ctx, { type: 'bar', data: data, options: getChartOptions() });

// Ekran boyutu değiştiğinde grafiği güncellemek için
window.addEventListener('resize', function() {
    const myChart = Chart.getChart('myResponsiveChart');
    if (myChart) {
        myChart.options = getChartOptions();
        myChart.update();
    }
});

// JavaScript (app.js)
const salesCtx = document.getElementById('monthlySalesChart').getContext('2d');
const monthlySalesChart = new Chart(salesCtx, {
    type: 'line',
    data: {
        labels: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'],
        datasets: [{
            label: '2023 Yılı Satışları',
            data: [12000, 15000, 14000, 18000, 22000, 20000, 25000, 28000, 27000, 30000, 35000, 40000],
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.3,
            fill: true,
            backgroundColor: 'rgba(75, 192, 192, 0.2)'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            title: { display: true, text: 'Aylık Satış Trendleri' },
            legend: { display: true, position: 'bottom' }
        },
        scales: {
            y: { beginAtZero: true, title: { display: true, text: 'Toplam Satış (₺)' } },
            x: { title: { display: true, text: 'Ay' } }
        }
    }
});

// JavaScript (app.js)
const productsCtx = document.getElementById('topProductsChart').getContext('2d');
const topProductsChart = new Chart(productsCtx, {
    type: 'bar', // Yatay çubuklar için 'bar' kullanılır, eksenler değiştirilir
    data: {
        labels: ['Akıllı Telefon', 'Dizüstü Bilgisayar', 'Kablosuz Kulaklık', 'Akıllı Saat', 'Kamera'],
        datasets: [{
            label: 'Satış Geliri (₺)',
            data: [75000, 60000, 35000, 28000, 20000],
            backgroundColor: ['rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)', 'rgba(75, 192, 192, 0.6)', 'rgba(153, 102, 255, 0.6)'],
            borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)'],
            borderWidth: 1
        }]
    },
    options: {
        indexAxis: 'y', // Çubukları yatay yapmak için
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            title: { display: true, text: 'En Çok Satan Ürün Kategorileri' }
        },
        scales: {
            x: { beginAtZero: true, title: { display: true, text: 'Gelir (₺)' } },
            y: { title: { display: true, text: 'Kategori' } }
        }
    }
});

// JavaScript (app.js)
const orderStatusCtx = document.getElementById('orderStatusChart').getContext('2d');
const orderStatusChart = new Chart(orderStatusCtx, {
    type: 'pie',
    data: {
        labels: ['Beklemede', 'Hazırlanıyor', 'Kargoya Verildi', 'Teslim Edildi', 'İptal Edildi'],
        datasets: [{
            data: [150, 300, 200, 1200, 50],
            backgroundColor: ['#FFC107', '#2196F3', '#00BCD4', '#4CAF50', '#F44336'],
            hoverOffset: 4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            title: { display: true, text: 'Güncel Sipariş Durumları' }
        }
    }
});