[visualization-api] Loading data to data.addrows(chartData) MVC ASP.net

['Simon Roberts' via Google Visualization API]

Im having issues pulling data into the rows for my dashboard, Ive created a
controller which pulls data from a MSSQL Table -

using (ApplicationDbContext db = new ApplicationDbContext())
{
data = (
from u in db.StaffReportingDay
select new StaffReportingDayVM
{
Date = u.Date.ToString(),
AnnualLeave = u.AnnualLeave,
CompassionateLeave = u.CompassionateLeave,
Sick = u.Sick,
StudyLeave = u.StudyLeave,
Total = u.Total
}).ToList();
}


var ChartOne = new object[data.Count + 1];
ChartOne[0] = new object[]
{
"Date",
"Annual Leave",
"Sick Leave",
"Total on Leave"
};

int j = 0;

foreach(var i in data)
{
j++;
ChartOne[j] = new object[] {i.Date, i.AnnualLeave, i.Sick,
i.Total, i.CompassionateLeave, i.StudyLeave };
}


return Json(ChartOne, JsonRequestBehavior.AllowGet);

I then pull that data into the view -

var chartData;
google.load('visualization', '1', { packages: ['controls'] });
google.setOnLoadCallback(createTable);

$(document).ready(function () {

$.ajax({
url: "/Reporting/LeaveList",
data: "",
dataType: "json",
type: "POST",
contentType: "application/json; chartset=utf-8",
success: function (data) {
chartData = data;
},
error: function () {
alert("Error loading data! Please try again.");
}
}).done(function () {
// after complete loading data
google.setOnLoadCallback(createTable);
createTable();
});
});

function createTable() {
// Create the dataset (DataTable)
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'AnnualLeave');
data.addColumn('number', 'CompassionateLeave');
data.addColumn('number', 'StudyLeave');
data.addColumn('number', 'Total');
//data.addRows(chartData);
data.setCell(chartData);




// Create a dashboard.
var dash_container = document.getElementById('dashboard_div'),
myDashboard = new google.visualization.Dashboard(dash_container);

// Create a date range slider
var myDateSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control_div',
'options': {
'filterColumnLabel': 'Date'
}
});

// Table visualization
var myTable = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_div'
});

// Bind myTable to the dashboard, and to the controls
// this will make sure our table is update when our date changes
myDashboard.bind(myDateSlider, myTable);

// Line chart visualization
var myLine = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'line_div',
});

// Bind myLine to the dashboard, and to the controls
// this will make sure our line chart is update when our date
changes
myDashboard.bind(myDateSlider, myLine);

myDashboard.draw(myData);
}
</script>

<div id="dashboard_div">
<div id="control_div"><!-- Controls renders here --></div>
<div id="line_div"><!-- Line chart renders here --></div>
<div id="table_div"><!-- Table renders here --></div>
</div>

I get errors when using either data.addrows(chartData)

<Loading Image...>


or data.setcell(chartData)

<Loading Image...>

Can some one please point me in the right direction? Ive been going around
in circles for a couple of days.


Thanks


Simon