Partial View :
var dataa;
$.ajax({
url: ServerUrl + '/Dashboard/GetData',
type: 'POST',
cache: false,
dataType: 'text',
async: true,
error: function (xhr) {
//alert('Error: ' + xhr.statusText);
},
success: function (result) {
debugger;
dataa = result;
var chart = c3.generate({
data: {
type: 'bar',
json: [
dataa
],
keys: {
x: 'indicator',
value: ['total']
}
},
axis: {
x: {
type: 'category'
}
},
bar: {
width: {
ratio: 0.5
}
}
});
}
});
Controller Json code
public string GetData()
{
return "{ 'indicator': 'X', 'total': 100 },{ 'indicator': 'Y', 'total': 200 },{ 'indicator': 'Z', 'total': 300 }";
}
When i use the above code it doesn't work but if I pass json data as specified in this JS Fiddle link, it works. Am I passing the JSON data incorrectly from controller.?
Please help.
You are not return JSON from method GetData. Do this way to return JSON
public JsonResult GetData()
{
var data = new[] {
new { indicator= "X", total = 100 },
new { indicator= "Y", total = 200 },
new { indicator= "Z", total = 300 }
};
return Json(data,JsonRequestBehavior.AllowGet);
}
And make ajax call like:
$.ajax({
cache: false,
type: "GET",
url:URL,
dataType: 'json',
success: function (result)
{
console.log(result);
},
error: function (xhr, ajaxOptions, thrownError)
{
alert('Failed to retrieve data.');
}
});