グーグルアプリの視覚化で可能ですか？ズームオプション付きのタイムライン

Timonek 2021-01-20 21:50.

グーグルアプリでこのようなタイムラインを作ることは可能ですか？

標準のウェブアプリを作成しましたが、タイムライン全体のデータが多すぎて一部のブロックが見づらいという問題があります。ズームオプションを考えていましたが、どうすればよいかわかりません。

これまでの私のコードは次のとおりです。

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>

私のタイムラインは次のようになります。

javascript google-apps-script google-sheets charts google-visualization

1 answers

Timonek 2021-01-22 16: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>

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

MORE COOL STUFF

メーガン・マークルは、自然な髪のスタイリングをめぐってマライア・キャリーと結ばれました

メーガン・マークルとマライア・キャリーが自然な髪の上でどのように結合したかについて、メーガンの「アーキタイプ」ポッドキャストのエピソードで学びましょう.

2022-12-23.

ハリー王子は家族との関係を修復できるという「希望を持っている」：「彼は父親と兄弟を愛している」

ハリー王子が家族、特にチャールズ王とウィリアム王子との関係について望んでいると主張したある情報源を発見してください。

2022-12-17.

ワイノナ・ジャッドは、パニックに陥った休暇の瞬間に、彼女がジャッド家の家長であることを認識しました

ワイノナ・ジャッドが、母親のナオミ・ジャッドが亡くなってから初めての感謝祭のお祝いを主催しているときに、彼女が今では家長であることをどのように認識したかを学びましょう.

2022-12-09.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナ島のジェイコブズラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

2022-09-08.

バレリー・ジャレットは類人猿と呼ばれ、ロザンヌ・バーは仕事を失いましたが、ここでの本当の犠牲者はトランプです

ロザンヌ・バーが自分自身でいるだけでABCショーの再起動を破壊するのに、60日強かかりました。ロザンヌは、ツイッターで帽子をかぶったトロールであり、白人至上主義者に傾倒し、陰謀論者を愛する「Make AmericaGreatAmerica」であり続けています。

2023-03-31 17:10.

「警察官」を使用して、ビジネス会議をトピックに保つ

仕事の打ち合わせをしていると、招待される人が多ければ多いほど、全体が狂いやすくなります。そのため、すべての打ち合わせには、話題を維持するための打ち合わせ「警察」が必要です。全員が集まって話し合う間今週終了する大きなプロジェクトについては、必然的に誰かが「私たちはみんなここにいるので…」と決めるでしょう。数週間後に起こっている別のプロジェクトを立ち上げるのは良い考えです。コーヒーメーカーはどうしたの？壊れていますか？そして、ジョンの新しい子犬を見たことがありますか？会話を中断して、10分間写真を見てみましょう。

2023-03-31 17:09.

ドレイク、ネコケース、そしてカニエの大洪水：6月の38の最も期待されたアルバム

5月のリリースの特に強力なラインナップに続いて、6月はNeko Case、Nas、Lykke Li、Gang Gang Danceから待望のリターンをもたらし、Drake、Oneohtrix Point Never、Zeal＆Ardourからの期待された努力とSnailMailからの有望なデビューをもたらしますとジュリアーナドーティ。ヒップホップでは、間違いなくカニエの月であり、ラッパープロデューサーは毎週少なくとも1回のリリースに関与しています。

2023-03-31 17:08.