GNU/_PAGE/chart/upbit/line/price_line_basics.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:17px;
    font-weight:bold;
}
.price-up { color:#4CAF50; }
.price-down { color:#FF5252; }
.price-flat { color:#ccc; }

#chart-wrap { height:calc(100vh - 70px); padding:10px; }
#chartCanvas { width:100%; height:100%; }
</style>
</head>

<body>

<header>
<h2>실시간 업비트 - 선 차트 가격 : 베이직 버전</h2>
<div style="display:flex; align-items:center;">
    <select id="coinSelect">
        <option value="KRW-BTC">BTC</option>
        <option value="KRW-ETH">ETH</option>
        <option value="KRW-XRP">XRP</option>
        <option value="KRW-SOL">SOL</option>
        <option value="KRW-DOGE">DOGE</option>
        <option value="KRW-BCH">BCH</option>
        <option value="KRW-ETC">ETC</option>
        <option value="KRW-QTUM">QTUM</option>
        <option value="KRW-TRUMP">TRUMP</option>
    </select>
    <div id="priceBox" class="price-flat">변동 불러오는 중...</div>
</div>
</header>

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

<script>
let MARKET = document.getElementById("coinSelect").value;
let ws = null;

let lastPrice = null;
const MAX_POINTS = 300;

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

const chartData = {
    labels: [],
    datasets: [{
        label: MARKET + " 초당 가격 변동",
        data: [],
        borderColor: "#00c8ff",
        borderWidth: 2,
        pointRadius: 0,
        tension: 0.1
    }]
};

const lineChart = 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:"price-diff" },
            { 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 now = new Date().toTimeString().split(" ")[0];

            let diff = 0;
            if (lastPrice !== null) {
                diff = price - lastPrice;
            }

            updatePriceBox(diff);
            updateChart(now, diff);

            lastPrice = price;
        };
        reader.readAsText(e.data);
    };
}

function updatePriceBox(diff) {
    const box = document.getElementById("priceBox");

    if (diff > 0) box.className = "price-up";
    else if (diff < 0) box.className = "price-down";
    else box.className = "price-flat";

    box.innerText = diff.toLocaleString() + " 원/초";
}

function updateChart(time, diff) {
    chartData.labels.push(time);
    chartData.datasets[0].data.push(diff);

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

document.getElementById("coinSelect").addEventListener("change", function(){
    MARKET = this.value;
    lastPrice = null;
    chartData.labels = [];
    chartData.datasets[0].data = [];
    chartData.datasets[0].label = MARKET + " 초당 가격 변동";
    lineChart.update();
    connectWS();
});

connectWS();
</script>

</body>
</html>