漫然と積み上げられた人の出勤状況などのデータをチャート化するなどの利用方法が考えられるカレンダーチャートですが、機能的には多機能ではないのでまだまだですが、非常に面白いチャートを作ることができます。人の出勤状況だけではなく、毎日の情報を定量的にヒートマップのように表示することもできると思います。

このチャートは日付と数値の2列のみで構成されている非常にシンプルなチャートです。チャートを使う時には、判例的な説明文が必要になると思います。今回は予約の空き状況をグラフ化しました。0〜100で予約の空き状況を示し、100で予約は満席の状態です

このグラフは上から日曜日~土曜日に並んでいます。今回の場合、土日が休みならば、一番上と下がデータがからになるわけで色付けがなくなるわけです。

難易度:


今回使用するスプレッドシート類

実行結果

ソースコード

GAS側コード

  • 使用前にメニューからグラフ描画⇒セットアップを実行して、スクリプトプロパティにシートのIDを格納しましょう。
  • 今回はカレンダーチャートを実行すると、スプレッドシート上でもチャートを表示するようにしています。

HTML側コード

  • このチャートはVisualization APIのチャートライブラリで、今回はcorechartではなくpackage指定は‘packages’:[‘calendar’]と、カレンダーを指定します。
  • DataTableを用意し、タイトル行とスプレッドシートからのデータをaddRowsで追加します。
  • 一番の肝はグラフオプションです。ラベルのフォントやサイズ、アウトラインの色などの指定をしてデザインを整形しています。
  • 別途色の状況などについての凡例を用意しておくと利用者にとって丁寧になるでしょう。
  • 今回は予約状況についてのカレンダーチャートですが、イベントリスナーなどでクリック時に予約画面を出したりなどをすることで、既存のシステムと連結できます。

関連リンク

共有してみる: