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

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/[email protected]"></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

<?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/[email protected]"></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>

 

İlk Yorumu Yapan Sen Ol!

Web Tasarımlar

  • Lisans Yönetim Scripti 2

    19.5K
    1000.00₺
  • Canlı Radyo Dark Scripti

    12.5K
    1000.00₺
  • Canlı Radyo Light Scripti

    7.5K
    1000.00₺
  • Rüzgar Radyo Scripti

    7.7K
    0.00₺
  • Radyo Minimal

    3.6K
    1000.00₺
  • Ekitap Scripti

    5.5K
    3000.00₺
  • Aşk Sevgililer Günü Evlilik

    6.9K
    1000.00₺
  • Sohbet Scripti

    7.2K
    0.00₺
  • Dialog Whatsapp Benzeri Sohbet

    4.3K
    0.00₺
  • Firebase Chat

    3.3K
    0.00₺
  • Web Ajans Scripti

    21.1K
    3000.00₺
  • Ajans Scripti Kolay Kullanım

    2.6K
    1000.00₺
  • Ajans Scripti V2

    2.8K
    1000.00₺
  • Ajans Scripti V3

    2.7K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Scripti

    1.9K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Web Tasarım V2

    2.2K
    1000.00₺
  • Mobil Uyumlu Çilingir Scripti

    1.7K
    1000.00₺
  • Kuaför Güzellik Salonu Spa Merkezi Web Tasarım

    2.2K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı

    1.9K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V2

    36.8K
    1000.00₺
  • İlaçlama Şirketi Web Tasarımı

    4.7K
    1000.00₺
  • İlan Web Tasarımı

    2.1K
    1000.00₺
  • İlan Web Tasarımı V2

    1.9K
    1500.00₺
  • İnşaat Firması Web Tasarımı

    1.7K
    1000.00₺
  • İnşaat Firması Tasarımı V2

    1.8K
    1000.00₺
  • Kitapçı Kırtasiye Web Tasarımı

    2.3K
    1000.00₺
  • Kombi Klima Servisi Web Tasarımı

    2K
    1000.00₺
  • Korku Evi Eğlence Mekanı Web Tasarımı

    1.9K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V2

    2.9K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V3

    2.9K
    1000.00₺
  • Ajans Web Tasarımı V4

    2.3K
    1500.00₺
  • Kurumsal Firma Web Tasarımı V4

    2.7K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V5

    3.1K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V6

    2.9K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V7

    3.2K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V8

    2.8K
    1000.00₺
  • Mobilya Dekorasyon Web Tasarımı

    2.4K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı

    1.9K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V2

    2.2K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V3

    2.2K
    1000.00₺
  • Ana Okulu Ve Kreş Web Tasarımı

    2K
    1000.00₺
  • Otel Pansiyon Web Tasarımı

    2.1K
    1000.00₺
  • Özel Oto Servis Web Tasarımı

    1.8K
    1000.00₺
  • Rent A Car Araç Kiralama Web Tasarımı

    5.7K
    1000.00₺
  • Rent A Car Araç Kiralama Web Tasarımı V2

    2.9K
    1000.00₺
  • Restaurant Cafe Bar Lokanta Web Tasarımı

    2.5K
    1000.00₺
  • Restaurant Cafe Bar Lokanta Web Tasarımı V2

    2.3K
    1000.00₺
  • Teknik Servis Web Tasarımı

    2.4K
    1000.00₺
  • Sigorta Acenta Web Tasarımı

    2K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı

    1.9K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı V2

    2.4K
    1000.00₺
  • Sürücü Kursu Web Tasarımı

    2.5K
    1000.00₺
  • Tek Ürün Satış Web Tasarımı

    2.5K
    1000.00₺
  • Tek Ürün Satış Web Tasarımı V2

    2.3K
    1000.00₺
  • Tek Ürün Yaprak Web Tasarımı

    2.2K
    1100.00₺
  • Tek Ürün Yaprak Web Tasarımı V2

    2.4K
    1100.00₺
  • Tek Ürün Satış Web Tasarımı V3

    2.4K
    1000.00₺
  • Temizlik Şirketi Web Tasarımı

    2.4K
    1000.00₺
  • Temizlik Şirketi Web Tasarımı V2

    2.5K
    1000.00₺
  • Ajans Web Tasarımı V5

    2.8K
    1000.00₺
  • Ajans Web Tasarımı V6

    3.9K
    1000.00₺
  • Werock Radyo Web Tasarımı

    3.8K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Tasarımı V3

    1.2K
    1000.00₺
  • Kuaför Güzellik Salonu Spa Merkezi Web Tasarımı V2

    1.1K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V3

    3.6K
    1000.00₺
  • İnşaat Firması Web Tasarımı V3

    1.1K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V9

    1.3K
    1000.00₺
  • Mimarlık Web Tasarımı

    1.1K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V4

    1.2K
    1000.00₺
  • Ana Okulu Ve Kreş Web Tasarımı V2

    1.1K
    1000.00₺
  • Psikolog Web Tasarımı

    1.3K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı V3

    1.5K
    1200.00₺
  • Sürücü Kursu Web Tasarımı V2

    1.5K
    1000.00₺
  • Teknik Servis Web Tasarımı V3

    1.6K
    1000.00₺
  • Ajans Web Tasarımı V7

    1.3K
    900.00₺

Vip Tema Web Ajans Yazılımı

Profesyonel ve her yönü ile kontrol edilebilir gelişmiş çok özellikli ajans yazılımıdır. İşte öne çıkan özellikler.

  • PAYTR Ödeme Entegrasyonu
  • SHIPY Ödeme Entegrasyonu
  • WHM Hosting Satış Entegrasyonu
  • Domain Sorgulama/Satış Entegrasyonu
  • Google Authenticator
  • SMS 2 Faktörlü Doğrulama
  • Net Gsm SMS Entegrasyonu
  • İleti Merkezi SMS Entegrasyonu
  • İnteraktif SMS Entegrasyonu
  • Mas GSM SMS Entegrasyonu
img