Chartjs Counting Elements in a Chart

Question

I am trying to get the count of elements in an object. However, my chart is empty despite the fact that i can see my data when i log it. How am I supposed to pass the data to the dataset or should i do a count first?

My code

var url = "{{url('myurl') }}";
    var Clinics = new Array();

    $(document).ready(function() {
        $.get(url, function(response) {
           console.log(response)

            response.forEach(function(element) {
                Clinics = element.clinic

            });
            
           var Labels =  ["Paediatric", "Gynaecology Outpatient Clinic", "Physiotherapy Clinic", "Nutrition Clinic", "Dental Clinic", "Optical Clinic", "Well Baby Clinic", "Dermatology Clinic", "Surgical Outpatient Clinic", "Orthopaedic Clinic", "Medical Outpatient Physician", "Comprehensive Care Clinics", "Oncology", "Gastroenterology Clinic", ]
        
            var ctx = document.getElementById("clinicChart").getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: Labels,    
                        datasets: [{
                            fillColor: "#79D1CF",
                            strokeColor: "#79D1CF",
                            label: 'Patient Visits',
                            data: Clinics,
                            borderWidth: 1
                        }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    }
                }
            })
        })
    })

Answer 1

You are overwriting your Clinics variable.

response.forEach((element) => {
  Clinics.push(element.clinic);
});