Google Charts не отображается

Question

Я загружаю свои данные из базы данных MS с помощью вызова AJAX.Когда он возвращается, мои таблицы возвращаются и отображаются на странице.

Когда я смотрю в редакторе разработчика, я вижу, что JS для Google Charts возвращается, но не отображается на экране.

Нужно ли как-то перепечатывать эти данные?Я уже пытался переместить код Google в свой вызов AJAX, но затем я теряю захваченный массив.

Любая помощь приветствуется.

// AJAX call

function reportBuild(date1, date2, dataType){
  date2 = $("#dateRangeA").val();
  date1 = $("#dateRangeB").val();
  dataType = $("#dataType").val();

  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("chartBuild").innerHTML = this.responseText;
    }
  }
  xhttp.open("GET", "test.asp?d1="+date1+"&d2="+date2+"&dataType="+dataType, true);
  xhttp.send();

}

// test.asp page

var testArray = [];

        testArray = [
          <%
          do until DataChartFetch.EOF
            %>
            ['<% Response.Write(DataChartFetch.Fields(dataType&"Name1")) %>',
            <% Response.Write(DataChartFetch.Fields(dataType&"Num1")) %>,
            <% Response.Write(DataChartFetch.Fields(dataType&"Num1")) %>],

            ['<% Response.Write(DataChartFetch.Fields(dataType&"Name2")) %>',
            <% Response.Write(DataChartFetch.Fields(dataType&"Num2")) %>,
            <% Response.Write(DataChartFetch.Fields(dataType&"Num2")) %>],

            ['<% Response.Write(DataChartFetch.Fields(dataType&"Name3")) %>',
            <% Response.Write(DataChartFetch.Fields(dataType&"Num3")) %>,
            <% Response.Write(DataChartFetch.Fields(dataType&"Num3")) %>],

            ['<% Response.Write(DataChartFetch.Fields(dataType&"Name4")) %>',
            <% Response.Write(DataChartFetch.Fields(dataType&"Num4")) %>,
            <% Response.Write(DataChartFetch.Fields(dataType&"Num4")) %>],

            ['<% Response.Write(DataChartFetch.Fields(dataType&"Name5")) %>',
            <% Response.Write(DataChartFetch.Fields(dataType&"Num5")) %>,
            <% Response.Write(DataChartFetch.Fields(dataType&"Num5")) %>],
          <%
          DataChartFetch.MoveNext
            loop
          %>
        ]


google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(barchart_material);
      function barchart_material() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', '');
        data.addColumn('number', 'Title');
        data.addColumn({type: 'number', role: 'annotation'});

        //Response to get dates and ranges
        data.addRows(testArray);

        var options = {
          'chartArea': {'width': '90%', 'height': '85%'},
          'legend': {'position': 'top', alignment: 'start'},
        };
        var chart = new google.charts.Bar(document.getElementById('barchart_material'));
        chart.draw(data, options);
      } //end google display function

Answer 1

Я решил проблему.

Внутри вызова AJAX я разместил функцию Google Charts.

Я использовал

localStorage.setItem("jsonArray", JSON.stringify(testArray));

внутри моей страницы test.asp

и внутри вызова ajax, используется

 jsonArray = JSON.parse(localStorage.getItem("jsonArray"));

для возврата массива и использования его в данных.

окончательный код

function reportBuild(date1, date2, dataType){
  date2 = $("#dateRangeA").val();
  date1 = $("#dateRangeB").val();
  dataType = $("#dataType").val();

  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("chartBuild").innerHTML = this.responseText;
    }
  }
  xhttp.open("GET", "test.asp?d1="+date1+"&d2="+date2+"&dataType="+dataType, true);
  xhttp.send();

jsonArray = JSON.parse(localStorage.getItem("jsonArray"));

google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(barchart_material);
      function barchart_material() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', '');
        data.addColumn('number', 'OSAP');
        data.addColumn({type: 'number', role: 'annotation'});

        //Response to get dates and ranges
        data.addRows(jsonArray);

        var options = {
          'chartArea': {'width': '90%', 'height': '85%'},
          'legend': {'position': 'top', alignment: 'start'},
        };
        var chart = new google.charts.Bar(document.getElementById('barchart_material'));
        chart.draw(data, options);
      } //end google display function


}