let 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: Math.PI,
        circumference: Math.PI,
        legend: {
            display: false,
            enabled: false
        },
        tooltips: {
            enabled: false,
            display: false
        },
        cutoutPercentage: 40
    }
}
let 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: Math.PI,
        circumference: Math.PI,
        legend: {
            display: false,
            enabled: false
        },
        tooltips: {
            enabled: false,
            display: false
        },
        cutoutPercentage: 65
    }
}

let ctx1 = document.getElementById('speedometer').getContext('2d');
let mySpeedometer = new Chart(ctx1, options1);
let ctx2 = document.getElementById('speedometerSpeeds').getContext('2d');
let mySpeedometer2 = new Chart(ctx2, options2);

function addSpeedSerial(speedSERIAL){
    let speedSERIALkmh = (speedSERIAL * 3.6)
    let speedSERIALpercent = (speedSERIALkmh/250)*100
    mySpeedometer.data.datasets[1].data = [speedSERIALpercent, 100-speedSERIALpercent];
    document.getElementById("speedSERIAL").innerHTML = `Ublox: ${speedSERIALkmh.toFixed(1)} km/h`
    mySpeedometer.update();
}

function addSpeedTcp(speedTCP){
    let speedTCPkmh = (speedTCP * 3.6)
    let speedTCPpercent = (speedTCPkmh/250)*100;
    mySpeedometer.data.datasets[0].data = [speedTCPpercent, 100-speedTCPpercent];
    document.getElementById("speedTCP").innerHTML = `Phone: ${speedTCPkmh.toFixed(1)} km/h`
    mySpeedometer.update();
}