LINQ Query is not displaying mt data in my Google chart (Report)

Question

I have a LINQ query which gets the Type and count of types, and I have it in my controller. In my view I am using a Pie Chart from Google Charts and I am trying to display the data acquired by the LINQ statement. However, when I run the program the Pie Chart doesn't display. No errors appear though. So I am struggling to see whether my problem is my View or the Controller

Controller:

public ActionResult Report_5()
{                
     return View();
}

public ActionResult GetChart5()
{
    var result = from x in db.Submission
                 group x by x.Type into grp
                 select new
                 {
                     Type = grp.Key,
                     Count = grp.Count()
                 };

    return Json(result, JsonRequestBehavior.AllowGet);
}

Report_5 View:

<h2 style="text-align:center">Type Count</h2>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>                   
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    function drawTable() {
        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Type');
        data.addColumn('string', 'Count');

        $.getJSON("@Url.Action("GetChart5")", null, function (chartData) {
            $.each(chartData, function (i, item) {
                data.addRow([item.Type, item.Count]);
            });

            var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
            chart.draw(data, options);
        });
    }
</script>                    

<div id="donutchart" style="width: 900px; height: 500px;"></div>

Please let me know if I need to provide more information.

Answer 1

I made the following: 1. created view in folder Models.

public class ModelSubmission
{
    public string  Type { get; set; }
    public int TotalSubmissions { get; set; }
}

2. In home controller created the following:

   public ActionResult Report_5() { return View(); }

   public ActionResult GetChart5()
   {
       List<ModelSubmission> result = new List<ModelSubmission>();
       result.Add(new ModelSubmission() { Type="Book", TotalSubmissions = 3 });
       result.Add(new ModelSubmission() { Type = "Book chapter", TotalSubmissions = 7 });
       result.Add(new ModelSubmission() { Type = "Journal Article", TotalSubmissions = 3 });
   
       return Json(result, JsonRequestBehavior.AllowGet);
   }
   

And then copy/pasted your view. Then executed for debugging, and as you mentioned seen nothing special. After clicking F12 in chrome I noticed following error message:

Uncaught ReferenceError: drawChart is not defined. It lead me to conclusion, that in your code instead of

google.setOnLoadCallback(drawChart);

you should write

google.setOnLoadCallback(drawTable);

After some debugging I noticed other errors in your code. Try to find them while watching the following view:

 <h2 style="text-align:center">Type Count</h2>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">     </script>
 <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
 <script      src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js">     </script>
 <script      src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js">     </script>
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">
     google.load("visualization", "1", { packages: ["corechart"] });
     google.setOnLoadCallback(drawTable);

     function drawTable() {
         var data = new google.visualization.DataTable();

         data.addColumn('string', 'Type');
         data.addColumn('number', 'Count');

         $.getJSON("@Url.Action("GetChart5")", null, function (chartData) {
             $.each(chartData, function (i, item) {
                 data.addRow([item.Type, item.TotalSubmissions]);
        });

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        var options = {
            'title': 'Forgotten input',
            'width': 400,
            'height': 300
        };
        chart.draw(data, options);
    });
}

You should be more careful when copy/paste code from other pages