Data Bind to Pie Chart (Google API)

Question

I am trying to bind data dynamically to pie chart, but its not working. Here's my code:

function drawChart() {
      $.ajax({
          url: "list",
          dataType: "json",
          success: function (jsonData) {
              var data = new google.visualization.DataTable();
              data.addColumn('string', 'cName');
              data.addColumn('int', 'share');

              for (var i = 0; i < jsonData.length; i++) {
                  data.addRow([jsonData[i].cName, jsonData[i].share]);
              }

              var options = {
                  title: 'Certificate details',
                  backgroundColor: '#e9e9e9'
              };
              var chart = new google.visualization.PieChart(document.getElementById('piechart'));
              chart.draw(data, options);
          }
      });}

function:

public JsonResult list()
    {
        int regId = getUserId(Session["username"].ToString());
        var result = (from e in db.share_bought_history
                      where e.regist_id == regId
                      group e by e.comapnay_id into companies
                      select new
                      {
                          cName = companies.FirstOrDefault().company.company_name,
                          share = companies.Sum(x => x.no_of_sahre)
                      });
        return Json(result.ToList(), JsonRequestBehavior.AllowGet);
    }

I also try to pass direct DataTable but same issue (nothing shows) Here's code:

function drawChart() {
      $.ajax({
          url: "list",
          dataType: "json",
          success: function (jsonData) {
              var options = {
                  title: 'Certificate details',
                  backgroundColor: '#e9e9e9'
              };
              var chart = new google.visualization.PieChart(document.getElementById('piechart'));
              chart.draw(jsonData, options);
          }
      });

Function:

public JsonResult list()
    {
        DataTable dataTable = new DataTable("pie");
        dataTable.Columns.Add("cName", typeof(System.String));
        dataTable.Columns.Add("share", typeof(System.Int16));
        int regId = getUserId(Session["username"].ToString());
        var result = (from e in db.share_bought_history
                      where e.regist_id == regId
                      group e by e.comapnay_id into companies
                      select new
                      {
                          cName = companies.FirstOrDefault().company.company_name,
                          share = companies.Sum(x => x.no_of_sahre)
                      });
        foreach (var item in result)
        {
            DataRow row = dataTable.NewRow();
            row[0] = item.cName;
            row[1] = item.share;
            dataTable.Rows.Add(row);
        }
        return Json(dataTable, JsonRequestBehavior.AllowGet);
    }

and don't understand what's the problem because when i manually pass data (static) pie chart shows perfectly. like:

function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
      ]);

    var options = {
        title: 'My Daily Activities',
        backgroundColor: '#e9e9e9'
    };
      var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }

Answer 1

use the first snippet above...

change 'int' to 'number'...

data.addColumn('number', 'share');