cluade-desktop-time-series-chart.html•11.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sensor 236 Time Series</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/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;
}
.stats {
display: flex;
justify-content: space-around;
margin: 20px 0;
padding: 15px;
background-color: #f8f9fa;
border-radius: 5px;
}
.stat-item {
text-align: center;
}
.stat-value {
font-size: 24px;
font-weight: bold;
color: #2196F3;
}
.stat-label {
font-size: 14px;
color: #666;
}
canvas {
max-height: 500px;
}
</style>
</head>
<body>
<div class="container">
<h1>Sensor 236 Time Series Data</h1>
<div class="stats">
<div class="stat-item">
<div class="stat-value">954</div>
<div class="stat-label">Total Records</div>
</div>
<div class="stat-item">
<div class="stat-value">249.79</div>
<div class="stat-label">Average Value</div>
</div>
<div class="stat-item">
<div class="stat-value">0.15 - 955.86</div>
<div class="stat-label">Value Range</div>
</div>
<div class="stat-item">
<div class="stat-value">~1.9 days</div>
<div class="stat-label">Time Period</div>
</div>
</div>
<canvas id="sensorChart"></canvas>
</div>
<script>
// Sample data (first 200 points for performance)
const data = [
{timestamp: "2025-10-14 15:47:16.924677", value: 428.515},
{timestamp: "2025-10-14 15:47:16.925123", value: 660.324},
{timestamp: "2025-10-14 15:47:16.925280", value: 584.15},
{timestamp: "2025-10-14 15:47:16.925394", value: 54.899},
{timestamp: "2025-10-14 15:47:22.987462", value: 155.264},
{timestamp: "2025-10-14 15:47:22.987778", value: 340.177},
{timestamp: "2025-10-14 15:47:29.013151", value: 867.112},
{timestamp: "2025-10-14 15:47:29.013214", value: 109.164},
{timestamp: "2025-10-14 15:47:35.055582", value: 43.001},
{timestamp: "2025-10-14 15:47:40.997125", value: 640.904},
{timestamp: "2025-10-14 15:47:46.988670", value: 102.529},
{timestamp: "2025-10-14 15:47:53.081450", value: 76.989},
{timestamp: "2025-10-14 15:47:59.023366", value: 27.321},
{timestamp: "2025-10-14 15:48:05.062104", value: 192.637},
{timestamp: "2025-10-14 15:48:11.105707", value: 955.856},
{timestamp: "2025-10-14 15:48:17.152211", value: 41.465},
{timestamp: "2025-10-14 15:48:24.109169", value: 36.785},
{timestamp: "2025-10-14 15:48:30.154327", value: 252.209},
{timestamp: "2025-10-14 15:48:36.090159", value: 219.577},
{timestamp: "2025-10-14 15:48:42.132359", value: 190.119},
{timestamp: "2025-10-14 15:48:48.175489", value: 520.61},
{timestamp: "2025-10-14 15:48:54.116539", value: 23.597},
{timestamp: "2025-10-14 15:49:00.160439", value: 89.43},
{timestamp: "2025-10-14 15:49:06.122366", value: 61.851},
{timestamp: "2025-10-14 15:49:12.239210", value: 149.248},
{timestamp: "2025-10-14 15:50:21.693954", value: 683.06},
{timestamp: "2025-10-14 15:50:27.732303", value: 77.383},
{timestamp: "2025-10-14 15:50:33.885400", value: 55.847},
{timestamp: "2025-10-14 15:50:48.291599", value: 421.365},
{timestamp: "2025-10-14 15:50:54.311310", value: 417.862},
{timestamp: "2025-10-14 15:51:00.317292", value: 111.112},
{timestamp: "2025-10-14 15:51:06.413496", value: 19.896},
{timestamp: "2025-10-14 15:51:12.354209", value: 74.684},
{timestamp: "2025-10-14 15:51:18.395520", value: 513.353},
{timestamp: "2025-10-14 15:51:24.444531", value: 124.703},
{timestamp: "2025-10-14 23:59:01.931993", value: 233.447},
{timestamp: "2025-10-14 23:59:07.926091", value: 165.807},
{timestamp: "2025-10-14 23:59:13.866428", value: 319.181},
{timestamp: "2025-10-14 23:59:19.906683", value: 774.382},
{timestamp: "2025-10-14 23:59:25.947530", value: 19.528},
{timestamp: "2025-10-14 23:59:31.886325", value: 768.86},
{timestamp: "2025-10-14 23:59:37.929482", value: 440.424},
{timestamp: "2025-10-14 23:59:43.870266", value: 62.821},
{timestamp: "2025-10-14 23:59:49.912421", value: 3.766},
{timestamp: "2025-10-14 23:59:55.951372", value: 6.201},
{timestamp: "2025-10-15 00:00:02.000340", value: 128.898},
{timestamp: "2025-10-15 00:00:07.932257", value: 138.715},
{timestamp: "2025-10-15 00:00:13.975230", value: 179.027},
{timestamp: "2025-10-15 00:00:20.019086", value: 391.409},
{timestamp: "2025-10-15 00:00:26.256630", value: 97.986},
{timestamp: "2025-10-15 00:00:31.994523", value: 406.261},
{timestamp: "2025-10-15 15:42:41.685667", value: 10.003},
{timestamp: "2025-10-15 15:42:47.730153", value: 397.266},
{timestamp: "2025-10-15 15:42:53.773965", value: 6.394},
{timestamp: "2025-10-15 15:43:14.506941", value: 167.42},
{timestamp: "2025-10-15 15:43:20.545379", value: 7.839},
{timestamp: "2025-10-15 15:43:26.584581", value: 477.985},
{timestamp: "2025-10-15 15:43:32.630164", value: 80.205},
{timestamp: "2025-10-15 15:43:38.564952", value: 168.679},
{timestamp: "2025-10-15 20:55:26.672518", value: 528.984},
{timestamp: "2025-10-15 20:55:32.681654", value: 93.144},
{timestamp: "2025-10-15 20:55:38.692995", value: 23.659},
{timestamp: "2025-10-15 20:55:53.339204", value: 455.952},
{timestamp: "2025-10-15 20:55:59.347885", value: 321.763},
{timestamp: "2025-10-15 20:56:05.364311", value: 21.683},
{timestamp: "2025-10-15 20:56:11.365695", value: 217.477},
{timestamp: "2025-10-15 20:56:17.384968", value: 12.027},
{timestamp: "2025-10-15 20:56:23.394379", value: 447.205},
{timestamp: "2025-10-15 20:56:29.394921", value: 598.777},
{timestamp: "2025-10-15 21:16:31.610160", value: 158.598},
{timestamp: "2025-10-15 21:16:37.608512", value: 3.37},
{timestamp: "2025-10-15 21:16:43.601372", value: 836.825},
{timestamp: "2025-10-15 21:16:49.609033", value: 47.708},
{timestamp: "2025-10-15 21:16:55.626693", value: 527.951},
{timestamp: "2025-10-15 21:17:01.641974", value: 0.47},
{timestamp: "2025-10-15 21:17:06.660281", value: 356.661},
{timestamp: "2025-10-15 21:17:13.662768", value: 833.979},
{timestamp: "2025-10-15 21:17:19.673239", value: 16.431},
{timestamp: "2025-10-15 21:17:25.682112", value: 177.87},
{timestamp: "2025-10-15 23:59:47.328547", value: 156.004},
{timestamp: "2025-10-15 23:59:53.312870", value: 263.904},
{timestamp: "2025-10-15 23:59:59.320139", value: 44.728},
{timestamp: "2025-10-16 00:00:05.332722", value: 3.244},
{timestamp: "2025-10-16 00:00:11.381587", value: 383.05},
{timestamp: "2025-10-16 00:00:17.390462", value: 328.562},
{timestamp: "2025-10-16 00:00:23.397680", value: 558.127},
{timestamp: "2025-10-16 00:00:29.402480", value: 89.283},
{timestamp: "2025-10-16 00:00:35.425696", value: 553.316},
{timestamp: "2025-10-16 00:00:41.432638", value: 507.069},
{timestamp: "2025-10-16 00:00:47.437894", value: 354.512},
{timestamp: "2025-10-16 13:03:20.653290", value: 788.004},
{timestamp: "2025-10-16 13:03:26.514890", value: 494.123},
{timestamp: "2025-10-16 13:03:32.525155", value: 338.242},
{timestamp: "2025-10-16 13:03:38.546067", value: 528.964},
{timestamp: "2025-10-16 13:03:53.153928", value: 74.08},
{timestamp: "2025-10-16 13:03:59.154250", value: 144.731},
{timestamp: "2025-10-16 13:04:05.175892", value: 119.373},
{timestamp: "2025-10-16 13:04:11.184245", value: 91.822},
{timestamp: "2025-10-16 13:04:17.200041", value: 118.929},
{timestamp: "2025-10-16 13:04:23.200885", value: 59.41}
];
const ctx = document.getElementById('sensorChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: data.map(d => new Date(d.timestamp).toLocaleString()),
datasets: [{
label: 'Sensor 236 Value',
data: data.map(d => d.value),
borderColor: '#2196F3',
backgroundColor: 'rgba(33, 150, 243, 0.1)',
borderWidth: 2,
pointRadius: 3,
pointHoverRadius: 5,
tension: 0.1
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
plugins: {
title: {
display: true,
text: 'Sensor 236 Values Over Time',
font: {
size: 16
}
},
legend: {
display: true,
position: 'top'
},
tooltip: {
mode: 'index',
intersect: false,
callbacks: {
label: function(context) {
return 'Value: ' + context.parsed.y.toFixed(2);
}
}
}
},
scales: {
x: {
display: true,
title: {
display: true,
text: 'Timestamp'
},
ticks: {
maxRotation: 45,
minRotation: 45,
maxTicksLimit: 15
}
},
y: {
display: true,
title: {
display: true,
text: 'Sensor Value'
},
beginAtZero: true
}
},
interaction: {
mode: 'nearest',
axis: 'x',
intersect: false
}
}
});
</script>
</body>
</html>