bLastX I Kullanıcı Sayısına Göre Grafik Eklentisi

bLastX · 11 Mar 2025

HTML:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Site İstatistikleri</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #fafafa;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #2196F3;
            color: white;
            text-align: center;
            padding: 15px 0;
        }
        .stat-container {
            display: flex;
            justify-content: space-around;
            padding: 20px;
        }
        .stat-card {
            background-color: #ffffff;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin: 10px;
            width: 220px;
            border-radius: 10px;
            text-align: center;
        }
        .stat-card h2 {
            margin: 0;
            color: #2196F3;
        }
        .stat-card p {
            font-size: 18px;
            color: #555;
        }
        .chart {
            width: 50%;
            margin: 20px auto;
            padding: 20px;
        }
    </style>
</head>
<body>

<header>
    <h1>Web Site İstatistikleri</h1>
</header>

<div class="stat-container">
    <div class="stat-card">
        <h2>Toplam Ziyaretçi</h2>
        <p>3,500</p>
    </div>
    <div class="stat-card">
        <h2>Bugün Ziyaretçi</h2>
        <p>250</p>
    </div>
</div>

<div class="stat-container">
    <div class="stat-card">
        <h2>Toplam Sayfa Görüntülenme</h2>
        <p>20,300</p>
    </div>
    <div class="stat-card">
        <h2>Bugün Sayfa Görüntülenme</h2>
        <p>1,200</p>
    </div>
</div>

<!-- Basit Grafik için Placeholder -->
<div class="chart">
    <canvas id="myChart" width="400" height="200"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            datasets: [{
                label: 'Sayfa Görüntülenmeleri',
                data: [120, 200, 150, 170, 220, 300, 400],
                backgroundColor: 'rgba(33, 150, 243, 0.2)',
                borderColor: 'rgba(33, 150, 243, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>

</body>
</html>

bLastX I Kullanıcı Sayısına Göre Grafik Eklentisi

bLastX

www.blastx.work

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Benzer konular