add speeds chart in replay
This commit is contained in:
parent
c7698fa06e
commit
7805e89f5f
@ -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,
|
||||
|
||||
@ -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())
|
||||
|
||||
@ -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)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user