Using Google charts API with MVC 3 Razor and jquery ajax

asp.net-mvc-3, google-visualization, razor

Solution

I am thinking that you need to move the chart drawing lines inside of the `POST` callback:

$.post('@Url.Content("~/Home/GetMyChart1")', function (items) {
    // Successful requests get here                 
    alert(JSON.stringify(items) + "   -   " + items.rows.length);                 
    data.addRows(items.rows.length);                 
    $.each(items.rows, function (i, item) { 
        alert(i);                     
        data.setCell(i, 0, item.Name);                     
        data.setCell(i, 1, item.ID);                 
    });                 
    alert("finished");                 
    alert(data.length);             
    // Set chart options         
    var options = { 
        'title': 'How Much Pizza I Ate Last Night',             
        'width': 400,             
        'height': 300         
        // Instantiate and draw our chart, passing in some options.         
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));   
        chart.draw(data, options); 
    });         
};

Problem

I'm trying to display a pie chart in my website using Google charts API so far i cant get it to work and I couldn't find any examples that use MVC 3 Razor. here is my code im using json to get the data ``` // Load the Visualization API and the piechart package. google.load('visualization', '1.0', { 'packages': ['corechart'] }); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); JSON.stringify = JSON.stringify || function (obj) { var t = typeof (obj); if (t != "object" || obj === null) { // simple data type if (t == "string") obj = '"' + obj + '"'; return String(obj); } else { // recurse array or object var n, v, json = [], arr = (obj && obj.constructor == Array); for (n in obj) { v = obj[n]; t = typeof (v); if (t == "string") v = '"' + v + '"'; else if (t == "object" && v !== null) v = JSON.stringify(v); json.push((arr ? "" : '"' + n + '":') + String(v)); } return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}"); } }; // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { // Create the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); $.post('@Url.Content("~/Home/GetMyChart1")', function (items) { // Successful requests get here alert(JSON.stringify(items) + " - " + items.rows.length); data.addRows(items.rows.length); $.each(items.rows, function (i, item) { alert(i); data.setCell(i, 0, item.Name); data.setCell(i, 1, item.ID); }); alert("finished"); alert(data.length); }); // Set chart options var options = { 'title': 'How Much Pizza I Ate Last Night', 'width': 400, 'height': 300 }; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); } ``` The controller Code ``` public ActionResult GetMyChart1(string CurrentClass) { var tests = from t in db.Tests group t by new { t.StudentID, t.Student.CurrentSchoolGrade } into tl select new { StudentID = tl.Key.StudentID, Class = tl.Key.CurrentSchoolGrade, Score = (tl.Sum(k => k.Score)/tl.Sum(l => l.Part.Score))* 100, Count = tl.Count() }; var results = from t in tests where t.Class == CurrentClass select t; List<DataItem> dt = new List<DataItem>(); dt.Add(new DataItem(results.Count(x => x.Score <= 40), "0% - 40%")); dt.Add(new DataItem(results.Count(x => x.Score <= 60 && x.Score > 40), "40% - 60%")); dt.Add(new DataItem(results.Count(x => x.Score <= 80 && x.Score > 60), "60% - 80%")); dt.Add(new DataItem(results.Count(x => x.Score <= 100 && x.Score > 60), "80% - 100%")); chartJson cj = new chartJson(); cj.rows = dt; return Json(cj); } public class chartJson { public List<DataItem> rows { get; set; } } public class DataItem { public DataItem(int id, string name) { ID = id; Name = name; } public int ID { get; set; } public string Name { get; set; } } ``` all the alerts returns correct values except alert(data.length); it returns undefined and the drawing div appears with a label written in it No data

Original source