Google Charts, AJAX, PHP Problem Encoding JSON Error: Data for arrayToDataTable is not an array

Question

I am trying to do some basic Google Charts filled by databse via PHP/PDO/MSSQL passed via AJAX to the .js

I'm having a very basic problem that i feel is encoding.

I am following the tutorial https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/gallery/linechart

They hardcode the data into the google chart but i send mine over via Ajax. My data from the Ajax looks like this:

$data = "['Year', 'Sales', 'Expenses'],['2004',  1000,      400],['2005',  1170,      460], ['2006',  660,       1120],['2007',  1030,      540]";
       
echo (json_encode($data));

resulting in:
"['Year', 'Sales', 'Expenses'],['2004', 1000, 400],['2005', 1170, 460], ['2006', 660, 1120],['2007', 1030, 540]"

However when I run the chart i get the error "Error: Data for arrayToDataTable is not an array."

I'm sending the exact same data verbatim but via AJAX so what am I missing?

Instead of the google sample:

 function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

I'm using:

function drawChart() {

          var jsonData = $.ajax({
            url: "reports/GoogleCharts/ajax_StationExpenses.php",
            dataType: "json"
          }).responseText;
 

       var data = new google.visualization.arrayToDataTable(jsonData);
        
       var options = {
          title: 'Station Utility Expense Over $250 by Month',
          curveType: 'function',
          legend: { position: 'bottom' },
          width: 800,
          height: 600,
          animation:{ startup: true, duration: 1700, easing: 'in' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
}

What am I missing, why does it take it hardcoded but not in what appears to be the exact same format pushed by AJAX from my php page?

Answer 1

Your $data value is a string, not an array.

$data = "anything here"; //a string
$data = "[['also','a','string'],...]"; //also a string

JSON encoding a string will not produce valid JSON.

$data = array(
    array("Year","Sales","Expenses"),
    array("2004",1000,400),
    array("2005",1170,460),
    array("2006",660,1120),
    array("2007",1030,540)
);

The above is a valid PHP array.

$data = [
    ["Year","Sales","Expenses"],
    ["2004",1000,400],
    ["2005",1170,460],
    ["2006",660,1120],
    ["2007",1030,540]
]; 

.. of course you can also use the PHP shorthand for writing arrays.

$json = json_encode($data);

The above is a valid JSON encoded array.

Add the JSON header:

header('Content-type: application/json');
exit( $json );