Toolbar

  1. Ringkasan
  2. Contoh
  3. Penggunaan
    1. Jenis Output
    2. Sintaksis
  4. Kebijakan Data

Ringkasan

Anda dapat menambahkan elemen toolbar ke visualisasi apa pun agar pengguna dapat mengekspor data yang mendasarinya ke file CSV atau tabel HTML, atau memberikan kode untuk menyematkan visualisasi ke halaman web atau gadget arbitrer.

Oleh: Google

Contoh

Pilih salah satu opsi di toolbar.

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['corechart']});
    var visualization;

    function draw() {
      drawVisualization();
      drawToolbar();
    }

    function drawVisualization() {
      var container = document.getElementById('visualization_div');
      visualization = new google.visualization.PieChart(container);
      new google.visualization.Query('https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA').
          send(queryCallback);
    }

    function queryCallback(response) {
      visualization.draw(response.getDataTable(), {is3D: true});
    }

    function drawToolbar() {
      var components = [
          {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1}},
          {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1},
           style: 'width: 800px; height: 700px; border: 3px solid purple;'}
      ];

      var container = document.getElementById('toolbar_div');
      google.visualization.drawToolbar(container, components);
    };

    google.charts.setOnLoadCallback(draw);
  </script>
</head>
<body>
  <div id="visualization_div" style="width: 270px; height: 200px;"></div>
  <div id="toolbar_div"></div>
</body>
</html>

Penggunaan

Tambahkan toolbar ke halaman Anda dengan memanggil metode google.visualization.drawToolbar(), yang mengisinya dengan jenis ekspor yang diizinkan dan data yang diperlukan untuk masing-masing ekspor.

Untuk menggunakan toolbar, visualisasi Anda harus mendapatkan datanya dari URL; Anda tidak dapat meneruskan objek DataTable atau DataView yang diisi secara manual. Anda akan meneruskan URL data yang digunakan untuk mengisi visualisasi ke dalam metode drawToolbar().

Jika ingin menyediakan komponen iGoogle atau iFrame yang dapat disematkan yang menyimpan gadget, Anda harus memiliki URL untuk versi visualisasi gadget.

Jenis Output

Toolbar dapat menawarkan pilihan satu atau beberapa jenis output berikut kepada pengguna, bergantung pada cara Anda mengonfigurasi toolbar dalam metode drawToolbar():

  • Versi CSV data sederhana (yang akan dirender oleh browser atau ditawarkan untuk didownload dan disimpan, bergantung pada konfigurasi browser Anda, dan/atau
  • Tabel HTML yang menyimpan data, dibuka di jendela browser baru, dan/atau
  • Kode <iframe> HTML untuk menyematkan visualisasi ini di halaman web, dan/atau
  • Tautan ke halaman yang memungkinkan pengguna menyematkan gadget ini pada halaman iGoogle mereka.

Sintaksis

google.visualization.drawToolbar(container, components)

Parameter

penampung
Nama sebutan channel untuk elemen DOM di halaman. API akan menggambar toolbar ke dalam elemen ini. Ini mirip dengan parameter penampung untuk visualisasi standar. Anda harus meletakkan {i>toolbar<i} berdekatan dengan visualisasi yang menggunakannya.
komponen
Array objek, masing-masing menjelaskan format yang menjadi tujuan ekspor data, atau visualisasi. Toolbar akan menampilkan opsi kepada pengguna dalam urutan yang ditambahkan ke array. Setiap objek memiliki properti jenis yang menjelaskan format, dan satu atau beberapa properti tambahan, bergantung pada jenisnya:
  • type: 'csv' - Opsi ini mengekspor data ke file nilai yang dipisahkan koma. Dialog 'simpan sebagai' akan terbuka di browser.
    • sumber data: 'string' - URL sumber data.
  • type: html' - Opsi ini mengekspor data ke tabel HTML. Halaman dengan tabel data akan terbuka di jendela baru di browser.
    • datasource: String URL sumber data.
  • type: igoogle - Opsi ini memungkinkan pengguna menambahkan visualisasi ke halaman iGoogle mereka. Halaman 'tambahkan ke iGoogle' akan terbuka di browser. Gunakan ini hanya jika visualisasi tersedia dalam versi gadget.
    • datasource: String URL sumber data.
    • gadget: String URL xml versi gadget. Perhatikan bahwa visualisasi yang dikaitkan dengan toolbar tidak harus versi gadget.
    • userprefs: Objek preferensi opsional yang sesuai untuk visualisasi ini, yang menentukan preferensi visualisasi.
  • type: htmlcode - Opsi ini membuat blok kode HTML yang dapat disematkan pengguna di halaman web untuk menampilkan visualisasi di dalam iframe. Jendela pop-up dengan elemen HTML yang tepat dari gadget akan terbuka pada browser.Gunakan ini hanya jika visualisasi tersedia dalam versi gadget.
    • datasource: String URL sumber data.
    • widget: String URL xml gadget.
    • userprefs: Objek preferensi opsional yang sesuai untuk visualisasi ini, yang menentukan preferensi visualisasi.
    • style: String opsional untuk gaya iframe. Misalnya: 'lebar: 300px; tinggi: 500px;'.

Contoh

function drawToolbar() {
  var components = [
      {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
       userprefs: {'3d': 1}},
      {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml'}
  ];

  var container = document.getElementById('toolbar_div');
  google.visualization.drawToolbar(container, components);
};

Kebijakan Data

Semua kode dan data diproses dan dirender di browser. Tidak ada data yang dikirim ke server mana pun. Untuk beberapa komponen, data diambil dari sumber data masing-masing yang diberikan pada toolbar.

Pelokalan

Toolbar saat ini hanya mendukung bahasa Inggris AS.