javascript - Google Graph error Uncaught (in promise) Error: Column header row must be an array

When I try to select an option from the list of districts the onchange run the following method:

showAgeDistributionGraph: function() {
            let e                   =   document.getElementById("TxtAgeGroup");
            let txtAgeGroup         =   e.options[e.selectedIndex].value;
            let url                 =   'backend/core/loadCasesByAgeGroup.php';

            var jsonData = $.ajax({
                url: url,                 
                data: {
                    ds: txtAgeGroup
                },
                dataType: 'json', 
            }).done(function(jsonData) {
                google.charts.load('current', { 
                    packages: ['corechart']                 
            }).then(function () {
                drawChart(jsonData);})
            }); 

            google.charts.load('current', {
                    packages: ['corechart']
                }).then(function () {
                    drawChart(jsonData);
                });            
        }
Copy code

Once the above code is processed the drawChart function is executed

    function drawChart(jsonData){
        var data = google.visualization.arrayToDataTable([  
            jsonData
        ], false);

        console.log(jsonData);

        var options = {
            title: 'Cases By Age Group',
            width: 900,
            height: 400,
            bar: {groupWidth: "80%"},
            legend: { position: "bottom" },
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chartContainer'));

        chart.draw(data, options);      
    }
Copy code

The PHP code which is executed in the background is the following:

        // STATISTICS (GRAPHS)
        public function districtPopulationGraph($ds)
        {
            $sql    = "call `new_CasesAgeDistributionChart`(?);";
            $stmt   = $this->connect()->prepare($sql);
            $stmt->execute([$ds]);

            if ($stmt->rowCount()>0) 
            {
                $data[] = ["Age","Total Clients"];
                while ($record = $stmt->fetch())
                {

                    // UPDATE TOTALS 
                    $data[]     =   ["GroupA",$record['16-17']];
                    $data[]     =   ["GroupB",$record['18-29']];
                    $data[]     =   ["GroupC",$record['30-49']];
                    $data[]     =   ["GroupD",$record['50-64']];
                    $data[]     =   ["GroupE",$record['65+']];   
                }

                $data_for_chart = json_encode($data, JSON_NUMERIC_CHECK);
                return $data_for_chart;                  
            }
Copy code

// Output returned by $data_for_chart is [["Age","Total Clients"],["GroupA","24"],["GroupB","251"],["GroupC","576"],["GroupD","407"],["GroupE","659"]]

The problem is that the Chart is giving an error of: Uncaught (in promise) Error: Column header row must be an array.

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.