Google Apps Scriptでカレンダーチャートを作る【GAS】
漫然と積み上げられた人の出勤状況などのデータをチャート化するなどの利用方法が考えられるカレンダーチャートですが、機能的には多機能ではないのでまだまだですが、非常に面白いチャートを作ることができます。人の出勤状況だけではなく、毎日の情報を定量的にヒートマップのように表示することもできると思います。
このチャートは日付と数値の２列のみで構成されている非常にシンプルなチャートです。チャートを使う時には、判例的な説明文が必要になると思います。今回は予約の空き状況をグラフ化しました。0〜100で予約の空き状況を示し、100で予約は満席の状態です
このグラフは上から日曜日～土曜日に並んでいます。今回の場合、土日が休みならば、一番上と下がデータがからになるわけで色付けがなくなるわけです。
リンク
今回使用するスプレッドシート類
実行結果
ソースコード
GAS側コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
//起動時に表示するメニュー function onOpen(e) { var ui = SpreadsheetApp.getUi(); ui.createMenu('グラフ描画') .addItem('セットアップ', 'setup') .addItem('カレンダーチャート','calendarchart') .addToUi(); } //外部貼り付け用として表示 function doGet(){ //スクリプトレットを使えるようにしておく var html = HtmlService.createTemplateFromFile("index") .evaluate() .setTitle('カレンダーチャート') .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) return html; } //カレンダーチャートを表示 function calendarchart(){ var ui = SpreadsheetApp.getUi(); var html = HtmlService.createHtmlOutputFromFile('index').setHeight(400).setWidth(1000); ui.showModalDialog(html, "カレンダーチャート"); } //セットアップ function setup(){ var sheet = SpreadsheetApp.getActiveSpreadsheet(); var sheetId = sheet.getId(); var Prop = PropertiesService.getScriptProperties(); Prop.setProperty("sheetid",sheetId); SpreadsheetApp.getUi().alert("セットアップ完了"); } //スプレッドシートのデータを取得して返す function requery(){ //シートIDを取得する var Prop = PropertiesService.getScriptProperties(); var ssid = Prop.getProperty("sheetid"); //シートデータを取得する var ss = SpreadsheetApp.openById(ssid).getSheetByName("chart").getRange("A2:C").getValues(); //データを返す return JSON.stringify(ss); } |
- 使用前にメニューからグラフ描画⇒セットアップを実行して、スクリプトプロパティにシートのIDを格納しましょう。
- 今回はカレンダーチャートを実行すると、スプレッドシート上でもチャートを表示するようにしています。
HTML側コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<head> <!-- Visualization API --> <script src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> //Visualization APIの呼び出し google.charts.load('current', {'packages':['calendar'], 'language': 'ja'}); //初期化実行 initialize(); //GAS側から対象シートのデータを取得する function initialize() { google.script.run.withSuccessHandler(onSuccess).requery(); } //シートデータを反映する function onSuccess(data){ //データを取得する var json = JSON.parse(data); //データテーブルを構築する var datatable = new google.visualization.DataTable(); datatable.addColumn('date', '日付'); datatable.addColumn('number', '数値'); //データテーブルに取得データを追加する var array = []; for(var i = 0;i<json.length;i++){ //一時配列を用意する let temparray = []; //一時配列にpushする temparray.push(new Date(json[i][0])); temparray.push(json[i][2]); //arrayに追加する array.push(temparray); } //datatableにarrayを追加する datatable.addRows(array); //グラフオプション var options = { title: '病院の予約空き状況', height: 350, calendar: { monthLabel: { fontName: 'Times-Roman', fontSize: 12, color: '#981b48', bold: true, italic: true }, monthOutlineColor: { stroke: '#981b48', strokeOpacity: 0.8, strokeWidth: 2 }, unusedMonthOutlineColor: { stroke: '#bc5679', strokeOpacity: 0.8, strokeWidth: 1 }, underMonthSpace: 16, } } //チャート描画要素を指定 var chart = new google.visualization.Calendar(document.getElementById('chart_div')); //チャートを描画 chart.draw(datatable, options); } </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="chart_div" style="width: 100%; height: 400px;"></div> </body> |
- このチャートはVisualization APIのチャートライブラリで、今回はcorechartではなくpackage指定は'packages':['calendar']と、カレンダーを指定します。
- DataTableを用意し、タイトル行とスプレッドシートからのデータをaddRowsで追加します。
- 一番の肝はグラフオプションです。ラベルのフォントやサイズ、アウトラインの色などの指定をしてデザインを整形しています。
- 別途色の状況などについての凡例を用意しておくと利用者にとって丁寧になるでしょう。
- 今回は予約状況についてのカレンダーチャートですが、イベントリスナーなどでクリック時に予約画面を出したりなどをすることで、既存のシステムと連結できます。
