Loading data from controller to chart Jquery/ MVC/ C#

Question

I have the following controller code to return chart data to jquery. UPDATE: I have modified the code as suggested, but still getting error.

 public JsonResult GetLeaveDataForPieChart(int user_id)
    {

        List<EmployeeLeaveHeader> elh1 = new List<EmployeeLeaveHeader>();
        List<ChartEvent> ch = new List<ChartEvent>();
        elh1 = itlbg1.EmployeeLeaveHeaders.Where(f => f.Employee_ID == user_id).ToList();

    foreach (var item in elh1)
    {
        ChartEvent ce = new ChartEvent();
        ce.value = (item.leaveAvailable * 100).ToString();
        ce.color = item.CompanyLeaves.LeaveTypes.color;
        ce.highlight = "#ffffff";
        ce.label = item.CompanyLeaves.LeaveTypes.typeDescription + " Leave Available";
        ch.Add(ce);

        ChartEvent ce1 = new ChartEvent();
        ce1.value = (item.leaveTaken * 100).ToString();
        ce1.color = item.CompanyLeaves.LeaveTypes.color_light;
        ce1.highlight = "#ffffff";
        ce1.label = item.CompanyLeaves.LeaveTypes.typeDescription + " Leave Taken";
        ch.Add(ce1);
    }



    return Json(ch, JsonRequestBehavior.AllowGet);

}

I need to retrieve data in jquery so that it is in the required format to be passed to pie data.

(document).ready(function () {

    user_id = $("#user_id_1").text();
    $.ajax({
        url: '/Leave/GetLeaveDataForPieChart/',
        cache: false,
        data: { user_id: user_id },
        type: "GET",
        datatype: "json",
        success: function (data) {
            alert(data);
            var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
            var pieChart = new Chart(pieChartCanvas);
            var PieData = $.each(data, function (idx, obj) {
                var leave = new Object();

                    leave.value = obj.value;
                    leave.color = obj.color;
                    leave.highlight = obj.highlight;
                    leave.label = obj.label;
                    alert(leave);
                    return leave;
                });

                    var pieOptions = {
    //pie options..

};

                pieChart.Doughnut(PieData, pieOptions);
            }
        });

Can anyone explain how to convert the json data to javascript object to be passed to the pie chart?

what is meant by eval() here? Kindly explain how it can be related to the updated code. — toing_toing
– toing_toing, Commented Jun 23, 2015 at 10:50

yohannist · Accepted Answer · 2015-06-23 07:36:51Z

4

Here is how you parse JSON string into object.

 var jsonObject = JSON.parse(jsonString);

here is how you use jquery to fetch the data and use it for your chart

 $.ajax({
        url: '/<Controller>/GetLeaveDataForPieChart/',
        cache: false,
        data: {  user_id: <UserID> },
        type: "GET",
        success: function (data, textStatus, xmlHttpRequest) {
            data = JSON.parse(data);
            //....
            //....
            //Chart
            //....
            //....
            //....
        }
    });

edited Jun 23, 2015 at 7:36

answered Jun 23, 2015 at 7:28

yohannist

4,2143 gold badges38 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

toing_toing Over a year ago

Do I have to parse the jsondata even if I return it as a json string from the controller?

yohannist Over a year ago

@Nisal Upendra You are returning a string from your controller so yes, you do need to parse it. To return a json object from the controller, change the return type to ActionResult and return Json(jsonResult);

toing_toing Over a year ago

I did as you mentioned and the code for my chart now looks like this: ' $.ajax({ url: '/Leave/GetLeaveDataForPieChart/', cache: false, data: { user_id: user_id }, type: "GET", success: function (data) { alert(data); var pieChartCanvas = $("#pieChart").get(0).getContext("2d"); var pieChart = new Chart(pieChartCanvas); var PieData = data; var pieOptions = { //options }; pieChart.Doughnut(PieData, pieOptions); } }); ` Still doesn't work.

toing_toing Over a year ago

Your answer explains convert the json data to javascript object to be passed to the pie chart, so I marked it as correct. My issue was with a missing js file and afterwards just passing the result data to PieData did the job. Thanks.

PreguntonCojoneroCabrón Over a year ago

What is JSON.parse ? What I need javascript file(s) include?

|

Collectives™ on Stack Overflow

Loading data from controller to chart Jquery/ MVC/ C#

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related