generate graphic with chart.js in laravel 5.6

I´m traying to create a graphic in my app developed in Laravel 5.6.

I´m sending all my data from my controller with one array.

$callSend = array();
        
        foreach($result as $call){
            array_push($callSend, Cita::where('id_llamada', $call->id)
                                                        ->with("estado")
                                                        ->get());                                                      
        }

Cita it´s my model to get all my data this return this:

(754) [Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), …]

this it´s my return with show in console.log({!! json_encode($estados) !!})

and content of one array it´s:

[0 … 99]
0: Array(1)
0:
ciudad: "x"
cp: "x"
created_at: "2020-08-11 12:17:44"
direccion: "CALLE HERREROS, 17"
estado: {id: 5, nombre: "aplazada", desc: "APLAZADA", clase_span: "badge bg-secondary text-white", clase: "secondary"}
id: 13
id_comercial: 44
id_comercial2: null
id_estado: 5
id_llamada: 538
movil: ""
nomape: "DIEGO HIJO DE REMEDIOS JUMILLA TROLLANO"
provincia: "JAÉN"
telefono: "x"
updated_at: "2020-08-11 12:27:39"
__proto__: Object
length: 1
__proto__: Array(0)

i need get estado from this arrays estado it´s status. In my script i have this:

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.4.0/dist/chart.min.js"></script>

        <script>
            console.log({!! json_encode($estados) !!});

            var ctx = document.getElementById('myChart').getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: {!! json_encode($estados) !!},
                    datasets: [{
                        label: 'Estado de las llamadas pasadas a comerciales',
                        data: {!! json_encode($estados) !!},
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

whith this {!! json_encode($estados) !!} but i can´t access to differents status. Also, i need group for differents states... My query, i think that it´s not correct to 100% i need one return so:

send: 5
commercialiced: 3
called: 1
null: 0

i need represent this in my chart but i can´t because it´s my first time with chart.js.

Thanks for help and read

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/3qFV6dF
via IFTTT