GNU/_PAGE/chart/upbit/line/price_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;
}
#priceBox {
    margin-left:12px;
    font-size:18px;
    font-weight:bold;
    color: #5ce6dcff;
}
#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: #5ce6dcff; }
</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';
$validMarket = 'KRW-BTC';

foreach ($data as $m) {
    if ($m['market'] === $MARKET && strpos($m['market'], 'KRW-') === 0) {
        $validMarket = $MARKET;
        break;
    }
}

// ===== 차트 시간 단위 파라미터 =====
// 0 = 실시간, 1 = 1분, 2 = 2분 ...
$chart_time = isset($_GET['time']) ? (int)$_GET['time'] : 0;
?>

<header>
<h2>실시간 업비트 - 선 차트 가격 : 심플 버전</h2>
<div style="display:flex; align-items:center; gap:6px; margin-right:10px;">
    <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 id="coinSelect">
<?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="priceBox">로딩 중...</div>
</div>
</header>

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

<script>
let MARKET = "<?= $validMarket ?>";
let UNIT_MIN = <?= $chart_time ?>; // 0=실시간, n=분단위
let ws = null;
const MAX_POINTS = 300;

function getLabel(unitMin) {
    const d = new Date();

    if (unitMin === 0) {
        return d.toTimeString().split(" ")[0]; // HH:MM:SS
    }

    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: "#00c8ff",
        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() {
    if (ws) ws.close();

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

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

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

            document.getElementById("priceBox").innerText =
                price.toLocaleString() + " 원";

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

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

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

document.getElementById("coinSelect").addEventListener("change", function(){
    location.href = "?market=" + this.value + "&time=<?= $chart_time ?>";
});

connectWS();
</script>

</body>
</html>