add speeds chart in replay

static/scripts/chart.js

@@ -4,9 +4,19 @@ var myChart = new Chart(ctx, {
     data: {
         labels: new Array(GRAPH_RES),
         datasets: [{
-            label: 'Z',
+            label: 'Ublox',
-            backgroundColor: 'rgba(255, 99, 132, 1)',
+            backgroundColor: 'rgba(214, 69, 65, 1)',
-            borderColor: 'rgba(255, 99, 132, 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,

static/scripts/chartfull.js

@@ -4,9 +4,19 @@ var myChart = new Chart(ctx, {
     data: {
         labels: new Array(),
         datasets: [{
-            label: 'Z',
+            label: 'Ublox',
-            backgroundColor: 'rgba(255, 99, 132, 1)',
+            backgroundColor: 'rgba(214, 69, 65, 1)',
-            borderColor: 'rgba(255, 99, 132, 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: 0,
-                    min: -2000,
+                    max: 250
-                    max: 2000
                 }
             }]
         },
@@ -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) => {
+    myChart.data.datasets[0].data.push(speedsSerial);
-        dataset.data.push(data);
+
-    });
+    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())

static/scripts/refull.js

@@ -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)
             }
         })
 

templates/replayFull.html

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