let top_flop_result;


let top_flop = new Chart($("#top_flop_chart"), {
    type: 'horizontalBar',
    data: {
        labels: [],
        datasets: [{
            data: [],
            backgroundColor: [],
        }]
    },
    options: {
        responsive: true,
        title: {
            display: false,
            text: 'Top Flop Artikel'
        },
        legend: {
            display: false
        },
        scales: {
            yAxes: [{
                gridLines: {
                    display: false
                },
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

function updateTopFlopChart(id) {
    if (typeof id !== 'undefined') {
        request('top_flop', id).then(function (data) {
            top_flop_result = data;
            updateTopFlop();
        });
    } else request('top_flop').then(function (data) {
        top_flop_result = data;
        updateTopFlop();
    });
}

function updateTopFlop() {
    top_flop.data.labels = top_flop_result.labels;
    top_flop.data.datasets[0].data = top_flop_result.data;
    let seq = palette('mpn65', 15);
    for (let i = 0; i < 15; i++) {
        top_flop.data.datasets[0].backgroundColor[i] = "#" + seq[i];
    }
    top_flop.update();

}