AJAX method call undefined - GoogleCharts not loading in ASP.NET C#

Question

I am trying to generate an interactive google chart from a SQL database but the chart is not loading

I am a web method puling in information from a database that i was to display in a chart. I am trying to call this method using javascript / jquery but there seems to be a problem with my AJAX call. I have tried numerous different methods can cant seem to put my finger on the exact problem

MyProfile.aspx

 <script type="text/javascript" 
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
</script>
 <script type="text/javascript" src="https://www.google.com/jsapi"> 
</script>
 <script type="text/javascript" 
 src="https://www.gstatic.com/charts/loader.js"></script>
 <script type="text/javascript">

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

        $.ajax({
            type: "POST",
            url: "MyProfile.aspx/GetChartData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = google.visualization.arrayToDataTable(r.d);
                var chart = new 
 google.visualization.LineChart($("myChart")[0]);
                chart.draw(data, options);
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });

    window.onload = function drawChart() {
            var options = {
                title: '10 Most Recent Autoregulation Scores',
                width: 600,
                height: 400,
                bar: { groupWidth: "95%" },
                legend: { position: "none" },
                isStacked: true
            };
    }
</script>

<script src="https://kit.fontawesome.com/3c3e2594b3.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script 


 src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/
popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js
/bootstrap.min.js"></script>

 .
 .
 .
 .

<body>
<form id="form1" runat="server">

 <div>
  <div id="myChart" style="width:500px; height:400px" /> 
 </div>

 MyProfile.aspx.cs

 [WebMethod]
    public List<object> GetChartData()
    {

        //Query to database
        string query = "Select TOP 10 SessionID, AutoreguationScore, 
 UserID, ScoreID from AutoregulationScores WHERE UserID=
 '" + Session["UID"] + "' ORDER BY ScoreID DESC";

        string constr = 

  ConfigurationManager.ConnectionStrings
 ["TrainingLoadManagerConnectionString"].ConnectionString;

        List<object> chartData = new List<object>();
        chartData.Add(new object[]
        {
                "AutoregulationScore", "SessionID"
        });

        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand(query))
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                con.Open();

                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        chartData.Add(new object[]
                        {
                            sdr["AutoregulationScore"],
                            sdr["SessionID"]
                        });
                    }
                }
                con.Close();
                return chartData;
            }
        }

I should be seeing an interactive chart being displayed but this is not the case

Answer 1

尝试将GetChartData（）修改为静态

AJAX method call undefined - GoogleCharts not loading in ASP.NET C#

Question

1 answers

solution1
-1 2019-06-22 09:34:31

AJAX method call undefined - GoogleCharts not loading in ASP.NET C#

Question

1 answers

solution1 -1 2019-06-22 09:34:31

solution1
-1 2019-06-22 09:34:31