google-bigquery
वेब एप्लिकेशन के साथ Google के BigQuery का एकीकरण

वेब एप्लिकेशन के साथ Google के BigQuery एपीआई का एकीकरण

इस ट्यूटोरियल में, मैं समझाऊँगा कि वेब एप्लिकेशन के साथ Google के BigQuery एपीआई को कैसे एकीकृत किया जाए। मेरा वेब एप्लिकेशन BigQuery का उपयोग करके डेटा प्राप्त करने जा रहा है और d3.js और जावास्क्रिप्ट का उपयोग करके एक ग्राफ तैयार करता है।

Google डेवलपर्स कंसोल पर प्रत्येक प्रोजेक्ट में एक क्लाइंटआईडी है और आपको क्लाइंटआईडी की प्रतिलिपि बनाने और इसे एक कॉन्फ़िगरेशन के रूप में डालने की आवश्यकता है:

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

इस उदाहरण में, मैंने 'राशि' को एक्स-अक्ष के रूप में चुना है और 'तारीख' को सार्वजनिक डेटासेट से y अक्ष के रूप में चुना है:

nyc_taxi_public

आप इस लिंक में पूर्ण कार्य नमूना देख सकते हैं।

BigQuery Integration with WebApplication