HighChart Pie chart not working in ASP.Net MVC application, JsonConvert.SerializeObject return Json string with a double quote

Viewed 48

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!!

0 Answers
Related