166 lines
4.8 KiB
JavaScript
166 lines
4.8 KiB
JavaScript
var options1 = {
|
|
type: 'doughnut',
|
|
data: {
|
|
datasets: [
|
|
{
|
|
label: 'speedTCP',
|
|
data: [0,100],
|
|
backgroundColor: [
|
|
'rgba(30, 139, 195, 1)',
|
|
'rgba(191, 191, 191, 1)'
|
|
],
|
|
borderColor: [
|
|
'rgba(255, 255, 255 ,1)',
|
|
'rgba(255, 255, 255 ,1)'
|
|
],
|
|
borderWidth: 0
|
|
},
|
|
{
|
|
label: 'speedSERIAl',
|
|
data: [0, 100],
|
|
backgroundColor: [
|
|
'rgba(214, 69, 65, 1)',
|
|
'rgba(191, 191, 191, 1)'
|
|
],
|
|
borderColor: [
|
|
'rgba(255, 255, 255 ,1)',
|
|
'rgba(255, 255, 255 ,1)'
|
|
],
|
|
borderWidth: 0
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
rotation: 1 * Math.PI,
|
|
circumference: 1 * Math.PI,
|
|
legend: {
|
|
display: false,
|
|
enabled: false
|
|
},
|
|
tooltips: {
|
|
enabled: false,
|
|
display: false
|
|
},
|
|
cutoutPercentage: 40
|
|
}
|
|
}
|
|
var options2 = {
|
|
type: 'doughnut',
|
|
data: {
|
|
datasets: [
|
|
{
|
|
label: 'speedMarks',
|
|
data: [50,50,50,50],
|
|
backgroundColor: [
|
|
'rgba(30, 130, 76, 1)',
|
|
'rgba(244, 208, 63, 1)',
|
|
'rgba(235, 151, 78, 1)',
|
|
'rgba(217, 30, 24, 1)'
|
|
],
|
|
borderColor: [
|
|
'rgba(30, 130, 76, 1)',
|
|
'rgba(244, 208, 63, 1)',
|
|
'rgba(235, 151, 78, 1)',
|
|
'rgba(217, 30, 24, 1)'
|
|
],
|
|
borderWidth: 0
|
|
},
|
|
{
|
|
label: 'transparent',
|
|
data: [100],
|
|
backgroundColor: [
|
|
'rgba(0, 0, 0, 0)'
|
|
],
|
|
borderColor: [
|
|
'rgba(0, 0, 0, 0)'
|
|
],
|
|
borderWidth: 2
|
|
},
|
|
{
|
|
label: 'transparent1',
|
|
data: [100],
|
|
backgroundColor: [
|
|
'rgba(0, 0, 0, 0)'
|
|
],
|
|
borderColor: [
|
|
'rgba(0, 0, 0, 0)'
|
|
],
|
|
borderWidth: 2
|
|
},
|
|
{
|
|
label: 'transparent2',
|
|
data: [100],
|
|
backgroundColor: [
|
|
'rgba(0, 0, 0, 0)'
|
|
],
|
|
borderColor: [
|
|
'rgba(0, 0, 0, 0)'
|
|
],
|
|
borderWidth: 2
|
|
},
|
|
{
|
|
label: 'transparent3',
|
|
data: [100],
|
|
backgroundColor: [
|
|
'rgba(0, 0, 0, 0)'
|
|
],
|
|
borderColor: [
|
|
'rgba(0, 0, 0, 0)'
|
|
],
|
|
borderWidth: 2
|
|
},
|
|
{
|
|
label: 'speedMarks1',
|
|
data: [50,50,50,50],
|
|
backgroundColor: [
|
|
'rgba(30, 130, 76, 1)',
|
|
'rgba(244, 208, 63, 1)',
|
|
'rgba(235, 151, 78, 1)',
|
|
'rgba(217, 30, 24, 1)'
|
|
],
|
|
borderColor: [
|
|
'rgba(30, 130, 76, 1)',
|
|
'rgba(244, 208, 63, 1)',
|
|
'rgba(235, 151, 78, 1)',
|
|
'rgba(217, 30, 24, 1)'
|
|
],
|
|
borderWidth: 0
|
|
},
|
|
]
|
|
},
|
|
options: {
|
|
rotation: 1 * Math.PI,
|
|
circumference: 1 * Math.PI,
|
|
legend: {
|
|
display: false,
|
|
enabled: false
|
|
},
|
|
tooltips: {
|
|
enabled: false,
|
|
display: false
|
|
},
|
|
cutoutPercentage: 65
|
|
}
|
|
}
|
|
|
|
var ctx1 = document.getElementById('speedometer').getContext('2d');
|
|
var mySpeedometer = new Chart(ctx1, options1);
|
|
var ctx2 = document.getElementById('speedometerSpeeds').getContext('2d');
|
|
var mySpeedometer2 = new Chart(ctx2, options2);
|
|
|
|
function addSpeedSerial(speedSERIAL){
|
|
var speedSERIALkmh = (speedSERIAL * 3.6)
|
|
var speedSERIALpercent = (speedSERIALkmh/250)*100
|
|
mySpeedometer.data.datasets[1].data = [speedSERIALpercent, 100-speedSERIALpercent];
|
|
document.getElementById("speedSERIAL").innerHTML = "Speed Ublox (km/h): " + speedSERIALkmh.toFixed(1)
|
|
mySpeedometer.update();
|
|
}
|
|
|
|
function addSpeedTcp(speedTCP){
|
|
var speedTCPkmh = (speedTCP * 3.6)
|
|
var speedTCPpercent = (speedTCPkmh/250)*100;
|
|
mySpeedometer.data.datasets[0].data = [speedTCPpercent, 100-speedTCPpercent];
|
|
document.getElementById("speedTCP").innerHTML = "Speed Smartphone (km/h): " + speedTCPkmh.toFixed(1)
|
|
mySpeedometer.update();
|
|
}
|