次のサンプルは、 BigQueryにクエリを実行し、 GoogleChartToolsによって生成されたマップに結果を入力するためのHTML/JavaScriptコードです。これを使用するには、プロジェクトIDとクライアントIDで更新し、 APIコンソールにアプリを登録する必要があります。
これは、 https：//developers.google.com/bigquery/docs/dataset-natalityに記載されている米国の出生統計（出生率）サンプルデータセットを使用します
。
JavaScript用のGoogleAPIクライアントライブラリを使用して、BigQueryへの承認とAPIリクエストを処理します。
ユーザーは、このページに初めてアクセスするときにOAuth承認フローを介して誘導されます（「config」で定義されたOAuthスコープへのアクセス許可のため）。指定されたプロジェクトの許可されたユーザーである必要があります（プロジェクトの割り当て/請求を実装できるようにするため）。このOAuth承認により、ユーザーが最近承認していない場合はポップアップが表示されますが、以前に承認が付与されている場合は、再度承認を付与する必要はありません。より透過的に実行する必要がある場合は、 「即時モード」を調べることができます。
<html>
<head>
<script src="https://apis.google.com/js/client.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['geochart']});
</script>
<script>
// UPDATE TO USE YOUR PROJECT ID AND CLIENT ID
var project_id = '605902584318';
var client_id = '605902584318.apps.googleusercontent.com';
var config = {
'client_id': client_id,
'scope': 'https://www.googleapis.com/auth/bigquery'
};
function runQuery() {
var request = gapi.client.bigquery.jobs.query({
'projectId': project_id,
'timeoutMs': '30000',
'query': 'SELECT state, AVG(mother_age) AS theav FROM [publicdata:samples.natality] WHERE year=2000 AND ever_born=1 GROUP BY state ORDER BY theav DESC;'
});
request.execute(function(response) {
console.log(response);
var stateValues = [["State", "Age"]];
$.each(response.result.rows, function(i, item) {
var state = item.f[0].v;
var age = parseFloat(item.f[1].v);
var stateValue = [state, age];
stateValues.push(stateValue);
});
var data = google.visualization.arrayToDataTable(stateValues);
var geochart = new google.visualization.GeoChart(
document.getElementById('map'));
geochart.draw(data, {width: 556, height: 347, resolution: "provinces", region: "US"});
});
}
function auth() {
gapi.auth.authorize(config, function() {
gapi.client.load('bigquery', 'v2', runQuery);
$('#client_initiated').html('BigQuery client initiated');
});
$('#auth_button').hide();
}
</script>
</head>
<body>
<h2>Average Mother Age at First Birth in 2000</h2>
<button id="auth_button" onclick="auth();">Authorize</button>
<button id="query_button" style="display:none;" onclick="runQuery();">Run Query</button>
<div id="map"></div>
</body>
</html>
注：ユーザーにOAuth承認を行わせずにクエリを割り当て/請求に請求しようとしている場合は、リクエストをAPIにプロキシする単純なサーバー側プロキシを設定する必要があります。サービスアカウントを使用してAppEngineでこれを行うのはかなり簡単です。