Google Charts - Table has no columns when it has columns - google-visualization

Question

I'm attempting to create a Google Charts Line Chart. The Json I'm returning from a C# MVC controller method looks as follows:
My JS code looks as follows:
function drawChart() {
var jsonData = $.ajax({
url: "/Misc/GetWeeklySalesData/",
dataType: "json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
alert(data);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chartDiv'));
chart.draw(data, { width: 400, height: 240 });
I'm getting the message 'Table has no columns' when clearly it does.

Answer 1

To create the data table directly from JSON, it must be in a specific format:
Format of the Constructor's JavaScript Literal data Parameter
Otherwise, you can create a blank data table and load the rows manually:
$.ajax({
url: "/Misc/GetWeeklySalesData/",
dataType: "json",
}).done(function (jsonData) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Week');
data.addColumn('number', 'Retail');
data.addColumn('number', 'Wholesale');
jsonData.forEach(function (row) {
data.addRow([
row.Week,
row.Retail,
row.Wholesale
]);
});
var chart = new google.visualization.LineChart(document.getElementById('chartDiv'));
chart.draw(data, {
width: 400,
height: 240
});
}).fail(function (jq, text, err) {
console.log(text + ' - ' + err);
});
Note: highly recommend not using --> async: false. Use the done callback instead...