MVC code
This method call from the ajax call, which return the Highchart Pie series data as json string of object array, which I include in the bottom in Highchart pie option, this method convert the datatable to a list of Chartdata type, then convert as json array of objects and return as json from the MVC method as jsonresult
[HttpGet]
public JsonResult YearlySales(string choice, string condition1, string condition2, string condition3)
{
DataTable dt = null;
var reg = "\"([^\"]+)\":";
char[] charsToTrim = { '"' };
DashboardManager dashboardManager = new DashboardManager();
try
{
dt = dashboardManager.DashboardData("1", choice, condition1, condition2,condition3);
if (dt != null)
{
return Json(Regex.Replace(JsonConvert.SerializeObject(GetJsonDataAsList("List", dt)), reg, "$1:").Replace("\"", "'"), JsonRequestBehavior.AllowGet);
}
catch(Exception ex)
{
return Json(new { Success = 0, ex = new Exception("Exception").Message.ToString() });
}
finally
{
dashboardManager = null;
}
return Json(new { Success = 0, ex = new Exception("Failed to save").Message.ToString() });
}
private List<Chartdata> GetJsonDataAsList(string choice, DataTable dt)
{
List<Chartdata> chartData = null;
try
{
switch (choice)
{
case "List": //return Value as List
chartData = new List<Chartdata>();
chartData = (from DataRow dr in dt.Rows
select new Chartdata()
{
name = dr["Name"].ToString(),
y = Convert.ToDecimal(dr["Value"])
}).ToList();
break;
}
}
catch(Exception ex)
{
chartData = null;
}
return chartData;
}
Javascript Code and ajax call
But in the javascript side after receiving the response pie chart data enclosed with double quote for which the pie chart is not diplaying, i include the generated pie option in bottom how it's look in debug, how can i remove the double quote or generate json in exact format?
function getTgWiseSales() {
var varMonth, varYear, condition1, condition2, condition3, choice;
choice = "3";
condition1 = "2";
$.ajax({
cache: false,
type: "GET",
url: "/Dashboardyearly/YearlySales",
dataType: 'json',
data: { "choice": choice, "condition1": condition1, "condition2": condition2, "condition3": condition3 },
success: function (data) {
var result = data;
tgWiseSalesGraph(data);
},
error: function (xhr, ajaxOptions, thrownError) {
//trwisesale.html('');
}
});
}
function tgWiseSalesGraph(datas) {
var d = datas;
var options = {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: ''
},
accessibility: {
point: {
valueSuffix: '%'
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
data: d
}]
};
$('#tgwisesale').highcharts(options);
}
Highchart Pie options generated in javascript function
{
"chart": {
"type": "pie",
"options3d": {
"enabled": true,
"alpha": 45,
"beta": 0
}
},
"title": {
"text": ""
},
"accessibility": {
"point": {
"valueSuffix": "%"
}
},
"tooltip": {
"pointFormat": "{series.name}: <b>{point.percentage:.1f}%</b>"
},
"plotOptions": {
"pie": {
"allowPointSelect": true,
"cursor": "pointer",
"depth": 35,
"dataLabels": {
"enabled": true,
"format": "{point.name}"
}
}
},
"series": [
{
"type": "pie",
"data": "[{name:'Allergic Disorder',y:3787.77,sliced:false,selected:false},{name:'Analgesic',y:495.47,sliced:false,selected:false},{name:'Anti diabetic',y:5292.77,sliced:false,selected:false},{name:'Anti infective',y:9013.07,sliced:false,selected:false},{name:'Cardiovascular',y:6073.10,sliced:false,selected:false},{name:'CNS',y:323.46,sliced:false,selected:false},{name:'Gastrointestinal',y:6624.34,sliced:false,selected:false},{name:'IV Fluid',y:1310.16,sliced:false,selected:false},{name:'Musculo-skeletal',y:11544.46,sliced:false,selected:false},{name:'Ophthalmic',y:249.75,sliced:false,selected:false},{name:'Respiratory',y:8616.12,sliced:false,selected:false},{name:'Skin',y:3435.75,sliced:false,selected:false},{name:'Urogenital',y:454.40,sliced:false,selected:false},{name:'Vitamin',y:251.25,sliced:false,selected:false}]"
}
]
}
series data enclosed with the double quote so the pie chart is not displaying. What I am doing wrong, how can I generate the series data without double quote in the ajax call ? stuck with this, need help!!