google-bigquery
Intégration de Google BigQuery avec une application Web

Intégration de l'API BigQuery de Google avec une application Web

Dans ce tutoriel, je vais vous expliquer comment intégrer l'API BigQuery de Google avec une application Web. Mon application web va récupérer les données en utilisant BigQuery et tracer un graphique en utilisant d3.js et Javascript.

Chaque projet sur Google Developers Console possède un identifiant client et vous devez copier le client et le mettre en configuration:

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

BigQuery API est accessible de la manière suivante:

$.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();
});

Vous devrez également mentionner la requête que vous allez récupérer les données:

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);
    });
  }

Le reste est la visualisation, c.-à-d. La création d'un graphique linéaire à l'aide de 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);
  
  }

Dans cet exemple, j'ai choisi "Montant" comme axe des x et "Date" comme axe des y dans le jeu de données public:

nyc_taxi_public

Vous pouvez trouver l'échantillon complet dans ce lien.

BigQuery Integration with WebApplication