add acc Chart
This commit is contained in:
parent
e611b21d80
commit
863f919471
103
static/scripts/accChart.js
Normal file
103
static/scripts/accChart.js
Normal file
@ -0,0 +1,103 @@
|
||||
var arrayTCP = [];
|
||||
var arraySERIAL = [];
|
||||
|
||||
var ctx = document.getElementById('accChart').getContext('2d');
|
||||
var accChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: new Array(),
|
||||
datasets: [{
|
||||
label: 'Ublox VAcc',
|
||||
backgroundColor: 'rgba(214, 69, 65, 1)',
|
||||
borderColor: 'rgba(214, 69, 65, 1)',
|
||||
borderWidth: 1,
|
||||
fill: false,
|
||||
pointRadius: 1,
|
||||
lineTension: 0.5,
|
||||
data: arraySERIAL
|
||||
},
|
||||
{
|
||||
label: 'Smartphone VAcc',
|
||||
backgroundColor: 'rgba(30, 139, 195, 1)',
|
||||
borderColor: 'rgba(30, 139, 195, 1)',
|
||||
borderWidth: 1,
|
||||
fill: false,
|
||||
pointRadius: 1,
|
||||
lineTension: 0.5,
|
||||
data: arrayTCP
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
min: 0,
|
||||
max: 10,
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
type: 'time',
|
||||
time: {
|
||||
unit: 'second'
|
||||
}
|
||||
}]
|
||||
},
|
||||
animation: {
|
||||
duration: 0
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/*function addSerialSpeedData() {
|
||||
let speeds = []
|
||||
|
||||
indexes.forEach(index => {
|
||||
speeds.push((allSpeedsSerial[index] * 3.6).toFixed(2))
|
||||
})
|
||||
accChart.data.datasets[0].data = speeds;
|
||||
accChart.update();
|
||||
}*/
|
||||
|
||||
/*
|
||||
function addTCPSpeedData(sensordataList) {
|
||||
let speedsTCP = []
|
||||
let times = []
|
||||
|
||||
sensordataList.forEach(sensordata => {
|
||||
if (sensordata.Speed === 0) {
|
||||
return;
|
||||
}
|
||||
let speed = sensordata.Speed
|
||||
speedsTCP.push((speed * 3.6).toFixed(2));
|
||||
let time = sensordata.Servertime
|
||||
times.push(time)
|
||||
|
||||
})
|
||||
accChart.data.labels = times;
|
||||
accChart.data.datasets[1].data = speedsTCP;
|
||||
|
||||
accChart.update();
|
||||
}
|
||||
|
||||
function findSerialDataIndex(tcpdataList, serialdataList) {
|
||||
let allSerialTimes = []
|
||||
|
||||
serialdataList.forEach(sensordata => {
|
||||
if (!(sensordata.Speed === 0)) {
|
||||
let serialTimestamp;
|
||||
allSpeedsSerial.push(sensordata.Speed)
|
||||
serialTimestamp = composeServertime(sensordata.Servertime)
|
||||
allSerialTimes.push(serialTimestamp)
|
||||
}
|
||||
})
|
||||
|
||||
tcpdataList.forEach(sensordata => {
|
||||
if (!(sensordata.Speed === 0)) {
|
||||
let tcpTimestamp = composeServertime(sensordata.Servertime)
|
||||
let index = findBestTimeMatch(tcpTimestamp, allSerialTimes)[1]
|
||||
|
||||
indexes.push(index)
|
||||
}
|
||||
})
|
||||
console.log("indexes: " + indexes)
|
||||
}*/
|
||||
@ -1,44 +0,0 @@
|
||||
var ctx = document.getElementById('myChart').getContext('2d');
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: new Array(GRAPH_RES),
|
||||
datasets: [{
|
||||
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)
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
// beginAtZero: true
|
||||
min: -2000,
|
||||
max: 2000
|
||||
}
|
||||
}]
|
||||
},
|
||||
animation: {
|
||||
duration: 0
|
||||
}
|
||||
}
|
||||
});
|
||||
myChart.data.labels.fill("", 0, GRAPH_RES);
|
||||
myChart.data.datasets.forEach((dataset) => dataset.data.fill(0, 0, GRAPH_RES))
|
||||
function addSerialAltData(data) {
|
||||
myChart.data.labels.push("");
|
||||
myChart.data.datasets.forEach((dataset) => {
|
||||
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();
|
||||
};
|
||||
@ -1,16 +1,13 @@
|
||||
let allSpeedsSerial = []
|
||||
let indexes = []
|
||||
|
||||
var arrayTCP = [];
|
||||
var arraySERIAL = [];
|
||||
|
||||
var ctx = document.getElementById('myChart').getContext('2d');
|
||||
var myChart = new Chart(ctx, {
|
||||
var ctx = document.getElementById('speedChart').getContext('2d');
|
||||
var speedChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: new Array(),
|
||||
datasets: [{
|
||||
label: 'Ublox',
|
||||
label: 'Ublox speed',
|
||||
backgroundColor: 'rgba(214, 69, 65, 1)',
|
||||
borderColor: 'rgba(214, 69, 65, 1)',
|
||||
borderWidth: 1,
|
||||
@ -20,7 +17,7 @@ var myChart = new Chart(ctx, {
|
||||
data: arraySERIAL
|
||||
},
|
||||
{
|
||||
label: 'Smartphone',
|
||||
label: 'Smartphone speed',
|
||||
backgroundColor: 'rgba(30, 139, 195, 1)',
|
||||
borderColor: 'rgba(30, 139, 195, 1)',
|
||||
borderWidth: 1,
|
||||
@ -58,8 +55,8 @@ function addSerialSpeedData() {
|
||||
indexes.forEach(index => {
|
||||
speeds.push((allSpeedsSerial[index] * 3.6).toFixed(2))
|
||||
})
|
||||
myChart.data.datasets[0].data = speeds;
|
||||
myChart.update();
|
||||
speedChart.data.datasets[0].data = speeds;
|
||||
speedChart.update();
|
||||
}
|
||||
|
||||
function addTCPSpeedData(sensordataList) {
|
||||
@ -76,10 +73,10 @@ function addTCPSpeedData(sensordataList) {
|
||||
times.push(time)
|
||||
|
||||
})
|
||||
myChart.data.labels = times;
|
||||
myChart.data.datasets[1].data = speedsTCP;
|
||||
speedChart.data.labels = times;
|
||||
speedChart.data.datasets[1].data = speedsTCP;
|
||||
|
||||
myChart.update();
|
||||
speedChart.update();
|
||||
}
|
||||
|
||||
function findSerialDataIndex(tcpdataList, serialdataList) {
|
||||
|
||||
@ -159,11 +159,8 @@
|
||||
<script src="static/scripts/map.js"></script>
|
||||
<script src="static/scripts/speedometer.js"></script>
|
||||
|
||||
|
||||
|
||||
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
|
||||
<script src="static/scripts/accuracy.js"></script>
|
||||
<!--<script src="static/scripts/chart.js"></script>-->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -30,12 +30,17 @@
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 1000px; height: 300px;">
|
||||
<canvas id="myChart" width="1000" height="300"></canvas>
|
||||
<canvas id="speedChart" width="1000" height="300"></canvas>
|
||||
</div>
|
||||
<div style="width: 1000px; height: 300px;">
|
||||
<canvas id="accChart" width="1000" height="300"></canvas>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
|
||||
<script src="static/scripts/mapFull.js"></script>
|
||||
<script src="static/scripts/chartFull.js"></script>
|
||||
<script src="static/scripts/accChart.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user