Chart. Js Ve Php İle Dinamik Ziyaretçi Grafiği

Chart.js ve Php kullanarak dinamik ziyaretçi grafiği nasıl yapılır onu anlatacağız. Chart.js kullanmak için öncelikle https://www.chartjs.org/docs/latest/getting-started/ sayfasından cdn script dosyasını projemize dahil edelim. Ardından jquery kullanacağımız için jquery kütüphanesini dahil ediyoruz. Bu dosyanın adı index.php olsun.

index.php

<!DOCTYPE html><html><head><title>Char.js</title><button onclick="showGraph()">Yenile</button><canvas id="ziyaretciler" style="height:350px; width:auto;"></canvas></head><body><script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script></body></html>

ziyaretciler adlı veritabanı

id	ip	tarih	ziyaret
auto increment primary key	varchar(200)	date	integer

Ben bu projede veritabanı işlemleri için basic.db sınıfını kullanacağım. Bu sınıfı https://github.com/tayfunerbilen/basicdb bağlantısından projenize dahil edebilirsiniz.

İp adresi ve ziyaretçiler sitemizi ziyaret ettiğinde veritabanına ekleme yapmak için iki adet fonksiyon yazacağız. Bunun için bir fonksiyon.php dosyası oluşturalım.

fonksiyon.php

function ziyaretci(){global $db;$ziyaretciler = $db->from('ziyaretciler')->where('ip',gercekip())->where('YEAR(tarih)',date('Y'))->where('MONTH(tarih)',date('m'))->where('DAY(tarih)',date('d'))->first();if ($ziyaretciler) {//BUGÜN BU İP DEN ZİYARETÇİ VARSA$db->update('ziyaretciler')->where('ip',gercekip())->where('YEAR(tarih)',date('Y'))->where('MONTH(tarih)',date('m'))->where('DAY(tarih)',date('d'))->set(['ziyaret' => $ziyaretciler['ziyaret']+1]);}else{$db->insert('ziyaretciler')->set(['ip' => gercekip(),'ziyaret' => 1,'tarih' => date('Y-m-d')]);}}function gercekip() {if (!empty($_SERVER['HTTP_CLIENT_IP'])) {$ip=$_SERVER['HTTP_CLIENT_IP'];} elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {$ip=$_SERVER['HTTP_X_FORWARDED_FOR'];} else {$ip=$_SERVER['REMOTE_ADDR'];} return $ip;}

fonksiyon.php dosyamızı index.php dosyasına dahil etmemiz gerek ve bu sayfa her ziyaret edildiğinde ziyaretçileri alabilmek için fonksiyonun çalışmasını sağlamalıyız. Şimdi de ziyaretçi verilerini grafik üzerinde kullanabilmek için json formatta bir veri üreteceğiz. Bu sayfaya istekte bulunup grafik içerisinde çağıracağız. Verileri alacağımız dosyayı oluşturuyoruz.

data-ajax.php

header('Content-Type:application/json');date_default_timezone_set('Europe/Istanbul');$ziyaretciler = $db->from('ziyaretciler')->groupby('tarih')->orderby('tarih','desc')->select('sum(ziyaret) as cogulziyaret, date_format(tarih,\'%d.%m.%Y\') as tarih, count(ip) as tekilziyaret')->limit(0,30) //Son 30 günü verir değiştirebilirsiniz.->all();$data = array();foreach ($ziyaretciler as $row) {$data[] = $row;}echo json_encode($data);

data-ajax.php sayfasını tarayıcıda ziyaret ettiğinizde https://sitenisevsinler.com/ziyaretciler-grafik-ajax bu linkteki gibi bir sonuç vermeli

Bu işlemin ardından index.php dosyamıza dönelim ve data-ajax.php dosyasına istek atalım.

index.php

<?phprequire "fonksiyon.php";ziyaretciler();?><!DOCTYPE html><html><head><title>Char.js</title><button onclick="showGraph()">Yenile</button><canvas id="ziyaretciler" style="height:350px; width:auto;"></canvas></head><body><script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script><script>$(document).ready(function () {showGraph();});function showGraph(){{$.post("data-ajax.php",function (data){console.log(data);var tarih = [];var cogulziyaret = [];var tekilziyaret = [];for (var i in data) {tarih.push(data[i].tarih);cogulziyaret.push(data[i].cogulziyaret);tekilziyaret.push(data[i].tekilziyaret);}var chartdata = {labels:tarih,datasets:[{label:'Tekil Hit',backgroundColor:'#9b59b6',borderColor:'#8e44ad',data:tekilziyaret},{label:'Çoğul Hit',backgroundColor:'#34495e',borderColor:'#2c3e50',data:cogulziyaret}]};var graphTarget = $("#ziyaretciler");var barGraph = new Chart(graphTarget, {type:'bar',data:chartdata});});}}</script></body></html>