Chart.js ile Veri Görselleştirme ve Grafik Tabloları

Bazı verileri, gösterge tabloları veya çizelgeler olmadan anlamak çok yorucu olabiliyor. Bu tip görsel grafikler Karmaşık istatistikleri anında basite indirgeyip etkili bir şekilde anlaşılmalarını sağlıyor. ChartJS de bu verileri görselleştirmede kullanılan kütüphanelerden biri.

ChartJS; Line, Bar, Radar, Pie, Polar, Bubble, Scatter tarzlarında görsel grafikler hazırlamanıza olanak tanıyor. Telefon ve tablet gibi mobil cihazlarda çalışabilme özelliği ve tüm modern tarayıcılar tarafından desteklenmesi de kütüphanenin artı yanları. Üstelik tüm grafik göstergeleri animasyonlu ve özelleştirilebilir.

ChartJS ile ilgili bir çalışma yapabilmeniz için öncelikle sayfanıza JavaScript dosyasını çağırmanız gerekiyor.

<script type="litespeed/javascript" data-src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

Ardından sayfaya canvas etiketi ile bir ID atamamız gerekiyor. Yazacağımız script grafiği bu alanda gösterecek. Canvas’a width ve height değerleri vererek belli bir genişliğe ve yüksekliğe sahip olmasını sağlayabilirsiniz.

<canvas id="chart"></canvas>

Sonrasında ise sıra chart.js’nin kodlarını yazmaya geldi. Videoda bu bilgilere nasıl ulaşabileceğinizi adım adım gösteriyorum. Chart.js’nin kendi web sitelerinde gerekli tüm kodlar, tüm özellikler açıklamalarıyla verilmiş. Oradaki örneklere bakarak istediğimiz şekilde görsel tablolar hazırlayabiliriz.

Popular Eğitimler

Google Web Fontları Nasıl Kullanılır?

Google web fontları nasıl kullanılır? Google web yazı karakterlerini sitemize nasıl ekleriz? Google Web fontlarının Türkçe desteği var mı?

CSS ile Padding ve Margin Kullanımı (Boşluklar)

CSS’te sayfa tasarlarken kullanılan boşluklar padding ve margin özellikleri ile verilir. Padding…

HTML ve CSS ile Mouse Hover Efekti Buton Animasyonu

Hareketli butonlar insanların ilgisini çekebilir. Fare imleci ile üzerine gelindiğinde ilgi çekici…

CSS ile Linklere Düz Çizgi Yerine Hareketli Dalgalı Çizgi

Linkler varsayılan olarak altı düz çizgili elemanlardır web sitelerinde. Kullanıcının ilgisini çekmesi…

cPanel ile Ücretsiz Let’s Encrypt SSL Sertifikası Kurulumu

Web sitenizin güvenliği için SSL sertifikası nasıl satın alınır? Wordpress’e ücretsiz SSL nasıl kurulur?

SSH ile Dosya Sıkıştırma ve Açma

Linux altında SSH ile dosyaları sıkıştırma ve açma işlemleri komutlarla yapılabilir. tar komutu yardımıyla istenen dosyaları…