Google Visualization Tables No Longer Loading

[Tianya Coachman]

I have multiple tables on one page that were loading without any problems and now they have disappeared and I can't figure out why.

Each table is being called with a query. The idea is that each table will be a dashboard of it's own with multiple controls using the data that I have queried. Tables 2 and 3 will eventually be built up to look like Table 1. I have buttons that redraw tables on click (example: like hiding and unhiding columns or refreshing) which is why the div names are shared. Am I doing too much?

Background: Not sure if this is helpful, but I'm creating almost a case management dashboard where we add "records" to a sheet a google form. Currently I have it in one master sheet that I filter out into different tabs. This has caused many issues so I wanted to push it into a web app as a table for each category. There they can touch the table without disrupting the formulas. I'm very new to this so any advice or recommendations would be appreciated. I'm sure there's an easier way to achieve this than what I have coded.

google.load("visualization", '1', {packages:['table','controls'], callback: drawTable});
google.setOnLoadCallback(drawTable);

   function drawTable() {
    var queryNew = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1bSBHImAWvtB5lI7-tU7HKYfDBXi0Rzoj3bNXhhXJ63U/gviz/tq?gid=0');
    queryNew.setQuery('where D = "New Hire"'); 
    queryNew.send(handleQueryResponse1);

    var queryTerms = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1bSBHImAWvtB5lI7-tU7HKYfDBXi0Rzoj3bNXhhXJ63U/gviz/tq?gid=0');
    queryTerms.setQuery('where D = "Termination"'); 
    queryTerms.send(handleQueryResponse2);

    var queryTrans = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1bSBHImAWvtB5lI7-tU7HKYfDBXi0Rzoj3bNXhhXJ63U/gviz/tq?gid=1145683023'); 
    queryTrans.send(handleQueryResponse3);

    }

Table 1

function handleQueryResponse1(response) {

    var data = response.getDataTable();

    var cssClassNames = {
      'headerRow': '',
      'tableRow': '',
      'oddTableRow': '',
      'selectedTableRow': '',
      'hoverTableRow': '',
      'headerCell': '',
      'tableCell': '',
      'rowNumberCell': ''};

     var dashboard1 = new google.visualization.Dashboard(
            document.getElementById('dashboardnew_div'));

     // Table Views
     var table1 = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'newhire_div',
        options: {
            showRowNumber: false,
            allowHtml: true, 
            cssClassNames: cssClassNames,
            page: 'enable', 
            pageSize: 25,
            width: '100%'
        },
       view: {
        columns: [12, 1, 4, 3, 2, 5, 6, 7, 8, 9, 10, 11, 13]
       }
      });

      var table2 = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'newhire_div',
        options: {
            showRowNumber: false,
            allowHtml: true, 
            cssClassNames: cssClassNames,
            page: 'enable', 
            pageSize: 25,
            width: '100%'
        },
       view: {
        columns: [12, 1, 4, 3, 2, 5, 6, 7, 8, 9, 10, 11, 13, 14]
       }
      });


      // Formatters
      var salary = new google.visualization.NumberFormat({prefix: '$'});
       salary.format(data, 10); // Apply formatter to second column

      // var className = 'google-visualization-table-table';
        // $('.'+className).removeClass(className);


      // Controls
      var stringFilter1 = new google.visualization.ControlWrapper({
        controlType: 'StringFilter',
        containerId: 'stringnew_filter_div',
        options: {
            filterColumnIndex: 4,
            matchType: 'any',
            ui: {
                label: 'Search by Employee',
                labelStacking: 'vertical',
                cssClass: 'searchClass'
            }
        }
      });

      var locationFilter1 = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'locationnew_filter_div',
        options: {
            filterColumnIndex: 1,
            ui: {
                label: 'Filter by Location',
                labelStacking: 'vertical',
                cssClass: 'locationClass'
            }
        }
      });


       // Buttons
       var refresh = document.getElementById('b1');
         refresh.onclick = function() {
          drawTable();
        }

       var hide = document.getElementById("b2");
         hide.onclick = function() {
         dashboard1.bind([stringFilter1, locationFilter1], [table2])
         dashboard1.draw(data);
        }

       // Draw Dashboard
       dashboard1.bind([stringFilter1, locationFilter1], [table1])
       dashboard1.draw(data);
}

Tables 2 and 3

    function handleQueryResponse2(response) {
    var data = response.getDataTable();
    var table4 = new google.visualization.Table(document.getElementById('benefits_div'));
        table4.draw(data);
    }

    function handleQueryResponse3(response) {

    var data = response.getDataTable();
    var table4 = new google.visualization.Table(document.getElementById('transfers_div'));
        table4.draw(data);
    }