Getting data from db and display it in line chart using jquery and Abp.net C# service

Question

When I run swagger, I can see my service return data but if I run the MVC it gives me error can't display the chart. Need help and chart is to show monthly reports by a count of entries in the DB to show successful, pending, and failed by the chart.

My jquery

 google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    $.ajax({
    type: "GET",
    url: "/idMSDashboard/GetMonthlyVerStatCountAsync",
    contentType: "application/json",
    success: function (data) {
        var data = GetMonthlyVerStatCountAsysnc();

    var options = {
        title: '',
        width: '100%',
        colors: ['green', 'orange', 'red'],
        curveType: 'function',
        legend: { position: 'bottom' }
    };

    var chart = new google.visualization.LineChart(document.getElementById('top_x_div'));

    chart.draw(data, options)
    $(window).resize(function () {
        drawChart();
    });
    },
    error: function () {
        $('.loader-wrapper').addClass('hidden');
        abp.notify.error("An error occurred while retrieving Monthly Verification  stats. Contact support", "Error");
        abp.ui.clearBusy();
    }
});
    
}

And this My C# services which is working because I did check my swagger and it returns the data but the jquery is my issue need help guys

 public async Task<idMSDashboard_Dto> GetMonthlyVerStatCountAsync()
    {
        try
        {
            using (var conn = new OracleConnection(_configuration.GetConnectionString("Payment")))
            {
                using (var cmd = conn.CreateCommand())
                {
                    conn.Open();
                    using (var unitOfWork = _unitOfWorkManager.Begin())
                    {
                        string monthVerificationStat_sql = @"SELECT CASE WHEN MONTH_NUM = 1 THEN 'JAN' WHEN MONTH_NUM = 2 THEN 'FEB' WHEN MONTH_NUM = 3 THEN 'MAR' WHEN MONTH_NUM = 4 THEN 'APR' WHEN MONTH_NUM = 5 THEN 'MAY'
                                                              WHEN MONTH_NUM = 6 THEN 'JUN' WHEN MONTH_NUM = 7 THEN 'JUL' WHEN MONTH_NUM = 8 THEN 'AUG' WHEN MONTH_NUM = 9 THEN 'SEP' WHEN MONTH_NUM = 10 THEN 'OCT'
                                                              WHEN MONTH_NUM = 11 THEN 'NOV' WHEN MONTH_NUM = 12 THEN 'DEC' END AS MONTH, 
                                                              COUNT(SUCCESSFULVERIFICATION) AS SUCCESSFULVERIFICATION, COUNT(PENDINGVERIFICATION) AS PENDINGVERIFICATION, COUNT(FAILEDVERIFICATION) AS FAILEDVERIFICATION
                                                              FROM(SELECT EXTRACT(MONTH FROM PAYMENTDATE) MONTH_NUM, CASE WHEN NIMC_STATUS = 1 THEN 1 END AS SUCCESSFULVERIFICATION,
                                                              CASE WHEN NIMC_STATUS = 2 THEN 1 END AS PENDINGVERIFICATION, CASE WHEN NIMC_STATUS = 0 THEN 1 END AS FAILEDVERIFICATION FROM PAYMENT_REF_TABLE
                                                              WHERE EXTRACT(Year FROM PAYMENTDATE)  = :YEAR) A GROUP BY MONTH_NUM ORDER BY MONTH_NUM";
                        var @monthVerificationStat = conn.Query<monthVerificationStat>(monthVerificationStat_sql, new
                        {
                            YEAR = DateTime.Now.Year.ToString()
                        });
                        await unitOfWork.CompleteAsync();
                        return new idMSDashboard_Dto
                        {
                            monthVerificationStat = monthVerificationStat
                        };


                    }
                }
            }
        }
        catch (Exception ex)
        {
            Logger.Error("An error occured in GetMonthlyVerStatCountAsync Type of error : " + ex.GetType() + ". Error message: " + ex.Message + "Exception data : " + ex.Data + "Exception numerical code : " + ex.HResult + "TargetSite : " + ex.TargetSite + "Exception source " + ex.Source);
            return null;
        }
    }

Answer 1

in this code line:

var data = GetMonthlyVerStatCountAsysnc();

You are overwriting the exiting data that it's returned from the server:

success: function (data) {

So the data that your using is not what is returned from the server and that must be the issue that you are facing.