title: Getting Google chart error "Data column(s) for axis #0 cannot be of type string"
body: <p>I have seen multiple forums on this and i know the error but have checked my code but cant get where i am going wrong, please assist me 
  the database tables im querying are:
  Allocation table:
  <a href="https://i.stack.imgur.com/a5WCC.png" rel="nofollow noreferrer">Allocation</a>
  Milestone table:
  <a href="https://i.stack.imgur.com/VjZ6s.png" rel="nofollow noreferrer">milestone table</a>
  aspnetusers table:
  <a href="https://i.stack.imgur.com/DAzBV.png" rel="nofollow noreferrer">aspusers table</a></p>
  
  <p>then my code in asp.net mvc 
  Controller method:</p>
  
  <pre><code>  [HttpPost]
      public JsonResult StudentColumnChart()
  
      {
          var userID = User.Identity.GetUserId();
          string supervisorid = userID;
          string query = $"SELECT AspNetUsers.Name AS Name, SUM(Milestone.Progress)/ COUNT(Milestone.Progress) * 100 AS Progress FROM Milestone INNER JOIN AspNetUsers ON Milestone.StudentNumber = AspNetUsers.Id INNER JOIN Allocation ON Milestone.StudentNumber = Allocation.StudentNumber Where Allocation.StaffNumber =  '{{supervisorid}}'  GROUP BY AspnetUsers.Name "; 
  
          //string query=$"SELECT AspNetUsers.Name AS NAME, SUM(Milestone.Progress)/ COUNT(Milestone.Progress) * 100 AS TotalProgress, Allocation.StaffNumber AS STAFF, Allocation.StudentNumber AS STUDENT " +
  
  
  
          //string query = "SELECT AspNetUsers.Name, SUM(Milestone.Progress)/ COUNT(Milestone.Progress) * 100 AS TotalProgress, Allocation.StaffNumber, Allocation.StudentNumber" +
          //     " From Milestone " +
          //     "INNER JOIN AspNetUsers ON Milestone.StudentNumber=AspNetUsers.Id " + 
  
          //     "  WHERE Allocation.StaffNumber=id AND Milestone.StudentNumber=Allocation.StudentNumber GROUP BY AspNetUsers.Name";
          // //string query = "SELECT AspNetUsers.Name, SUM(Milestone.Progress)/ COUNT(Milestone.Progress) * 100 AS TotalProgress, Allocation.StaffNumber, Allocation.StudentNumber" +
          //    " From Milestone INNER JOIN AspNetUsers ON Milestone.StudentNumber=AspNetUsers.Id " + 
  
          //    "  WHERE Allocation.StaffNumber=id AND  GROUP BY AspNetUsers.Name";
          string constr = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;
          List&lt;object&gt; chartData = new List&lt;object&gt;();
          chartData.Add(new object[]
                          {
                             "Name","Progress"
                          });
  
          using (SqlConnection con = new SqlConnection(constr))
          {
              using (SqlCommand cmd = new SqlCommand(query))
              {
                  cmd.CommandType = CommandType.Text;
                  cmd.Connection = con;
                  con.Open();
                  using (SqlDataReader sdr = cmd.ExecuteReader())
                  {
                      while (sdr.Read())
                      {
                          chartData.Add(new object[]
                          {
                           sdr["Name"], sdr["Progress"]
                          });
                      }
                  }
  
                  con.Close();
              }
          }
  
          return Json(chartData);
      }
  </code></pre>
  
  <p>view:</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      google.load("visualization", "1", { packages: ["corechart"] });
      google.setOnLoadCallback(drawChart);
      function drawChart() {
          $.ajax({
              type: "Post",
              url: "/CHART/StudentColumnChart",
  
              data: '{}',
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function (r) {
                  var data = google.visualization.arrayToDataTable(r);
  
                  //ColumnChart
                  var options = {
                      hAxis: {
                          title: "TotalProgress",
                          id: "progress",
                          label: "progress",
                          type: "number"
                      },
                      vAxis: {
                          title: "Name",
                          id: "Name",
                          label: "Name",
                          type: "string"
                      },
                      title: 'Students Progress %',
                      width: 600,
                      height: 400,
                      bar: { groupWidth: "50%" },
                      legend: { position: "none" },
                      isStacked: true,
                      format: "#.#'%'"
                  };
                  var chart = new google.visualization.ColumnChart($("#chart")[0]);
  
                  //var chart = new google.visualization.PieChart($("#chart")[0]);
  
                  chart.draw(data, options);
              },
              failure: function (r) {
                  alert(r.d);
              },
              error: function (r) {
                  alert(r.d);
              }
  
          });
      }
  &lt;/script&gt;
  
  &lt;div id="chart" style="width: 900px; height: 500px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But i keep getting this error:
  <a href="https://i.stack.imgur.com/irrXH.png" rel="nofollow noreferrer">error</a></p>