Column Chart Not Displaying when Loading data Using Ajax

[Andrew Mullen]

I am using a Column Chart but when I try and load the data using Ajax I get the following error: 

Uncaught (in promise) Error: Not an array

Here is how I am creating my chart: 

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['bar']});
    google.charts.setOnLoadCallback(drawChart);


    function drawChart() {
      var jsonData = $.ajax({
              type: 'GET',
              url: "10.21.124.252:8080/getData.php",
              dataType: "json", // type of data we're expecting from server
              async: false // make true to avoid waiting for the request to be complete
      });

      var data = google.visualization.arrayToDataTable(jsonData);
   
      var options = {
        chart: {
          title: 'Automation of Tests Progression'
        }
      };


      var chart = new google.charts.Bar(document.getElementById('columnchart_material'));


      chart.draw(data, google.charts.Bar.convertOptions(options));
    }
  </script>

But when I change the var data to: 

 var data = google.visualization.arrayToDataTable([["Priority","Automated","isAutomatable","isNotAutomatable"],["All","216","861","44"],["P1","213","568","34"],["P2","1","148","6"],["P3","2","136","3"],["P4","0","7","1"],["P5","0","2","0"]]);

the chart loads fine and this is the exact data my php script is returning when I hit the URL manually. Any ideas on what I am doing wrong when I use the data being returned from jsonData?