Javascript 提取多个 Google 电子表格数据以绘制图表

Question

我正在尝试使用 Google App Script/Javascript 制作一个仪表板，该仪表板基于从 Google 电子表格文件中的多个工作表中提取的数据。下面是入手的功能代码，可以成功绘制出八月份数据的图表。我想要的是将 7 月数据 (Sheet 2) 作为第二个系列附加到图表中。可能吗？

如果我能弄清楚如何存储和访问每个月的数据 table，我想我应该能够使用 .join() 方法合并那些 table。 https://developers.google.com/chart/interactive/docs/reference?hl=en#join

如有任何帮助，请提前致谢！

<html>
  <head>
    <title>
      Test
    </title>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {'packages': ['table', 'controls', 'corechart']});
      google.setOnLoadCallback(initialize);

      function initialize() {

              var urlMonth = 'https://docs.google.com/spreadsheets/d/1_mSbT87MVWOiX2cfKX_x3dgTnToY5ulCWeGGCVn13iQ/gviz/tq?sheet=Sheet1&tq='   
              
              var queryStringMonthly = encodeURIComponent("SELECT B, sum(C), sum(D), sum(E), sum(F), sum(G), sum(H) GROUP BY B LABEL B 'Issue' ");

              var queryMonthCurrent = new google.visualization.Query(urlMonth+ queryStringMonthly);
               queryMonthCurrent.send(megaData); 

      }

     function megaData(monthData) {
        var monthData_table = monthData.getDataTable(firstRowIsHeader = true);

        var monthData_tablePivot = new google.visualization.DataTable();
         monthData_tablePivot.addColumn('string', 'Rep');
         monthData_tablePivot.addColumn('number', 'August');
         monthData_tablePivot.addColumn({type: 'string', label: 'Issue', role: 'annotation'}); 

        var  newRows = []; //

         //iterate through each row
         for (i = 0; i < monthData_table.getNumberOfRows(); i ++) {
          var issue = monthData_table.getValue(i, 0);
          //iterate through each column
          for (j = 1; j < monthData_table.getNumberOfColumns(); j ++ ){
            var newRow = []; // use an array to park [RepName1, tickets#, Issue1]
            rep = monthData_table.getColumnLabel(j);
            newRow.push(rep);
            newRow.push(monthData_table.getValue(i, j));
            newRow.push(issue);
            newRows.push(newRow); //push each newRow to newRows
          }
         }

        monthData_tablePivot.addRows( newRows);

        // Create a dashboard.
        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div4'));

       // Create filter
        var issueFilter = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'filter_div4',
          'options': {
            'filterColumnLabel': 'Issue', 
            'ui': {
            'allowMultiple': false,
            'allowNone': false, 
            }
          },
          //Set default filter value
          'state': {'selectedValues': [monthData_table.getValue(0 , 1)]} 
        }
        );

        
        //create chart
        var yearChart = new google.visualization.ChartWrapper({
          'chartType': 'ColumnChart',
          'containerId': 'current_year',
          'options': {
              'legend': {'position': 'right'},
              //Set the fontsize of labels so they don't show up crazily
              'annotations': {'textStyle': {'opacity': 0},
                             //use 'line' style so to remove the line pointer
                             'style': 'point',
                             'stemLength': 0
                            },
          }
        });

        // bind charts and controls to dashboard 
        dashboard.bind(issueFilter, yearChart);
        // Draw the dashboard.
        dashboard.draw(monthData_tablePivot);         
      }

    </script>
  </head>

  <body>
    <!--Div that will hold the dashboard-->
    <div id="dashboard_div4">
      <div id="filter_div4"> </div>
      <div id="current_year" style="align: right; width:1100px; height: 300px;">
      </div>
    </div>    

</html>

Answer 1

这里有一个解决方案可以解决我的问题。如果有人有更好的解决方案，如果您能在这里分享，我将不胜感激。基本上你可以在 megaData(monthData) 函数的末尾使用 finished(); 来绕过异步 javascript。因此结构如下所示：

  function initialize() {

    var urlMonth = 'https://docs.google.com/spreadsheets/d/1dTeqpX1If74h5_I3POrYkoktSm7FxV47iSUHshhlmI4/gviz/tq?sheet=Sheet1&tq='
    var queryStringMonthly = encodeURIComponent("SELECT B, sum(C), sum(D), sum(E), sum(F), sum(G), sum(H) GROUP BY B LABEL B 'Issue' ");
    var queryMonthCurrent = new google.visualization.Query(urlMonth+ queryStringMonthly);
     queryMonthCurrent.send(megaData);

    var urlOneMonthPrior = 'https://docs.google.com/spreadsheets/d/1dTeqpX1If74h5_I3POrYkoktSm7FxV47iSUHshhlmI4/gviz/tq?sheet=Sheet2&tq=' 
    var queryStringOneMonthPrior = encodeURIComponent("SELECT B, sum(C), sum(D), sum(E) GROUP BY B LABEL B 'Issue' ");  
    var queryMonthOnePior = new google.visualization.Query(urlMonth+ queryStringOneMonthPrior);
     queryMonthOnePior.send(megaData);

  }

  function megaData(monthData) {
    //...
    //use codes from the question post
    finished();
  }

  function finished() {
    if (dataTables.length != 2) {
    //do nothing if data tables are not fully ready
        return;
    }
    //blahblah do something with all the data tables
   }

Javascript 提取多个 Google 电子表格数据以绘制图表

Javascript to pull multiple Google Spreadsheets data for drawing charts

javascript

google-api

google-visualization

google-apps-script