var options2 = {
    type: 'doughnut',
    data: {
        datasets: [
            {
                label: 'compassTCP',
                data: [360,0],
                backgroundColor: [
                    'rgba(30, 139, 195, 1)',
                    'rgba(30, 139, 195, 1)'
                ],
                borderColor: [
                    'rgba(255, 255, 255 ,1)',
                    'rgba(255, 255, 255 ,1)'
                ],
                borderWidth: 4
            },
            {
                label: 'compassSERIAL',
                data: [360,0],
                backgroundColor: [
                    'rgba(214, 69, 65, 1)',
                    'rgba(214, 69, 65, 1)',
                ],
                borderColor: [
                    'rgba(255, 255, 255 ,1)',
                    'rgba(255, 255, 255 ,1)'
                ],
                borderWidth: 4
            }
        ]
    },
    options: {
        rotation: 2 * Math.PI,
        circumference: 2 * Math.PI,
        legend: {
            display: false,
            enabled: false
        },
        tooltips: {
            enabled: false,
            display: false
        },
        cutoutPercentage: 50
    }
}

var ctx2 = document.getElementById('compass').getContext('2d');
var myCompass = new Chart(ctx2, options2);


function addCompassSerial(deg){
    var c = Math.abs(90-deg);
    if(deg<90){
        myCompass.data.datasets[1].data = [360-c,c];
    }
    if(deg>90){
        myCompass.data.datasets[1].data = [c,360-c];
    }
    myCompass.update();
}

function addCompassTCP(deg){
    var c = Math.abs(90-deg);
    if(deg<90){
        myCompass.data.datasets[0].data = [360-c,c];
    }
    if(deg>90){
        myCompass.data.datasets[0].data = [c,360-c];
    }
    myCompass.update();
}