chart_ajax_js

<script>

    $.ajax({
        method: "GET",
        url: "{% url 'json-test' %}",
        success: function (data) {
            labels = data.utility.label
            utility_figures = data.utility.figures
            food_figures = data.food.figures
            rent_figures = data.rent.figures


            var ctx = document.getElementById("sales_chart_2020").getContext('2d');
            var myChart = new Chart (ctx, {
                type: 'bar', 
                data: {
                    labels: labels,
                    datasets: [
                        {
                        label: 'utility',
                        backgroundColor: 'rgb(255, 99, 132)',
                        borderColor: 'rgb(255, 99, 132)',
                        data: utility_figures,
                        borderWidth: 1
                    },
                    {
                        label: 'personnel',
                        data: food_figures,
                        backgroundColor: 'rgb(255, 0, 0)',
                        borderWidth: 1
                    },
                    {
                        label: 'rent',
                        data: rent_figures,
                        backgroundColor: 'rgb(255, 0, 0)',
                        borderWidth: 1
                    },

                
                ]
                },
                options: {
                        scales: {
                            y: {
                                beginAtZero: true,
                                stacked: true, 
                            },
                            x: {
                                stacked: true,
                            },
                        }
                    }
                                
            })
        }


    })
</script>