Merhaba değerli okurlar, bugün chart.js kütüphanesini kullanarak bir Chart oluşturacağız ve Chart değerlerini PHP diziden çekeceğiz.
Chart.js açık kaynak kodlu bir veri görselleştirme kütüphanesidir. Chart.js ile grafik, çizgi, pie vb grafikler oluşturabilir. Chart.js Dökümantasyonu
Chart.js Kullanımı
Bu bağlantıya tıklayarak chart.min.js ve bootstrap.min.css dosyalarımızı indirip klasörümüzün içine atalım.
<head></head> kımsına yukarıdaki iki dosyayı dahil edelim.
<link rel="stylesheet" href="bootstrap.min.css">
<script src="chart.min.js"></script>
<body></body> tagları içerisine kanvas oluşturalım.
<div class="container mt-5">
<canvas id="chart"></canvas>
</div>
<html> tagının en üstünde datalarımızı özelleştirelim. Dataları array ile dizi haline getirip javascript üzerinde kullanabilmek için json encode yapıyoruz.
<?php
$data = array(55,34,44,24,28);
$labels = array('Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs');
$dataRes = json_encode($data);
$labelRes = json_encode($labels);
?>
Chart'ımızı oluşturalım. </body> kısmının bir üstüne JavaScript kodlarımızı yazalım.
<script type="text/javascript">
const ctx = document.getElementById('chart');
const chartClass = new Chart(ctx, {
type: 'bar',
data: {
labels: <?= $labelRes; ?>,
datasets: [{
label: 'Aylık Satışlar',
data: <?= $dataRes; ?>,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(153, 102, 255)',
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
İşte bu kadar, artık chart.js eklentisini projelerinizde kullanmaya hazırsınız. Ayrıca PHP cookie kullanımı, oluşturma, okuma ve silme adlı yazımızda dikkatinizi çekebilir.
Yorumlar (0)