Google स्प्रेडशीट

यह पेज बताता है कि Google स्प्रेडशीट के साथ Google चार्ट का उपयोग कैसे करें.

  1. परिचय
  2. स्प्रेडशीट में चार्ट एम्बेड करना
  3. किसी अलग स्प्रेडशीट से चार्ट बनाना

परिचय

Google चार्ट और Google स्प्रेडशीट को एक साथ इंटिग्रेट किया गया है. आप Google स्प्रेडशीट में Google चार्ट डाल सकते हैं और Google चार्ट Google स्प्रेडशीट से डेटा निकाल सकते हैं. इस दस्तावेज़ में दोनों को करने का तरीका बताया गया है.

चाहे आप कोई भी तरीका चुनें, लेकिन जब भी मौजूदा स्प्रेडशीट में बदलाव होगा, आपका चार्ट बदल जाएगा.

स्प्रेडशीट में चार्ट एम्बेड करना

चार्ट को स्प्रेडशीट में शामिल करना आसान है. स्प्रेडशीट टूलबार से, पहले "शामिल करें" और फिर "चार्ट" चुनें.

किसी अलग स्प्रेडशीट से चार्ट बनाना

आम तौर पर, लोग डेटा टेबल को पॉप्युलेट करके और उस डेटा का इस्तेमाल करके, चार्ट बनाकर Google चार्ट बनाते हैं. इसके बजाय, अगर आपको Google स्प्रेडशीट से डेटा वापस लाना है, तो चार्ट किए जाने वाले डेटा को फिर से पाने के लिए आपको स्प्रेडशीट की क्वेरी करनी होगी:

function drawChart() {
  var query = new google.visualization.Query(URL);
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  var data = response.getDataTable();
  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
  chart.draw(data, null);
}

यह इसलिए काम करता है क्योंकि Google स्प्रेडशीट डेटा को क्रम से लगाने और फ़िल्टर करने के लिए Google चार्ट क्वेरी भाषा के साथ काम करता है; क्वेरी भाषा का समर्थन करने वाले किसी भी सिस्टम का इस्तेमाल डेटा स्रोत के रूप में किया जा सकता है.

ध्यान दें कि चार्ट में उन लोगों को मिलने वाले खास अधिकारों का इस्तेमाल नहीं किया जा सकता जिनके पास उन्हें देखने की अनुमति हो. स्प्रेडशीट या तो सभी को दिखाई देनी चाहिए या पेज पर असली उपयोगकर्ता का क्रेडेंशियल साफ़ तौर पर दिखना चाहिए, जैसा कि इस पेज के अनुमति सेक्शन में बताया गया है.

डेटा स्प्रेडशीट के रूप में Google स्प्रेडशीट का इस्तेमाल करने के लिए, आपको इसके यूआरएल की ज़रूरत होगी:

  1. मौजूदा स्प्रेडशीट खोलना. इस स्प्रेडशीट का फ़ॉर्मैट आपके विज़ुअलाइज़ेशन के हिसाब से होना चाहिए. साथ ही, इसमें देखने के खास अधिकार ठीक से सेट किए गए होने चाहिए. "वेब पर सार्वजनिक" या "कोई भी व्यक्ति जिसके पास लिंक है" के खास अधिकारों को देखना सबसे आसान होगा. साथ ही, इस सेक्शन में दिए गए निर्देशों में स्प्रेडशीट को इस तरह सेट अप किया गया है. स्प्रेडशीट को "निजी" रखकर और अलग-अलग Google खातों को ऐक्सेस देकर, इन पाबंदियों को मैनेज किया जा सकता है. हालांकि, आपको अनुमति देने के निर्देशों का पालन करना होगा.
  2. अपने ब्राउज़र से यूआरएल कॉपी करें. खास रेंज चुनने के बारे में जानकारी के लिए, क्वेरी सोर्स रेंज देखें.
  3. google.visualization.Query() को यूआरएल दें. क्वेरी में ये वैकल्पिक पैरामीटर काम करते हैं:
    • headers=N: यह बताता है कि कितनी पंक्तियां हेडर की पंक्तियां हैं. यहां N पूर्णांक या शून्य है. इन्हें डेटा से बाहर रखा जाएगा और डेटा टेबल में कॉलम लेबल के तौर पर असाइन किया जाएगा. अगर आप यह पैरामीटर तय नहीं करते हैं, तो स्प्रेडशीट अनुमान लगा लेगा कि कितनी पंक्तियां हेडर की पंक्तियां हैं. ध्यान दें कि अगर आपके सभी कॉलम, स्ट्रिंग डेटा हैं, तो स्प्रेडशीट में यह तय करने में मुश्किल हो सकती है कि इस पैरामीटर के बिना कौनसी लाइन, हेडर लाइन हैं.
    • gid=N: यह बताता है कि अगर किसी पहली शीट से लिंक नहीं किया जा रहा है, तो मल्टी-शीट दस्तावेज़ में कौनसी शीट लिंक की जाएगी. N शीट का आईडी नंबर होता है. आईडी की जानकारी जानने के लिए उस शीट के पब्लिश किए गए वर्शन पर जाएं और यूआरएल में gid=N पैरामीटर देखें. आप इस पैरामीटर के बजाय, sheet पैरामीटर का भी इस्तेमाल कर सकते हैं. Gotcha: Google स्प्रेडशीट किसी ब्राउज़र में देखने पर यूआरएल में gid पैरामीटर को फिर से व्यवस्थित कर सकती है; अगर इसे किसी ब्राउज़र से कॉपी किया जा रहा है, तो पक्का करें कि सभी पैरामीटर, यूआरएल के # से पहले मार्क हों. उदाहरण: gid=1545912003.
    • sheet=sheet_name यह बताता है कि जिस मल्टी-शीट दस्तावेज़ को पहली शीट से लिंक नहीं किया जा रहा है उसमें किस शीट को जोड़ा जा रहा है. sheet_name शीट का डिसप्ले नाम होता है. उदाहरण: sheet=Sheet5.

यहां एक पूरा उदाहरण देखें:

नीचे इस चार्ट को बनाने के दो तरीके दिए गए हैं: एक gid पैरामीटर का इस्तेमाल करके और दूसरा sheet पैरामीटर का इस्तेमाल करके. ब्राउज़र में कोई भी यूआरएल डालने से चार्ट के लिए एक जैसा नतीजा/डेटा मिलेगा.

जीआईडी
    function drawGID() {
      var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');

      var query = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?gid=0&headers=1&tq=' + queryString);
      query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var data = response.getDataTable();
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, { height: 400 });
    }
शीट
    function drawSheetName() {
      var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');

      var query = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString);
      query.send(handleSampleDataQueryResponse);
    }

    function handleSampleDataQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var data = response.getDataTable();
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, { height: 400 });
    }

क्वेरी के सोर्स की रेंज

क्वेरी सोर्स यूआरएल से पता चलता है कि क्वेरी में क्वेरी के किस हिस्से का इस्तेमाल किया जाएगा: खास सेल, सेल की रेंज, पंक्तियां या कॉलम या पूरी स्प्रेडशीट. "range=<range_expr>" सिंटैक्स का इस्तेमाल करके, रेंज बताएं: उदाहरण के लिए:

https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?range=A1:C4

यहां सिंटैक्स दिखाने वाले कुछ उदाहरण दिए गए हैं:

  • A1:B10 - A1 से B10 तक की रेंज
  • 5:7 - पंक्तियां 5-7
  • D:F - कॉलम D-F
  • A:A70 - कॉलम A में पहले 70 सेल
  • A70:A - कॉलम पंक्ति 70 से लेकर आखिर तक
  • B5:5 - B5 से पंक्ति 5 तक
  • D3:D - कॉलम D के आखिर तक D3
  • C:C10 - कॉलम C की शुरुआत से C10 तक

अनुमति

Google Sheets में, Google विज़ुअलाइज़ेशन एपीआई ("/tq अनुरोध") के ज़रिए निजी स्प्रेडशीट ऐक्सेस करने के लिए, असली उपयोगकर्ता क्रेडेंशियल की ज़रूरत होती है.

ध्यान दें: "लिंक वाला कोई भी व्यक्ति देख सकता है" से शेयर की गई स्प्रेडशीट के लिए क्रेडेंशियल की ज़रूरत नहीं होती है. अपनी स्प्रेडशीट को शेयर करने की सेटिंग बदलना, अनुमति लागू करने की तुलना में काफ़ी आसान है.

ऐसे मामलों में जहां लिंक शेयर करना एक कारगर समाधान नहीं है, डेवलपर को Google Sheets API के दायरे में आने वाले OAuth 2.0 क्रेडेंशियल पास करने के लिए, अपने कोड को बदलना होगा (https://www.googleapis.com/auth/spreadsheets).

Google API ऐक्सेस करने के लिए OAuth 2.0 का इस्तेमाल करना में, OAuth 2.0 के बारे में ज़्यादा जानकारी उपलब्ध है

उदाहरण: /gviz/tq को ऐक्सेस करने के लिए OAuth का इस्तेमाल करना

ज़रूरी शर्त: Google Developer Console से क्लाइंट आईडी पाएं

Google के पहचान प्लैटफ़ॉर्म के साथ इंटिग्रेट करने के बारे में ज़्यादा जानकारी पाने के लिए, Google साइन इन और Google API (एपीआई) कंसोल प्रोजेक्ट और क्लाइंट आईडी बनाएं.

असली उपयोगकर्ता के लिए OAuth टोकन पाने के लिए, आपको पहले अपने प्रोजेक्ट को Google Developer Console में रजिस्टर करना होगा और एक क्लाइंट आईडी हासिल करना होगा.

  1. डेवलपर कंसोल से, एक नया OAuth क्लाइंट आईडी बनाएं.
  2. अपने ऐप्लिकेशन टाइप के तौर पर वेब ऐप्लिकेशन चुनें.
  3. कोई भी नाम चुनें; यह सिर्फ़ आपकी जानकारी के लिए है.
  4. अनुमति वाले JavaScript ऑरिजिन के तौर पर, अपने डोमेन का नाम (और कोई भी टेस्ट डोमेन) जोड़ें.
  5. अधिकृत रीडायरेक्ट यूआरआई को खाली छोड़ दें.

बनाएं पर क्लिक करने के बाद, आने वाले समय में रेफ़रंस के लिए क्लाइंट आईडी कॉपी करें. इसके लिए क्लाइंट सीक्रेट की ज़रूरत नहीं है.

OAuth क्रेडेंशियल पाने के लिए, अपनी साइट को अपडेट करें.

Google, gapi.auth लाइब्रेरी उपलब्ध कराता है. यह OAuth क्रेडेंशियल हासिल करने की प्रक्रिया को बहुत आसान बना देता है. नीचे दिया गया कोड सैंपल, इस लाइब्रेरी का इस्तेमाल क्रेडेंशियल पाने (अगर ज़रूरी हो, तो अनुमति पाने का अनुरोध करके) पाने के लिए करता है. साथ ही, नतीजे में मिलने वाले क्रेडेंशियल को /gviz/tq एंडपॉइंट पर भेजता है.

डेमो.html 
<html>
<body>
  <button id="authorize-button" style="visibility: hidden">Authorize</button>
  <script src="./demo.js" type="text/javascript"></script>
  <script src="https://apis.google.com/js/auth.js?onload=init"></script>
</body>
</html>
डेमो.js 
// NOTE: You must replace the client id on the following line.
var clientId = '549821307845-9ef2xotqflhcqbv10.apps.googleusercontent.com';
var scopes = 'https://www.googleapis.com/auth/spreadsheets';

function init() {
  gapi.auth.authorize(
      {client_id: clientId, scope: scopes, immediate: true},
      handleAuthResult);
}

function handleAuthResult(authResult) {
  var authorizeButton = document.getElementById('authorize-button');
  if (authResult && !authResult.error) {
    authorizeButton.style.visibility = 'hidden';
    makeApiCall();
  } else {
    authorizeButton.style.visibility = '';
    authorizeButton.onclick = handleAuthClick;
  }
}

function handleAuthClick(event) {
  gapi.auth.authorize(
      {client_id: clientId, scope: scopes, immediate: false},
      handleAuthResult);
  return false;
}

function makeApiCall() {
  // Note: The below spreadsheet is "Public on the web" and will work
  // with or without an OAuth token.  For a better test, replace this
  // URL with a private spreadsheet.
  var tqUrl = 'https://docs.google.com/spreadsheets' +
      '/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq' +
      '?tqx=responseHandler:handleTqResponse' +
      '&access_token=' + encodeURIComponent(gapi.auth.getToken().access_token);

  document.write('<script src="' + tqUrl +'" type="text/javascript"></script>');
}

function handleTqResponse(resp) {
  document.write(JSON.stringify(resp));
}

अनुमति मिलने के बाद, gapi.auth.getToken() सभी क्रेडेंशियल की जानकारी दिखाएगा. इसमें access_token भी शामिल होगा जिसे /gviz/tq के अनुरोधों में जोड़ा जा सकता है.

पुष्टि करने के लिए, गापी लाइब्रेरी का इस्तेमाल करने के बारे में ज़्यादा जानकारी के लिए, यहां देखें:

drive.file के दायरे का इस्तेमाल करना

पिछले उदाहरण में Google Sheets API के दायरे का इस्तेमाल किया गया है. इससे उपयोगकर्ता की सभी स्प्रेडशीट कॉन्टेंट को पढ़ने और लिखने का ऐक्सेस मिलता है. ऐप्लिकेशन के आधार पर, इसमें ज़रूरत से ज़्यादा अनुमति दी जा सकती है. रीड ओनली ऐक्सेस के लिए, spreadsheets.readonly दायरे का इस्तेमाल करें, जो उपयोगकर्ता की शीट और उनकी प्रॉपर्टी को रीड ओनली ऐक्सेस देता है.

drive.file दायरा (https://www.googleapis.com/auth/drive.file) सिर्फ़ उन फ़ाइलों का ऐक्सेस देती है जिन्हें उपयोगकर्ता Google Drive फ़ाइल फ़ाइल पिकर के साथ साफ़ तौर पर खोलता है, जिसे पिकर एपीआई के ज़रिए लॉन्च किया गया था.

पिकर का इस्तेमाल करने से आपके ऐप्लिकेशन का फ़्लो बदल जाता है. ऊपर दिए गए उदाहरण की तरह, यूआरएल को चिपकाने या हार्ड कोड की गई स्प्रेडशीट का इस्तेमाल करने के बजाय, उपयोगकर्ता को पिकर डायलॉग बॉक्स का इस्तेमाल करके, यह चुनना होगा कि वह आपके पेज को किस स्प्रेडशीट में ऐक्सेस करना चाहता है. google.picker.ViewId.PHOTOS के बजाय google.picker.ViewId.SPREADSHEETS का इस्तेमाल करके, "हैलो" उदाहरण का पालन करें.