Javascript Ajax Get Data Undefined From C#

I want to build a web page with google charts. I tried to build it with c# as a web form and get data from local database to javascript. But that's not working and i'm having data

Solution 1:

first, recommend not usingjsapi to load the library, according to release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader (loader.js) from now on.

<script src="https://www.gstatic.com/charts/loader.js"></script>

this will only change the load statement...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

as seen above, the callback can be set in the load statement

the callback will let you know when google charts has loaded, along with the dom

thus no need for setOnLoadCallback or $(document).ready

as for the rest, recommend the following setup...

<asp:ContentID="Content1"ContentPlaceHolderID="MainContent"runat="server"><!-- Javascript Job--><scriptsrc="Scripts/jquery-1.10.2.js"></script><scriptsrc="https://www.gstatic.com/charts/loader.js"></script><script>
    google.charts.load('current', {
      callback: drawChart,
      packages: ['corechart']
    });

    functiondrawChart() {
      $.ajax({
        url: "GoogleChart.aspx/GetChartData",
        data: "",
        dataType: "json",
        type: "post",
        contentType: "application/json; charset=utf-8",
      }).done(function (data) {
        var data = google.visualization.arrayToDataTable(data.d);
        var options = {
          title: "Company Revenue",
          pointSize: 5
        };
        var pieChart = new google.visualization.PieChart(document.getElementById('chart_div'));
        pieChart.draw(data, options);
      }).fail(function (jqXHR, textStatus, errorThrown) {
        console.log("Error: " + errorThrown);
      });
    }
</script><divid="chart"style="width: 500px; height: 400px"></div>