0

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

6
  • Can you confirm you are getting data back from the ajax call? Jun 21, 2019 at 15:41
  • Nothing is being shown inside the corresponding div tag Jun 22, 2019 at 19:11
  • You need to break up the problem to determine if it is on the client or server side. Based on what I am seeing in your javascript you are calling a post method, when it looks like you meant to call a get method. Your controller action does not have the HttpPost decorator on it. Plus you have an empty object in your ajax call. Try this: $.ajax({ type: "Get", url: "MyProfile.aspx/GetChartData", Jun 22, 2019 at 23:42
  • this doesn't affect anything either Jun 24, 2019 at 8:54
  • Run your program in debug and set a break point in the GetChartData method. Does the break point get hit? Jun 24, 2019 at 13:07

1 Answer 1

-1

try modify GetChartData() to static

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.