Google图表无法显示

Question

I am loading my data from a MS database with an AJAX call. When it returns my tables are returning and displaying on the page.

When i look in the dev editor i can see the JS for the Google Charts is returning, but its not displaying on screen.

Do I need to reprint this data somehow? I've already tried moving the Google code into my AJAX call, but then I lose the array I've captured.

Any help is appreciated.

//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

I solved the issue.

Inside of the AJAX call i placed the Google Charts function.

i used

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

inside my test.asp page

and inside the ajax call, used

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

to return the array and use it in the data.

final code

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


}