105 lines
4.1 KiB
HTML
105 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Creating Real-Time Charts with FastAPI</title>
|
|
<!--suppress JSUnresolvedLibraryURL -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css"
|
|
integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"/>
|
|
<!--suppress JSUnresolvedLibraryURL -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css"
|
|
integrity="sha512-/zs32ZEJh+/EO2N1b0PEdoA10JkdC3zJ8L5FTiQu82LR9S/rOQNfQN7U59U9BC12swNeRAz3HSzIL2vpp4fv3w=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"/>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<canvas id="canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--suppress JSUnresolvedLibraryURL -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
|
|
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<!--suppress JSUnresolvedLibraryURL -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.bundle.min.js"
|
|
integrity="sha512-mULnawDVcCnsk9a4aG1QLZZ6rcce/jSzEGqUkeOLy0b6q0+T6syHrxlsAGH7ZVoqC93Pd0lBqd6WguPWih7VHA=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<!--suppress JSUnresolvedLibraryURL -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"
|
|
integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
const config = {
|
|
type: 'line',
|
|
data: {
|
|
labels: Array(30).fill("0000-00-00 00:00:00"),
|
|
datasets: [{
|
|
label: "Random Dataset",
|
|
backgroundColor: 'rgb(255, 99, 132)',
|
|
borderColor: 'rgb(255, 99, 132)',
|
|
data: Array(30).fill(null),
|
|
fill: false,
|
|
}],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
title: {
|
|
display: true,
|
|
text: 'Creating Real-Time Charts with FastAPI'
|
|
},
|
|
tooltips: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
},
|
|
hover: {
|
|
mode: 'nearest',
|
|
intersect: true
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: true,
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Time'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: true,
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Value'
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
};
|
|
|
|
const context = document.getElementById('canvas').getContext('2d');
|
|
|
|
const lineChart = new Chart(context, config);
|
|
|
|
const source = new EventSource("/chart-data");
|
|
|
|
source.onmessage = function (event) {
|
|
const data = JSON.parse(event.data);
|
|
if (config.data.labels.length === 30) {
|
|
config.data.labels.shift();
|
|
config.data.datasets[0].data.shift();
|
|
}
|
|
config.data.labels.push(data.time);
|
|
config.data.datasets[0].data.push(data.value);
|
|
lineChart.update();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |