Google Apps Script 入門到進階(5) --- 使用 Google Visualization API (google.visualization.DataTable) 畫摩台換倉成本

前一篇  Google Apps Script入門到進階(4) --- Google Visualization API與Google Apps Script畫圖介紹了畫圖，接著更進一步使用Google Visualization API (google.visualization.DataTable) 、Google Apps Script與Google Sheet資料來畫圖。
筆者結合  Google Spredsheet抓SGX摩台未平倉量與摩台次月契約開倉成本 的資料來畫圖，在Google雲端硬碟中建立一個專案，新增Google Apps Script檔案Code.gs，輸入以下程式碼。

	function doGet() {
	return HtmlService.createTemplateFromFile("index.html")
	.evaluate()
	.setSandboxMode(HtmlService.SandboxMode.IFRAME);
	}
	function include(filename) {
	return HtmlService.createHtmlOutputFromFile(filename)
	.setSandboxMode(HtmlService.SandboxMode.IFRAME)
	.getContent();
	}
	function getData(){
	var sheetid = "your sheet id";
	var sheet = SpreadsheetApp.openById(sheetid).getSheets()[0];
	return sheet.getDataRange().getValues();
	}

view raw Google Visualization API & Google Apps Script & Google Sheet (3) hosted with ❤ by GitHub

第1~5行：開啟網址會執行doGet，函數功能為呼叫index.html。
第9~11行：指定載入的html頁面。
第13~17行：取得指定Google sheet的資料。

新增HTML檔案index.html，輸入以下程式碼。

	<?!= include('getGraphicData'); ?>
	<div id="chart"></div>

view raw Google Visualization API & Google Apps Script & Google Sheet (1) hosted with ❤ by GitHub

新增HTML檔案getGraphicData.html，輸入以下程式碼。

	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load("visualization", "1", {packages:["corechart"]});
	google.setOnLoadCallback(getSpreadsheetData);
	function getSpreadsheetData() {
	google.script.run.withSuccessHandler(getPicData).getData();
	}
	function getPicData(data) {
	//create data table object
	var dataTable = new google.visualization.DataTable();
	//define columns
	dataTable.addColumn('string', data[0][0]); //日期
	dataTable.addColumn('number', data[0][4]); //收盤價
	dataTable.addColumn({type: 'string', role: 'annotation'});
	dataTable.addColumn('number', data[0][25]); //摩台換倉成本
	dataTable.addColumn({type: 'string', role: 'annotation'});
	//dataTable.addColumn({type: 'string', role: 'annotationText'});
	for (var i = 0; i < data.length; i++)
	{
	if(i != data.length-1)
	dataTable.addRow([data[i][0], parseFloat(data[i][4]), null, parseFloat(data[i][25]), null]);
	else if(i == data.length-1)
	dataTable.addRow([data[i][0], parseFloat(data[i][4]), String(parseFloat(data[i][4])), parseFloat(data[i][25]), String(parseFloat(data[i][25]))]);
	}
	var options = {width: 1400,
	height: 800,
	is3D: true,
	title: '摩台未平倉量與成本'};
	var chart = new google.visualization.LineChart(document.getElementById('chart'));
	chart.draw(dataTable, options);
	}
	</script>

view raw Google Visualization API & Google Apps Script & Google Sheet (2) hosted with ❤ by GitHub

第5行：執行Callback function。
第7~9行：將Google sheet取得的資料塞到getPicData函數中。

執行結果：

範例網頁連結。

參考資料：

• Google Spredsheet抓SGX摩台未平倉量與摩台次月契約開倉成本
• Google Visualization API與Google Apps Script畫圖介紹了畫圖
• Column Roles