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

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

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