\n \n \n \n
\n\n Bitcoin Live Price
\nBTC/USDT real-time chart powered by Binance WebSocket
\n\n
\n \n Current Price
\n Loading...
\n Connecting to Binance...
\n \n
\n \n \n \n \n Connecting...\n
\n \n Live Bitcoin Price Chart — Minimal Single-File HTML with Binance WebSocket
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
0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Bitcoin Price Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body {
background: #0f172a;
color: #e2e8f0;
min-height: 100vh;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
max-width: 1200px;
width: 100%;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
border-bottom: 1px solid #334155;
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
background: linear-gradient(90deg, #60a5fa, #34d399);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.subtitle {
color: #94a3b8;
font-size: 1.1rem;
}
.price-container {
background: #1e293b;
border-radius: 16px;
padding: 25px;
margin: 30px auto;
text-align: center;
border: 1px solid #334155;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
max-width: 500px;
width: 100%;
}
.price-label {
font-size: 1.2rem;
color: #94a3b8;
margin-bottom: 10px;
}
.price-value {
font-size: 3.5rem;
font-weight: 700;
color: #34d399;
font-family: 'Courier New', monospace;
}
.price-change {
font-size: 1.1rem;
margin-top: 10px;
color: #94a3b8;
}
.chart-container {
background: #1e293b;
border-radius: 16px;
padding: 25px;
margin-top: 20px;
border: 1px solid #334155;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
position: relative;
height: 400px;
}
.status {
position: absolute;
top: 20px;
right: 20px;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: #94a3b8;
}
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #34d399;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
footer {
margin-top: 40px;
text-align: center;
color: #64748b;
font-size: 0.9rem;
padding: 20px;
border-top: 1px solid #334155;
width: 100%;
}
@media (max-width: 768px) {
.container {
padding: 10px;
}
h1 {
font-size: 2rem;
}
.price-value {
font-size: 2.5rem;
}
.chart-container {
height: 300px;
padding: 15px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Bitcoin Live Price</h1>
<p class="subtitle">BTC/USDT real-time chart powered by Binance WebSocket</p>
</header>
<div class="price-container">
<div class="price-label">Current Price</div>
<div class="price-value" id="currentPrice">Loading...</div>
<div class="price-change" id="priceChange">Connecting to Binance...</div>
</div>
<div class="chart-container">
<div class="status">
<div class="status-dot"></div>
<span id="connectionStatus">Connecting...</span>
</div>
<canvas id="priceChart"></canvas>
</div>
<footer>
<p>Data provided by Binance WebSocket API • Updates every second • Last 5 minutes of trading data</p>
</footer>
</div>
<script>
// Configuration
const MAX_DATA_POINTS = 300; // 5 minutes at 1 update per second
const UPDATE_INTERVAL = 1000; // Throttle updates to 1 per second
// State
let priceData = [];
let timeLabels = [];
let lastPrice = 0;
let chart = null;
let lastUpdateTime = 0;
let ws = null;
// DOM Elements
const currentPriceEl = document.getElementById('currentPrice');
const priceChangeEl = document.getElementById('priceChange');
const connectionStatusEl = document.getElementById('connectionStatus');
// Initialize Chart
function initChart() {
const ctx = document.getElementById('priceChart').getContext('2d');
chart = new Chart(ctx, {
type: 'line',
data: {
labels: timeLabels,
datasets: [{
label: 'BTC/USDT',
data: priceData,
borderColor: '#34d399',
backgroundColor: 'rgba(52, 211, 153, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.4,
pointRadius: 0,
pointHoverRadius: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
mode: 'index',
intersect: false,
backgroundColor: 'rgba(30, 41, 59, 0.9)',
titleColor: '#e2e8f0',
bodyColor: '#e2e8f0',
borderColor: '#334155',
borderWidth: 1
}
},
scales: {
x: {
grid: {
color: 'rgba(148, 163, 184, 0.1)'
},
ticks: {
color: '#94a3b8',
maxTicksLimit: 8
}
},
y: {
grid: {
color: 'rgba(148, 163, 184, 0.1)'
},
ticks: {
color: '#94a3b8',
callback: function(value) {
return '$' + value.toLocaleString();
}
}
}
},
interaction: {
intersect: false,
mode: 'nearest'
}
}
});
}
// Format time for display
function formatTime(date) {
return date.toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
}
// Update chart with new price
function updateChart(price, timestamp) {
const now = new Date(timestamp);
// Add new data point
priceData.push(price);
timeLabels.push(formatTime(now));
// Remove old data points if we exceed limit
if (priceData.length > MAX_DATA_POINTS) {
priceData.shift();
timeLabels.shift();
}
// Update chart
chart.data.datasets[0].data = priceData;
chart.data.labels = timeLabels;
chart.update('none');
// Update current price display
currentPriceEl.textContent = `$${price.toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2
})}`;
// Calculate and display price change
if (lastPrice > 0) {
const change = price - lastPrice;
const percentChange = (change / lastPrice * 100).toFixed(2);
const changeColor = change >= 0 ? '#34d399' : '#f87171';
const changeSymbol = change >= 0 ? '▲' : '▼';
priceChangeEl.innerHTML = `
<span style="color: ${changeColor}">
${changeSymbol} $${Math.abs(change).toFixed(2)} (${Math.abs(percentChange)}%)
</span>
• Last update: ${formatTime(now)}
`;
}
lastPrice = price;
}
// Connect to Binance WebSocket
function connectWebSocket() {
const wsUrl = 'wss://stream.binance.com:9443/ws/btcusdt@trade';
ws = new WebSocket(wsUrl);
ws.onopen = () => {
connectionStatusEl.textContent = 'Live';
priceChangeEl.textContent = 'Waiting for data...';
};
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
const price = parseFloat(data.p);
const timestamp = data.T;
// Throttle updates to 1 per second
const now = Date.now();
if (now - lastUpdateTime >= UPDATE_INTERVAL) {
updateChart(price, timestamp);
lastUpdateTime = now;
}
};
ws.onerror = (error) => {
connectionStatusEl.textContent = 'Connection Error';
connectionStatusEl.style.color = '#f87171';
};
ws.onclose = () => {
connectionStatusEl.textContent = 'Disconnected';
connectionStatusEl.style.color = '#f87171';
// Attempt to reconnect after 3 seconds
setTimeout(connectWebSocket, 3000);
};
}
// Initialize everything when page loads
window.onload = function() {
initChart();
connectWebSocket();
// Add some initial placeholder data
const now = new Date();
for (let i = MAX_DATA_POINTS - 1; i >= 0; i--) {
const time = new Date(now.getTime() - i * 1000);
timeLabels.push(formatTime(time));
priceData.push(0);
}
// Handle page visibility change
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible' && (!ws || ws.readyState !== WebSocket.OPEN)) {
connectWebSocket();
}
});
};
// Clean up WebSocket on page unload
window.onbeforeunload = function() {
if (ws) {
ws.close();
}
};
</script>
</body>
</html>
This single HTML file creates a live Bitcoin price chart with the following features:
Key Features:
- Real-time Data: Connects to Binance WebSocket API for live BTC/USDT trade data
- Throttled Updates: Updates the chart once per second for smooth performance
- 5-Minute Window: Shows the last 5 minutes of price data (300 data points at 1 update/sec)
- Dark Theme: Clean, modern dark design with gradient accents
- Responsive Design: Works well on both desktop and mobile devices
- Live Status Indicator: Shows connection status with animated dot
- Price Change Display: Shows absolute and percentage change from previous price
How It Works:
- The WebSocket connection streams live trade data from Binance
- Data is throttled to update the chart once per second
- The chart maintains a rolling window of the last 5 minutes
- Price changes are calculated and displayed in real-time
- Automatic reconnection if the WebSocket connection drops
Usage:
Simply save this as an .html file and open it in any modern browser. No build process or external dependencies needed beyond the CDN links.
The implementation stays under 200 lines of meaningful code while providing a polished, functional live price chart with all requested features.
Comments