Chart.we will tell you how to make a dynamic visitor graph using js and Php. Chart.first of all, to use js https://www.chartjs.org/docs/latest/getting-started let's include the cdn script file from the / page in our project. Then we include the jquery library, since we will use jquery. The name of this file is index.let it be php.
index.php
<!DOCTYPE html>
<html>
<head>
<title> Char.js</title>
<button onclick="showGraph()">Refresh</button>
<canvas id="visitors" 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>
a database called visitors
id ip date visit
auto increment primary key varchar(200) date integer
I have basic for database operations in this project.i will use the db class. This class https://github.com/tayfunerbilen/basicdb you can include it in your project from the link.
We will write the ip address and two functions to add to the database when visitors visit our site. A function for this.let's create a php file.
function.php
function visitor(){
global $db;
$visitors = $db->from('visitors')
->where('ip',real())
->where('YEAR(date)',date('Y'))
->where('MONTH(date)',date('m'))
->where('DAY(date)',date('d'))
->first();
if ($visitors) {
//IF THERE ARE VISITORS FROM THIS IP TODAY
$db->update('visitors')
->where('ip',real())
->where('YEAR(date)',date('Y'))
->where('MONTH(date)',date('m'))
->where('DAY(date)',date('d'))
->set([
'visit' => $visitors['visit']+1
]);
}else{
$db->insert('visitors')
->set([
'ip' => vercekip(),
'visit' => 1,
'date' => date('Y-m-d')
]);
}
}
function vercekip() {
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;
}
function.index our php file.we need to include it in the php file and we need to make the function work so that we can receive visitors every time this page is visited. Now we will generate data in json format in order to use the visitor data on the graph. We will make a request to this page and call it in the graph. We create the file from which we will receive the data.
data-ajax.php
header('Content-Type: application/json');
date_default_timezone_set('Europe/Istanbul');
$visitors = $db->from('visitors')
->groupby('date')
->orderby('date','desc')
->select('sum(visit) as current visit, date_format(date,\'%d.%m.%Y\') as date, count(ip) as singular visit')
->you can change the limit(0,30) //Gives the last 30 days.
->all();
$data = array();
foreach ($visitors as $row) {
$data[] = $row;
}
echo json_encode($data);
data-ajax.when you visit the php page in the browser https://websoft.com.tr/ziyaretciler-grafik-ajax this should give a result like the one on the link
After this process, the index.let's go back to our php file and data-ajax.let's request a php file.
index.php
<?php
require "function.php";
visitors();
?>
<!DOCTYPE html>
<html>
<head>
<title> Char.js</title>
<button onclick="showGraph()">Refresh</button>
<canvas id="visitors" 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>
<scripting>
$(document).ready(function () {
showGraph();
});
function showGraph()
{
{
$.the post("data-ajax.php",
function (data)
{
console.log(data);
date = [];
var cogulvisit = [];
there is a singular visit = [];
for (var i in data) {
history.push(data[i].date);
cogulvision.push(data[i].cogulvisit);
tekilziyaret.push(data[i].singular visit);
}
var chartdata = {
labels: history,
datasets: [
{
label: 'Singular Hit',
backgroundColor: '#9b59b6',
borderColor: '#8e44ad',
data: unique visit
},
{
label: 'Plural Hits',
backgroundColor: '#34495e',
borderColor: '#2c3e50',
data: current visit
}
]
};
var graphTarget = $("#visitors");
var barGraph = new Chart(graphTarget, {
type: 'bar',
data: chartdata
});
});
}
}
</scripting>
</body>
</html>
Copyright © 2024 All Rights Reserved
Turkey (Türkçe)
Worldwide (English)