MVC chart not working on retrieving data from database by ajax

Question

Hi, I'm not experienced in implementing ajax I simply followed a youtube video then I found out that the reason that the database is not reflecting on the chart is because of this ajax code.

$(document).ready(function () {

$.ajax({  
    type: "POST",  
    url: 'Home/Charts',  
    data: JSON.stringify({}),  
    contentType: "application/json:charset=utf-8",  
    dataType: "json",  
    success: function (json) {  

        debugger  
        var values = json.DashBoardcount;  
        var passcount = parseInt(values[0]);  
        var failcount = parseInt(values[1]);  
            
    }  
})  
});  

/* I'm trying to pass on the charts the count of pass & fail students. */

SQL QUERY: Select count([YearGraduate]) as pass,(select count([YearGraduate]) from [dbo].[Student] where YearGraduate='2022'and Program='CE' and BoardScore >=60.00) as fail from [dbo].[Student] where YearGraduate='2022' and Program='CE' and BoardScore <=59.99

Controller:

public ActionResult Charts()
{
return View();
}

    public JsonResult DashBoardcount()  
    {  
        try  
        {  
            string[] DashBoardcount = new string[2];  

            SqlConnection con = new SqlConnection(connectionString);  
              


            con.Open();  
            SqlCommand cmd = new SqlCommand("Select count([YearGraduate]) as pass,(select count([YearGraduate]) from [dbo].[Student] where YearGraduate='2022'and Program='CE' and BoardScore >=60.00) as fail from [dbo].[Student] where  YearGraduate='2022' and Program='CE' and BoardScore <=59.99\r\n", con);  
            DataTable dt = new DataTable();  
            SqlDataAdapter cmd1 = new SqlDataAdapter(cmd);  
            cmd1.Fill(dt);  

            if(dt.Rows.Count == 0)  
            {     
                DashBoardcount[0] = "0";  
                DashBoardcount[1] = "0";  

            }  
            else  
            {  
                DashBoardcount[0] = dt.Rows[0]["pass"].ToString();  
                DashBoardcount[1] = dt.Rows[0]["fail"].ToString();  
            }  
            return Json(new { DashBoardcount }, JsonRequestBehavior.AllowGet);  
        }  
        catch (Exception ex)  
        {  
            throw ex;  
        }  
    }  
}  

Also before passing the data I tried to run the code and the chart is perfectly showing.

Answer 1

Hi @juan miguel nieto ,
You can't get the value because your ajax url is wrong, you need to get JsonResult using DashBoardcount() method.
Also, you need to confirm that there is a return value in the DashBoardcount() method.

 $.ajax({  
            type: "POST",  
            url: '/Home/DashBoardcount',  

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.