Referensi GoogleVisual API

Halaman ini mencantumkan objek yang diekspos oleh Google Visualization API, dan metode standar yang diekspos oleh semua visualisasi.

Catatan: Namespace Google Visualization API adalah google.visualization.*

Class DataTable

Menyatakan tabel nilai dua dimensi yang dapat berubah. Untuk membuat salinan hanya baca DataTable (difilter secara opsional untuk menampilkan nilai, baris, atau kolom tertentu), buat DataView.

Setiap kolom diberi jenis data, serta beberapa properti opsional termasuk ID, label, dan string pola.

Selain itu, Anda dapat menetapkan properti kustom (pasangan nama/nilai) ke sel, baris, kolom, atau seluruh tabel. Beberapa visualisasi mendukung properti khusus tertentu; misalnya Visualisasi tabel mendukung properti sel yang disebut 'style', yang memungkinkan Anda menetapkan string gaya CSS inline ke sel tabel yang dirender. Visualisasi harus menjelaskan properti kustom apa pun yang didukungnya dalam dokumentasinya.

Lihat juga: QueryResponse.getDataTable

Konstruktor

Sintaksis

DataTable(opt_data, opt_version)

data_opt

[Opsional] Data yang digunakan untuk melakukan inisialisasi tabel. Ini dapat berupa JSON yang ditampilkan dengan memanggil DataTable.toJSON() pada tabel yang terisi, atau objek JavaScript yang berisi data yang digunakan untuk menginisialisasi tabel. Struktur objek literal JavaScript dijelaskan di sini. Jika parameter ini tidak disediakan, tabel data baru yang kosong akan ditampilkan.

versi_pengoptimalan

[Opsional] Nilai numerik yang menentukan versi protokol kabel yang digunakan. Ini hanya digunakan oleh implementasi Sumber Data Alat Diagram. Versi saat ini adalah 0.6.

Detail

Objek DataTable digunakan untuk menyimpan data yang diteruskan ke visualisasi. DataTable adalah tabel dua dimensi dasar. Semua data di setiap kolom harus memiliki jenis data yang sama. Setiap kolom memiliki deskripsi yang menyertakan jenis datanya, label untuk kolom tersebut (yang dapat ditampilkan melalui visualisasi), dan ID, yang dapat digunakan untuk merujuk ke kolom tertentu (sebagai alternatif untuk menggunakan indeks kolom). Objek DataTable juga mendukung peta properti arbitrer yang ditetapkan ke nilai tertentu, baris, kolom, atau keseluruhan DataTable. Visualisasi dapat menggunakannya untuk mendukung fitur tambahan; misalnya, Visualisasi tabel menggunakan properti khusus untuk memungkinkan Anda menetapkan nama atau gaya class arbitrer ke setiap sel.

Setiap sel dalam tabel memiliki nilai. Sel dapat memiliki nilai null, atau nilai dari jenis yang ditentukan oleh kolomnya. Sel dapat mengambil data versi "yang diformat"; ini adalah versi string data, yang diformat untuk ditampilkan oleh visualisasi. Visualisasi dapat (tetapi tidak diwajibkan) menggunakan versi berformat untuk ditampilkan, tetapi akan selalu menggunakan data itu sendiri untuk pengurutan atau penghitungan apa pun yang dilakukannya (seperti menentukan posisi titik pada grafik). Contohnya dapat menetapkan nilai "rendah" "sedang", dan "tinggi" sebagai nilai berformat ke nilai sel numerik 1, 2, dan 3.

Untuk menambahkan baris data setelah memanggil konstruktor, Anda dapat memanggil addRow() untuk satu baris, atau addRows() untuk beberapa baris. Anda juga dapat menambahkan kolom dengan memanggil metode addColumn(). Ada juga metode penghapusan untuk baris dan kolom, tetapi daripada menghapus baris atau kolom, pertimbangkan untuk membuat DataView yang merupakan tampilan selektif dari DataTable.

Jika Anda mengubah nilai dalam DataTable setelah diteruskan ke metode draw() visualisasi, perubahan tersebut tidak akan langsung mengubah diagram. Anda harus memanggil draw() lagi untuk mencerminkan perubahan apa pun.

Catatan: Google Chart tidak menjalankan validasi pada tabel data. (Jika ya, diagram akan lebih lambat dirender.) Jika Anda memberikan angka dengan kolom yang mengharapkan string, atau sebaliknya, Google Chart akan melakukan upaya terbaiknya untuk menafsirkan nilai dengan cara yang sesuai, tetapi tidak akan menandai kesalahan.

Contoh berikut menunjukkan pembuatan instance dan mengisi DataTable dengan string literal, dengan data yang sama seperti yang ditunjukkan dalam contoh JavaScript di atas:

var dt = new google.visualization.DataTable({
    cols: [{id: 'task', label: 'Task', type: 'string'},
           {id: 'hours', label: 'Hours per Day', type: 'number'}],
    rows: [{c:[{v: 'Work'}, {v: 11}]},
           {c:[{v: 'Eat'}, {v: 2}]},
           {c:[{v: 'Commute'}, {v: 2}]},
           {c:[{v: 'Watch TV'}, {v:2}]},
           {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]
    }, 0.6);

Contoh berikut membuat DataTable baru yang kosong, lalu mengisinya secara manual dengan data yang sama seperti di atas:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', {v:7, f:'7.000'}]
]);

Metode

data.addRow();  // Add an empty row
data.addRow(['Hermione', new Date(1999,0,1)]); // Add a row with a string and a date value.

// Add a row with two cells, the second with a formatted value.
data.addRow(['Hermione', {v: new Date(1999,0,1),
                          f: 'January First, Nineteen ninety-nine'}
]);

data.addRow(['Col1Val', null, 'Col3Val']); // Second column is undefined.
data.addRow(['Col1Val', , 'Col3Val']);     // Same as previous.

data.addRows([
  ['Ivan', new Date(1977,2,28)],
  ['Igor', new Date(1962,7,5)],
  ['Felix', new Date(1983,11,17)],
  ['Bob', null] // No date set for Bob.
]);

var rowInds = data.getSortedRows([{column: 2}]);
for (var i = 0; i < rowInds.length; i++) {
  var v = data.getValue(rowInds[i], 2);
}

{"cols":[{"id":"Col1","label":"","type":"date"}],
 "rows":[
   {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]},
   {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]}
 ]
}

Format Parameter data Literal JavaScript Konstruktor

Anda dapat menginisialisasi DataTable dengan meneruskan objek literal string JavaScript ke dalam parameter data. Kita akan menyebut objek ini sebagai objek data. Anda dapat membuat kode untuk objek ini secara manual, sesuai dengan deskripsi di bawah, atau Anda dapat menggunakan library Python helper jika mengetahui cara menggunakan Python, dan situs Anda dapat menggunakannya. Namun, jika Anda ingin membuat objek secara manual, bagian ini akan menjelaskan sintaksisnya.

Pertama, mari lihat contoh objek JavaScript sederhana yang mendeskripsikan tabel dengan tiga baris dan tiga kolom (String, Angka, dan Jenis tanggal):

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ],
  p: {foo: 'hello', bar: 'world!'}
}

Sekarang, mari kita jelaskan sintaksisnya:

Objek data terdiri dari dua properti level atas yang diperlukan, cols dan rows, serta properti p opsional yang merupakan peta nilai arbitrer.

Catatan: Semua nama properti dan konstanta string yang ditampilkan peka huruf besar/kecil. Selain itu, properti yang dideskripsikan dengan nilai string harus diapit dengan tanda kutip. Misalnya, jika Anda ingin menetapkan properti jenis sebagai angka, properti tersebut akan dinyatakan seperti ini: type: 'number' tetapi nilai itu sendiri, sebagai angka, akan dinyatakan seperti ini: v: 42

Properti cols

cols adalah array objek yang menjelaskan ID dan jenis setiap kolom. Setiap properti adalah objek dengan properti berikut (peka huruf besar/kecil):

• type [Wajib] Jenis data data di kolom. Mendukung nilai string berikut (contohnya termasuk properti v:, yang dijelaskan nanti):
  • 'boolean' - Nilai boolean JavaScript ('true' atau 'false'). Contoh nilai: v:'true'
  • 'number' - Nilai angka JavaScript. Contoh nilai: v:7 , v:3.14, v:-55
  • 'string' - Nilai string JavaScript. Nilai contoh: v:'hello'
  • 'date' - Objek Tanggal JavaScript (bulan berbasis nol), dengan waktu yang terpotong. Contoh nilai: v:new Date(2008, 0, 15)
  • 'datetime' - Objek Tanggal JavaScript termasuk waktu. Contoh nilai: v:new Date(2008, 0, 15, 14, 30, 45)
  • 'timeofday' - Array dari tiga angka dan angka keempat opsional, yang mewakili jam (0 menunjukkan tengah malam), menit, detik, dan milidetik opsional. Contoh nilai: v:[8, 15, 0], v: [6, 12, 1, 144]
• id [Opsional] ID String untuk kolom. Harus unik di tabel. Gunakan karakter alfanumerik dasar, sehingga halaman host tidak memerlukan proses escape yang elegan untuk mengakses kolom di JavaScript. Berhati-hatilah agar tidak memilih kata kunci JavaScript. Contoh: id:'col_1'
• label [Opsional] Nilai string yang ditampilkan beberapa visualisasi untuk kolom ini. Contoh: label:'Height'
• pattern [Opsional] Pola string yang digunakan oleh sumber data untuk memformat nilai kolom numerik, tanggal, atau waktu. Ini hanya untuk referensi; Anda mungkin tidak perlu membaca polanya, dan pola ini tidak harus ada. Klien Visualisasi Google tidak menggunakan nilai ini (baca nilai terformat sel). Jika DataTable berasal dari sumber data sebagai respons terhadap kueri dengan klausa format, pola yang Anda tetapkan dalam klausa tersebut mungkin akan ditampilkan dalam nilai ini. Standar pola yang direkomendasikan adalah ICU DecimalFormat dan SimpleDateFormat .
• p [Opsional] Objek yang merupakan peta nilai kustom yang diterapkan ke sel. Nilai ini dapat berupa jenis JavaScript apa pun. Jika visualisasi Anda mendukung properti tingkat sel apa pun, visualisasi ini akan mendeskripsikannya; jika tidak, properti ini akan diabaikan. Contoh: p:{style: 'border: 1px solid green;'}.

Contoh cols

cols: [{id: 'A', label: 'NEW A', type: 'string'},
       {id: 'B', label: 'B-label', type: 'number'},
       {id: 'C', label: 'C-label', type: 'date'}]

rows Properti

Properti rows menyimpan array objek baris.

Setiap objek baris memiliki satu properti wajib yang disebut c, yang merupakan array sel di baris tersebut. Class ini juga memiliki properti p opsional yang menentukan peta nilai kustom arbitrer untuk ditetapkan ke seluruh baris. Jika visualisasi Anda mendukung properti tingkat baris apa pun, properti tersebut akan dijelaskan; jika tidak, properti ini akan diabaikan.

Objek Sel

Setiap sel dalam tabel dijelaskan oleh objek dengan properti berikut:

• v [Opsional] Nilai sel. Jenis data harus cocok dengan jenis data kolom. Jika selnya null, properti v harus null, meskipun masih dapat memiliki properti f dan p.
• f [Opsional] Versi string dari nilai v, yang diformat untuk ditampilkan. Biasanya nilainya akan cocok, meskipun tidak perlu, sehingga jika Anda menentukan Date(2008, 0, 1) untuk v, Anda harus menentukan "1 Januari 2008" atau beberapa string tersebut untuk properti ini. Nilai ini tidak dibandingkan dengan nilai v. Visualisasi tidak akan menggunakan nilai ini untuk penghitungan, hanya sebagai label untuk tampilan. Jika dihilangkan, versi string v akan otomatis dibuat menggunakan pemformat default. Nilai f dapat diubah menggunakan formatter Anda sendiri, atau ditetapkan dengan setFormattedValue() atau setCell(), atau diambil dengan getFormattedValue().
• p [Opsional] Objek yang merupakan peta nilai kustom yang diterapkan ke sel. Nilai ini dapat berupa jenis JavaScript apa pun. Jika visual Anda mendukung properti tingkat sel, visualisasi tersebut akan mendeskripsikannya. Properti ini dapat diambil dengan metode getProperty() dan getProperties(). Contoh: p:{style: 'border: 1px solid green;'}.

Sel dalam array baris harus dalam urutan yang sama seperti deskripsi kolomnya di cols. Untuk menunjukkan sel null, Anda dapat menentukan null, mengosongkan sel dalam array, atau menghapus anggota array di akhir. Jadi, untuk menunjukkan baris dengan null untuk dua sel pertama, Anda dapat menentukan [ , , {cell_val}] atau [null, null, {cell_val}].

Berikut adalah objek tabel contoh dengan tiga kolom, yang diisi dengan tiga baris data:

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ]
}

p Properti

Properti p level tabel adalah peta nilai kustom yang diterapkan ke seluruh DataTable. Nilai ini dapat berupa jenis JavaScript apa pun. Jika mendukung properti tingkat tabel, visualisasi Anda akan mendeskripsikannya; jika tidak, properti ini akan tersedia untuk digunakan aplikasi. Contoh: p:{className: 'myDataTable'}.

Class DataView

Tampilan hanya baca dari DataTable yang mendasarinya. DataView memungkinkan pemilihan hanya subkumpulan kolom dan/atau baris. Hal ini juga memungkinkan pengurutan ulang kolom/baris, dan menduplikasi kolom/baris.

Tampilan adalah jendela aktif pada DataTable yang mendasarinya, bukan snapshot statis data. Namun, Anda tetap harus berhati-hati saat mengubah struktur tabel itu sendiri, seperti yang dijelaskan di sini:

• Menambahkan atau menghapus kolom dari tabel pokok tidak akan tercermin oleh tampilan, dan dapat menyebabkan perilaku tidak terduga dalam tampilan; Anda harus membuat DataView baru dari DataTable untuk menerapkan perubahan ini.
• Menambahkan atau menghapus baris dari tabel yang mendasarinya aman dan perubahan akan segera diterapkan ke tampilan (tetapi Anda harus memanggil draw() di visualisasi apa pun setelah perubahan ini untuk merender kumpulan baris baru). Perhatikan bahwa jika tampilan Anda telah memfilter baris dengan memanggil salah satu metode setRows() or hideRows(), lalu menambahkan atau menghapus baris dari tabel pokok, perilaku tidak diharapkan; Anda harus membuat DataView baru untuk mencerminkan tabel baru.
• Perubahan nilai sel dalam sel yang ada akan aman, dan perubahan akan langsung diterapkan ke DataView (tetapi Anda harus memanggil draw() pada visualisasi apa pun setelah perubahan ini agar nilai sel baru dirender).

Anda juga dapat membuat DataView dari DataView lain. Perhatikan bahwa setiap kali tabel atau tampilan dasar disebutkan, tabel ini mengacu pada level tepat di bawah tingkat ini. Dengan kata lain, objek ini mengacu pada objek data yang digunakan untuk membuat DataView ini.

DataView juga mendukung kolom kalkulasi; ini adalah kolom yang nilainya dihitung dengan cepat menggunakan fungsi yang Anda berikan. Jadi, misalnya, Anda dapat menyertakan kolom yang merupakan jumlah dari dua kolom sebelumnya, atau kolom yang menghitung dan menampilkan kuartal kalender tanggal dari kolom lain. Lihat setColumns() untuk detail selengkapnya.

Jika Anda memodifikasi DataView dengan menyembunyikan atau menampilkan baris atau kolom, visualisasi tidak akan terpengaruh hingga Anda memanggil draw() pada visualisasi lagi.

Anda dapat menggabungkan DataView.getFilteredRows() dengan DataView.setRows() untuk membuat DataView dengan subset data yang menarik, seperti yang ditunjukkan di sini:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));
data.setCell(3, 0, 'Frank');
data.setCell(3, 1, new Date(2007, 11, 28));
data.setCell(4, 0, 'Floyd');
data.setCell(4, 1, new Date(2005, 3, 13));
data.setCell(5, 0, 'Fritz');
data.setCell(5, 1, new Date(2007, 9, 2));

// Create a view that shows everyone hired since 2007.
var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{column: 1, minValue: new Date(2007, 0, 1)}]));
var table = new google.visualization.Table(document.getElementById('test_dataview'));
table.draw(view, {sortColumn: 1});

Konstruktor

Ada dua cara untuk membuat instance DataView baru:

Konstruktor 1

var myView = new google.visualization.DataView(data)

data

DataTable atau DataView yang digunakan untuk menginisialisasi tampilan. Secara default, tampilan berisi semua kolom dan baris di tabel atau tampilan data pokok dalam urutan asli. Untuk menyembunyikan atau menampilkan baris atau kolom dalam tampilan ini, panggil metode set...() atau hide...() yang sesuai.

Lihat juga:

setColumns(), hideColumns(), setRows(), hideRows().

Konstruktor 2

Konstruktor ini membuat DataView baru dengan menetapkan DataView serial ke DataTable. Proses ini membantu Anda membuat ulang DataView yang diserialisasi menggunakan DataView.toJSON().

var myView = google.visualization.DataView.fromJSON(data, viewAsJson)

data

Objek DataTable yang Anda gunakan untuk membuat DataView, tempat Anda memanggil DataView.toJSON(). Jika tabel ini berbeda dari tabel asli, Anda akan mendapatkan hasil yang tidak dapat diprediksi.

lihatAsJson

String JSON yang ditampilkan oleh DataView.toJSON(). Ini adalah deskripsi baris yang akan ditampilkan atau disembunyikan dari DataTable data.

Metode

// Show some columns directly from the underlying data.
// Shows column 3 twice.
view.setColumns([3, 4, 3, 2]);

// Underlying table has a column specifying a value in centimeters.
// The view imports this directly, and creates a calculated column
// that converts the value into inches.
view.setColumns([1,{calc:cmToInches, type:'number', label:'Height in Inches'}]);
function cmToInches(dataTable, rowNum){
  return Math.floor(dataTable.getValue(rowNum, 1) / 2.54);
}

Class ChartWrapper

Class ChartWrapper digunakan untuk menggabungkan diagram Anda dan menangani semua kueri pemuatan, gambar, dan Sumber data untuk diagram Anda. Class ini mengekspos metode praktis untuk menetapkan nilai pada diagram dan menggambarnya. Class ini menyederhanakan pembacaan dari sumber data, karena Anda tidak perlu membuat pengendali callback kueri. Anda juga dapat menggunakannya untuk menyimpan diagram dengan mudah untuk digunakan kembali.

Bonus lain dari penggunaan ChartWrapper adalah Anda dapat mengurangi jumlah pemuatan library menggunakan pemuatan dinamis. Selain itu, Anda tidak perlu memuat paket secara eksplisit karena ChartWrapper akan menangani pencarian dan pemuatan paket diagram untuk Anda. Lihat contoh di bawah untuk mendapatkan detailnya.

Namun, ChartWrapper saat ini hanya menyebarkan subset peristiwa yang ditampilkan oleh diagram: pilih, siap, dan error. Peristiwa lain tidak dikirimkan melalui instance ChartWrapper; untuk mendapatkan peristiwa lain, Anda harus memanggil getChart() dan berlangganan peristiwa secara langsung pada handle diagram, seperti yang ditunjukkan di sini:

var wrapper;
function drawVisualization() {

  // Draw a column chart
  wrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                [700, 300, 400, 500, 600, 800]],
    options: {'title': 'Countries'},
    containerId: 'visualization'
  });

  // Never called.
  google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler);

  // Must wait for the ready event in order to
  // request the chart and subscribe to 'onmouseover'.
  google.visualization.events.addListener(wrapper, 'ready', onReady);

  wrapper.draw();

  // Never called
  function uselessHandler() {
    alert("I am never called!");
  }

  function onReady() {
    google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler);
  }

  // Called
  function usefulHandler() {
    alert("Mouseover event!");
  }
}

Konstruktor

ChartWrapper(opt_spec)

spesifikasi_pengoptimalan

[Opsional] - Objek JSON yang menentukan diagram atau versi string serial dari objek tersebut. Format objek ini ditampilkan dalam dokumentasi DrawChart(). Jika tidak ditentukan, Anda harus menetapkan semua properti yang sesuai menggunakan metode set... yang diekspos oleh objek ini.

Metode

ChartWrapper mengekspos metode tambahan berikut:

Peristiwa

Objek ChartWrapper menampilkan peristiwa berikut. Perhatikan bahwa Anda harus memanggil ChartWrapper.draw() sebelum peristiwa apa pun ditampilkan.

Contoh

Dua cuplikan berikut membuat diagram garis yang setara. Contoh pertama menggunakan notasi literal JSON untuk menentukan diagram; yang kedua menggunakan metode ChartWrapper untuk menetapkan nilai-nilai ini.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API Sample</title>
<!--
  One script tag loads all the required libraries!
-->
<script type="text/javascript"
      src='https://www.gstatic.com/charts/loader.js'></script>
<script>
  google.charts.load('current);
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    var wrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
       'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
       'containerId':'visualization',
       'query':'SELECT A,D WHERE D > 100 ORDER BY D',
       'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
       });
     wrap.draw();
  }
</script>
</head>
<body>
  <div id="visualization" style="height: 400px; width: 400px;"></div>
</body>
</html>

Diagram yang sama, kini menggunakan metode penyetel:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title>Google Visualization API Sample</title>
<!-- One script tag loads all the required libraries!
-->
<script type="text/javascript"
    src='https://www.gstatic.com/charts/loader.js'></script>
<script type="text/javascript">
  google.charts.load('current');
  google.charts.setOnLoadCallback(drawVisualization);
  function drawVisualization() {
    // Define the chart using setters:
    var wrap = new google.visualization.ChartWrapper();
    wrap.setChartType('LineChart');
    wrap.setDataSourceUrl('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');
    wrap.setContainerId('visualization');
    wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none'});
    wrap.draw();
  }
</script>
</head>
<body>
  <div id='visualization' style='height: 400px; width: 400px;'></div>
</body>
</html>

Class ChartEditor

Class ChartEditor digunakan untuk membuka kotak dialog dalam halaman yang memungkinkan pengguna menyesuaikan visualisasi dengan cepat.

Untuk menggunakan ChartEditor:

1. Muat paket charteditor. Di google.charts.load(), muat paket 'charteditor'. Anda tidak perlu memuat paket untuk jenis diagram yang Anda render di editor; editor diagram akan memuat paket apa pun sesuai kebutuhan.
2. Buat objek ChartWrapper yang menentukan diagram yang dapat disesuaikan oleh pengguna. Diagram ini akan ditampilkan dalam dialog, dan pengguna menggunakan editor untuk mendesain ulang diagram, mengubah jenis diagram, atau bahkan mengubah data sumber.
3. Buat instance ChartEditor baru, dan daftar untuk memproses peristiwa "ok". Peristiwa ini dilempar saat pengguna mengklik tombol "OK" pada dialog. Setelah diterima, Anda harus memanggil ChartEditor.getChartWrapper() untuk mengambil diagram yang dimodifikasi pengguna.
4. Telepon ChartEditor.openDialog(), dengan meneruskan ChartWrapper. Tindakan ini akan membuka dialog. Tombol dialog memungkinkan pengguna menutup editor. Instance ChartEditor tersedia selama berada dalam cakupan; dan tidak otomatis dihancurkan setelah pengguna menutup dialog.
5. Untuk memperbarui diagram dalam kode, panggil setChartWrapper().

Metode

Opsi

Editor diagram mendukung opsi berikut:

Peristiwa

Editor diagram akan menampilkan peristiwa berikut:

Contoh

Kode contoh berikut membuka dialog editor diagram dengan diagram garis terisi. Jika pengguna mengklik "Oke", diagram yang diedit akan disimpan ke <div> yang ditentukan di halaman.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
    Google Visualization API Sample
  </title>
  <script type="text/javascript"
    src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['charteditor']});
  </script>
  <script type="text/javascript">
    google.charts.setOnLoadCallback(loadEditor);
    var chartEditor = null;

    function loadEditor() {
      // Create the chart to edit.
      var wrapper = new google.visualization.ChartWrapper({
         'chartType':'LineChart',
         'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
         'query':'SELECT A,D WHERE D > 100 ORDER BY D',
         'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
      });

      chartEditor = new google.visualization.ChartEditor();
      google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
      chartEditor.openDialog(wrapper, {});
    }

    // On "OK" save the chart to a <div> on the page.
    function redrawChart(){
      chartEditor.getChartWrapper().draw(document.getElementById('vis_div'));
    }

  </script>
</head>
<body>
  <div id="vis_div" style="height: 400px; width: 600px;"></div>
</body>
</html>

Metode Manipulasi Data

Namespace google.visualization.data menyimpan metode statis untuk menjalankan operasi seperti SQL pada objek DataTable, misalnya menggabungkan atau mengelompokkannya menurut nilai kolom.

Namespace google.visualization.data mengekspos metode berikut:

grup()

Mengambil objek DataTable yang terisi dan melakukan operasi GROUP BY seperti SQL, dengan menampilkan tabel berisi baris yang dikelompokkan berdasarkan nilai kolom yang ditentukan. Perhatikan bahwa tindakan ini tidak mengubah DataTable input.

Tabel yang ditampilkan mencakup satu baris untuk setiap kombinasi nilai di kolom kunci yang ditentukan. Setiap baris menyertakan kolom kunci, ditambah satu kolom dengan nilai kolom gabungan di semua baris yang cocok dengan kombinasi tombol tersebut (misalnya, jumlah atau jumlah semua nilai di kolom tertentu).

Namespace google.visualization.data menyertakan beberapa nilai agregasi yang berguna (misalnya, sum dan count), tetapi Anda dapat menentukannya sendiri (misalnya, standardDeviation atau secondHigh). Petunjuk tentang cara menentukan agregator Anda sendiri diberikan setelah deskripsi metode.

Sintaksis

google.visualization.data.group(data_table, keys, columns)

tabel_data

DataTable input. Ini tidak akan diubah dengan memanggil group().

kunci

Array angka dan/atau objek yang menentukan kolom yang akan dikelompokkan. Tabel hasil mencakup setiap kolom dalam array ini, serta setiap kolom dalam kolom. Jika berupa angka, ini adalah indeks kolom dari input DataTable yang akan dikelompokkan. Jika sebuah objek, objek tersebut akan menyertakan fungsi yang dapat mengubah kolom yang ditentukan (misalnya, menambahkan 1 ke nilai dalam kolom tersebut). Objek harus memiliki properti berikut:

• column - Angka yang merupakan indeks kolom dari dt untuk menerapkan transformasi.
• pengubah - Fungsi yang menerima satu nilai (nilai sel di kolom tersebut untuk setiap baris) dan menampilkan nilai yang diubah. Fungsi ini digunakan untuk mengubah nilai kolom untuk membantu dalam pengelompokan: misalnya, dengan memanggil fungsi whoQuarter yang menghitung kuartal dari kolom tanggal, sehingga API dapat mengelompokkan baris berdasarkan kuartal. Nilai yang dihitung akan ditampilkan dalam kolom kunci dalam tabel yang ditampilkan. Fungsi ini dapat dideklarasikan inline di dalam objek ini, atau dapat berupa fungsi yang Anda tentukan di tempat lain dalam kode Anda (harus dalam cakupan panggilan). API ini menyediakan satu fungsi pengubah sederhana; berikut petunjuknya tentang cara membuat fungsi Anda sendiri yang lebih berguna. Anda harus mengetahui jenis data yang dapat diterima oleh fungsi ini, dan memanggilnya hanya di kolom jenis tersebut. Anda juga harus mengetahui jenis nilai yang ditampilkan dari fungsi ini, dan mendeklarasikannya di properti type yang dijelaskan selanjutnya.
• jenis - Jenis yang ditampilkan oleh pengubah fungsi. Ini harus berupa nama jenis string JavaScript, misalnya: 'number' atau 'boolean'.
• label - [Opsional] Label string untuk menetapkan kolom ini di DataTable yang ditampilkan.
• id - [Opsional] ID string untuk menetapkan kolom ini dalam DataTable yang ditampilkan.

Contoh: [0], [0,2], [0,{column:1, modifier:myPlusOneFunc, type:'number'},2]

kolom

[Opsional] Memungkinkan Anda menentukan kolom, selain kolom kunci, yang akan disertakan dalam tabel output. Karena semua baris dalam grup baris dikompresi menjadi satu baris output, Anda harus menentukan nilai yang akan ditampilkan untuk grup baris tersebut. Misalnya, Anda dapat memilih untuk menampilkan nilai kolom dari baris pertama dalam kumpulan, atau rata-rata dari semua baris dalam grup tersebut. column adalah array objek, dengan properti berikut:

• column - Angka yang menentukan indeks kolom yang akan ditampilkan.
• agregasi - Fungsi yang menerima array semua nilai kolom ini dalam grup baris ini dan menampilkan satu nilai untuk ditampilkan di baris hasil. Nilai yang ditampilkan harus dari jenis yang ditentukan oleh properti type objek. Detail tentang pembuatan fungsi agregasi Anda sendiri diberikan di bawah ini. Anda harus mengetahui jenis data yang diterima oleh metode ini dan hanya memanggilnya pada kolom dari jenis yang sesuai. API ini menyediakan beberapa fungsi agregasi yang berguna. Lihat Fungsi Agregasi yang Diberikan di bawah untuk mengetahui daftar, atau Membuat fungsi agregasi untuk mempelajari cara menulis fungsi agregasi Anda sendiri.
• jenis - Jenis nilai yang ditampilkan dari fungsi agregasi. Ini harus berupa nama jenis string JavaScript, misalnya: 'number' atau 'boolean'.
• label - [Opsional] Label string yang akan diterapkan ke kolom ini dalam tabel yang ditampilkan.
• id - [Opsional] ID string untuk diterapkan ke kolom ini dalam tabel yang ditampilkan.

Nilai Hasil

DataTable dengan satu kolom untuk setiap kolom yang tercantum di kunci, dan satu kolom untuk setiap kolom yang tercantum di kolom. Tabel diurutkan berdasarkan baris kunci, dari kiri ke kanan.

Contoh

// This call will group the table by column 0 values.
// It will also show column 3, which will be a sum of
// values in that column for that row group.
var result = google.visualization.data.group(
  dt,
  [0],
  [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

*Input table*
1  'john'  'doe'            10
1  'jane'  'doe'           100
3  'jill'  'jones'          50
3  'jack'  'jones'          75
5  'al'    'weisenheimer'  500

*Output table*
1  110
3  125
5  500

Fungsi Pengubah yang Disediakan

API ini menyediakan fungsi pengubah berikut yang dapat Anda teruskan ke kunci. pengubah untuk menyesuaikan perilaku pengelompokan.

Fungsi Agregasi yang Diberikan

API menyediakan fungsi agregasi berikut yang dapat Anda teruskan ke kolom. Agregasi array parameter.

Membuat fungsi pengubah

Anda dapat membuat fungsi pengubah untuk melakukan nilai kunci transformasi sederhana sebelum fungsi group() mengelompokkan baris. Fungsi ini mengambil satu nilai sel, melakukan tindakan padanya (misalnya, menambahkan 1 ke nilai), dan menampilkannya. Jenis input dan return tidak harus sama dengan jenis, tetapi pemanggil harus mengetahui jenis input dan output. Berikut adalah contoh fungsi yang menerima tanggal dan menampilkan kuartal:

// Input type: Date
// Return type: number (1-4)
function getQuarter(someDate) {
  return Math.floor(someDate.getMonth()/3) + 1;
}

Membuat fungsi agregasi

Anda dapat membuat fungsi agregasi yang menerima serangkaian nilai kolom dalam grup baris dan menampilkan angka tunggal: misalnya, menampilkan jumlah atau rata-rata nilai. Berikut adalah implementasi fungsi agregasi jumlah yang disediakan, yang menampilkan jumlah jumlah baris dalam grup baris:

// Input type: Array of any type
// Return type: number
function count(values) {
  return values.length;
}

join()

Metode ini menggabungkan dua tabel data (objek DataTable atau DataView) menjadi satu tabel hasil, mirip dengan pernyataan SQL JOIN. Anda menentukan satu atau beberapa pasangan kolom (kolom key) di antara dua tabel, dan tabel output akan menyertakan baris menurut metode join yang Anda tentukan: hanya baris yang cocok dengan kedua kunci tersebut; semua baris dari satu tabel; atau semua baris dari kedua tabel, baik kunci tersebut cocok atau tidak. Tabel hasil hanya menyertakan kolom utama, ditambah kolom tambahan yang Anda tentukan. Perhatikan bahwa dt2 tidak boleh memiliki kunci duplikat, tetapi dt1 bisa. Istilah "kunci" berarti kombinasi dari semua nilai kolom kunci, bukan nilai kolom kunci tertentu; jadi jika sebuah baris memiliki nilai sel A | B | C dan kolom 0 dan 1 adalah kolom kunci, maka kunci untuk baris tersebut adalah AB.

Sintaksis

google.visualization.data.join(dt1, dt2, joinMethod,
                                 keys, dt1Columns, dt2Columns);

dt1

DataTable yang terisi untuk bergabung dengan dt2.

DT2

DataTable yang terisi untuk bergabung dengan dt1. Tabel ini tidak boleh memiliki beberapa kunci yang identik (dengan kunci adalah kombinasi dari nilai kolom kunci).

joinMethod

String yang menentukan jenis join. Jika dt1 memiliki beberapa baris yang cocok dengan satu baris dt2, tabel output akan menyertakan semua baris dt1 yang cocok. Pilih dari nilai berikut:

• 'full' - Tabel output menyertakan semua baris dari kedua tabel, terlepas dari apakah tombol cocok atau tidak. Baris yang tidak cocok akan memiliki entri sel null; baris yang cocok digabungkan.
• 'inner' - Gabungan lengkap difilter agar hanya menyertakan baris yang cocok dengan kunci.
• 'left' - Tabel output menyertakan semua baris dari dt1, terlepas dari ada atau tidaknya baris yang cocok dari dt2.
• 'right' - Tabel output menyertakan semua baris dari dt2, terlepas dari ada atau tidaknya baris yang cocok dari dt1.

kunci

Array kolom utama untuk dibandingkan dari kedua tabel. Setiap pasangan adalah array dua elemen, yang pertama adalah kunci di dt1, yang kedua adalah kunci di dt2. Array ini dapat menentukan kolom berdasarkan indeks, ID, atau labelnya. Lihat getColumnIndex.
Kolom harus berjenis sama di kedua tabel. Semua kunci yang ditentukan harus sesuai dengan aturan yang diberikan oleh joinMethod untuk menyertakan baris dari tabel. Kolom kunci selalu disertakan dalam tabel output. Hanya dt1, tabel sebelah kiri, yang dapat menyertakan kunci duplikat; kunci di dt2 harus unik. Istilah "kunci" di sini berarti kumpulan kolom kunci yang unik, bukan nilai masing-masing kolom. Misalnya, jika kolom kunci Anda adalah A dan B, tabel berikut hanya akan memiliki nilai kunci unik (dan dengan demikian dapat digunakan sebagai dt2):

J	B
Jeni	Merah
Jeni	Biru
Fredi	Merah

Contoh: [[0,0], [2,1]] membandingkan nilai dari kolom pertama di kedua tabel serta kolom ketiga dari dt1 dengan kolom kedua dari dt2.

Kolom dt1

Array kolom dari dt1 yang akan disertakan dalam tabel output, selain kolom utama dt1. Array ini dapat menentukan kolom berdasarkan indeks, ID, atau labelnya, baca getColumnIndex.

Kolom dt2

Array kolom dari dt2 yang akan disertakan dalam tabel output, selain kolom utama dt2. Array ini dapat menentukan kolom berdasarkan indeks, ID, atau labelnya, baca getColumnIndex.

Nilai Hasil

DataTable dengan kolom kunci, dt1Columns, dan dt2Columns. Tabel ini diurutkan berdasarkan kolom kunci, dari kiri ke kanan. Jika joinMethod adalah 'inner', semua sel utama harus diisi. Untuk metode penggabungan lainnya, jika tidak ditemukan kunci yang cocok, tabel akan memiliki null untuk sel kunci yang tidak cocok.

Contoh

*Tables*
dt1                        dt2
bob  | 111 | red           bob   | 111 | point
bob  | 111 | green         ellyn | 222 | square
bob  | 333 | orange        jane  | 555 | circle
fred | 555 | blue          jane  | 777 | triangle
jane | 777 | yellow        fred  | 666 | dodecahedron
* Note that right table has duplicate Jane entries, but the key we will use is
* columns 0 and 1. The left table has duplicate key values, but that is
* allowed.

*Inner join* google.visualization.data.join(dt1, dt2, 'inner', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red    | point
bob  | 111 | green  | point
jane | 777 | yellow | triangle
* Note that both rows from dt1 are included and matched to
* the equivalent dt2 row.


*Full join* google.visualization.data.join(dt1, dt2, 'full', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red    | point
bob   | 111 | green  | point
bob   | 333 | orange | null
ellyn | 222 | null | square
fred  | 555 | blue   | null
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle


*Left join*  google.visualization.data.join(dt1, dt2, 'left', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red | point
bob  | 111 | green | point
bob  | 333 | orange | null
fred | 555 | blue | null
jane | 777 | yellow | triangle


*Right join*  google.visualization.data.join(dt1, dt2, 'right', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red | point
bob   | 111 | green | point
ellyn | 222 | null | square
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle

Pemformat

Google Visualization API menyediakan pemformat yang dapat digunakan untuk memformat ulang data dalam visualisasi. Formatter ini mengubah nilai terformat untuk kolom yang ditentukan di semua baris. Perhatikan bahwa:

• Pemformat hanya mengubah nilai yang diformat, bukan nilai yang mendasari. Misalnya, nilai yang ditampilkan adalah "$1.000,00", tetapi nilai dasarnya akan tetap menjadi "1000".
• Pemformat hanya memengaruhi satu kolom dalam satu waktu; untuk memformat ulang beberapa kolom, terapkan formatter ke setiap kolom yang ingin Anda ubah.
• Jika Anda juga menggunakan pemformat yang ditentukan pengguna, pemformat Visualisasi Google tertentu akan mengganti semua pemformat yang ditetapkan pengguna.

Format sebenarnya yang diterapkan pada data berasal dari lokalitas yang memuat API tersebut. Untuk detail selengkapnya, lihat memuat diagram dengan lokalitas tertentu .

Penting: Pemformat hanya dapat digunakan dengan DataTable; dan tidak dapat digunakan dengan DataView (objek DataView bersifat hanya baca).

Berikut adalah langkah-langkah umum untuk menggunakan pemformat:

1. Dapatkan objek DataTable yang terisi.
2. Untuk setiap kolom yang ingin diformat ulang:
   1. Buat objek yang akan menentukan semua opsi untuk pemformat Anda. Ini adalah objek JavaScript dasar dengan serangkaian properti dan nilai. Lihat dokumentasi pemformat untuk melihat properti yang didukung. (Secara opsional, Anda dapat meneruskan objek notasi literal objek yang menentukan opsi Anda.)
   2. Buat pemformat dengan meneruskan objek opsi.
   3. Panggil formatter.format(table, colIndex), dengan meneruskan DataTable dan nomor kolom (berbasis nol) dari data yang akan diformat ulang. Perhatikan bahwa Anda hanya dapat menerapkan satu pemformat ke setiap kolom; menerapkan formatter kedua hanya akan menimpa efek dari kolom pertama.
      Penting: Banyak formatter memerlukan tag HTML untuk menampilkan format khusus; jika visualisasi Anda mendukung opsi allowHtml, Anda harus menetapkannya ke true.

Berikut ini contoh perubahan format tanggal kolom tanggal untuk menggunakan format tanggal panjang (“1 Januari 2009”):

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(3);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));

// Create a formatter.
// This example uses object literal notation to define the options.
var formatter = new google.visualization.DateFormat({formatType: 'long'});

// Reformat our data.
formatter.format(data, 1);

// Draw our data
var table = new google.visualization.Table(document.getElementById('dateformat_div'));
table.draw(data, {showRowNumber: true});

Sebagian besar pemformat mengekspos dua metode berikut:

Metode	Deskripsi
google.visualization.formatter_name(options)	Konstruktor, dengan formatter_name adalah nama kelas formatter tertentu. options - Objek JavaScript generik yang menentukan opsi untuk pemformat tersebut. Objek ini adalah objek umum dengan pasangan properti/nilai dengan properti yang khusus untuk formatter tersebut. Lihat dokumentasi untuk pemformat spesifik Anda guna mempelajari opsi yang didukung. Berikut adalah dua contoh cara memanggil konstruktor untuk objek DateFormat, dengan meneruskan dua properti: // Object literal technique var formatter = new google.visualization.DateFormat({formatType: 'long', timeZone: -5}); // Equivalent property setting technique var options = new Object(); options['formatType'] = 'long'; options['timeZone'] = -5; var formatter = new google.visualization.DateFormat(options);
format(data, colIndex)	Memformat ulang data di kolom yang ditentukan. data - DataTable yang berisi data yang akan diformat ulang. Anda tidak dapat menggunakan DataView di sini. colIndex - Indeks berbasis nol kolom untuk diformat. Untuk memformat beberapa kolom, Anda harus memanggil metode ini beberapa kali, dengan nilai colIndex yang berbeda.

 

Google Visualization API menyediakan formatter berikut:

Nama Pemformat	Deskripsi
Format Panah	Menambahkan panah atas atau bawah, yang menunjukkan apakah nilai sel di atas atau di bawah nilai yang ditentukan.
FormatBar	Menambahkan batang berwarna, arah dan warna yang menunjukkan apakah nilai sel di atas atau di bawah nilai yang ditentukan.
FormatWarna	Mewarnai sel sesuai dengan apakah nilainya berada dalam rentang yang ditetapkan.
TanggalFormat	Memformat nilai Date atau DateTime dengan beberapa cara berbeda, termasuk "1 Januari 2009", "1/1/09" dan "1 Jan 2009".
FormatFormat	Memformat berbagai aspek nilai numerik.
Format Pola	Menggabungkan nilai sel di baris yang sama menjadi sel yang ditentukan, bersama dengan teks arbitrer.

Format Panah

Menambahkan panah atas atau bawah ke sel numerik, bergantung pada apakah nilai di atas atau di bawah nilai dasar yang ditentukan. Jika sama dengan nilai dasar, tidak ada panah yang ditampilkan.

Opsi

ArrowFormat mendukung opsi berikut, yang diteruskan ke konstruktor:

Opsi	Deskripsi
base	Angka yang menunjukkan nilai dasar, yang digunakan untuk membandingkan dengan nilai sel. Jika nilai sel lebih tinggi, sel akan menyertakan panah atas hijau; jika nilai sel lebih rendah, sel akan menyertakan panah bawah merah; jika sama, tidak ada panah.

Kode contoh

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues Change');
data.addRows([
  ['Shoes', {v:12, f:'12.0%'}],
  ['Sports', {v:-7.3, f:'-7.3%'}],
  ['Toys', {v:0, f:'0%'}],
  ['Electronics', {v:-2.1, f:'-2.1%'}],
  ['Food', {v:22, f:'22.0%'}]
]);

var table = new google.visualization.Table(document.getElementById('arrowformat_div'));

var formatter = new google.visualization.ArrowFormat();
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true});

Format Format

Menambahkan batang berwarna ke sel numerik yang menunjukkan apakah nilai sel di atas atau di bawah nilai dasar yang ditentukan.

Opsi

BarFormat mendukung opsi berikut, yang diteruskan ke konstruktor:

Opsi	Contoh Deskripsi
base	Angka yang merupakan nilai dasar untuk membandingkan nilai sel. Jika nilai sel lebih tinggi, nilai tersebut akan digambar di sebelah kanan basis; jika lebih rendah, nilai akan digambar di sebelah kiri. Nilai defaultnya adalah 0.
colorNegative	String yang menunjukkan bagian nilai negatif batang. Nilai yang mungkin adalah 'red', 'green' dan 'blue'; nilai default-nya adalah 'red'.
colorPositive	String yang menunjukkan warna bagian nilai positif dari batang. Nilai yang mungkin adalah 'red', 'green', dan 'blue'. Defaultnya adalah 'biru'.
drawZeroLine	Boolean yang menunjukkan apakah akan menggambar garis dasar gelap 1 piksel jika terdapat nilai negatif. Garis gelapnya dibuat untuk meningkatkan pemindaian visual batang. Nilai defaultnya adalah 'false'.
max	Nilai angka maksimum untuk rentang batang. Nilai default adalah nilai tertinggi dalam tabel.
min	Nilai angka minimum untuk rentang batang. Nilai default adalah nilai terendah dalam tabel.
showValue	Jika true, menampilkan nilai dan batang; jika false, hanya menampilkan batang. Nilai default adalah true.
width	Ketebalan setiap batang, dalam piksel. Nilai defaultnya adalah 100.

Kode contoh

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('barformat_div'));

var formatter = new google.visualization.BarFormat({width: 120});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

FormatWarna

Menetapkan warna ke latar depan atau latar belakang sel numerik, bergantung pada nilai sel. Pemformat ini tidak biasa, karena tidak menggunakan opsinya di konstruktor. Sebagai gantinya, Anda harus memanggil addRange() atau addGradientRange() sebanyak yang Anda inginkan, untuk menambahkan rentang warna, sebelum memanggil format(). Warna dapat ditentukan dalam format HTML apa pun yang dapat diterima, misalnya "hitam", "#000000", atau "#000".

Metode

ColorFormat mendukung metode berikut:

Metode	Deskripsi
google.visualization.ColorFormat()	Konstruktor. Tidak membutuhkan argumen.
addRange(from, to, color, bgcolor)	Menentukan warna latar depan dan/atau warna latar belakang ke sel, bergantung pada nilai sel. Setiap sel dengan nilai di dalam rentang from—hingga akan ditetapkan ke color dan bgcolor. Penting untuk menyadari bahwa rentang ini tidak inklusif, karena membuat rentang dari 1—1.000 dan detik dari 1.000— 2.000 tidak akan mencakup nilai 1.000. from - [String, Number, Date, DateTime, atau TimeOfDay] Batas bawah (inklusif) rentang, atau null. Jika null akan cocok -∞. Batas string dibandingkan menurut abjad dengan nilai string. to - [String, Number, Date, DateTime, atau TimeOfDay] Batas tinggi (non-inklusif) dari rentang, atau null. Jika null akan cocok dengan +∞. Batas string dibandingkan menurut abjad dengan nilai string. warna - Warna yang akan diterapkan ke teks dalam sel yang cocok. Nilainya bisa berupa nilai '#RRGGBB' atau konstanta warna yang ditentukan, (misalnya: '#FF0000' atau 'merah'). bgcolor - Warna yang akan diterapkan ke latar belakang sel yang cocok. Nilainya bisa berupa nilai '#RRGGBB' atau konstanta warna yang ditentukan, (misalnya: '#FF0000' atau 'merah').
addGradientRange(from, to, color, fromBgColor, toBgColor)	Menetapkan warna latar belakang dari rentang, sesuai dengan nilai sel. Warna diskalakan agar sesuai dengan nilai sel dalam rentang dari warna batas bawah hingga warna batas atas. Perlu diperhatikan bahwa metode ini tidak dapat membandingkan nilai string, seperti yang dapat dilakukan addRange(). Tips: Rentang warna sering kali sulit diukur oleh penonton secara akurat; rentang warna yang paling sederhana dan mudah dibaca adalah dari warna yang sepenuhnya jenuh hingga putih (misalnya, #FF0000—FFFFFF). from - [Number, Date, DateTime, atau TimeOfDay] Batas bawah (inklusif) dari rentang, atau null. Jika null, kecocokan akan cocok dengan -∞. to - [Number, Date, DateTime, atau TimeOfDay] Batas yang lebih tinggi (tidak termasuk) rentang, atau null. Jika null akan cocok dengan +∞. warna - Warna yang akan diterapkan ke teks dalam sel yang cocok. Warna ini sama untuk semua sel, terlepas dari nilainya. fromBgColor - Warna latar belakang untuk sel yang menyimpan nilai di ujung bawah gradien. Nilainya bisa berupa nilai '#RRGGBB' atau konstanta warna yang ditentukan, (misalnya: '#FF0000' atau 'merah'). toBgColor - Warna latar belakang untuk sel yang menyimpan nilai di ujung atas gradien. Nilainya bisa berupa nilai '#RRGGBB' atau konstanta warna yang ditentukan, (misalnya: '#FF0000' atau 'merah').
format(dataTable, columnIndex)	Metode format() standar untuk menerapkan pemformatan ke kolom yang ditentukan.

Kode contoh

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('colorformat_div'));

var formatter = new google.visualization.ColorFormat();
formatter.addRange(-20000, 0, 'white', 'orange');
formatter.addRange(20000, null, 'red', '#33ff33');
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

Format Tanggal

Memformat nilai Date JavaScript dalam berbagai cara, termasuk "1 Januari 2016", "1/1/16" dan "1 Januari 2016".

Opsi

DateFormat mendukung opsi berikut, yang diteruskan ke konstruktor:

Opsi	Deskripsi
formatType	Opsi pemformatan cepat untuk tanggal. Nilai string berikut didukung, dengan memformat ulang tanggal 28 Februari 2016 seperti yang ditunjukkan berikut: 'short' - Format singkat: mis., "28/2/16" 'medium' - Format sedang: misalnya, "28 Februari 2016" 'long' - Format panjang: misalnya, "28 Februari 2016" Anda tidak dapat menentukan formatType dan pattern sekaligus.
pattern	Pola format kustom yang akan diterapkan ke nilai, mirip dengan format tanggal dan waktu ICU. Misalnya: var formatter3 = new google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"});. Anda tidak dapat menentukan formatType dan pattern sekaligus. Anda dapat membaca detail selengkapnya tentang pola di bagian berikutnya.
timeZone	Zona waktu untuk menampilkan nilai tanggal. Ini adalah nilai numerik, yang menunjukkan GMT + jumlah zona waktu ini (bisa negatif). Objek tanggal dibuat secara default dengan zona waktu yang diasumsikan dari komputer tempat objek tersebut dibuat; opsi ini digunakan untuk menampilkan nilai tersebut dalam zona waktu yang berbeda. Misalnya, jika Anda membuat objek Tanggal pukul 17.00 di komputer yang berlokasi di Greenwich, Inggris, dan menetapkan zona waktu menjadi -5 (options['timeZone'] = -5, atau Waktu Pasifik Timur di AS), nilai yang ditampilkan adalah 12 siang.

Metode

DateFormat mendukung metode berikut:

Metode	Deskripsi
google.visualization.DateFormat(options)	Konstruktor. Lihat bagian opsi di atas untuk info selengkapnya.
format(dataTable, columnIndex)	Metode format() standar untuk menerapkan pemformatan ke kolom yang ditentukan.
formatValue(value)	Menampilkan nilai berformat dari nilai yang diberikan. Metode ini tidak memerlukan DataTable.

Kode contoh

function drawDateFormatTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date (Long)');
  data.addColumn('date', 'Start Date (Medium)');
  data.addColumn('date', 'Start Date (Short)');
  data.addRows([
    ['Mike', new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26)],
    ['Bob', new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0)],
    ['Alice', new Date(2006, 7, 16),
              new Date(2006, 7, 16),
              new Date(2006, 7, 16)]
  ]);

  // Create three formatters in three styles.
  var formatter_long = new google.visualization.DateFormat({formatType: 'long'});
  var formatter_medium = new google.visualization.DateFormat({formatType: 'medium'});
  var formatter_short = new google.visualization.DateFormat({formatType: 'short'});

  // Reformat our data.
  formatter_long.format(data, 1);
  formatter_medium.format(data,2);
  formatter_short.format(data, 3);

  // Draw our data
  var table = new google.visualization.Table(document.getElementById('dateformat_div'));
  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

Selengkapnya tentang Pola Tanggal

Berikut adalah beberapa detail tentang pola yang didukung:

Polanya mirip dengan format tanggal dan waktu ICU, tetapi pola berikut belum didukung: e D F g Y u w W. Untuk menghindari konflik dengan pola, setiap teks literal yang ingin Anda tampilkan dalam output harus diapit oleh tanda kutip tunggal, kecuali untuk tanda petik tunggal, yang harus digandakan: mis., "K 'o''clock.'".

Pola	Deskripsi	Contoh Output
GG	Penanda era.	"IKLAN"
yy atau tttt	tahun.	1996
M	Bulan dalam tahun. Untuk Januari: M menghasilkan 1 MM menghasilkan 01 MMM menghasilkan Jan MMMM menghasilkan Januari	"Juli" "7"
h	Hari dalam bulan. Nilai 'd' ekstra akan menambahkan angka nol di depan.	10
j	Jam dalam skala 12 jam. Nilai 'h' ekstra akan menambahkan awalan nol.	12
H	Jam dalam skala 24 jam. Nilai ekstrak Hk akan menambah angka nol di depan.	0
m	Menit dalam jam. Nilai 'M' ekstra akan menambahkan awalan nol.	30
s	Detik dalam menit. Nilai 's' ekstra akan menambahkan awalan nol.	55
4	Pecahan detik. Nilai tambahan 'S' akan diberi padding di sebelah kanan dengan nol.	978
1	Hari. Output berikut untuk "Selasa": E menghasilkan T EE atau EEE Menghasilkan Tu atau Sel EEEE Produksi Selasa	"Sel" "Selasa"
Aa	AM/PM	"PM"
k	Jam dalam hari (1~24). Nilai 'k' ekstra akan menambahkan nol di awal.	24
rb	Jam dalam AM/PM (0~11). Nilai 'k' ekstra akan menambahkan nol di awal.	0
z	Zona waktu. Untuk zona waktu 5, menghasilkan "UTC+5"	"UTC+5"
Z	Zona waktu dalam format RFC 822. Untuk zona waktu -5: Z, ZZ, ZZZ menghasilkan -0500 ZZZZ dan lainnya menghasilkan "GMT -05.00"	"-0800" "GMT -05.00"
sangat	Zona waktu (generik).	"Dll/GMT-5"
'	escape untuk teks	'Tanggal='
"	tanda petik tunggal	'yy

FormatFormat

Menjelaskan cara memformat kolom numerik. Opsi pemformatan mencakup menentukan simbol awalan (seperti tanda dolar) atau tanda baca untuk digunakan sebagai penanda ribuan.

Opsi

NumberFormat mendukung opsi berikut, yang diteruskan ke konstruktor:

Opsi	Deskripsi
decimalSymbol	Karakter yang akan digunakan sebagai penanda desimal. Defaultnya adalah titik (.).
fractionDigits	Angka yang menentukan jumlah digit yang akan ditampilkan setelah desimal. Jumlah defaultnya adalah 2. Jika Anda menentukan lebih banyak digit dari yang ada di angka, angka untuk nilai yang lebih kecil akan ditampilkan. Nilai terpotong akan dibulatkan (5 dibulatkan ke atas).
groupingSymbol	Karakter yang akan digunakan untuk mengelompokkan angka di sebelah kiri desimal menjadi tiga rangkaian. Default-nya adalah koma (,).
negativeColor	Warna teks untuk nilai negatif. Tidak ada nilai default. Nilai dapat berupa nilai warna HTML apa pun yang dapat diterima, misalnya "merah" atau "#FF0000".
negativeParens	Boolean, di mana true menunjukkan bahwa nilai negatif harus diapit dengan tanda kurung. Defaultnya adalah true (benar).
pattern	String format. Jika disediakan, semua opsi lainnya akan diabaikan, kecuali negativeColor. String format adalah subset dari kumpulan pola ICU . Misalnya, {pattern:'#,###%'} akan menghasilkan nilai output "1.000%", "750%", dan "50%" untuk nilai 10, 7.5, dan 0.5.
prefix	Awalan string untuk nilai, misalnya "$".
suffix	Akhiran string untuk nilai, misalnya "%".

Metode

NumberFormat mendukung metode berikut:

Metode	Deskripsi
google.visualization.NumberFormat(options)	Konstruktor. Lihat bagian opsi di atas untuk info selengkapnya.
format(dataTable, columnIndex)	Metode format() standar untuk menerapkan pemformatan ke kolom yang ditentukan.
formatValue(value)	Menampilkan nilai berformat dari nilai yang diberikan. Metode ini tidak memerlukan DataTable.

Kode contoh

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('numberformat_div'));

var formatter = new google.visualization.NumberFormat(
    {prefix: '$', negativeColor: 'red', negativeParens: true});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

Format Pola

Memungkinkan Anda menggabungkan nilai kolom yang ditentukan menjadi satu kolom, bersama dengan teks arbitrer. Jadi, misalnya, jika memiliki kolom untuk nama depan dan kolom untuk nama belakang, Anda dapat mengisi kolom ketiga dengan {last name}, {first name}. Pemformat ini tidak mengikuti konvensi untuk konstruktor dan metode format(). Lihat bagian Metode di bawah untuk mendapatkan petunjuk.

Metode

PatternFormat mendukung metode berikut:

Metode	Deskripsi
google.visualization.PatternFormat(pattern)	Konstruktor. Tidak menggunakan objek opsi. Sebagai gantinya, diperlukan parameter pattern string. Ini adalah string yang menjelaskan nilai kolom yang akan dimasukkan ke kolom tujuan, beserta teks arbitrer. Sematkan placeholder di string untuk menunjukkan nilai dari kolom lain yang akan disematkan. Placeholder adalah {#}, dengan # adalah indeks kolom sumber yang akan digunakan. Indeks adalah indeks dalam array srcColumnIndices dari metode format() di bawah. Untuk menyertakan karakter literal { atau }, konversikan karakter seperti ini: \{ atau \}. Untuk menyertakan karakter \ literal, konversikan karakter tersebut sebagai \\. Kode contoh Contoh berikut menunjukkan konstruktor untuk pola yang membuat elemen anchor, dengan elemen pertama dan kedua diambil dari metode format(): var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>');
format(dataTable, srcColumnIndices, opt_dstColumnIndex)	Panggilan pemformatan standar, dengan beberapa parameter tambahan: dataTable - Tabel Data yang akan dioperasikan. srcColumnIndices - Array dari satu atau beberapa indeks kolom (berbasis nol) untuk ditarik sebagai sumber dari DataTable yang mendasarinya. Class ini akan digunakan sebagai sumber data untuk parameter pattern di konstruktor. Nomor kolom tidak harus diurutkan opt_dstColumnIndex - [opsional] Kolom tujuan untuk menempatkan output manipulasi pattern. Jika tidak ditentukan, elemen pertama dalam srcColumIndices akan digunakan sebagai tujuan. Lihat contoh pemformatan setelah tabel.

Berikut beberapa contoh input dan output untuk tabel empat kolom.

Row before formatting (4 columns, last is blank):
John  |  Paul  |  Jones  |  [empty]

var formatter = new google.visualization.PatternFormat("{0} {1} {2}");
formatter.format(data, [0,1,2], 3);
Output:
  John  |  Paul  |  Jones  |  John Paul Jones

var formatter = new google.visualization.PatternFormat("{1}, {0}");
formatter.format(data, [0,2], 3);
Output:
  John  |  Paul  |  Jones  |  Jones, John

Kode contoh

Contoh berikut menunjukkan cara menggabungkan data dari dua kolom untuk membuat alamat email. Properti ini menggunakan objek DataView untuk menyembunyikan kolom sumber asli:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Email');
data.addRows([
  ['John Lennon', 'john@beatles.co.uk'],
  ['Paul McCartney', 'paul@beatles.co.uk'],
  ['George Harrison', 'george@beatles.co.uk'],
  ['Ringo Starr', 'ringo@beatles.co.uk']
]);

var table = new google.visualization.Table(document.getElementById('patternformat_div'));

var formatter = new google.visualization.PatternFormat(
    '<a href="mailto:{1}">{0}</a>');
// Apply formatter and set the formatted value of the first column.
formatter.format(data, [0, 1]);

var view = new google.visualization.DataView(data);
view.setColumns([0]); // Create a view with the first column only.

table.draw(view, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

GadgetHelper

Class helper untuk menyederhanakan penulisan Gadget yang menggunakan Google Visualization API.

Konstruktor

google.visualization.GadgetHelper()

Metode

Metode	Nilai yang Ditampilkan	Deskripsi
createQueryFromPrefs(prefs)	google.visualization.Query	Statis. Buat instance google.visualization.Query baru dan tetapkan propertinya sesuai dengan nilai dari preferensi gadget. Jenis parameter prefs adalah _IG_Prefs Preferensi _table_query_url digunakan untuk menetapkan URL sumber data Kueri. Preferensi _table_query_refresh_interval digunakan untuk menetapkan interval pembaruan Kueri (dalam detik).
validateResponse(response)	Boolean	Statis. Parameter response adalah jenis google.visualization.QueryResponse. Menampilkan true jika respons berisi data. Menampilkan false jika eksekusi kueri gagal dan responsnya tidak berisi data. Jika terjadi error, metode ini akan menampilkan pesan error.

Class Kueri

Objek berikut tersedia untuk mengirim kueri data ke sumber data eksternal, seperti Google Spreadsheet.

• Kueri - Menggabungkan permintaan data keluar.
• QueryResponse - Menangani respons dari sumber data.

Kueri

Merepresentasikan kueri yang dikirim ke sumber data.

Konstruktor

google.visualization.Query(dataSourceUrl, opt_options)

Parameter

URLSumberData

URL [Wajib, String] untuk mengirimkan kueri. Lihat dokumentasi Diagram dan Spreadsheet untuk Google Spreadsheet.

opsi_pengoptimalan

[Opsional, Objek] Peta opsi untuk permintaan ini. Catatan: Jika Anda mengakses sumber data yang dibatasi , Anda tidak boleh menggunakan parameter ini. Berikut adalah properti yang didukung:

• sendMethod - [Opsional, String] Menentukan metode yang akan digunakan untuk mengirim kueri. Pilih salah satu nilai string berikut:
  • 'xhr' - Kirim kueri menggunakan XmlHttpRequest.
  • 'scriptInjection' - Kirim kueri menggunakan injeksi skrip.
  • 'makeRequest' - [Hanya tersedia untuk gadget, yang sudah tidak digunakan lagi] Kirim kueri menggunakan metode Gadget API makeRequest(). Jika ditentukan, Anda juga harus menentukan makeRequestParams.
  • 'auto' - Gunakan metode yang ditentukan oleh parameter URL tqrt dari URL sumber data. tqrt dapat memiliki nilai berikut: 'xhr', 'scriptInjection', atau 'makeRequest'. Jika tqrt tidak ada atau memiliki nilai yang tidak valid, defaultnya adalah 'xhr' untuk permintaan domain yang sama dan 'scriptInjection' untuk permintaan lintas-domain.
• makeRequestParams - [Objek] Peta parameter untuk kueri makeRequest(). Digunakan dan diperlukan hanya jika sendMethod adalah 'makeRequest'.

Metode

Metode	Nilai yang Ditampilkan	Deskripsi
abort()	Tidak ada	Menghentikan pengiriman kueri otomatis yang dimulai dengan setRefreshInterval().
setRefreshInterval(seconds)	Tidak ada	Menetapkan kueri untuk otomatis memanggil metode send setiap durasi yang ditentukan (jumlah detik), mulai dari panggilan eksplisit pertama ke send. seconds adalah angka yang lebih besar dari atau sama dengan nol. Jika menggunakan metode ini, Anda harus memanggilnya sebelum memanggil metode send. Batalkan metode ini dengan memanggilnya lagi dengan nol (default), atau dengan memanggil abort().
setTimeout(seconds)	Tidak ada	Menetapkan jumlah detik untuk menunggu sumber data merespons sebelum menampilkan error waktu tunggu. seconds adalah angka yang lebih besar dari nol. Waktu tunggu default adalah 30 detik. Metode ini, jika digunakan, harus dipanggil sebelum memanggil metode send.
setQuery(string)	Tidak ada	Menetapkan string kueri. Nilai parameter string harus berupa kueri yang valid. Metode ini, jika digunakan, harus dipanggil sebelum memanggil metode send. Pelajari bahasa Kueri lebih lanjut.
send(callback)	Tidak ada	Mengirim kueri ke sumber data. callback harus berupa fungsi yang akan dipanggil saat sumber data merespons. Fungsi callback akan menerima parameter tunggal jenis google.visualization.QueryResponse.

KueriRespons

Merepresentasikan respons eksekusi kueri seperti yang diterima dari sumber data. Instance class ini diteruskan sebagai argumen ke fungsi callback yang ditetapkan saat Query.send dipanggil.

Metode

Metode	Nilai yang Ditampilkan	Deskripsi
getDataTable()	Tabel Data	Menampilkan tabel data seperti yang ditampilkan oleh sumber data. Menampilkan null jika eksekusi kueri gagal dan tidak ada data yang ditampilkan.
getDetailedMessage()	String	Menampilkan pesan error mendetail untuk kueri yang gagal. Jika eksekusi kueri berhasil, metode ini akan menampilkan string kosong. Pesan yang dikembalikan adalah pesan yang ditujukan bagi developer, dan mungkin berisi informasi teknis, misalnya 'Kolom {salary} tidak ada.
getMessage()	String	Menampilkan pesan error singkat untuk kueri yang gagal. Jika eksekusi kueri berhasil, metode ini akan menampilkan string kosong. Pesan yang ditampilkan adalah pesan singkat yang ditujukan bagi pengguna akhir, misalnya 'Kueri Tidak Valid' atau 'Akses Ditolak'.
getReasons()	Array string	Menampilkan array nol dari entri lainnya. Setiap entri merupakan string pendek dengan error atau kode peringatan yang dimunculkan saat menjalankan kueri. Kode yang mungkin: access_denied Pengguna tidak memiliki izin untuk mengakses sumber data. invalid_query Kueri yang ditentukan memiliki kesalahan sintaksis. data_truncated Satu atau beberapa baris data yang cocok dengan pilihan kueri tidak ditampilkan karena batas ukuran output. (peringatan). timeout Kueri tidak merespons dalam waktu yang diharapkan.
hasWarning()	Boolean	Menampilkan true jika eksekusi kueri memiliki pesan peringatan.
isError()	Boolean	Menampilkan true jika eksekusi kueri gagal, dan responsnya tidak berisi tabel data apa pun. Menampilkan <false> jika eksekusi kueri berhasil dan responsnya berisi tabel data.

Tampilan Error

API ini menyediakan beberapa fungsi untuk membantu Anda menampilkan pesan error kustom kepada pengguna. Untuk menggunakan fungsi ini, sediakan elemen penampung di halaman (biasanya <div>), tempat API akan menggambar pesan error yang diformat. Penampung ini dapat berupa elemen penampung visualisasi, atau penampung hanya untuk error. Jika Anda menentukan elemen berisi visualisasi, pesan error akan ditampilkan di atas visualisasi. Kemudian, panggil fungsi yang sesuai di bawah untuk menampilkan, atau menghapus, pesan error.

Semua fungsi adalah fungsi statis dalam namespace google.visualization.errors.

Banyak visualisasi yang dapat menampilkan peristiwa error; lihat peristiwa error di bawah untuk mempelajarinya lebih lanjut.

Anda dapat melihat contoh error kustom dalam Contoh Kode wrapper Kueri.

Fungsi	Nilai yang Ditampilkan	Deskripsi
addError(container, message, opt_detailedMessage, opt_options)	Nilai ID string yang mengidentifikasi objek error yang dibuat. Ini adalah nilai unik pada halaman, dan dapat digunakan untuk menghapus error atau menemukan elemen yang memuatnya.	Menambahkan blok tampilan error ke elemen halaman yang ditentukan, dengan teks dan format yang ditentukan. container - Elemen DOM yang akan menjadi tempat menyisipkan pesan error. Jika penampung tidak dapat ditemukan, fungsi akan menampilkan error JavaScript. message - Pesan string yang akan ditampilkan. opt_detailMessage - String pesan mendetail opsional. Secara default, ini adalah teks pengarahan mouse, tetapi itu dapat diubah di properti opt_options.showInToolTip yang dijelaskan di bawah. opt_options - Objek opsional dengan properti yang menetapkan berbagai opsi tampilan untuk pesan. Opsi berikut didukung: showInTooltip - Nilai boolean yang mana true menampilkan pesan terperinci hanya sebagai teks tooltip, dan nilai false menampilkan pesan mendetail dalam isi container setelah pesan singkat. Nilai default adalah true. type - String yang menjelaskan jenis error, yang menentukan gaya css yang harus diterapkan pada pesan ini. Nilai yang didukung adalah 'error' dan 'warning'. Nilai defaultnya adalah 'error'. style - String gaya untuk pesan error. Gaya ini akan mengganti gaya apa pun yang diterapkan ke jenis peringatan (opt_options.type). Contoh: 'background-color: #33ff99; padding: 2px;' Nilai default-nya adalah string kosong. removable - Nilai boolean, dengan true menandakan bahwa pesan dapat ditutup oleh klik mouse dari pengguna. Nilai defaultnya adalah false (salah).
addErrorFromQueryResponse(container, response)	Nilai ID string yang mengidentifikasi objek error yang dibuat, atau null jika responsnya tidak menunjukkan error. Ini adalah nilai unik pada halaman, dan dapat digunakan untuk menghapus error atau menemukan elemen yang memuatnya.	Teruskan respons kueri dan penampung pesan error ke metode ini: jika respons kueri menunjukkan error kueri, pesan error akan ditampilkan di elemen halaman yang ditentukan. Jika respons kueri null, metode akan menampilkan error JavaScript. Teruskan QueryResponse Anda yang diterima di pengendali kueri ke pesan ini untuk menampilkan error. Tindakan ini juga akan menetapkan gaya tampilan yang sesuai dengan jenisnya (error atau peringatan, mirip dengan addError(opt_options.type)) container - Elemen DOM yang akan menjadi tempat menyisipkan pesan error. Jika penampung tidak dapat ditemukan, fungsi akan menampilkan error JavaScript. response - Objek QueryResponse yang diterima oleh pengendali kueri Anda sebagai respons terhadap query. Jika ini adalah null, metode ini akan menampilkan error JavaScript.
removeError(id)	Boolean: true jika error dihapus; false jika tidak.	Menghapus error yang ditetapkan oleh ID dari halaman. id - ID string dari error yang dibuat menggunakan addError() atau addErrorFromQueryResponse().
removeAll(container)	Tidak ada	Menghapus semua blok error dari penampung yang ditentukan. Jika penampung yang ditentukan tidak ada, akan muncul error. container - Elemen DOM yang menyimpan string error untuk dihapus. Jika penampung tidak dapat ditemukan, fungsi akan menampilkan error JavaScript.
getContainer(errorId)	Tangani elemen DOM yang menyimpan error yang ditentukan, atau null jika tidak dapat ditemukan.	Mengambil handle ke elemen container yang menyimpan error yang ditentukan oleh errorID. errorId - ID string dari error yang dibuat menggunakan addError() atau addErrorFromQueryResponse().

Acara

Sebagian besar visualisasi mengaktifkan peristiwa untuk menunjukkan sesuatu yang telah terjadi. Sebagai pengguna diagram, Anda mungkin ingin memproses peristiwa ini. Jika Anda mengkodekan visualisasi Anda sendiri, Anda juga dapat memicu peristiwa tersebut sendiri.

Metode berikut memungkinkan developer untuk memproses peristiwa, menghapus pengendali peristiwa yang ada, atau memicu peristiwa dari dalam visualisasi.

• google.visualization.events.addListener() dan google.visualization.events.addOneTimeListener() memproses peristiwa.
• google.visualization.events.removeListener() menghapus pemroses yang ada
• google.visualization.events.removeAllListeners() menghapus semua pemroses pada diagram tertentu
• google.visualization.events.trigger() mengaktifkan peristiwa.

addListener()

Panggil metode ini untuk mendaftar guna menerima peristiwa yang diaktifkan oleh visualisasi yang dihosting di halaman Anda. Anda harus mendokumentasikan argumen peristiwa, jika ada, yang akan diteruskan ke fungsi penanganan.

google.visualization.events.addListener(source_visualization,
  event_name, handling_function)

visualisasi sumber

Handle ke instance visualisasi sumber.

event_name

Nama string peristiwa yang akan diproses. Visualisasi harus mendokumentasikan peristiwa mana yang ditampilkan.

handling_function

Nama fungsi JavaScript lokal yang akan dipanggil saat source_visualization mengaktifkan peristiwa event_name. Fungsi penanganan akan meneruskan argumen peristiwa apa pun sebagai parameter.

Pengembalian

Pengendali pemroses untuk pemroses baru. Pengendali ini dapat digunakan untuk menghapus pemroses ini nanti jika diperlukan dengan memanggil google.visualization.events.removeListener().

Contoh

Berikut adalah contoh pendaftaran untuk menerima acara pemilihan

var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);

google.visualization.events.addListener(table, 'select', selectHandler);

function selectHandler() {
  alert('A table row was selected');
}

addOneTimeListener()

Ini identik dengan addListener(), tetapi ditujukan untuk peristiwa yang hanya boleh didengarkan sekali. Lemparan peristiwa berikutnya tidak akan memanggil fungsi penanganan.

Contoh saat hal ini berguna: setiap gambar menyebabkan peristiwa ready dilempar. Jika hanya ingin ready pertama yang mengeksekusi kode, Anda akan menginginkan addOneTimeListener, bukan addListener.

removeListener()

Panggil metode ini untuk membatalkan pendaftaran pemroses peristiwa yang ada.

google.visualization.events.removeListener(listener_handler)

pemroses_handler (hanya dalam bahasa Inggris)

Pengendali pemroses yang akan dihapus, seperti yang ditampilkan oleh google.visualization.events.addListener().

removeAllListeners()

Panggil metode ini untuk membatalkan pendaftaran semua pemroses peristiwa dari instance visualisasi tertentu.

google.visualization.events.removeAllListeners(source_visualization)

visualisasi sumber

Suatu handle ke instance visualisasi sumber tempat semua pemroses peristiwa harus dihapus.

pemicu()

Dipanggil oleh implementasier visualisasi. Panggil metode ini dari visualisasi Anda untuk mengaktifkan peristiwa dengan nama arbitrer dan kumpulan nilai.

google.visualization.events.trigger(source_visualization, event_name,
  event_args)

visualisasi sumber

Handle ke instance visualisasi sumber. Jika Anda memanggil fungsi ini dari dalam metode yang ditentukan oleh visualisasi pengiriman, Anda cukup meneruskan kata kunci this.

event_name

Nama string untuk memanggil peristiwa. Anda dapat memilih nilai string apa pun yang diinginkan.

peristiwa_args

[opsional] Peta pasangan nama/nilai yang akan diteruskan ke metode penerima. Misalnya:{message: "Hello there!", skor: 10, nama: "Fred"}. Anda dapat meneruskan null jika tidak ada peristiwa yang diperlukan; penerima harus siap menerima null untuk parameter ini.

Contoh

Berikut adalah contoh visualisasi yang menampilkan metode bernama "select" saat metode onclick-nya dipanggil. Metode ini tidak meneruskan kembali nilai apa pun.

MyVisualization.prototype.onclick = function(rowIndex) {
  this.highlightRow(this.selectedRow, false); // Clear previous selection
  this.highlightRow(rowIndex, true); // Highlight new selection

  // Save the selected row index in case getSelection is called.
  this.selectedRow = rowIndex;

  // Trigger a select event.
  google.visualization.events.trigger(this, 'select', null);
}

Metode dan Properti Visualisasi Standar

Setiap visualisasi harus mengekspos kumpulan metode dan properti wajib dan opsional berikut. Namun, perhatikan bahwa tidak ada pemeriksaan jenis untuk menerapkan standar ini, jadi Anda harus membaca dokumentasi untuk setiap visualisasi.

• Konstruktor
• gambar()
• getAction() [opsional]
• getSelection() [opsional]
• removeAction() [opsional]
• setAction() [opsional]
• setSelection() [opsional]

Catatan: Metode ini berada dalam namespace visualisasi, bukan namespace google.visualization.

Konstruktor

Konstruktor harus memiliki nama class visualisasi, dan menampilkan instance class tersebut.

visualization_class_name(dom_element)

elemen_dom

Pointer ke elemen DOM tempat visualisasi harus disematkan.

Contoh

var org = new google.visualization.OrgChart(document.getElementById('org_div')); 

gambar()

Menggambar visualisasi pada halaman. Di balik layar, tindakan ini dapat mengambil grafis dari server atau membuat grafis di halaman menggunakan kode visualisasi yang ditautkan. Anda harus memanggil metode ini setiap kali data atau opsi berubah. Objek harus digambar di dalam elemen DOM yang diteruskan ke konstruktor.

draw(data[, options])

data

DataTable atau DataView yang menyimpan data yang akan digunakan untuk menggambar diagram. Tidak ada metode standar untuk mengekstrak DataTable dari diagram.

opsi

[Opsional] Peta pasangan nama/nilai opsi kustom. Contohnya mencakup tinggi dan lebar, warna latar belakang, dan teks. Dokumentasi visualisasi harus mencantumkan opsi yang tersedia dan akan mendukung opsi default jika Anda tidak menentukan parameter ini. Anda dapat menggunakan sintaksis literal objek JavaScript untuk meneruskan peta opsi: misalnya, {x:100, y:200, title:'An Example'}

Contoh

chart.draw(myData, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});

getAction()

Ini ditampilkan secara opsional oleh visualisasi yang memiliki tooltip dan memungkinkan tindakan tooltip.

Menampilkan objek tindakan tooltip dengan actionID yang diminta.

Contoh:

// Returns the action object with the ID 'alertAction'.
chart.getAction('alertAction');

getSelection()

Hal ini secara opsional diekspos oleh visualisasi yang memungkinkan Anda mengakses data yang saat ini dipilih dalam grafik.

selection_array getSelection()

Pengembalian

selection_array Array objek yang dipilih, masing-masing menjelaskan elemen data dalam tabel yang mendasari yang digunakan untuk membuat visualisasi (DataView atau DataTable). Setiap objek memiliki properti row dan/atau column, dengan indeks baris dan/atau kolom item yang dipilih di DataTable pokok. Jika properti row bernilai null, maka pilihannya adalah kolom; jika properti column adalah null, maka pilihannya adalah baris; jika keduanya bukan null, maka item data tersebut adalah item data tertentu. Anda dapat memanggil metode DataTable.getValue() untuk mendapatkan nilai item yang dipilih. Array yang diambil dapat diteruskan ke setSelection().

Contoh

function myClickHandler(){
  var selection = myVis.getSelection();
  var message = '';

  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      message += '{row:' + item.row + ',column:' + item.column + '}';
    } else if (item.row != null) {
      message += '{row:' + item.row + '}';
    } else if (item.column != null) {
      message += '{column:' + item.column + '}';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message);
}

removeAction()

Ini ditampilkan secara opsional oleh visualisasi yang memiliki tooltip dan memungkinkan tindakan tooltip.

Menghapus objek tindakan tooltip dengan actionID yang diminta dari diagram.

Contoh:

// Removes an action from chart with the ID of 'alertAction'.
chart.removeAction('alertAction');

setAction()

Ini ditampilkan secara opsional oleh visualisasi yang memiliki tooltip dan memungkinkan tindakan tooltip. Metode ini hanya berfungsi untuk diagram inti (panel, kolom, garis, area, sebar, kombinasi, balon, lingkaran, donat, batang lilin, histogram, area bertahap).

Menetapkan tindakan tooltip yang akan dijalankan saat pengguna mengklik teks tindakan.

setAction(action object)

Metode setAction menggunakan objek sebagai parameter tindakannya. Objek ini harus menentukan 3 properti: id— ID tindakan yang ditetapkan, text —teks yang akan muncul di tooltip untuk tindakan, dan action — fungsi yang harus dijalankan saat pengguna mengklik teks tindakan.

Setiap dan semua tindakan tooltip harus ditetapkan sebelum memanggil metode draw() diagram.

Contoh:

// Sets a tooltip action which will pop an alert box on the screen when triggered.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  }
});

Metode setAction juga dapat menentukan dua properti tambahan: visible dan enabled. Properti ini harus berupa fungsi yang menampilkan nilai boolean yang menunjukkan apakah tindakan tooltip akan terlihat dan/atau diaktifkan.

Contoh:

// The visible/enabled functions can contain any logic to determine their state
// as long as they return boolean values.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  },
  visible: function() {
    return true;
  },
  enabled: function() {
    return true;
  }
});

setSelection()

Secara opsional, pilih entri data dalam visualisasi—misalnya, titik dalam diagram area, atau batang dalam diagram batang. Saat metode ini dipanggil, visualisasi harus secara visual menunjukkan pilihan baru. Implementasi setSelection() tidak boleh mengaktifkan peristiwa "select". Visualisasi dapat mengabaikan bagian dari pilihan. Misalnya, tabel yang hanya dapat menampilkan baris yang dipilih dapat mengabaikan elemen sel atau kolom dalam implementasi setSelection(), atau dapat memilih seluruh baris.

Setiap kali metode ini dipanggil, semua item yang dipilih akan dibatalkan pilihannya, dan daftar pilihan baru yang diteruskan harus diterapkan. Tidak ada cara eksplisit untuk membatalkan pilihan item satu per satu; untuk membatalkan pilihan masing-masing item, panggil setSelection() dengan item untuk tetap dipilih; untuk membatalkan pilihan semua elemen, panggil setSelection(), setSelection(null), atau setSelection([]).

setSelection(selection_array)

array_pilihan

Array objek, masing-masing dengan baris numerik dan/atau properti kolom. row dan column adalah baris atau nomor kolom berbasis nol dari item di tabel data yang akan dipilih. Untuk memilih seluruh kolom, tetapkan row ke null; untuk memilih seluruh baris, tetapkan column ke null. Contoh: setSelection([{row:0,column:1},{row:1, column:null}]) memilih sel di (0,1) dan seluruh baris 1.

Berbagai Metode Statis

Bagian ini berisi berbagai metode berguna yang ditampilkan dalam namespace google.visualization.

arrayToDataTable()

Metode ini menggunakan array dua dimensi dan mengonversinya menjadi DataTable.

Jenis data kolom ditentukan secara otomatis oleh data yang diberikan. Jenis data kolom juga dapat ditentukan menggunakan notasi literal objek di baris pertama (baris header kolom) array (yaitu {label: 'Start Date', type: 'date'}). Peran data opsional juga dapat digunakan, tetapi harus ditentukan secara eksplisit menggunakan notasi literal objek. Notasi literal objek juga dapat digunakan untuk sel apa pun, sehingga Anda dapat menentukan Objek Sel).

Sintaksis

google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)

duaDArray

Array dua dimensi, dengan setiap baris mewakili baris dalam tabel data. Jika opt_firstRowIsData bernilai salah (default), baris pertama akan ditafsirkan sebagai label header. Jenis data setiap kolom ditafsirkan secara otomatis dari data yang diberikan. Jika sel tidak memiliki nilai, tentukan nilai null atau kosong yang sesuai.

opt_firstRowIsData

Apakah baris pertama menentukan baris header atau tidak. Jika true (benar), semua baris akan diasumsikan sebagai data. Jika salah, baris pertama diasumsikan sebagai baris header, dan nilainya ditetapkan sebagai label kolom. Nilai defaultnya adalah false (salah).

Pengembalian

DataTable baru.

Contoh

Kode berikut menunjukkan tiga cara untuk membuat objek DataTable yang sama:

// Version 1: arrayToDataTable method
var data2 = google.visualization.arrayToDataTable([
  [{label: 'Country', type: 'string'},
   {label: 'Population', type: 'number'},
   {label: 'Area', type: 'number'},
   {type: 'string', role: 'annotation'}],
  ['CN', 1324, 9640821, 'Annotated'],
  ['IN', 1133, 3287263, 'Annotated'],
  ['US', 304, 9629091, 'Annotated'],
  ['ID', 232, 1904569, 'Annotated'],
  ['BR', 187, 8514877, 'Annotated']
]);

// Version 2: DataTable.addRows
var data3 = new google.visualization.DataTable();
data3.addColumn('string','Country');
data3.addColumn('number','Population');
data3.addColumn('number','Area');
data3.addRows([
  ['CN', 1324, 9640821],
  ['IN', 1133, 3287263],
  ['US', 304, 9629091],
  ['ID', 232, 1904569],
  ['BR', 187, 8514877]
]);

// Version 3: DataTable.setValue
var data = new google.visualization.DataTable();
data.addColumn('string','Country');
data.addColumn('number', 'Population');
data.addColumn('number', 'Area');
data.addRows(5);
data.setValue(0, 0, 'CN');
data.setValue(0, 1, 1324);
data.setValue(0, 2, 9640821);
data.setValue(1, 0, 'IN');
data.setValue(1, 1, 1133);
data.setValue(1, 2, 3287263);
data.setValue(2, 0, 'US');
data.setValue(2, 1, 304);
data.setValue(2, 2, 9629091);
data.setValue(3, 0, 'ID');
data.setValue(3, 1, 232);
data.setValue(3, 2, 1904569);
data.setValue(4, 0, 'BR');
data.setValue(4, 1, 187);
data.setValue(4, 2, 8514877);

drawChart()

Metode ini membuat diagram dalam satu panggilan. Keuntungan menggunakan metode ini adalah metode tersebut memerlukan kode yang sedikit lebih sedikit, dan Anda dapat membuat serialisasi dan menyimpan visualisasi sebagai string teks untuk digunakan kembali. Metode ini tidak menampilkan handle ke diagram yang dibuat, sehingga Anda tidak dapat menetapkan pemroses metode untuk menangkap peristiwa diagram.

Sintaksis

google.visualization.drawChart(chart_JSON_or_object)

diagram_JSON_atau_objek

String literal JSON atau objek JavaScript, dengan properti berikut (peka huruf besar/kecil):

Properti	Jenis	Wajib	Default	Deskripsi
ChartType	String	Wajib	tidak ada	Nama class visualisasi. Nama paket google.visualization dapat dihilangkan untuk diagram Google. Jika library visualisasi yang sesuai belum dimuat, metode ini akan memuatkan library untuk Anda jika ini adalah visualisasi Google; Anda harus memuat visualisasi pihak ketiga secara eksplisit. Contoh: Table, PieChart, example.com.CrazyChart.
ID penampung	String	Wajib	tidak ada	ID elemen DOM di halaman Anda yang akan menghosting visualisasi.
opsi	Object	Opsional	tidak ada	Objek yang menjelaskan opsi visualisasi. Anda dapat menggunakan notasi literal JavaScript, atau memberikan handle ke objek. Contoh: "options": {"width": 400, "height": 240, "is3D": true, "title": "Company Performance"}
TabelData	Object	Opsional	Tidak ada	DataTable yang digunakan untuk mengisi visualisasi. Ini dapat berupa representasi string JSON literal dari DataTable, seperti yang dijelaskan di atas, atau handle ke objek google.visualization.DataTable yang diisi, atau array 2 dimensi seperti yang diterima oleh arrayToDataTable(opt_firstRowIsData=false) . Anda harus menentukan properti ini atau properti dataSourceUrl.
dataSourceUrl	String	Opsional	Tidak ada	Kueri sumber data untuk mengisi data diagram (misalnya, Google Spreadsheet). Anda harus menentukan properti ini atau properti dataTable.
kueri	String	Opsional	Tidak ada	Jika menentukan dataSourceUrl, Anda dapat secara opsional menentukan string kueri yang mirip SQL menggunakan bahasa kueri Visualisasi untuk memfilter atau memanipulasi data.
intervalInterval	Angka	Opsional	Tidak ada	Seberapa sering, dalam hitungan detik, visualisasi harus memuat ulang sumber kuerinya. Hanya gunakan opsi ini saat menentukan dataSourceUrl.
view	Objek ATAU Array	Opsional	Tidak ada	Menetapkan objek penginisialisasi DataView, yang berfungsi sebagai filter di atas data pokok, seperti yang ditentukan oleh parameter dataTable atau dataSourceUrl. Anda dapat meneruskan string atau objek penginisialisasi DataView, seperti yang ditampilkan oleh dataview.toJSON(). Contoh: "view": {"columns": [1, 2]} Anda juga dapat meneruskan array objek penginisialisasi DataView, dalam hal ini DataView pertama dalam array diterapkan ke data pokok untuk membuat tabel data baru, dan DataView kedua diterapkan ke tabel data yang dihasilkan dari penerapan DataView pertama, dan seterusnya.

Contoh

Membuat diagram tabel berdasarkan sumber data spreadsheet, dan menyertakan kueri SELECT A,D WHERE D > 100 ORDER BY D

<script type="text/javascript">
  google.charts.load('current');  // Note: No need to specify chart packages.
  function drawVisualization() {
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
      "query":"SELECT A,D WHERE D > 100 ORDER BY D",
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true
      }
   });
 }
google.charts.setOnLoadCallback(drawVisualization);
</script>

Contoh berikutnya membuat tabel yang sama, tetapi membuat DataTable secara lokal:

<script type='text/javascript'>
  google.charts.load('current');
  function drawVisualization() {
    var dataTable = [
      ["Country", "Population Density"],
      ["Indonesia", 117],
      ["China", 137],
      ["Nigeria", 142],
      ["Pakistan", 198],
      ["India", 336],
      ["Japan", 339],
      ["Bangladesh", 1045]
    ];
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataTable": dataTable,
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true,
      }
    });
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

Contoh ini meneruskan representasi string JSON dari diagram, yang mungkin telah Anda muat dari file:

<script type="text/javascript">
  google.charts.load('current');
  var myStoredString = '{"containerId": "visualization_div",' +
    '"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",' +
    '"query":"SELECT A,D WHERE D > 100 ORDER BY D",' +
    '"refreshInterval": 5,' +
    '"chartType": "Table",' +
    '"options": {' +
    '   "alternatingRowStyle": true,' +
    '   "showRowNumber" : true' +
    '}' +
  '}';
  function drawVisualization() {
    google.visualization.drawChart(myStoredString);
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

drawToolbar()

Ini adalah konstruktor untuk elemen toolbar yang dapat dilampirkan ke banyak visualisasi. Toolbar ini memungkinkan pengguna mengekspor data visualisasi ke dalam berbagai format, atau menyediakan versi visualisasi yang dapat disematkan untuk digunakan di berbagai tempat. Lihat halaman toolbar untuk informasi selengkapnya dan contoh kode.