Google visualization 如何查询多个电子表格并在同一页上制作图表_Google Visualization_Google Spreadsheet Api

Google visualization 如何查询多个电子表格并在同一页上制作图表

google-visualization

Google visualization 如何查询多个电子表格并在同一页上制作图表,google-visualization,google-spreadsheet-api,Google Visualization,Google Spreadsheet Api,我正在尝试开发一个小的web应用程序，它可以查询多个google电子表格，并在同一页面上绘制图表。我可以像这样查询单个电子表格和图表匹配数据，它工作正常 <html> <head> <title> Test </title> <script src="http://www.google.com/jsapi"></script> <script src="http://code.jquery.com/jquer

我正在尝试开发一个小的web应用程序，它可以查询多个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>


试验
load（'visualization'，'1'，{'packages'：['table'，'controls'，'corechart']}）；
setOnLoadCallback（初始化）；
函数初始化（）{
var urlmount=https://docs.google.com/spreadsheets/d/1y5MgFR67kn1-GHbmeIi6wuC5hmP10x4O8vAs5RWD8Sw/edit#gid=0'   
var queryStringMonthly=encodeURIComponent（“通过标签A“基因”选择A、B、C、D、E、F、G、H、I组）；
var queryMonthCurrent=new google.visualization.Query（urlmount+
查询（每月）；
queryMonthCurrent.send（兆数据）；
}
功能megaData（monthData）{
var monthData_table=monthData.getDataTable（firstrowshader=true）；
var monthData_tablePivot=新的google.visualization.DataTable（）；
monthData_tablePivot.addColumn（'string'）；
monthData_tablePivot.addColumn（'number'）；
monthData_tablePivot.addColumn（{type:'string'，label:'Gene'，role:'annotation'}）；
var newRows=[]//
//遍历每一行
对于（i=0；i


非常接近我的需要，但我不知道如何查询多个电子表格。我的另一个电子表格是这样的
向我们展示您的修改尝试和您自己尝试的具体问题。感谢您的评论。实际上我修改了答案of@whiteHat[链接]根据我的需要。唯一的问题是，我不知道如何将它连接到数据表，我只想在匹配字符串后使用图表。但代码中没有任何我认为是试图解决您提到的特定问题的内容。向我们展示代码中尝试和问题的位置。它似乎更像是一个javascript问题，而不是google API问题，因为您已经可以从电子表格中查询，但可能您正在研究重构代码，使电子表格URL不是硬编码的，而是一个函数参数，并将查询代码与显示代码分离，以便您可以查询多个数据源，然后一次全部显示？我试图这样进行查询，但不起作用。谢谢