google-bigquery
Integrazione di Google BigQuery con l'applicazione web

Integrazione dell'API BigQuery di Google con l'applicazione web

In questo tutorial, spiegherò come integrare l'API BigQuery di Google con l'applicazione web. La mia applicazione web sta per ottenere i dati usando BigQuery e tracciare un grafico usando d3.js e Javascript.

Ogni progetto su Google Developers Console ha un clientID e devi copiare il clientID e metterlo come configurazione:

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

È possibile accedere alle API di BigQuery nel seguente modo:

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

Inoltre dovrai menzionare la query che stai per recuperare i dati:

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

Il resto è la visualizzazione, cioè la creazione di Line Chart usando 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);
  
  }

In questo esempio, ho scelto "Quantità" come asse x e "Data" come asse y dal set di dati pubblico:

nyc_taxi_public

È possibile trovare l'esempio funzionante completo in questo collegamento.

BigQuery Integration with WebApplication