Google Apps Script 入門到進階(6) --- 雙Y軸座標、十字游標、組合圖

Google Apps Script入門到進階(5) ---使用Google Visualization API (google.visualization.DataTable)畫摩台換倉成本  介紹了使用Google Visualization API繪圖，接著將圖片內容作一些設定讓畫面看起來更好看。
圖中原顯示日期、收盤價、成本價的曲線，再加入一個未平倉量顯示，並把未平倉量擺放到副座標軸上。
在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

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

	<?!= include('getGraphicData'); ?>
	<div id="auth" align="center"></div><br/>
	<div id="chart"></div><br/>
	<div id="chart2"></div><br/>
	<div id="source" align="center"></div><br/>

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

在以下的程式碼中加入組合圖，並在曲線圖與組合圖中添加雙Y軸座標、十字遊標。新增HTML檔案getGraphicData.html，輸入以下程式碼。

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<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() {
	$("#auth").html("免責聲明：以下資料與圖片內容皆為教學使用，勿作為投資之依據，所有內容將不負任何投資盈虧之責!!!");
	google.script.run.withSuccessHandler(getSGXPicData).getSGXData();
	}
	function getSGXPicData(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('number', data[0][6]); //未平倉量
	var trade, closeprice, averageprice, OI;
	for (var i = 0; i < data.length; i++)
	{
	trade = data[i][0];
	closeprice = parseFloat(data[i][4]);
	averageprice = parseFloat(data[i][25]);
	OI = parseInt(data[i][6]);
	if(i != data.length-1)
	dataTable.addRow([trade, closeprice, null, averageprice, null, OI]);
	else if(i == data.length-1)
	dataTable.addRow([trade, closeprice, String(closeprice), averageprice, String(averageprice), OI]);
	}
	var options = {
	width: 1500,
	height: 380,
	title: '折線圖：摩台未平倉量與成本',
	hAxis: {
	title: "日期",
	format: 'y/d/m'
	},
	vAxes: {
	0:{ title: '摩台指數'},
	1:{ title: '摩台未平倉量', maxValue: 420000}
	},
	series:{
	0:{targetAxisIndex:0},
	1:{targetAxisIndex:0},
	2:{targetAxisIndex:1}
	},
	crosshair: { trigger: 'both' },
	tooltip: { trigger: 'selection' }
	};
	var chart1 = new google.visualization.LineChart(document.getElementById('chart'));
	google.visualization.events.addListener(chart1, 'ready', function () {
	chart1.setSelection([{row:99, column:1}]); // Select one of the points.
	png = '<a href="' + chart1.getImageURI() + '">Printable version</a>';
	console.log(png);
	});
	chart1.draw(dataTable, options);
	var options2 = {
	width: 1500,
	height: 380,
	title: '組合圖：摩台未平倉量與成本',
	hAxis: {
	title: "日期",
	format: 'y/d/m'
	},
	vAxes: {
	0:{ title: '摩台指數'},
	1:{ title: '摩台未平倉量', maxValue: 420000}
	},
	series:{
	0:{type: "line", targetAxisIndex:0},
	1:{type: "line", targetAxisIndex:0},
	2:{type: "bars", targetAxisIndex:1}
	},
	crosshair: { trigger: 'both' },
	tooltip: { trigger: 'selection' }
	};
	var chart2 = new google.visualization.ComboChart(document.getElementById('chart2'));
	google.visualization.events.addListener(chart2, 'ready', function () {
	chart2.setSelection([{row:99, column:1}]); // Select one of the points.
	png = '<a href="' + chart2.getImageURI() + '">Printable version</a>';
	console.log(png);
	});
	chart2.draw(dataTable, options2);
	var content = '資料來源：<a href=\"http://www.sgx.com/\" target=\"_blank\" title=\"新加坡期貨交易所\">新加坡期貨交易所</a>';
	$("#source").html(content);
	}
	</script>

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

執行結果：

範例網頁連結。

筆者將台指未平倉量與換倉成本內容加入，並以組合圖來呈顯，有興趣了解 台指未平倉量與換倉成本，請參考文章 Google Spredsheet 抓TXF 台指未平倉量與台指次月契約開倉成本。

範例網頁連結。

參考資料：

• Google Charts
• Having fun with Google charts: double y-axes and more!
• Google Apps Script 入門到進階(4) --- Google Visualization API 與 Google Apps Script 畫圖
• Google Apps Script入門到進階(5) ---使用Google Visualization API (google.visualization.DataTable)畫摩台換倉成本
• Google Spredsheet 抓TXF 台指未平倉量與台指次月契約開倉成本