Verwenden von Google Charts API mit MVC 3 Razor und jquery ajax

Question

Ich versuche, ein Tortendiagramm in meiner Website mit Google Charts API bis jetzt ich kann es nicht zur Arbeit und ich konnte keine Beispiele finden, die verwenden MVC 3 Razor.

hier ist mein Code im json unter Verwendung der Daten

// 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); 
    } 

Der 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; } 
} 

alle Warnungen korrekte Werte zu erhalten, außer alert (data.length) liefert; Es gibt undefined und die Zeichnung div erscheint mit einem Etikett in es geschrieben

Answer 1

Ich denke, dass Sie benötigen, um die Diagrammzeichenlinien innerhalb des POST Rückruf bewegen:

$.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); 
    });   
};   

Answer 2

Google Diagramme API ist in JavaScript geschrieben, so dass es mit jedem Web-Framework, einschließlich ASP.NET MVC verwendet werden kann. Alles, was Sie tun müssen, ist es in Ihre Ansichten aufzunehmen. Es sollte nicht eingeschränkt werden oder nicht funktionieren, da Sie ASP.NET MVC verwenden.

Answer 3

Nach der Überprüfung der gesamten Beispielcode sieht es aus wie die google.setOnLoadCallback(drawChart); ist wahrscheinlich die drawChart Methode ausgeführt, bevor die data bereit ist. Also keine Tabelle.

Anstatt einen Ajax .Post zum Server zum Abrufen von Daten zu erstellen, erstellen Sie einfach Ihre Daten auf die erste Anfrage.