Creating Table in Google App Script With Date Column

Question

I am currently querying a table from Google sheet which has a Date column. 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. 12/17/2018 16.00

My Data source looks like this:

My Dashboard looks like this:

My Code Looks like this.

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

 <!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'.

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.

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). 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. 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

<!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;
    }

Creating Table in Google App Script With Date Column

Question

1 answers

solution1
0 2019-01-09 19:41:07

Creating Table in Google App Script With Date Column

Question

1 answers

solution1 0 2019-01-09 19:41:07

solution1
0 2019-01-09 19:41:07