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

1
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>

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

1 answers

1
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>

Related questions

MORE COOL STUFF

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

科学者は髪が灰色になる理由の別の可能な説明を見つけます

科学者は髪が灰色になる理由の別の可能な説明を見つけます

このネズミのグリズリした毛皮は、いつか人々が白斑と呼ばれるまれな状態を発症する理由を説明するのに役立つかもしれません。科学者たちは、白斑と呼ばれるまれな汚名を着せられた状態である無着色の皮膚の斑点に悩まされる人もいれば、髪が灰色になる理由を説明できる新たに発見されたメカニズムに遭遇したと考えています。

新しい若いテロリストコレクションの内部のこの外観で、神秘的で残忍な陰謀に飛び込む

新しい若いテロリストコレクションの内部のこの外観で、神秘的で残忍な陰謀に飛び込む

若いテロリストの野生のアンチヒーロー、セラに会いましょう。ほぼ3年前、Black Mask Studiosは、残忍で政治的な色合いのスリラーであるYoungTerroristsと波を起こしました。

Huluが周りを見回し、The Handmaid'sTaleを第3シーズンに更新します

Huluが周りを見回し、The Handmaid'sTaleを第3シーズンに更新します

ハンドメイドの物語のエリザベスモス昨夜、アイオワ上院は、胎児の心拍が検出された後、ほとんどの妊娠中絶を禁止する、いわゆる「心拍」法案を早急に追跡しました。妊娠。また、HuluはThe Handmaid'sTaleを第3シーズンに更新することを決定しました。

ラストコール:どのように風邪と戦うのですか?

ラストコール:どのように風邪と戦うのですか?

これは実際に機能しますか?病気になってから久しぶりですが(ジンクス!)、今朝目が覚めたとき、副鼻腔の奥にひどい痛みを感じ、病気になりそうです。風邪が嫌いです。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

ケイト・ミドルトンはロンドンの水辺で一日を過ごし、さらにジェニファー・ロペス、ジュリアン・ハフなど

ケイト・ミドルトンはロンドンの水辺で一日を過ごし、さらにジェニファー・ロペス、ジュリアン・ハフなど

ケイト・ミドルトンはロンドンの水辺で 1 日を過ごし、ジェニファー・ロペス、ジュリアン・ハフなども。ハリウッドからニューヨークまで、そしてその間のあらゆる場所で、お気に入りのスターの活躍をご覧ください!

ウィスコンシン川でのナイフ攻撃で 17 歳の少年が刺されて死亡、他の 4 人が負傷したままになっている

ウィスコンシン川でのナイフ攻撃で 17 歳の少年が刺されて死亡、他の 4 人が負傷したままになっている

捜査官は、グループと容疑者が攻撃の前にお互いを知っていたかどうかを調べています

実際に変換するコンテンツ戦略を作成することを想像してみてください。それが可能だ。

実際に変換するコンテンツ戦略を作成することを想像してみてください。それが可能だ。

2021 年には、サービスを提供する顧客と顧客に伝えるストーリーについて知っていることをすべて再考することをお勧めします。あとずさりする。

マンモスロスは私の心を愛に開いた

マンモスロスは私の心を愛に開いた

フェリックス ザ キャットの 9 歳の誕生日の日に、大人になってからの最大の損失の 1 つである 2013 年のソフィーを思い出します。私はこのエッセイを書き、2013 年にこのプラットフォームで簡単に共有しました。

あなたがインターネットがあなたに望んでいる人になれないとき

あなたがインターネットがあなたに望んでいる人になれないとき

私は「列車事故」という言葉が嫌いです。人々は自分自身の道徳的羅針盤に安らぎを覚え、そうすることで自分自身が判断を下していることに気づきます。

DFINITY ブロックチェーンの分散型クラウド ビジョン

編集者注: アーカイブ目的で保存されている DFINITY ブログの古い資料を表示しています。

DFINITY ブロックチェーンの分散型クラウド ビジョン

この投稿では、DFINITY チームの分散型クラウドのビジョンと、それが従来のブロックチェーンやアマゾン ウェブ サービスなどの既存のクラウド プロバイダーとどのように関連しているかを探ります。大規模なネットワークによって適用される DFINITY テクノロジのデモンストレーションが 2017 年の秋に行われ、その後、非営利財団を支援するための主要な資金調達が行われ、「オープン クラウド」ネットワークは 2018 年の初夏に開始される予定です。 .

Language