<script type="text/javascript" src="{{ static('libs/chart.js/Chart.js') }}"></script>
<script type="text/javascript">
    function draw_pie_chart(data, $chart) {
        var ctx = $chart.find('canvas')[0].getContext('2d');
        var chart = new Chart(ctx, {
            type: 'pie',
            data: data,
            options: {
                maintainAspectRatio: false,
                responsive: false,
                animation: false,
                legend: {
                    position: 'right',
                    labels: {
                        fontColor: 'black',
                        boxWidth: 20,
                    },
                },
            },
        });
    }

    function draw_bar_chart(data, $chart) {
        var ctx = $chart.find('canvas')[0].getContext('2d');
        ctx.canvas.height = 20 * data.labels.length + 100;
        var chart = new Chart(ctx, {
            type: 'horizontalBar',
            data: data,
            options: {
                maintainAspectRatio: false,
                legend: {
                    display: false,
                },
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            return (Math.round(tooltipItem.value * 100) / 100) + '%';
                        },
                    },
                },
            },
        });
    }

    function draw_stacked_bar_chart(data, $chart) {
        var ctx = $chart.find('canvas')[0].getContext('2d');
        ctx.canvas.height = 20 * data.labels.length + 100;
        var chart = new Chart(ctx, {
            type: 'horizontalBar',
            data: data,
            options: {
                maintainAspectRatio: false,
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                scales: {
                    xAxes: [{
                        stacked: true,
                    }],
                    yAxes: [{
                        stacked: true,
                    }],
                },
            },
        });
    }
    function draw_histogram(data, $chart) {
        var ctx = $chart.find('canvas')[0].getContext('2d');
        ctx.canvas.height = 20 * data.labels.length + 100;
        var chart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: {
                maintainAspectRatio: false,
                legend: {
                    display: false,
                },
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            return tooltipItem.value;
                        },
                    },
                },
            },
        });
        return chart;
    }
</script>