05_グラフ表示アプリ

【05_グラフ表示アプリ】グラフ表示アプリ〔解説編 Vol.4〕グラフ描画のためのデータをスプレッドシートに記載する

記事概要

この記事は、GASによる以下のグラフ表示アプリの解説記事になります。今回は以下の棒グラフを表示させるためのデータを、スプレッドシート上にどう記載しているか説明します。

スプレッドシート上の関数や数値の扱いは、いくらでも方法や形式が考えられます。ここでご紹介するのは単に一例だと思ってください。重要なのは、数値の処理を、表計算という誰もが扱い易いプラットフォームで行えるという点です。同じ処理をプログラムに埋め込むより、ずっと扱い易く、変更の際にも見通しが良くなります。





シートの中身を紹介

シートの中身を紹介します。ややとりとめもないですが・・・。

まず日付け。

このグラフは今の日付のある週と、その前の週の2週間を表示する仕様となっています。そのため、まず週の起点となる日を算出します。

まず、今日が年内の何週目かを〔T2〕セル(青い枠部)に以下の関数で表示しています。

=WEEKNUM(today(),1)

 

 

また、今日が何曜日かを〔V2〕セル(黄色部)に以下の関数で表示しています。(例では土曜日(=6)が表示されています)

=WEEKDAY( today(),1)-1)


そして、今日の曜日をもとに日曜日の日付をH列に表示させて、そこを起点に日曜日から土曜日までの日付を作成し、そこから年:year()、月:month()、日:Date()を抽出して参照シート名を合成しています。

たとえば以下の様な感じです。

=”D”&year($H3+I$1) & mid(100+MONTH($H3+I$1),2,2) & mid(100+DAY($H3+I$1),2,2)&”_”&I$2

 

各日の合計は以下の様に、シート名を元に各日の小計を入れているセル(F11セル)をindirect()関数で参照して表示しています。(例ではゼロ円ですが)

=iferror(indirect(I3&”!F11″),0)

また、パラメータ付きのURLは以下で合成しています。(例では小さくてみえませんが、https~で始まる共通部分が<H1セル>にあり、それと個別のクエリーパラメータ部分を合成しています。

=$H$1&I3

さて、こうして作成した情報は、2段になっていては使いにくいので、シートの左上に縦1列の形で改めて表示しています。

以下がその様子ですが、スクリプトではここからデータを取得しています。

これらの関数は、シートをGASで編集した際に再評価されない事があるため、プログラムではシートを編集したタイミングで関連するセル(関数を含んでいる)を、わざとコピーして同じ位置に貼り付けたりしています。

<CAMVAS>要素のサイズ、グラフの巾、その他の各パラメータもスプレッド上で管理しています。以下がその部分です。

詳細は省きますが、上記の数値をもとに、棒グラフとなる長方形の頂点の座標などを関数で求めて表示させています。

例えば、棒グラフの左下の座標は以下の様にD列のセルに、関数で表示されます。

この表の数値をスクリプトで引用してグラフ描画に利用しています。

同じ処理をプログラムで行うと第三者がメンテしにくいのですが、スプレッドシートで行うと内容が容易に把握でき、修正もしやすくなります。

今回の記事はここまでになります。つらつらと、ちょっととりとめない記事になってしまいました。こんな雰囲気だ、ということだけ伝わればと思います。

シートの全体は後の記事でご紹介します。