43 lines
831 B
JavaScript
43 lines
831 B
JavaScript
const plotElement = document.getElementById("plot");
|
|
|
|
const layout = {
|
|
title: "Real-Time Complex Data Visualization",
|
|
xaxis: { title: "Time (ms)" },
|
|
yaxis: { title: "Value" },
|
|
};
|
|
|
|
Plotly.newPlot(
|
|
plotElement,
|
|
[
|
|
{
|
|
x: [],
|
|
y: [],
|
|
type: "scatter",
|
|
mode: "lines+markers", // Line + markers
|
|
},
|
|
],
|
|
layout,
|
|
);
|
|
|
|
const socket = new WebSocket("ws://" + location.host + "/data");
|
|
socket.onopen = function () {
|
|
console.log("Connected to the server");
|
|
socket.send("0 0 0");
|
|
};
|
|
socket.addEventListener("message", function (msg) {
|
|
Plotly.extendTraces(
|
|
plotElement,
|
|
{
|
|
x: [[msg.timeStamp]],
|
|
y: [[msg.data]],
|
|
},
|
|
[0],
|
|
300,
|
|
);
|
|
});
|
|
|
|
function changeSubcarrier() {
|
|
const subcarrier = document.getElementById("subcarrier").value;
|
|
socket.send(subcarrier + " 0 0");
|
|
}
|