Question

我正在尝试开发一个小型网络应用，可以查询多个Google电子表格并在同一页面上制作图表。我可以查询单个电子表格并绘制匹配数据，并且工作正常。

<html>
  <head>
<title>
  Test
</title>

<script src="http://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

<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/1y5MgFR67kn1-GHbmeIi6wuC5hmP10x4O8vAs5RWD8Sw/edit#gid=0'   

var queryStringMonthly = encodeURIComponent("select A, B, C, D, E, F, G, H, I GROUP BY A LABEL A 'Gene' ");
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');
     monthData_tablePivot.addColumn('number');
     monthData_tablePivot.addColumn({type: 'string', label: 'Gene', 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 = []; 
        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': 'StringFilter',
      'containerId': 'filter_div4',
      'options': {
        'filterColumnLabel': 'Gene', 
        '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': 'none',
      'width': 1100,
      'height': 500,
hAxis: {

    textStyle: {
    color: 'black',    // any HTML string color ('red', '#cc00cc')
    fontName: 'Times New Roman', // i.e. 'Times New Roman'
    fontSize: 12, // 12, 18 whatever you want (don't specify px)
    bold: true,    // true or false
    italic: false   // true of false

   },
       'title': 'Gene', titleTextStyle:{color:'black',fontSize: 16,bold: 
true,italic: false}
},

vAxis: {title: 'Expression', titleTextStyle:{color:'black',fontSize: 
16,bold: true,italic: false},
    textStyle: {
    color: 'black',    // any HTML string color ('red', '#cc00cc')
    fontName: 'Times New Roman', // i.e. 'Times New Roman'
    fontSize: 12, // 12, 18 whatever you want (don't specify px)
    bold: true,    // true or false
    italic: false   // true of false
}
},

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



<style>
.SearchBar input {
 height: 30px;
 width: 400px;
}

</style>
</head>

  <body>
 <!--Div that will hold the dashboard-->
  <center>  
<h2>Seach gene expression</h2>
<div id="dashboard_div4" class="SearchBar" placeholder="Search">
  <div id="filter_div4" > </div></center>
  <div id="current_year" style="width:1100px; height: 300px;">
  </div>
    </div>   

</html>

This repository 非常接近我的需求，但我不知道如何查询多个电子表格。我的另一个电子表格看起来像这样 https://docs.google.com/spreadsheets/d/1vmPmaL78N-Ywz7s1y_VRSvQAZxjacN4mo7uKKrWrwzE/edit#gid=0

如何查询多个电子表格并在同一页面上创建图表

0 个答案: