Q:

Google Chart add data from array

Hi guys so I'm trying to draw a chart with Google chart
this is my code:
      google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawStuff);

  function drawStuff() {

    var data = new google.visualization.arrayToDataTable([

      ['', 'Total: '],

      [info["name"] , info["qn"]],  //first element
      [info["name"] , info["qn"]],  //second element

    ]);

    var options = {

      legend: { position: 'none' },

      axes: {

      },
      bar: { groupWidth: "80%" }
    };

    var chart = new google.charts.Bar(document.getElementById('top_x_div'));
    // Convert the Classic options to Material options.
    chart.draw(data, google.charts.Bar.convertOptions(options));
  };

My question is: How can I insert data from an array to the chart? 
PS: the first element is supposed to be the first element of the array and the second element is supposed to be the second one.
My array:
    var cont = 1;
var rowtbl = document.getElementById("tabella").rows.length;
rowtbl = rowtbl - 1; //number rows table
while(cont <= rowtbl){
    var nomi;
    var qnt;
    nomi = document.getElementById("tabella").rows[cont].cells[0].innerHTML;
    qnt = document.getElementById("tabella").rows[cont].cells[1].innerHTML;
    var info = {name: nomi, qn: qnt};
    cont = cont +1; 

}

A:

if you have an array of objects, similar to this...  
var info = [
  {
    name: "Test 1",
    qn: 1
  },
  {
    name: "Test 2",
    qn: 2
  }
];

then you would access the elements as such...
1st element -- info[0]
2nd element -- info[1] 
as for the object keys of each element, you can access two ways...
info[0]["name"]
-- or --
info[0].name
you can also use Array.forEach to add all the rows in a loop.  
see following working example, the same rows are added twice,
just to show the different ways of adding rows...

google.charts.load('current', {
  callback: function () {

    var info = [
      {
        name: "Test 1",
        qn: 1
      },
      {
        name: "Test 2",
        qn: 2
      }
    ];

    var data = new google.visualization.arrayToDataTable([
      ['', 'Total: '],
      // add each element manually
      [info[0]["name"] , info[0]["qn"]],  //first element
      [info[1]["name"] , info[1]["qn"]],  //second element
    ]);

    // add each element via forEach loop
    info.forEach(function(value, index, array){
      data.addRow([
        value.name,
        value.qn
      ]);
    })

    var options = {
      legend: { position: 'none' },
      bar: { groupWidth: "80%" }
    };

    var chart = new google.charts.Bar(document.getElementById('top_x_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
  },
  packages: ['bar']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="top_x_div"></div>

EDIT -- based on code from comment  
you can use data.addRow at the end of the while statement  
note changes made to column headings for data

google.charts.load('current', {
      callback: function () {
        var cont = 1;
        var rowtbl = document.getElementById("tabella").rows.length;
        rowtbl = rowtbl - 1;

        // use object notation for column headings
        var data = new google.visualization.arrayToDataTable([
          [{type: 'string', label: ''}, {type: 'number', label: 'Total: '}]
        ]);

        //number rows table
        while(cont <= rowtbl){
          var nomi;
          var qnt;
          nomi = document.getElementById("tabella").rows[cont].cells[0].innerHTML;
          qnt = document.getElementById("tabella").rows[cont].cells[1].innerHTML;
          var info = {
            name: nomi,
            qn: qnt
          };

          // add row to google data
          data.addRow([
            info.name,
            parseFloat(info.qn)
          ]);

          cont = cont +1;
        }

        var options = {
          legend: { position: 'none' },
          bar: { groupWidth: "80%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
      },
      packages: ['bar']
    });
<script src="https://www.gstatic.com/charts/loader.js"></script>
<table id="tabella">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
  </tr>
  <tr>
    <td>Test 1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Test 2</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Test 3</td>
    <td>3</td>
  </tr>
</table>

<div id="top_x_div"></div>

