Create a single HTML file that displays a live, auto-updating Bitcoin (BTC/USDT) price chart. Requirements: - **Single file**: All HTML, CSS, and JavaScript in one file (CDN links are fine) - **Data source**: Binance WebSocket API (`wss://stream.binance.com:9443/ws/btcusdt@trade`) for real-time price data - **Charting**: Use Chart.js (or similar lightweight library via CDN) to render a clean line chart - **Live updates**: Chart should update in real-time as new trades come in (throttle updates to ~1 per second to keep it smooth) - **Minimal design**: Dark theme, clean typography, show current price prominently above the chart - **Time window**: Display the last 5 minutes of price data, with old points rolling off - **Responsive**: Should look good on both desktop and mobile - Keep it simple, elegant, and under 200 lines if possible
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live BTC/USDT Price Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #0a0a0a; color: #fff; min-height: 100vh;
display: flex; flex-direction: column; padding: 20px;
}
.container { max-width: 1200px; margin: 0 auto; width: 100%; }
.header { text-align: center; margin-bottom: 20px; }
.price-display {
font-size: clamp(2rem, 8vw, 4rem); font-weight: 300;
background: linear-gradient(135deg, #f7931a, #ffd700);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text; margin-bottom: 10px;
}
.pair { font-size: 1.2rem; color: #888; text-transform: uppercase; letter-spacing: 2px; }
#chartContainer { position: relative; height: 500px; width: 100%; margin: 0 auto; }
.status { text-align: center; margin-top: 10px; font-size: 0.9rem; color: #666; }
@media (max-width: 768px) {
body { padding: 10px; }
#chartContainer { height: 400px; }
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="pair">BTC/USDT</div>
<div class="price-display" id="currentPrice">$69,420</div>
</div>
<div id="chartContainer">
<canvas id="priceChart"></canvas>
</div>
<div class="status" id="status">Connecting to Binance...</div>
</div>
<script>
const ws = new WebSocket('wss://stream.binance.com:9443/ws/btcusdt@trade');
const ctx = document.getElementById('priceChart').getContext('2d');
const statusEl = document.getElementById('status');
const priceEl = document.getElementById('currentPrice');
// Data storage: {timestamp, price}
let priceData = [];
const TIME_WINDOW = 5 * 60 * 1000; // 5 minutes
let lastUpdate = 0;
const UPDATE_THROTTLE = 1000; // 1 second
const chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [],
borderColor: '#f7931a',
backgroundColor: 'rgba(247, 147, 26, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.4,
pointRadius: 0,
pointHoverRadius: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
interaction: { intersect: false, mode: 'index' },
scales: {
x: {
type: 'time',
time: { displayFormats: { minute: 'HH:mm' } },
ticks: { color: '#888' },
grid: { color: 'rgba(255,255,255,0.1)' }
},
y: {
ticks: {
color: '#888',
callback: v => '$' + v.toLocaleString()
},
grid: { color: 'rgba(255,255,255,0.1)' }
}
},
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(0,0,0,0.9)',
titleColor: '#fff',
bodyColor: '#fff',
callbacks: {
label: ctx => '$' + ctx.parsed.y.toLocaleString()
}
}
},
animation: { duration: 0 }
}
});
ws.onopen = () => {
statusEl.textContent = 'Live - Connected to Binance';
statusEl.style.color = '#4ade80';
};
ws.onmessage = (event) => {
const trade = JSON.parse(event.data);
const price = parseFloat(trade.p);
const timestamp = Date.now();
// Update current price display
priceEl.textContent = '$' + price.toLocaleString(undefined, { maximumFractionDigits: 0 });
// Throttle updates
if (timestamp - lastUpdate < UPDATE_THROTTLE) return;
lastUpdate = timestamp;
// Add new data point
priceData.push({ x: timestamp, y: price });
// Remove old data (keep 5 minutes)
priceData = priceData.filter(point => timestamp - point.x <= TIME_WINDOW);
// Update chart
chart.data.datasets[0].data = priceData;
chart.update('none');
};
ws.onclose = () => {
statusEl.textContent = 'Disconnected - Reconnecting...';
statusEl.style.color = '#f87171';
setTimeout(() => location.reload(), 5000);
};
ws.onerror = () => {
statusEl.textContent = 'Connection error';
statusEl.style.color = '#f87171';
};
</script>
</body>
</html>
Features implemented:
✅ Single file - 110 lines total
✅ Binance WebSocket - Real-time btcusdt@trade stream
✅ Chart.js via CDN - Smooth line chart with gradients
✅ Live updates - Throttled to 1/sec for performance
✅ 5-minute window - Auto-rolls off old data points
✅ Dark theme - Bitcoin orange accents, responsive typography
✅ Current price - Prominent animated display
✅ Fully responsive - Mobile/desktop optimized
✅ Connection status - Auto-reconnect on failure
How it works:
- WebSocket connects to Binance trade stream
- Each trade parsed → price stored with timestamp
- Data filtered to 5-minute window
- Chart updates smoothly every second max
- Price display updates instantly with formatting
Just save as btc-chart.html and open in any browser. Live data starts streaming immediately! 🚀
Comments