在带有日期列的Google App脚本中创建表

Question

I am currently querying a table from Google sheet which has a Date column. 我目前正在从Google表格中查询具有Date列的表格。 The date column in my dashboard has time info included, which I want to remove; 我的信息中心中的日期列包含了要删除的时间信息； also the starting date in my code is 12/18/2018 but my dashboard starts with one day earlier. 我的代码中的开始日期也是2018年12月18日，但是我的信息中心是从一天前开始的。 12/17/2018 16.00 2018年12月17日16.00

My Data source looks like this: 我的数据源如下所示：

My Dashboard looks like this: 我的仪表盘如下所示：

My Code Looks like this. 我的代码如下所示。

Code.gs: Code.gs：

 function doGet(e) { return HtmlService .createTemplateFromFile("Line Chart multiple Table") .evaluate() .setTitle("Google Spreadsheet Chart") .setSandboxMode(HtmlService.SandboxMode.IFRAME); } function getSpreadsheetData() { var ssID = "1jxWPxxmLHP-eUcVyKAdf5pSMW6_KtBtxZO7s15eAUag"; var sheet = SpreadsheetApp.openById(ssID).getSheets()[1]; var data1 = sheet.getRange('A2:F9').getValues(); var data2 = sheet.getRange('A2:F9').getValues(); var rows = {data1: data1, data2: data2}; var r = JSON.stringify(rows); return r; }

Line Chart multiple Table.html 折线图多个Table.html

 <!DOCTYPE html> <html> <head> <script src="https://www.gstatic.com/charts/loader.js"></script> </head> <body> <div id="linechartweekly"></div> <div id="table2"></div> <div class = "block" id="message" style="color:red;"> <script> google.charts.load('current', {'packages':['table']}); google.charts.load('current', {packages: ['corechart', 'line']}); google.charts.setOnLoadCallback(getSpreadsheetData); function display_msg(msg) { console.log("display_msg():"+msg); document.getElementById("message").style.display = "block"; // Style of display var div = document.getElementById('message'); div.innerHTML = msg; } function getSpreadsheetData() { google.script.run.withSuccessHandler(drawChart).getSpreadsheetData(); } function drawChart(r) { // Parse back to an object var rows = JSON.parse(r); console.log("rows:"+rows); var data1 = google.visualization.arrayToDataTable(rows.data1, false); var data2 = google.visualization.arrayToDataTable(rows.data2, false); var options1 = { title: 'SPC Chart weekly', legend: ['USL', 'UCL', 'Data', 'LCL', 'LSL'], colors: ['Red', 'Orange', 'blue', 'Orange', 'Red'], pointSize: 4, }; var chart1 = new google.visualization.LineChart(document.getElementById("linechartweekly")); chart1.draw(data1, options1); var table2 = new google.visualization.Table(document.getElementById("table2")); table2.draw(data2, {showRowNumber: false, width: '50%', height: '100%'}); } function failure_callback(error) { display_msg("ERROR: " + error.message); console.log('failure_callback() entered. WTF'+error.message); } </script> </body> </html>

May I know how to change my date to the right format removing the time and also ensure the correct starting date 我可以知道如何将日期更改为正确的格式，以消除时间并确保正确的开始日期

Any help is much appreciated. 任何帮助深表感谢。

Answer 1

The actual problem has me stumped, but I do have a workaround; 实际的问题使我感到困惑，但是我确实有一种解决方法。 see modified code example below, with some additional error handling. 请参阅下面的修改后的代码示例，以及一些其他错误处理。

I've extensively tested the server-side function, and from its perspective there is absolutely no difference in the row object that is created whether the range starts at column 'I' or 'J'. 我已经对服务器端函数进行了广泛的测试，从它的角度来看，无论范围是从“ I”还是“ J”开始，创建的row对象都完全没有区别。

The problem manifests itself in the client-side success handler which, when column 'I' is included is essentially passed a null argument, note the whole object, not just the row.data1 part, is null. 该问题在客户端成功处理程序中体现出来，当包含“ I”列时，该处理程序本质上传递了一个null参数，请注意整个对象（而不仅仅是row.data1部分）为null。

The row object that is being passed from the server to the client is quite complicated (an object with 3 key value pairs, where the values are fairly long arrays). 从服务器传递到客户端的行对象非常复杂（一个具有3个键值对的对象，其中值是相当长的数组）。 I can't see anything in the GAS documentation that disallows this: Legal parameters and return values are JavaScript primitives like a Number, Boolean, String, or null, as well as JavaScript objects and arrays that are composed of primitives, objects and arrays. 我在GAS文档中看不到任何不允许这样做的内容： Legal parameters and return values are JavaScript primitives like a Number, Boolean, String, or null, as well as JavaScript objects and arrays that are composed of primitives, objects and arrays. So this could be a bug? 所以这可能是一个错误？

The workaround, illustrated in the code examples below is to stringify the object in the server-side function, and then parsing it back to an object in the client. 下面的代码示例中说明的解决方法是将服务器端函数中的对象字符串化，然后将其解析回客户端中的对象。

HTML HTML

<!DOCTYPE html>
<html>

<head>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>

  <div id="table1"></div>
  <div id="linechartweekly"></div>
  <div id="table2"></div>

  <div class = "block" id="message" style="color:red;">

  <script>
    google.charts.load('current', {'packages':['table']});
    google.charts.load('current', {packages: ['corechart', 'line']});
    google.charts.setOnLoadCallback(getSpreadsheetData);

    function display_msg(msg) {
          console.log("display_msg():"+msg);
          document.getElementById("message").style.display = "block"; // Style of display
          var div = document.getElementById('message');
          div.innerHTML = msg;
    }

    function getSpreadsheetData() {
      google.script.run.withFailureHandler(failure_callback).withSuccessHandler(drawChart).getSpreadsheetData();
    }

    function drawChart(r) {
      // Parse back to an object 
      var rows = JSON.parse(r); 

      console.log("rows:"+rows);  
      var data1 = google.visualization.arrayToDataTable(rows.data1, false);    
      var data2 = google.visualization.arrayToDataTable(rows.data2, false);     
      var data3 = google.visualization.arrayToDataTable(rows.data3, false);

      var options1 = {
        title: 'SPC Chart weekly',
        legend: ['USL', 'UCL', 'Data', 'LCL', 'LSL'],
        colors: ['Red', 'Orange', 'blue', 'Orange', 'Red'],
        pointSize: 4,
      };

      var table1 = new google.visualization.Table(document.getElementById("table1"));
      table1.draw(data1, {showRowNumber: false, width: '50%', height: '100%'});

      var chart1 = new google.visualization.LineChart(document.getElementById("linechartweekly"));
      chart1.draw(data2, options1);

      var table2 = new google.visualization.Table(document.getElementById("table2"));
      table2.draw(data3, {showRowNumber: false, width: '50%', height: '100%'});

    }

    function failure_callback(error) {         
         display_msg("ERROR: " + error.message);
         console.log('failure_callback() entered. WTF'+error.message);
    }

  </script>
</body>

</html>

Code 码

function doGet(e) {

      return HtmlService
      .createTemplateFromFile("Line Chart multiple Table")
      .evaluate()
      .setTitle("Google Spreadsheet Chart")
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);

    }


    function getSpreadsheetData() {

      var ssID  = "1jxWPxxmLHP-eUcVyKAdf5pSMW6_KtBtxZO7s15eAUag";
      var sheet = SpreadsheetApp.openById(ssID).getSheets()[0];
      //var firstrow = 6; //11th row
      //var range = sheet.getRange(firstrow, 1, sheet.getLastRow() - firstrow + 1, 6);
      //var data1 = range.getValues();

      var d1 = sheet.getRange('A1:B5').getValues();
      var d2 = sheet.getRange('I2:O4').getValues();
      var d3 = sheet.getRange('I2:O4').getValues();
      var rows   = {data1: d1, data2: d2, data3: d3};
      // Stringify the object
      var r = JSON.stringify(rows);
      return r;
    }

在带有日期列的Google App脚本中创建表

问题描述

1 个解决方案

解决方案1
0 2019-01-09 19:41:07

在带有日期列的Google App脚本中创建表

问题描述

1 个解决方案

解决方案1 0 2019-01-09 19:41:07

解决方案1
0 2019-01-09 19:41:07