Google E-Tablolar

Bu sayfada, Google E-Tablolar ile Google Listeleri'nin nasıl kullanılacağı açıklanmaktadır.

  1. Giriş
  2. E-Tabloya Grafik Yerleştirme
  3. Ayrı bir E-Tablodan Grafik Oluşturma

Giriş

Google Listeler ve Google E-Tablolar sıkı bir şekilde entegre edilmiştir. Bir Google E-tablosuna Google Grafiği yerleştirebilirsiniz ve Google Listeleri Google E-Tablosu'ndan veri çıkarabilir. Bu dokümanlarda, her ikisinin de nasıl yapılacağı gösterilmektedir.

Hangi yöntemi seçerseniz seçin, alttaki e-tablo her değiştiğinde grafiğiniz de değişir.

E-Tabloya Grafik Ekleme

E-tabloya grafik eklemek kolaydır. E-Tablolar araç çubuğundan "Ekle"yi, ardından "Grafik"i seçin. Grafik türünü ve çeşitli seçenekleri belirleyebilirsiniz:

Ayrı Bir E-Tablodan Grafik Oluşturma

Genelde kullanıcılar, bir veri tablosu doldurup bu verileri kullanarak grafiği çizerek Google Listeleri oluştururlar. Bunun yerine, verileri bir Google E-Tablosu'ndan almak istiyorsanız grafiği çizilecek verileri almak için e-tabloyu sorgulayabilirsiniz:

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 E-Tablolar, verilerin sıralanması ve filtrelenmesi için Google Listeleri sorgu dilini desteklediğinden bu işlev çalışır. Sorgu dilini destekleyen tüm sistemler veri kaynağı olarak kullanılabilir.

Grafiklerin, açık bir yetkilendirme olmaksızın, kendisini görüntüleyen kişilerin ayrıcalıklarını kullanamayacağını unutmayın. E-tablonun herkes tarafından görünür olması veya sayfanın bu sayfanın Yetkilendirme bölümünde açıklandığı üzere son kullanıcı kimlik bilgilerini açıkça edinmesi gerekir.

Bir Google e-tablosunu veri kaynağı olarak kullanmak için URL'sine ihtiyacınız vardır:

  1. Mevcut bir e-tabloyu açın. Bu e-tabloda görselleştirmenizin beklediği biçime sahip olmalı ve görüntüleme ayrıcalıkları doğru şekilde ayarlanmış olmalıdır. ("Web'de herkese açık" veya "Bağlantıya sahip olan herkes" gibi ayrıcalıkları kolayca görüntüleyebilirsiniz. Bu bölümdeki talimatlarda, bu şekilde oluşturulmuş bir e-tablo kullanılmıştır. E-tabloyu "Gizli" olarak tutarak ve Google hesaplarına ayrı ayrı erişim izni vererek kısıtlayabilirsiniz ancak aşağıdaki yetkilendirme talimatlarını uygulamanız gerekir).
  2. Tarayıcınızdaki URL'yi kopyalayın. Belirli aralıkların seçilmesiyle ilgili ayrıntılar için Sorgu Kaynağı Aralıkları bölümüne bakın.
  3. google.visualization.Query() için URL'yi sağlayın. Sorgu, aşağıdaki isteğe bağlı parametreleri destekler:
    • headers=N: Kaç satırın başlık satırı olduğunu belirtir; N tam sayı sıfır veya daha büyüktür. Bunlar, verilerden hariç tutulur ve veri tablosunda sütun etiketleri olarak atanır. Bu parametreyi belirtmezseniz e-tablo, başlık satırı olan satır sayısını tahmin eder. Tüm sütunlarınız dize verisiyse e-tablonun hangi satırların bu parametre olmadan başlık satırları olduğunu belirlemekte zorlanabileceğini unutmayın.
    • gid=N: Çok sayfalı dokümanda ilk sayfaya bağlantı vermiyorsanız hangi sayfaya bağlantı verileceğini belirtir. N, sayfanın kimlik numarasıdır. Kimlik numarasını, bu sayfanın yayınlanmış sürümüne gidip URL'de gid=N parametresini arayarak öğrenebilirsiniz. Bu parametre yerine sheet parametresini de kullanabilirsiniz. Gotcha: Google E-tablolar, bir tarayıcıda görüntülendiğinde URL'deki brüt parametreyi yeniden düzenleyebilir. Tarayıcıdan kopyalayan tüm parametrelerin, URL'nin # işaretinden önce olduğundan emin olun. Örnek: gid=1545912003.
    • sheet=sheet_name: İlk sayfaya bağlantı oluşturmuyorsanız çok sayfalı bir dokümanda hangi sayfaya bağlantı verdiğinizi belirtir. sheet_name sayfanın görünen adıdır. Örnek: sheet=Sheet5.

Aşağıda eksiksiz bir örnek verilmiştir:

Aşağıda, bu grafik iki farklı şekilde çizilmiştir; birinde gid parametresi, diğerinde sheet parametresi kullanılır. Her iki URL'yi de tarayıcıya girmek, grafik için aynı sonucu/veriyi oluşturur.

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

Sorgu Kaynak Aralıkları

Sorgu kaynağı URL'si, bir e-tablonun sorguda hangi bölümünün kullanılacağını belirtir: belirli bir hücre, hücre aralığı, satır veya sütunlar ya da tüm e-tablo. "range=<range_expr>" söz dizimini kullanarak aralığı belirtin. Örneğin:

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

Söz dizimini gösteren birkaç örneği burada bulabilirsiniz:

  • A1:B10 - A1 ile B10 arasındaki bir aralık
  • 5:7 - Satır 5-7
  • D:F - D-F sütunları
  • A:A70 - A sütunundaki ilk 70 hücre
  • A70:A - Satır 70'ten sona
  • 5. satırın sonundan B5:5 - B5
  • D sütununun sonuna D3:D - D3
  • C:C10 - C sütununun başlangıcından C10'a

Yetkilendirme

Google E-Tablolar, Google E-Tablolar API'si aracılığıyla gizli e-tablolara erişmek için son kullanıcı kimlik bilgilerinin ("/tq istekleri") kullanılmasını gerektirir.

Not: "Bağlantıya sahip olan herkes görüntüleyebilir" ifadesiyle paylaşılan e-tablolar kimlik bilgisi gerektirmez. E-tablonuzun paylaşım ayarlarını değiştirmek, yetkilendirmeyi uygulamaktan çok daha kolaydır.

Bağlantı paylaşımının uygulanabilir bir çözüm olmadığı durumlarda geliştiricilerin, Google Sheets API kapsamında yetki verilmiş OAuth 2.0 kimlik bilgilerini (https://www.googleapis.com/auth/sheets) iletmek için kodlarını değiştirmesi gerekir.

OAuth 2.0 hakkında daha fazla bilgi için Google API'lerine Erişmek için OAuth 2.0'ı Kullanma bölümüne bakın

Örnek: /gviz/tq adresine erişmek için OAuth kullanma

Ön koşul: Google Developer Console'dan istemci kimliği edinme

Google'ın Identity Platform ile entegrasyon hakkında daha ayrıntılı talimatlara Google ile Oturum Açma ve Google API Konsolu projesi ve istemci kimliği oluşturma sayfalarından ulaşabilirsiniz.

Bir son kullanıcının OAuth jetonlarını edinmek için önce projenizi Google Developer Console'a kaydetmeniz ve bir İstemci Kimliği edinmeniz gerekir.

  1. Geliştirici konsolunda yeni bir OAuth istemci kimliği oluşturun.
  2. Uygulama türü olarak Web uygulaması'nı seçin.
  3. Herhangi bir ad seçin. Bu ad yalnızca bilgilendirme amaçlıdır.
  4. Alanınızın adını (ve tüm test alanlarını) Yetkili JavaScript Kaynakları olarak ekleyin.
  5. Yetkilendirilmiş yönlendirme URI'leri alanını boş bırakın.

Oluştur'u tıkladıktan sonra gelecekte referans olması için istemci kimliğini kopyalayın. Bu alıştırma için istemci gizli anahtarı gerekmez.

OAuth kimlik bilgilerini almak için sitenizi güncelleyin.

Google, OAuth kimlik bilgisi edinme sürecini büyük ölçüde basitleştiren gapi.auth kitaplığını sağlar. Aşağıdaki kod örneği kimlik bilgisi almak (gerekirse yetkilendirme isteğinde bulunmak) için bu kitaplığı kullanır ve elde edilen kimlik bilgisini /gviz/tq uç noktasına iletir.

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

Yetkilendirme başarılı olduğunda gapi.auth.getToken(), /gviz/tq isteklerine eklenebilecek access_token dahil tüm kimlik bilgisi ayrıntılarını döndürür.

Kimlik doğrulama için gapi kitaplığını kullanma hakkında daha fazla bilgi edinmek için aşağıdaki makalelere bakın:

drive.file kapsamını kullanma

Önceki örnekte, kullanıcının tüm e-tablo içeriğine okuma ve yazma erişimi sağlayan Google Sheets API kapsamı kullanılmaktadır. Uygulamaya bağlı olarak bu işlem gerekenden daha kapsamlı olabilir. Salt okuma erişimi için kullanıcının e-tablolarına ve özelliklerine salt okuma erişimi veren sheets.readonly kapsamını kullanın.

drive.file kapsamı (https://www.googleapis.com/auth/drive.file), yalnızca kullanıcının Picker API üzerinden başlatılan Google Drive dosya seçici ile açıkça açtığı dosyalara erişim izni verir.

Seçici'yi kullanmak, uygulamanızın akışını değiştirir. Kullanıcı, bir URL'yi yapıştırmak veya yukarıdaki örnekte olduğu gibi sabit kodlu bir e-tabloya sahip olmak yerine, sayfanıza erişmek istediği e-tabloyu seçmek için Seçici iletişim kutusunu kullanmalıdır. Seçici "Merhaba Dünya" örneğine uymak için google.picker.ViewId.PHOTOS yerine google.picker.ViewId.SPREADSHEETS kullanın.