123 lines
4.0 KiB
HTML
123 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>XRP Price Live Chart</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background-color: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.chart-container {
|
|
position: relative;
|
|
height: 60vh;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>XRP Price Live Chart</h1>
|
|
<div class="chart-container">
|
|
<canvas id="priceChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let chart;
|
|
|
|
async function fetchData() {
|
|
try {
|
|
const response = await fetch('/data/{{coin}}');
|
|
const data = await response.json();
|
|
return data;
|
|
} catch (error) {
|
|
console.error('Error fetching data:', error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function updateChart() {
|
|
const data = await fetchData();
|
|
if (!data) return;
|
|
|
|
if (chart) {
|
|
chart.data.labels = data.times;
|
|
chart.data.datasets[0].data = data.prices;
|
|
chart.update();
|
|
} else {
|
|
const ctx = document.getElementById('priceChart').getContext('2d');
|
|
chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: data.times,
|
|
datasets: [{
|
|
label: 'XRP Price (USD)',
|
|
data: data.prices,
|
|
borderColor: 'rgb(75, 192, 192)',
|
|
borderWidth: 2,
|
|
fill: true,
|
|
backgroundColor: 'rgba(75, 192, 192, 0.1)',
|
|
tension: 0.1,
|
|
pointRadius: 1,
|
|
pointHoverRadius: 5
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'XRP Price History'
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: false,
|
|
ticks: {
|
|
callback: function(value) {
|
|
return '$' + value.toFixed(4);
|
|
}
|
|
}
|
|
},
|
|
x: {
|
|
ticks: {
|
|
maxTicksLimit: 10,
|
|
maxRotation: 45,
|
|
minRotation: 45
|
|
}
|
|
}
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'index'
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Update every 5 seconds
|
|
updateChart();
|
|
setInterval(updateChart, 5000);
|
|
</script>
|
|
</body>
|
|
</html> |