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
Türkiye (Türkçe)
Worldwide (English)<!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://websoft.com.tr/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
<?php
require "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>
