Using Google charts API with MVC 3 Razor and jquery ajax - asp.net-mvc-3

Question

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

Answer 1

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

Answer 2

Google charts API is written in JavaScript so it can be used with any web framework, including ASP.NET MVC. All that you need to do is to include it in your views. It shouldn't be limited or not work because you are using ASP.NET MVC.

Answer 3

After reviewing the full sample of code it looks like the google.setOnLoadCallback(drawChart); is most likely executing the drawChart method before the data is ready. Thus no chart.
Instead of making an Ajax .Post to the server to retrieve data, just build your data on the initial request.