title: Dynamically add Rows and Columns in Google Chart
body: <p>I am working on google charts and want to add Rows and Columns Dynamically in Google Chart. I tried using below ajax but its not working.</p>
  
  <p>Here <code>NumCols</code> comes undefined and getting an error while adding rows </p>
  
  <blockquote>
    <p>Uncaught Error: If argument is given to addRow, it must be an array, or null</p>
  </blockquote>
  
  <p>Ajax:-</p>
  
  <pre><code> $.ajax({
          type: 'POST',
          dataType: 'json',
          contentType: 'application/json',
          url: '/home/DrawChart',     
          data: '{}',
          success: function (chartsdataSet) {             
              data = new google.visualization.DataTable();
  
              var chartsdata = JSON.parse(chartsdataSet).Table;
  
              var numRows = chartsdata.length;
              var numCols = chartsdata[0].length;
  
              data.addColumn('string', chartsdata[0][0]);
  
              // all other columns are of type 'number'.
              for (var i = 1; i &lt; numCols; i++)
                  data.addColumn('number', chartsdata[0][i]);
  
              // now add the rows.
              for (var j = 1; j &lt; numRows; j++)
                  data.addRow(chartsdata[j]);
          chart = new google.visualization.Table(document.getElementById('Graph1')); 
          chart.draw(data, options);   
      });
  </code></pre>
  
  <p><strong>JSON object after parsing:-</strong></p>
  
  <p><a href="https://i.stack.imgur.com/Wk44y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wk44y.png" alt="JSON object after parsing"></a></p>