GNU/_PAGE/chart/upbit/line/volume_line_simple.php
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>실시간 업비트 거래량 차트</title>

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

<style>
body {
    margin:0;
    padding:0;
    background:#0d0d0d;
    color:#f5f5f5;
    font-family:Arial, sans-serif;
}
header {
    padding:12px 16px;
    background:#111;
    border-bottom:1px solid #222;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
h2 { margin:0; font-size:20px; }
select {
    background:#222;
    color:#fff;
    padding:6px 10px;
    border:1px solid #444;
    border-radius:6px;
    font-size:14px;
}
#volumeBox {
    margin-left:12px;
    font-size:18px;
    font-weight:bold;
    color:#ffb300;
}
#chart-wrap {
    height:calc(100vh - 70px);
    padding:10px;
}
#chartCanvas {
    width:100%;
    height:100%;
}
a {
    background:#222;
    color:#fff;
    border:1px solid #444;
    border-radius:6px;
    padding:6px 10px;
    font-size:13px;
    text-decoration:none;
}
a:hover { border-color:#ffb300; }
</style>
</head>

<body>

<?php
// ===== 업비트 마켓 목록 =====
$api = 'https://api.upbit.com/v1/market/all';
$data = json_decode(file_get_contents($api), true);

// ===== 파라미터 =====
$market     = $_GET['market'] ?? 'KRW-BTC';
$chart_time = isset($_GET['time']) ? (int)$_GET['time'] : 0;

// ===== 마켓 검증 =====
$validMarket = 'KRW-BTC';
foreach ($data as $m) {
    if ($m['market'] === $market && strpos($m['market'], 'KRW-') === 0) {
        $validMarket = $market;
        break;
    }
}
?>

<header>
<h2>실시간 업비트 - 선 차트 거래량 : 심플 버전</h2>

<div style="display:flex; align-items:center; gap:8px;">

    <!-- 시간 버튼 (HTML 링크) -->
    <a href="?market=<?= $validMarket ?>&time=1">1분</a>
    <a href="?market=<?= $validMarket ?>&time=5">5분</a>
    <a href="?market=<?= $validMarket ?>&time=15">15분</a>
    <a href="?market=<?= $validMarket ?>&time=60">1시간</a>
    <a href="?market=<?= $validMarket ?>&time=240">4시간</a>
    <a href="?market=<?= $validMarket ?>&time=480">8시간</a>
    <a href="?market=<?= $validMarket ?>&time=720">12시간</a>
    <a href="?market=<?= $validMarket ?>&time=1440">24시간</a>

    <!-- 코인 셀렉트 -->
    <select onchange="location.href='?market='+this.value+'&time=<?= $chart_time ?>'">
        <?php
        foreach ($data as $m) {
            if (strpos($m['market'], 'KRW-') !== 0) continue;

            $symbol   = str_replace('KRW-', '', $m['market']);
            $korean   = $m['korean_name'];
            $selected = ($m['market'] === $validMarket) ? ' selected' : '';

            echo "<option value=\"{$m['market']}\"{$selected}>{$symbol} : {$korean}</option>\n";
        }
        ?>
    </select>

    <div id="volumeBox">로딩 중...</div>
</div>
</header>

<div id="chart-wrap">
<canvas id="chartCanvas"></canvas>
</div>

<script>
let MARKET   = "<?= $validMarket ?>";
let UNIT_MIN = <?= $chart_time ?>;
let ws = null;
const MAX_POINTS = 300;

function getLabel(unitMin) {
    const d = new Date();
    if (unitMin === 0) {
        return d.toTimeString().split(" ")[0]; // 실시간
    }
    const h  = String(d.getHours()).padStart(2, '0');
    const mm = String(Math.floor(d.getMinutes() / unitMin) * unitMin).padStart(2, '0');
    return h + ':' + mm;
}

const ctx = document.getElementById("chartCanvas").getContext("2d");

const chartData = {
    labels: [],
    datasets: [{
        label: MARKET + " 거래량",
        data: [],
        borderColor: "#ffb300",
        borderWidth: 2,
        pointRadius: 0,
        tension: 0.1
    }]
};

const chart = new Chart(ctx, {
    type: "line",
    data: chartData,
    options: {
        animation:false,
        responsive:true,
        maintainAspectRatio:false,
        scales:{
            x:{ ticks:{color:"#888"}, grid:{color:"rgba(255,255,255,0.07)"} },
            y:{ ticks:{color:"#ccc"}, grid:{color:"rgba(255,255,255,0.07)"} }
        },
        plugins:{
            legend:{ labels:{color:"#ddd"} },
            tooltip:{
                callbacks:{
                    label: c => c.raw.toLocaleString() + " 수량"
                }
            }
        }
    }
});

function connectWS() {
    ws = new WebSocket("wss://api.upbit.com/websocket/v1");

    ws.onopen = () => {
        ws.send(JSON.stringify([
            { ticket:"volume" },
            { type:"ticker", codes:[MARKET] }
        ]));
    };

    ws.onmessage = e => {
        const reader = new FileReader();
        reader.onload = () => {
            const d = JSON.parse(reader.result);
            const vol  = d.acc_trade_volume_24h;
            const time = getLabel(UNIT_MIN);

            document.getElementById("volumeBox").innerText =
                vol.toLocaleString() + " 수량";

            chartData.labels.push(time);
            chartData.datasets[0].data.push(vol);

            if (chartData.labels.length > MAX_POINTS) {
                chartData.labels.shift();
                chartData.datasets[0].data.shift();
            }

            chart.update("none");
        };
        reader.readAsText(e.data);
    };
}

connectWS();
</script>

</body>
</html>