Google Spreadsheet

Halaman ini menjelaskan cara menggunakan Google Chart dengan Google Spreadsheet.

Pengantar

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

Metode apa pun yang Anda pilih, diagram akan berubah setiap kali spreadsheet dasar berubah.

Menyematkan Diagram di Spreadsheet

Menyertakan diagram dalam spreadsheet itu mudah. Dari toolbar Spreadsheet, pilih "Sisipkan", lalu "Diagram", dan Anda dapat memilih jenis diagram serta memilih berbagai opsi:

Membuat Diagram dari Spreadsheet Terpisah

Biasanya, pengguna membuat Google Chart dengan mengisi tabel data dan menggambar diagram menggunakan data tersebut. Jika ingin mengambil data dari Google Spreadsheet, Anda akan membuat kueri 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 Chart untuk mengurutkan dan memfilter data; semua 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 siapa saja 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 harus memiliki hak istimewa penayangan yang ditetapkan dengan benar. (Lihat hak istimewa "Publik di web" atau "Siapa saja yang memiliki link" akan menjadi cara termudah, dan petunjuk di bagian ini mengasumsikan spreadsheet yang telah disiapkan dengan cara ini. Anda dapat membatasi dengan membiarkan spreadsheet "Pribadi" dan memberikan akses ke akun Google individual, tetapi Anda harus mengikuti petunjuk otorisasi di bawah).
2. Salin URL dari browser. Lihat Rentang Sumber Kueri untuk mengetahui detail tentang memilih rentang tertentu.
3. Berikan URL ke google.visualization.Query(). Kueri mendukung parameter opsional berikut:
   • headers=N: Menentukan jumlah baris yang merupakan baris header, dengan N adalah bilangan bulat nol atau yang lebih besar. Ini akan dikecualikan dari data dan ditetapkan sebagai label kolom di tabel data. Jika Anda tidak menentukan parameter ini, spreadsheet akan menebak jumlah baris yang merupakan baris header. Perhatikan bahwa jika semua kolom Anda berupa data string, spreadsheet mungkin kesulitan menentukan baris mana yang merupakan baris header tanpa parameter ini.
   • gid=N: Menentukan sheet di dokumen multi-sheet yang akan ditautkan, jika Anda tidak menautkan ke sheet pertama. N adalah nomor ID sheet. Anda dapat mempelajari nomor ID dengan membuka versi yang dipublikasikan dari sheet tersebut dan mencari parameter gid=N di URL. Anda juga dapat menggunakan parameter sheet sebagai ganti parameter ini. Gotcha: Google Spreadsheet dapat mengatur ulang parameter gid di URL saat dilihat di browser; jika menyalin dari browser, pastikan semua parameter 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 contoh lengkapnya:

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

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

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

Otorisasi

Jika berbagi link bukan merupakan solusi yang memungkinkan, developer harus mengubah kodenya untuk meneruskan kredensial OAuth 2.0 yang diotorisasi untuk cakupan Google Sheets API (https://www.googleapis.com/auth/spreadsheet).

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

Contoh: Menggunakan OAuth untuk mengakses /gviz/tq

Prasyarat: Dapatkan ID Klien dari Google Developer Console

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

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

1. Dari konsol developer, buat client ID OAuth baru.
2. Pilih Web application sebagai jenis aplikasi Anda.
3. Pilih nama apa pun; nama ini hanya untuk informasi Anda.
4. Tambahkan nama domain (dan domain pengujian apa pun) sebagai Asal JavaScript yang Diotorisasi.
5. Biarkan URI pengalihan yang diotorisasi kosong.

Setelah mengklik Buat, salin client ID untuk referensi di 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 menggunakan library ini untuk memperoleh kredensial (meminta otorisasi jika diperlukan) dan meneruskan kredensial yang dihasilkan ke endpoint /gviz/tq.

<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>

// 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 mengetahui informasi selengkapnya tentang cara menggunakan library gapi untuk autentikasi, lihat:

• Autentikasi menggunakan Library Klien Google API untuk JavaScript
• Cara menggunakan CORS untuk mengakses Google API

Menggunakan cakupan drive.file

Contoh sebelumnya menggunakan cakupan API Google Spreadsheet, yang memberikan akses baca dan tulis ke semua konten spreadsheet pengguna. Bergantung pada aplikasinya, opsi ini mungkin lebih longgar daripada yang diperlukan. Untuk akses hanya baca, gunakan cakupan spreadsheet.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 secara eksplisit oleh pengguna dengan pemilih file Google Drive, yang diluncurkan melalui Picker API.

Menggunakan Pemilih akan mengubah alur aplikasi Anda. Pengguna tidak perlu menempelkan URL atau memiliki spreadsheet hard code seperti pada contoh di atas. Oleh karena itu, pengguna harus menggunakan dialog Pemilih untuk memilih spreadsheet mana yang dapat diakses oleh halaman Anda. Ikuti contoh "Pemilihan Dunia" Pemilih, menggunakan google.picker.ViewId.SPREADSHEETS sebagai pengganti google.picker.ViewId.PHOTOS.