Возможно ли это с визуализацией приложения google? Временная шкала с возможностью масштабирования

Jan 20 2021

Можно ли сделать график , как этот с Google приложений?

Я создал стандартное веб-приложение, но есть проблема в том, что для всей временной шкалы слишком много данных, поэтому трудно увидеть некоторые блоки .... Я думал о возможности масштабирования, но понятия не имел, как это сделать.

Вот мой код:

массив из функции timelineData выглядит так: [["00G080","NA14599","2021-01-08T21:25:00.000Z","2021-01-12T14:22:00.000Z"],["00G080","NA14599","2021-01-12T14:22:00.000Z","2021-01-12T15:19:00.000Z"]...]

gs:

function doGet() {
 

  return HtmlService.createTemplateFromFile('index').evaluate();
     
}


function timelineData(){
  const ss = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/1KzaKe9ShAZZAlK3CQC-UmrKzZXghNKAAx_pDHFX3YLI/edit#gid=0');
  const srcSheet = ss.getSheetByName("Array");
  const srcValues = srcSheet.getRange(2, 1, srcSheet.getLastRow()-1, 4).getDisplayValues()
  const newAr = srcValues.map(r=>[r[0],r[1], new Date(r[2]), new Date(r[3])]);
  
  const arr = JSON.stringify(newAr);
    
  return arr
}

html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  
 <h1>機械別工程残</h1>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(getData);
  
  function getData(){
  
  google.script.run.withSuccessHandler(drawChart).timelineData();
  
  }
  
  function drawChart(dane) {
  //console.log(dane);
  const obj = JSON.parse(dane);
   const newAr = obj.map(r=>[r[0],r[1], new Date(r[2]), new Date(r[3])]);
    var container = document.getElementById('chart');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: '機械' });
    dataTable.addColumn({ type: 'string', id: 'オーダー' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows(newAr);
    
    var options = {
     colors: ['#cbb69d', '#603913', '#c69c6e', '#e743f0', '#f04343', '#f0e443', '#b9f043', '#4ff043', '#43f0d9', '#435df0'],
     
     // timeline: { colorByRowLabel: true}
  };
    chart.draw(dataTable, options);
  }
</script>

<div id="chart" style="height: 600px;"></div>
    
  </body>
</html>

Моя временная шкала выглядит так:

Ответы

1 Timonek Jan 22 2021 at 09:35

Благодаря совету WhiteHat мне удалось поставить рабочий код. Надеюсь, кому-то это пригодится

code.gs

function doGet() {
  var template = HtmlService.createTemplateFromFile('index3');
  return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}


function timelineData(){
  const ss = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/1KzaKe9ShAZZAlK3CQC-UmrKzZXghNKAAx_pDHFX3YLI/edit#gid=0');
  const srcSheet = ss.getSheetByName("Array");
  const srcValues = srcSheet.getRange(2, 1, srcSheet.getLastRow()-1, 4).getDisplayValues()
  const newAr = srcValues.map(r=>[r[0],r[1], new Date(r[2]), new Date(r[3])]);
  
  const arr = JSON.stringify(newAr);
    
  return arr
}

html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  
 <h1>機械別工程残</h1>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline","controls"],'language': 'ja'});
  google.charts.setOnLoadCallback(getData);
  
  function getData(){
  
  google.script.run.withSuccessHandler(drawChart).timelineData();
  
  }
  
  function drawChart(dane) {
  //console.log(dane);
  const obj = JSON.parse(dane);
   const newAr = obj.map(r=>[r[0],r[1], new Date(r[2]), new Date(r[3])]);
    var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard')
  );

  var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control',
    options: {
      filterColumnIndex: 3,
      ui: {
        minRangeSize: (60 * 60 * 1000),
        chartType: 'TimeLine',
        chartOptions: {
          width: 900,
          height: 70,
          chartArea: {
            width: '100%',
            height: '80%'
          },
          hAxis: {
            baselineColor: 'none'
          }
        },
        chartView: {
          columns: [2, 3]
        }
      }
    }
  });

  google.visualization.events.addListener(control, 'error', function (error) {
    console.log('error: ' + error.id + ' - ' + error.message);
    google.visualization.errors.removeError(error.id);
  });

  var chart = new google.visualization.ChartWrapper({
    chartType: 'Timeline',
    containerId: 'chart',
    options: {
      width: 985,
      height: 600,
      chartArea: {
        width: '100%',
        height: '80%'
      },
      tooltip: {
        isHtml: true
      }
    },
    view: {
      columns: [0, 1, 2, 3]
    }
  });

  var data = new google.visualization.DataTable();
  data.addColumn({ type: 'string', id: 'Student' });
  data.addColumn({ type: 'string', id: 'Event Type' });
  data.addColumn({ type: 'datetime', id: 'Start' });
  data.addColumn({ type: 'datetime', id: 'End' });
  data.addRows(newAr);

  dashboard.bind(control, chart);
  dashboard.draw(data);
}
    
  
</script>


  <div id="dashboard">
  <div id="chart" style="width: 1050px; left:30px" ></div>
  <div>範囲設定</div>
  <div id="control" style="width: 1050px; left:30px"></div>
  </div>
    
  </body>
</html>