Error to popular google chart Charts

Question

I’m facing the following mistake:

VM3611:231 Uncaught Error: Unknown header type: 6

Code:

google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var jsonData = $.ajax({
        url: "/client/ajax",
        dataType: "JSON",
        async: false
    }).responseJSON;

    var data = google.visualization.arrayToDataTable([
        ['Name' , 'Tickets']
    ]);

    for(var i=0;i<jsonData.length;i++){
        var array = [jsonData[i].Name , jsonData[i].Tickets]
        data = (google.visualization.arrayToDataTable([
            array
        ]));
    }
    var chart = new google.visualization.L

ineChart(document.getElementById('chart_div'));
chart.draw(data);

I’ve never used Charts, I wonder if I’m doing it right? And the reason for the mistake? Thank you to the community!

Answer 1

The way I was able to visualize the data, I called arrayToDataTable() only once. See the code below.

As for errors, I found only one syntax error. In the code posted, the } is missing at the end of the function. I believe the code did not run because the JSON arrayToDataTable() was being called repeatedly for each JSON object (array), and in fact it needs the "header) line".

JSON data has been exchanged for static. I hope it helps you!

   google.charts.load('current', {packages: ['corechart']});
   google.charts.setOnLoadCallback(drawChart);

   function drawChart() {
     var jsonData = [
       { "Name": "Joe", "Tickets": 300 },
       { "Name": "Karl", "Tickets": 200 },
       { "Name": "Tina", "Tickets": 900 },
     ];
       
     var dataArray = [
       ['Name' , 'Tickets'],
     ];

     for(var i=0;i<jsonData.length;i++){
       var row = [jsonData[i].Name , jsonData[i].Tickets];
       dataArray.push(row);
     }

     var data = google.visualization.arrayToDataTable(dataArray);

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

#chart_div {
       height: 100%;
   }

<div id="chart_div">
  </div>
<script src="https://www.gstatic.com/charts/loader.js"></script>