Covid19の陽性者数と移動平均線のグラフを見たくてGoogle SpreadSheetにデータを転記してグラフを描かせた。
一人で見るのももったいないので、グラフとデータのURLを連日貼り付けていたら、要望がきてグラフが増えた。
そうするとちょっと面倒になるので、新しいデータを記入したらグラフを更新してweb pageを更新するようにしたくなった。
そこでSpreadSheetのデータをCSVファイルに書き出して、web server側でCSVファイルを取り込んでおいて、グラフはCSVファイルをみて描画するようにしてみた。(やったのは1枚だけ)
この作業中のCSVファイルを作る部分は以下のページ
「スプレッドシートのデータをGASを使って1クリックでCSVに吐き出すものを作る。」
を参考に、いくつかの修正を加えたのが下のGoogle App Script(GAS)のコード。
修正点:
・すでにCSVファイルがある場合は、上書きする(同名で作成すると別IDの別ファイルができる)
・左端の列が空欄になったらデータの書き出しをやめる(*1)
・出力するCSVファイル用の関数を用意した
*1: データとグラフのシートを参照するCSVファイル出力用のデータのみのシート、これから出力するのだが、式が入っていると空欄でもデータがあると認識されてカンマだけの行ができる
var folderId = '#################################'; //念の為伏せ字
var fileNamePositives = 'Covid19-Positives.csv'
var fileNameAdmissions = 'Covid19-Admissions.csv'
var fileNameTests = 'Covid-19-Tests.csv'
function createCsvPositives(){
var fileName = fileNamePositives;
createCsv(fileName);
}
function createCsvAdmissions(){
var fileName = fileNameAdmissions;
createCsv(fileName);
}
function createCsvTests(){
var fileName = fileNameTests;
createCsv(fileName);
}
function createCsv(fileName) {
var csvData = loadData();
writeDrive(csvData, fileName);
}
function loadData() {
var data = SpreadsheetApp.getActiveSheet().getDataRange().getValues();
var csv = '';
for(var i = 0; i < data.length; i++) {
if(data[i][0] == "") {
break;
}
csv += data[i].join(',') + "\r\n";
}
Logger.log(csv)
return csv;
}
function writeDrive(csv, fileName) {
var drive = DriveApp.getFolderById(folderId);
var contentType = 'text/csv';
var charset = 'utf-8';
var files = drive.getFilesByName(fileName);
if(files.hasNext()) {
var csvFile = files.next();
csvFile.setContent(csv);
}else{
var blob = Utilities.newBlob('', contentType, fileName).setDataFromString(csv, charset);
drive.createFile(blob);
}
}
サーバー側でCSVファイルを取得するには、以下の形式のURLでアクセスする。
https://drive.google.com/uc?export=download&id=[FILE_ID]
(どこを参考にしたのか忘れた^^;)
こうしてサーバ側に持ってきたCSVファイルをJavascriptで読み込んで、Chart.jsに渡して描画させることができた。
ここまで書いたが、Google SpreadSheetで作ったグラフをweb pageに埋め込めることがわかったので、手間かけて用意したものは使わずにGoogle SpreadSheetのグラフを埋め込んで片付けてしまった。
>> 私家版:沖縄県Covid19関連グラフ