將 Googles BigQuery API 與 Web 應用程式整合

在本教程中，我將解釋如何將 Google 的 BigQuery API 與 Web 應用程式整合。我的 Web 應用程式將使用 BigQuery 獲取資料並使用 d3.js 和 Javascript 繪製圖形。

Google Developers Console 上的每個專案都有一個 clientID，你需要複製 clientID 並將其作為配置：

var gconfig = {
    'client_id': 'ClientID',
    'scope': 'https://www.googleapis.com/auth/bigquery'
};

可以通過以下方式訪問 BigQuery API：

$.getScript("https://apis.google.com/js/client.js", function(d) {
  function loadGAPI() {
    setTimeout(function() {
      if (!gapi.client) {
        loadGAPI();
      } else {
        loadBigQuery();
      }
    }, 500);
  }
  
  function loadBigQuery() {
    gapi.client.load('bigquery', 'v2');
    setTimeout(function() {
      if (!gapi.client.bigquery) {
        loadBigQuery();
      } else {
        onClientLoadHandler();
      }
    }, 500);
  }
  
  loadGAPI();
});

此外，你還需要提及要檢索資料的查詢：

function runQuery() {
    var request = gapi.client.bigquery.jobs.query({
      'projectId': "bigdatameetup-83116",
      'timeoutMs': '30000',
      'query': 'SELECT DATE(date ) as date,SUM(INTEGER(orders)) as total_orders FROM [bigdatameetup-83116:Demo_Backup.orders] GROUP BY date ORDER BY date LIMIT 1000; '
    });
    request.execute(function(response) {
      var bqData = [];

      response.result.rows.forEach(function(d) {
        bqData.push({"date": d3.time.format("%Y-%m-%d").parse(d.f[0].v),
          "total_orders": +d.f[1].v});
      });
      
      drawLineChart(bqData);
    });
  }

其餘的是視覺化，即使用 d3.js 建立折線圖：

function drawLineChart(bqData) {
  var WIDTH = config.width, HEIGHT = config.height;
  var Y_AXIS_LABEL = "total_orders";
  var X_DATA_PARSE = d3.time.format("%d-%b-%y").parse;
  var Y_DATA_PARSE = vida.number;
  var X_DATA_TICK = d3.time.format("%b-%y");
  var X_AXIS_COLUMN = "date";
  var Y_AXIS_COLUMN = "total_orders";
  var margin = {top: 20, right: 20, bottom: 30, left: 50},
      width = WIDTH - margin.left - margin.right,
      height = HEIGHT - margin.top - margin.bottom;
  var x = d3.time.scale()
      .range([0, width]);
    var y = d3.scale.linear()
      .range([height, 0]);
  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .tickFormat(X_DATA_TICK);
  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .tickFormat(function(d) {
        return d / 1000000 + "M";
      });
  var line = d3.svg.line()
      .interpolate("basis")
      .x(function(d) { return x(d.x_axis); })
      .y(function(d) { return y(d.y_axis); });
  
  var svg = d3.select("#canvas-svg").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  bqData.forEach(function(d) {
    d.x_axis = d[X_AXIS_COLUMN];
    d.y_axis = d[Y_AXIS_COLUMN];
  });
  
  bqData.sort(function(a, b) {
    return (new Date(a.x_axis)) - (new Date(b.x_axis));
  });
  
  x.domain(d3.extent(bqData, function(d) { return d.x_axis; }));
  y.domain(d3.extent(bqData, function(d) { return d.y_axis; }));
  
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
  
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text(Y_AXIS_LABEL);
  
  svg.append("path")
      .datum(bqData)
      .attr("class", "line")
      .attr("d", line);
  
  }

在這個例子中，我從公共資料集中選擇’Amount’作為 x 軸，‘Date’作為 y 軸：

nyc_taxi_public

你可以在此連結中找到完整的工作示例。

BigQuery Integration with WebApplication