Embed

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


<style>
    body {
        background: #0D1117; /* Dark theme */
        color: #ffffff;
        font-family: 'Arial', sans-serif;
        text-align: center;
        padding: 20px;
    }

    /* Visitor Count Section - Now Without Boxes */
    .visitor-container {
        margin-bottom: 60px; /* More space above the graph */
    }

    /* Floating Visitor Count Text */
    .visitor-count {
        font-size: 22px; /* Clear and readable */
        font-weight: bold;
        display: inline-block;
        margin: 0 25px;
    }

    .current-visitors {
        color: #00FF99; /* Green for current visitors */
    }

    .total-visitors {
        color: #FF9933; /* Orange for total visitors */
    }

    /* Graph Container - Large & Centered */
    .chart-container {
        width: 90%;
        max-width: 900px;
        margin: auto;
        background: #161B22;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 0 25px rgba(0, 255, 153, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    canvas {
        width: 100%;
        height: 500px; /* Large graph */
    }
</style>


<div class="visitor-container">
    <span class="visitor-count current-visitors">
        Current Visitors: <span id="current-visitor-count">3000</span>
    </span>
    <span class="visitor-count total-visitors">
        Total Visitors: <span id="total-visitor-count">5000</span>
    </span>
</div>


<div class="chart-container">
    <canvas id="visitorChart"></canvas>
</div>

<script>
    // Retrieve visitor counts from local storage
    let totalCount = localStorage.getItem("totalVisitorCount");
    let currentCount = localStorage.getItem("currentVisitorCount");

    // Initialize values if first-time load
    if (totalCount === null) {
        totalCount = 5000; // Starting Total Visitors
    } else {
        totalCount = parseInt(totalCount);
    }

    if (currentCount === null) {
        currentCount = 3000; // Starting Current Visitors
    } else {
        currentCount = parseInt(currentCount);
    }

    // Increase the count properly (no random decreases)
    totalCount++;
    currentCount++;

    // Save updated counts to local storage
    localStorage.setItem("totalVisitorCount", totalCount);
    localStorage.setItem("currentVisitorCount", currentCount);

    // Display the visitor numbers
    document.getElementById("current-visitor-count").innerText = currentCount;
    document.getElementById("total-visitor-count").innerText = totalCount;

    // Generate a steadily increasing graph
    let visitorData = [];
    let labels = [];
    let now = new Date();

    for (let i = 10; i >= 1; i--) {
        let time = new Date(now - i * 3000);
        labels.push(time.toLocaleTimeString());
        visitorData.push(currentCount - (10 - i)); // Only increasing trend
    }
    labels.push(now.toLocaleTimeString());
    visitorData.push(currentCount);

    // Create the Graph
    let ctx = document.getElementById("visitorChart").getContext("2d");
    let visitorChart = new Chart(ctx, {
        type: "line",
        data: {
            labels: labels,
            datasets: [{
                label: "Live Visitor Growth",
                data: visitorData,
                borderColor: "#00FF99",
                backgroundColor: "rgba(0, 255, 153, 0.2)",
                borderWidth: 3,
                pointRadius: 5,
                pointBackgroundColor: "#00FF99",
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            animation: {
                duration: 800
            },
            scales: {
                y: {
                    beginAtZero: false
                }
            }
        }
    });

    // Function to Update Graph in Real-Time with Proper Growth
    function updateGraph() {
        let newTime = new Date().toLocaleTimeString();
        labels.shift();
        labels.push(newTime);

        // Ensure count ONLY increases
        currentCount++;
        totalCount++;

        // Save updated counts
        localStorage.setItem("currentVisitorCount", currentCount);
        localStorage.setItem("totalVisitorCount", totalCount);

        // Update numbers on page
        document.getElementById("current-visitor-count").innerText = currentCount;
        document.getElementById("total-visitor-count").innerText = totalCount;

        // Update graph data
        visitorData.shift();
        visitorData.push(currentCount);

        visitorChart.data.labels = labels;
        visitorChart.data.datasets[0].data = visitorData;
        visitorChart.update();
    }

    // Update graph every 3 seconds
    setInterval(updateGraph, 3000);
</script>

Keshav Chopra