add speeds chart in replay

This commit is contained in:
unknown 2021-01-04 21:09:51 +01:00
parent c7698fa06e
commit 7805e89f5f
4 changed files with 69 additions and 18 deletions

View File

@ -4,9 +4,19 @@ var myChart = new Chart(ctx, {
data: {
labels: new Array(GRAPH_RES),
datasets: [{
label: 'Z',
backgroundColor: 'rgba(255, 99, 132, 1)',
borderColor: 'rgba(255, 99, 132, 1)',
label: 'Ublox',
backgroundColor: 'rgba(214, 69, 65, 1)',
borderColor: 'rgba(214, 69, 65, 1)',
borderWidth: 1,
fill: false,
pointRadius: 0,
lineTension: 0.5,
data: new Array(GRAPH_RES)
},
{
label: 'Smartphone',
backgroundColor: 'rgba(30, 139, 195, 1)',
borderColor: 'rgba(30, 139, 195, 1)',
borderWidth: 1,
fill: false,
pointRadius: 0,

View File

@ -4,9 +4,19 @@ var myChart = new Chart(ctx, {
data: {
labels: new Array(),
datasets: [{
label: 'Z',
backgroundColor: 'rgba(255, 99, 132, 1)',
borderColor: 'rgba(255, 99, 132, 1)',
label: 'Ublox',
backgroundColor: 'rgba(214, 69, 65, 1)',
borderColor: 'rgba(214, 69, 65, 1)',
borderWidth: 1,
fill: false,
pointRadius: 0,
lineTension: 0.5,
data: new Array()
},
{
label: 'Smartphone',
backgroundColor: 'rgba(30, 139, 195, 1)',
borderColor: 'rgba(30, 139, 195, 1)',
borderWidth: 1,
fill: false,
pointRadius: 0,
@ -18,9 +28,8 @@ var myChart = new Chart(ctx, {
scales: {
yAxes: [{
ticks: {
// beginAtZero: true
min: -2000,
max: 2000
min: 0,
max: 250
}
}]
},
@ -31,11 +40,44 @@ var myChart = new Chart(ctx, {
});
myChart.data.labels.fill("", 0, GRAPH_RES);
myChart.data.datasets.forEach((dataset) => dataset.data.fill(0, 0, GRAPH_RES))
function addSerialAltData(data) {
function addSerialSpeedData(sensordataList) {
let speedsSerial = []
sensordataList.forEach(sensordata => {
if (sensordata.Speed === 0) {
return;
}
let speed = sensordata.Speed
speedsSerial.push(speed);
})
myChart.data.labels.push("");
myChart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
myChart.data.datasets[0].data.push(speedsSerial);
while (myChart.data.labels.length >= GRAPH_RES) {
myChart.data.labels.shift();
myChart.data.datasets.forEach((dataset) => dataset.data.shift())
}
myChart.update();
};
function addTCPSpeedData(data) {
let speedsTCP = []
sensordataList.forEach(sensordata => {
if (sensordata.Speed === 0) {
return;
}
let speed = sensordata.Speed
speedsTCP.push(speed);
})
myChart.data.labels.push("");
myChart.data.datasets[1].data.push(speedsTCP);
while (myChart.data.labels.length >= GRAPH_RES) {
myChart.data.labels.shift();
myChart.data.datasets.forEach((dataset) => dataset.data.shift())

View File

@ -37,9 +37,11 @@ window.addEventListener("load", function(evt) {
console.log(r.data)
if ('SOURCE_TCP' in r.data.Data && r.data.Data.SOURCE_TCP.length > 0) {
updateMapTCPbulk(r.data.Data.SOURCE_TCP)
addTCPSpeedData(r.data.Data.SOURCE_TCP)
}
if ('SOURCE_SERIAL' in r.data.Data && r.data.Data.SOURCE_SERIAL.length > 0) {
updateMapSERIALbulk(r.data.Data.SOURCE_SERIAL)
addSerialSpeedData(r.data.Data.SOURCE_SERIAL)
}
})

View File

@ -29,11 +29,8 @@
<div><span style="background-color: rgba(30, 139, 195, 1)"></span>Smartphone</div>
</div>
</div>
<div>
<canvas id="speedChart" width="400" height="200"></canvas>
</div>
<div style="width: 600px; height: 400px;">
<canvas id="myChart" width="400" height="200"></canvas>
<div style="width: 1000px; height: 300px;">
<canvas id="myChart" width="1000" height="300"></canvas>
</div>