Google visualization - table data not rendered - ajax

Question

I am struggling with google visualization api. I have defined following Spring controller that returns json representation of com.google.visualization.datasource.datatable.DataTable.
#RequestMapping(value = "/magento", method = RequestMethod.GET, headers = { "Accept=application/json" }, params = { "table" }, produces = "application/json; charset=utf-8")
public #ResponseBody
DataTable getMagentoCustomersTable() {
DataTable data = new DataTable();
ArrayList<ColumnDescription> cd = new ArrayList<ColumnDescription>();
cd.add(new ColumnDescription("customerId", ValueType.TEXT,
"Customer Id"));
cd.add(new ColumnDescription("email", ValueType.TEXT, "Email"));
cd.add(new ColumnDescription("firstName", ValueType.TEXT, "First Name"));
cd.add(new ColumnDescription("lastName", ValueType.TEXT, "Last Name"));
data.addColumns(cd);
// Fill the data table.
try {
for (CustomerInterface customer : magentoService.getCustomers()
.getCustomers()) {
data.addRowFromValues(customer.getCustomerId(),
customer.getEmail(), customer.getFirstName(),
customer.getLastName());
}
} catch (TypeMismatchException e) {
System.out.println("Invalid type!");
}
return data;
}
Then I am using following ajax call to produce Table output
$.ajax({
url : "${pageContext.request.contextPath}/customer/magento.json",
data : {
table : null
},
dataType : 'json'
}).success(
function(response) {
// Create the data table.
var data = new google.visualization.DataTable(response);
// Set chart options
var options = {
'title' : 'Magento Customers',
'width' : 400,
'height' : 300
};
// Instantiate and draw our table, passing in some options.
var table = new google.visualization.Table(document
.getElementById('chart_div'));
table.draw(data, options);
});
Ajax call return valid json object with data. Table is created with expected number of rows, there is no error in processing js but all table rows are empty as well as column headers.
So my question is am I missing something? What could went wrong?
==EDIT==
Below you can see sample json returned from ajax call to client. When this json is passed to DataTable constructor it is created but I noticed that no columns are created in DataTable object whereas rows are.
{
"warnings": [],
"rows": [{
"customProperties": {},
"cells": [{
"value": {
"value": "1",
"type": "TEXT",
"null": false,
"objectToFormat": "1"
},
"type": "TEXT",
"null": false,
"customProperties": {},
"formattedValue": null
}, {
"value": {
"value": "lname1#gmail.com",
"type": "TEXT",
"null": false,
"objectToFormat": "lname1#gmail.com"
},
"type": "TEXT",
"null": false,
"customProperties": {},
"formattedValue": null
}, {
"value": {
"value": "fname1",
"type": "TEXT",
"null": false,
"objectToFormat": "fname1"
},
"type": "TEXT",
"null": false,
"customProperties": {},
"formattedValue": null
}, {
"value": {
"value": "lname1",
"type": "TEXT",
"null": false,
"objectToFormat": "lname1"
},
"type": "TEXT",
"null": false,
"customProperties": {},
"formattedValue": null
}]
}, {
"customProperties": {},
"cells": [{
"value": {
"value": "2",
"type": "TEXT",
"null": false,
"objectToFormat": "2"
},
"type": "TEXT",
"null": false,
"customProperties": {},
"formattedValue": null
}, {
"value": {
"value": "lname2#gmail.com",
"type": "TEXT",
"null": false,
"objectToFormat": "lname2#gmail.com"
},
"type": "TEXT",
"null": false,
"customProperties": {},
"formattedValue": null
}, {
"value": {
"value": "fname1",
"type": "TEXT",
"null": false,
"objectToFormat": "fname1"
},
"type": "TEXT",
"null": false,
"customProperties": {},
"formattedValue": null
}, {
"value": {
"value": "lname2",
"type": "TEXT",
"null": false,
"objectToFormat": "lname2"
},
"type": "TEXT",
"null": false,
"customProperties": {},
"formattedValue": null
}]
}],
"numberOfRows": 2,
"numberOfColumns": 4,
"columnDescriptions": [{
"id": "customerId",
"type": "TEXT",
"pattern": "",
"customProperties": {},
"label": "Customer Id"
}, {
"id": "email",
"type": "TEXT",
"pattern": "",
"customProperties": {},
"label": "Email"
}, {
"id": "firstName",
"type": "TEXT",
"pattern": "",
"customProperties": {},
"label": "First Name"
}, {
"id": "lastName",
"type": "TEXT",
"pattern": "",
"customProperties": {},
"label": "Last Name"
}],
"customProperties": {},
"localeForUserMessages": null
}