以下示例是用于查询BigQuery并将结果填充到由Google Chart Tools生成的地图中的 HTML/JavaScript 代码。您需要使用您的项目 ID 和客户端 ID 进行更新——并在API 控制台中注册您的应用程序才能使用它。
这使用此处记录的美国出生统计(出生)样本数据集:
https ://developers.google.com/bigquery/docs/dataset-natality
它使用适用于 JavaScript 的 Google API 客户端库来处理对 BigQuery 的授权和 API 请求。
用户首次访问此页面时将被引导通过 OAuth 批准流程(以获得对“配置”中定义的 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 的请求。使用服务帐户在 App Engine 上执行此操作相当简单。