function getStates() {
    var xhr = new XMLHttpRequest ();
    var states = {};
    xhr.open ("GET", "/Cofano/db?chart=orderstate", false);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var text = xhr.responseText;
            var statearr = text.split (" - ");
            for (let i = 0; i < statearr.length; i++) {
                var state = statearr[i].split (":")[0];
                var count = parseInt (statearr[i].split (":")[1])
                states[state] = count;
            }
        }
    };
    xhr.send ();
    return states;
}

function getCustomers() {
    var xhr = new XMLHttpRequest ();
    var customers = {};
    xhr.open ("GET", "/Cofano/db?chart=customer", false);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var text = xhr.responseText;
            var customerarr = text.split (" - ");
            for (let i = 0; i < customerarr.length; i++) {
                var customer = customerarr[i].split (":")[0];
                var count = parseInt (customerarr[i].split (":")[1])
                customers[customer] = count;
            }
        }
    };
    xhr.send ();
    return customers;
}

function teuPerCustomer() {
    var xhr = new XMLHttpRequest ();
    var customers = {};
    xhr.open ("GET", "/Cofano/db?chart=teupercustomer", false);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var text = xhr.responseText;
            var customerarr = text.split (" - ");
            for (let i = 0; i < customerarr.length; i++) {
                var customer = customerarr[i].split (":")[0];
                var count = parseInt (customerarr[i].split (":")[1])
                customers[customer] = count;
            }
        }
    };
    xhr.send ();
    return customers;
}

function containerChart() {
    var xhr = new XMLHttpRequest ();
    var customers = {};
    xhr.open ("GET", "/Cofano/db?chart=containers", false);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var text = xhr.responseText;
            var customerarr = text.split (" - ");
            for (let i = 0; i < customerarr.length; i++) {
                var customer = customerarr[i].split (":")[0];
                var count = parseInt (customerarr[i].split (":")[1])
                customers[customer] = count;
            }
        }
    };
    xhr.send ();
    return customers;
}

function shippingCompanyScacs() {
    var xhr = new XMLHttpRequest ();
    var customers = {};
    xhr.open ("GET", "/Cofano/db?chart=scacs", false);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var text = xhr.responseText;
            var customerarr = text.split (" - ");
            for (let i = 0; i < customerarr.length; i++) {
                var customer = customerarr[i].split (":")[0];
                var count = parseInt (customerarr[i].split (":")[1])
                customers[customer] = count;
            }
        }
    };
    xhr.send ();
    return customers;
}

var states = getStates();
var customers = getCustomers();
var teupercustomer = teuPerCustomer();
var containerchart = containerChart();
var shippingscacs = shippingCompanyScacs();

var statedata = {
    datasets: [{
        data: Object.values (states),
        backgroundColor: ['rgba(0,255,0)', 'rgba(255,0,0)', 'rgba(0,0,255)', 'rgba(0,127,127)',
            'rgba(127,0,127)', 'rgba(255,127,0)', 'rgba(255, 255, 0)', 'rgba(160,90, 0)']
    }],
    labels: Object.keys (states)
};

var customerdata = {
    datasets: [{
        data: Object.values (customers),
        backgroundColor: ['rgba(0,255,0)', 'rgba(255,0,0)', 'rgba(0,0,255)', 'rgba(0,127,127)',
            'rgba(127,0,127)', 'rgba(255,127,0)', 'rgba(255, 255, 0)', 'rgba(160,90, 0)',
            'rgba(0, 57, 150)', 'rgba(170, 170, 170)', 'rgba(145, 0, 0)', 'rgba(127, 255, 248)',
            'rgba(170, 181, 16)', 'rgba(27, 249, 179)', 'rgba(0, 0, 0)']
    }],
    labels: Object.keys (customers)
};

var teupercustomerdata = {
    datasets: [{
        data: Object.values (teupercustomer),
        backgroundColor: ['rgba(0,255,0)', 'rgba(255,0,0)', 'rgba(0,0,255)', 'rgba(0,127,127)',
            'rgba(127,0,127)', 'rgba(255,127,0)', 'rgba(255, 255, 0)', 'rgba(160,90, 0)',
            'rgba(0, 57, 150)', 'rgba(170, 170, 170)', 'rgba(145, 0, 0)']
    }],
    labels: Object.keys (teupercustomer)
};

var containerchartdata = {
    datasets: [{
        data: Object.values (containerchart),
        backgroundColor: ['rgba(0,255,0)', 'rgba(255,0,0)', 'rgba(0,0,255)', 'rgba(0,127,127)',
            'rgba(127,0,127)', 'rgba(255,127,0)', 'rgba(255, 255, 0)', 'rgba(160,90, 0)',
            'rgba(0, 57, 150)', 'rgba(170, 170, 170)']
    }],
    labels: Object.keys (containerchart)
};

var scacsdata = {
    datasets: [{
        data: Object.values (shippingscacs),
        backgroundColor: ['rgba(0,255,0)', 'rgba(255,0,0)', 'rgba(0,0,255)', 'rgba(0,127,127)',
            'rgba(127,0,127)', 'rgba(255,127,0)', 'rgba(255, 255, 0)', 'rgba(160,90, 0)',
            'rgba(0, 57, 150)', 'rgba(170, 170, 170)']
    }],
    labels: Object.keys (shippingscacs)
};


var sctx = document.getElementById('state-chart').getContext('2d');
var cctx = document.getElementById('customer-chart').getContext('2d');
var tpctx = document.getElementById('teupercustomer-chart').getContext('2d');
var ccctx = document.getElementById('containerchart-chart').getContext('2d');
var scacctx = document.getElementById('scacs-chart').getContext('2d');


var statechart = new Chart(sctx, {
    type: 'pie',
    data: statedata,
    options: {
        animation: {
            animateRotate: true
        }
    }
});

var customerchart = new Chart(cctx, {
    type: 'pie',
    data: customerdata,
    options: {
        animation: {
            animateRotate: true
        }
    }
});

var teupercustomerchart = new Chart(tpctx, {
    type: 'pie',
    data: teupercustomerdata,
    options: {
        animation: {
            animateRotate: true
        }
    }
});

var containerpiechart = new Chart(ccctx, {
    type: 'pie',
    data: containerchartdata,
    options: {
        animation: {
            animateRotate: true
        }
    }
});

var scacs = new Chart(scacctx, {
    type: 'pie',
    data: scacsdata,
    options: {
        animation: {
            animateRotate: true
        }
    }
});