Google Spreadsheet

Halaman ini menjelaskan cara menggunakan Google Chart dengan Google Spreadsheet.

  1. Pengantar
  2. Menyematkan Diagram dalam Spreadsheet
  3. Membuat Diagram dari Spreadsheet Terpisah

Pengantar

Google Chart dan Google Spreadsheet sangat terintegrasi. Anda dapat menempatkan Google Chart di dalam Google Spreadsheet, dan Google Charts dapat mengekstrak data dari Google Spreadsheet. Dokumentasi ini menunjukkan cara melakukan keduanya.

Metode apa pun yang dipilih, diagram akan berubah setiap kali spreadsheet pokok berubah.

Menyematkan Bagan dalam Spreadsheet

Memasukkan bagan ke dalam {i>spreadsheet<i} adalah hal yang mudah. Dari toolbar Spreadsheet, pilih "Insert", lalu "Chart", dan Anda dapat memilih jenis diagram dan memilih berbagai opsi:

Membuat Diagram dari Spreadsheet Terpisah

Biasanya, orang membuat Google Chart dengan mengisi tabel data dan menggambar diagram menggunakan data tersebut. Jika ingin mengambil data dari Google Spreadsheet, Anda perlu mengkueri spreadsheet untuk mengambil data yang akan dibuat diagramnya:

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

Ini berfungsi karena Google Spreadsheet mendukung bahasa kueri Google Charts untuk mengurutkan dan memfilter data; setiap sistem yang mendukung bahasa kueri dapat digunakan sebagai sumber data.

Perhatikan bahwa diagram tidak dapat menggunakan hak istimewa orang yang melihatnya tanpa otorisasi eksplisit. Spreadsheet harus dapat dilihat oleh semua orang atau halaman harus secara eksplisit memperoleh kredensial pengguna akhir seperti yang didokumentasikan di bagian Otorisasi pada halaman ini.

Untuk menggunakan Google Spreadsheet sebagai sumber data, Anda memerlukan URL-nya:

  1. Buka spreadsheet yang sudah ada. Spreadsheet ini harus memiliki format yang diharapkan oleh visualisasi Anda, dan hak istimewa melihat spreadsheet harus ditetapkan dengan benar. (Lihat hak istimewa "Publik di web" atau "Siapa saja yang memiliki link" adalah yang paling mudah, dan petunjuk di bagian ini mengasumsikan spreadsheet yang disiapkan dengan cara ini. Anda dapat membatasi dengan menjadikan spreadsheet "Pribadi" dan memberi akses ke Akun Google perorangan, tetapi Anda harus mengikuti petunjuk otorisasi di bawah).
  2. Salin URL dari browser Anda. Lihat Rentang Sumber Kueri untuk mengetahui detail tentang cara memilih rentang tertentu.
  3. Berikan URL ke google.visualization.Query(). Kueri ini mendukung parameter opsional berikut:
    • headers=N: Menentukan jumlah baris yang merupakan baris header, dengan N adalah bilangan bulat nol atau lebih besar. Ini akan dikecualikan dari data dan ditetapkan sebagai label kolom dalam tabel data. Jika Anda tidak menentukan parameter ini, spreadsheet akan memperkirakan jumlah baris yang merupakan baris header. Perhatikan bahwa jika semua kolom Anda merupakan data string, spreadsheet mungkin mengalami kesulitan dalam menentukan baris mana yang merupakan baris header tanpa parameter ini.
    • gid=N: Menentukan sheet dalam dokumen multi-sheet yang akan ditautkan, jika Anda tidak menautkan ke sheet pertama. N adalah nomor ID sheet. Anda dapat mengetahui nomor ID dengan membuka versi sheet tersebut yang dipublikasikan dan mencari parameter gid=N di URL. Selain parameter ini, Anda juga dapat menggunakan parameter sheet. Gotcha: Google Spreadsheet dapat mengatur ulang parameter gid di URL saat dilihat di browser; jika menyalin dari browser, pastikan semua parameter berada sebelum tanda # URL. Contoh: gid=1545912003.
    • sheet=sheet_name: Menentukan sheet dalam dokumen multi-sheet yang Anda tautkan, jika Anda tidak menautkan ke sheet pertama. sheet_name adalah nama tampilan sheet. Contoh: sheet=Sheet5.

Berikut ini contoh lengkapnya:

Berikut dua cara untuk menggambar diagram ini, satu menggunakan parameter gid dan yang lainnya menggunakan parameter sheet. Memasukkan salah satu URL tersebut di browser akan memberikan hasil/data yang sama untuk diagram.

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

Rentang Sumber Kueri

URL sumber kueri menentukan bagian spreadsheet yang akan digunakan dalam kueri: sel tertentu, rentang sel, baris, atau kolom, atau keseluruhan spreadsheet. Tentukan rentang menggunakan sintaksis "range=<range_expr>", misalnya:

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

Berikut ini beberapa contoh yang menunjukkan sintaksis tersebut:

  • A1:B10 - Rentang dari sel A1 sampai B10
  • 5:7 - Baris 5-7
  • D:F - Kolom D-F
  • A:A70 - 70 sel pertama di kolom A
  • A70:A - Kolom A dari baris 70 sampai akhir
  • B5:5 - B5 hingga akhir baris 5
  • D3:D - D3 hingga akhir kolom D
  • C:C10 - Dari awal kolom C hingga C10

Otorisasi

Google Spreadsheet memerlukan kredensial pengguna akhir untuk mengakses spreadsheet pribadi melalui Google Visualization API ("/tq requests").

Catatan: Spreadsheet yang dibagikan dengan "siapa saja yang memiliki link dapat melihat" tidak mewajibkan kredensial. Mengubah setelan berbagi spreadsheet jauh lebih mudah daripada menerapkan otorisasi.

Jika berbagi link bukan solusi yang tepat, developer harus mengubah kode mereka agar meneruskan kredensial OAuth 2.0 yang diotorisasi untuk cakupan Google Sheets API (https://www.googleapis.com/auth/spreadsheets).

Latar belakang selengkapnya tentang OAuth 2.0 tersedia di artikel Menggunakan OAuth 2.0 untuk Mengakses Google API

Contoh: Menggunakan OAuth untuk mengakses /gviz/tq

Prasyarat: Dapatkan Client-ID dari Google Developers Console

Petunjuk yang lebih mendetail untuk melakukan integrasi dengan Identity Platform Google dapat ditemukan di bagian Login dengan Google serta Membuat project dan client ID Konsol API Google.

Untuk memperoleh token OAuth bagi pengguna akhir, Anda harus terlebih dahulu mendaftarkan project ke Konsol Google dan mendapatkan Client-ID.

  1. Dari konsol developer, buat client ID OAuth yang baru.
  2. Pilih Web application sebagai jenis aplikasi Anda.
  3. Pilih nama apa pun; nama tersebut hanya untuk informasi Anda.
  4. Tambahkan nama domain Anda (dan domain uji coba) sebagai Asal JavaScript yang Sah.
  5. Biarkan Authorized redirect URI kosong.

Setelah mengklik Buat, salin client ID untuk referensi pada masa mendatang. Rahasia klien tidak diperlukan untuk latihan ini.

Perbarui situs Anda untuk mendapatkan kredensial OAuth.

Google menyediakan library gapi.auth yang sangat menyederhanakan proses mendapatkan kredensial OAuth. Contoh kode di bawah ini menggunakan library ini untuk mendapatkan kredensial (meminta otorisasi jika perlu) dan meneruskan kredensial yang dihasilkan ke endpoint /gviz/tq.

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

Setelah otorisasi berhasil, gapi.auth.getToken() akan menampilkan semua detail kredensial, termasuk access_token yang dapat ditambahkan ke permintaan /gviz/tq.

Untuk informasi selengkapnya tentang cara menggunakan library gapi untuk autentikasi, lihat:

Menggunakan cakupan drive.file

Contoh sebelumnya menggunakan cakupan Google Sheets API, yang memberikan akses baca dan tulis ke semua konten spreadsheet pengguna. Bergantung pada aplikasinya, proses ini mungkin lebih permisif daripada yang diperlukan. Untuk akses hanya baca, gunakan cakupan spreadsheets.readonly yang memberikan akses hanya baca ke sheet pengguna dan propertinya.

Cakupan drive.file (https://www.googleapis.com/auth/drive.file) hanya memberikan akses ke file yang dibuka oleh pengguna secara eksplisit dengan pemilih file Google Drive, yang diluncurkan melalui Picker API.

Menggunakan Pemilih akan mengubah alur aplikasi Anda. Alih-alih menempelkan URL atau memiliki spreadsheet hard code seperti pada contoh di atas, pengguna harus menggunakan dialog Pemilih untuk memilih spreadsheet yang mereka inginkan untuk diakses oleh halaman Anda. Ikuti contoh Pemilih "Hello World", menggunakan google.picker.ViewId.SPREADSHEETS sebagai pengganti google.picker.ViewId.PHOTOS.