window.randomScalingFactor = function() {
    return Math.round(33);
};

function set_chart(id, data){
    var color = Chart.helpers.color;
    var horizontalBarChartData = {
        labels: ['Health', 'Stamina', 'Food', 'Damage', 'Speed'],
        datasets: [{
            label: 'Initial',
            stack: 'Stack 0',
            borderWidth: 2,
            borderColor: "rgb(0, 0, 0, 0.5)",
            backgroundColor: 'rgba(0, 0, 0, 0.9)',
            data: [
                data.initial_health ? data.initial_health.$numberDecimal : "",
                data.initial_energy ? data.initial_energy.$numberDecimal : "",
                data.initial_food ? data.initial_food.$numberDecimal : "",
                data.initial_damage ? data.initial_damage.$numberDecimal : "",
                data.initial_velocity ? data.initial_velocity.$numberDecimal : "",
            ]
        },{
            label: 'Now',
            stack: 'Stack 0',
            borderWidth: 2,
            borderColor: "rgb(0, 0, 0, 1)",
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            data: [
                data.health ? data.health.$numberDecimal : "",
                data.energy ? data.energy.$numberDecimal : "",
                data.food ? data.food.$numberDecimal : "",
                data.damage ? data.damage.$numberDecimal : "",
                data.velocity ? data.velocity.$numberDecimal : "",
            ]
        }]

    };

    var ctx = document.getElementById(id).getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'horizontalBar',
        data: horizontalBarChartData,
        onAnimationComplete: function () {

            var ctx = this.chart.ctx;
            ctx.font = this.scale.font;
            ctx.fillStyle = this.scale.textColor
            ctx.textAlign = "center";
            ctx.textBaseline = "bottom";
    
            this.datasets.forEach(function (dataset) {
                dataset.bars.forEach(function (bar) {
                    ctx.fillText(bar.value, bar.x, bar.y - 5);
                });
            })
        },
        options: {
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            legend:{
                display: false,
                labels: {
                    // This more specific font property overrides the global property
                    fontColor: 'black'
                }
            },
            responsive: true,
            scales: {
                xAxes: [{
                    stacked: true,
                    ticks: {
                        fontSize: 15,
                        fontFamily: "ark",
                        fontColor: "#fff"
                    }
                }],
                yAxes: [{
                    stacked: true,
                    ticks: {
                        fontSize: 15,
                        fontFamily: "ark",
                        fontColor: "#fff"
                    }
                }]
            }
        }
    });
}