谷歌折线图日期格式

Question

I'd like to draw google line chart with trending however type mismatch occurred because of date format.

The below is my code.gs which to return the date value to string from spreadsheet in the first column.

I'd tried to put new Date() in JS to draw the line chart with trending however i don't know how to put this date value in datatable. In the JS, the columns can be dynamically added which it works. But i could not solve the date problem so please help.

Code.gs

function getSpreadsheetData() {
  var ssID = "1994YM4uwB1mQORl-HLNk6o10-0ADLNQPgUxKGW6iW_8",
      data = SpreadsheetApp.openById(ssID).getSheets()[0].getDataRange().getValues();
  for(var i=1; i<data.length; i++){
      var date = new Date(data[i][0]); 
      data[i][0] = Utilities.formatDate(date, "GMT+9", "M/dd"); 
     } 
 return data;
}

JS

      google.charts.load('current', {'packages':['corechart','controls']}); 
      google.charts.setOnLoadCallback(getSpreadsheetData);

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

      function drawChart(rows) {
        var data = google.visualization.arrayToDataTable(rows, false);

        var columnsTable = new google.visualization.DataTable();
        columnsTable.addColumn('number', 'colIndex');  // numbrer to date then error
        columnsTable.addColumn('string', 'colLabel');

        var initState= {selectedValues: []}
        for (var i = 1; i < data.getNumberOfColumns(); i++) {
            columnsTable.addRow([i, data.getColumnLabel(i)]);
        }

          var chart = new google.visualization.ChartWrapper({
              chartType: 'LineChart',
              containerId: 'chart_div',
              dataTable: data,
              options: {
                 explorer: { axis: 'horizontal' },
                 pointSize: 3,
                 vAxis : { format: '#.#',
                       viewWindow:{
                            max:0.6,
                            min:0
                        },
                      },
                 hAxis: {format: 'M/dd'},                  
                 legend: 'none', 
                 chartArea: {width: '90%'},
                 crosshair: { trigger: 'both', orientation: 'both' },
                 trendlines: {
                   0: {
                     type: 'polynomial',
                     lineWidth: 5,
                     color: 'orange',
                     labelInLegend: 'Trend',
                     degree: 5,
                     visibleInLegend: true,
                   },
               }
              }
          });

          var columnFilter = new google.visualization.ControlWrapper({
              controlType: 'CategoryFilter',
              containerId: 'colFilter_div',
              dataTable: columnsTable,
              options: {
                  filterColumnLabel: 'colLabel',
                  filterColumnIndex: 1,
                  useFormattedValue: true,
                  ui: {  
                      allowTyping: false,
                      allowMultiple: false,     // when true then filters stacked
                      caption : 'Choose your values',
                      allowNone: true,
                      selectedValuesLayout: 'belowStacked'
                  }
              },
              state: initState
          });

          function setChartView () {
              var state = columnFilter.getState();
              var row;
              var view = {
                  columns: [0]
              };
              for (var i = 0; i < state.selectedValues.length; i++) {
                  row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
                  view.columns.push(columnsTable.getValue(row, 0));
              }
              // sort the indices into their original order
              view.columns.sort(function (a, b) {
                  return (a - b);
              });
              if (state.selectedValues.length > 0) {
                chart.setView(view);
              } else {
                chart.setView(null);
              }
              chart.draw();
          }
          google.visualization.events.addListener(columnFilter, 'statechange', setChartView);

          setChartView();
          columnFilter.draw();

      }

Answer 1

you could use a data view, to convert the date string to an actual date.

here, create the data table as normal.
then create the data view, using a calculated column for the date column.
assuming the first data table column is the date string

function drawChart(rows) {
  // create data table
  var data = google.visualization.arrayToDataTable(rows, false);

  // create data view
  data = new google.visualization.DataView(data);

  // create view columns with calculated column
  var viewColumns = [{
    calc: function (dt, row) {
      return new Date(dt.getValue(row, 0));
    },
    label: data.getColumnLabel(0),
    type: 'date'
  }];

  // add remaining columns
  for (var = 1; i < data.getNumberOfColumns(); i++) {
    viewColumns.push(i);
  }

  // set view columns
  data.setColumns(viewColumns);

  ...