Can't seem to get addRows() or addRow() wor work, no matter what i tried

[Joseph Nguyen US]

Background: I develop an HTML/Javascript with AJAX for user to select UI and from there call via AJAX, POST to PHP script to perform an MySQL query.  I get the response in the form of JSON (this.responseText) a string representation of the object or can further perform a JSON.parse(this.responseText) to get list of Objects within the JSON.

I want to graph my data, only selected fields as a column chart. 

But, whenever it gets to the data.addRow() or data.addRows(), it would exit, no errors from the dev tool debugging console?

//general:

function drawchart(json) {

 var rows = new Array();

 let data = new google.visualization.DataTable();

for (var x in json) {

                   data.addColumn('string', "Test-ProcessName", "Test-ProcessName");
                     data.addColumn('string', "Start-Time", "Start-Time");
                     data.addColumn('string', "End-Time", "End-Time");
                 

                   var testName = json[x]["Test-ProcessName"];
                     var startTime =  json[x]["Start-Time"];
                     var endTime = json[x]["End-Time"];

                   rows.push([testName, startTime, endTime]);

                   console.log("Individual values: \'" + testName + " " + startTime + " " + endTime + "\n");   //This works!!!

      }

data.addRows(rows);   //This is the line that is not happy.

//NOTE: I tried data.addRow([..., ...., ....]); same issue

//Then tried data.addRows(1);

//data.setCell(x,0, json[x]['Test-ProcessName']);

//data.setCell(x,1, json[x]['Start-Time']);
 //data.setCell(x,2, json[x]['End-Time']);

//Nothing seems to work.

var options = {
                    title: "TEST_DATA",
                    width: 900,
                    height: 700,
                    bar: {groupWidth: "60%"},
                    legend: {position: "none"},
                    hAxi: {
                        title: "Test-ProcessName"
                    },
                    vAxis: {
                        title: "Hours-Ran"
                    }
                };
              

 var chartDiv = document.getElementById('chart_area'); //chart_area');
                var chart = new google.visualization.ColumnChart(chartDiv);
                chart.draw(data, options);

Please advise, as I've spending lots of time trying to work past this addRow(s) issue.

Thanks In advance,

JN

[Joseph Nguyen US]

Hello,

Here is a small example of my JSONData from this.responseText as a result of calling XMLHttpRequest(), POST to PHP for MySQL query:

[{"Index":"2","Test-ProcessName":"DATA_TEST","Start-Time":"2022-05-18 02:19:53","End-Time":"2022-05-18 14:23:18"},{"Index":"2","Test-ProcessName":"PERF_TEST","Start-Time":"2022-05-18 02:19:53","End-Time":"2022-05-18 14:23:18"}]

the json input to the function above is essentially: json = JSON.parse(this.responseText);       //this will return a list of array of objects [object object][object object]...

Please help advise, how i can get the proper data to make addRow() or addRows() happy.

Thanks in advance,

JN