Referensi Google Visualization 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

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

Setiap kolom diberi jenis data, ditambah 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 mana pun. Beberapa visualisasi mendukung properti kustom tertentu; misalnya, Visualisasi tabel mendukung properti sel yang disebut 'style', yang memungkinkan Anda menetapkan string gaya CSS inline ke sel tabel yang dirender. Sebuah visualisasi harus menjelaskan dalam dokumentasinya setiap properti khusus yang didukungnya.

Lihat juga: QueryResponse.getDataTable

Konstruktor

Sintaksis

DataTable(opt_data, opt_version)

opt_data

[Opsional] Data yang digunakan untuk menginisialisasi 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 diberikan, tabel data baru yang kosong akan ditampilkan.

opt_version

[Opsional] Nilai numerik yang menentukan versi protokol kabel yang digunakan. Metrik ini hanya digunakan oleh pengimplementasi Sumber Data Chart Tools. 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 deskriptor yang menyertakan jenis datanya, label untuk kolom tersebut (yang mungkin ditampilkan dengan visualisasi), dan ID, yang dapat digunakan untuk merujuk ke kolom tertentu (sebagai alternatif penggunaan 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 kustom agar Anda dapat 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 secara opsional bisa mengambil versi "terformat" dari data; ini adalah versi string dari data, yang diformat untuk ditampilkan dengan visualisasi. Visualisasi dapat (tetapi tidak diharuskan) menggunakan versi berformat untuk ditampilkan, tetapi akan selalu menggunakan data itu sendiri untuk pengurutan atau penghitungan apa pun yang dibuatnya (seperti menentukan posisi titik pada grafik). Contohnya mungkin 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 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 menampilkan perubahan.

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

Contoh berikut menunjukkan pembuatan instance dan pengisian 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 melakukan inisialisasi DataTable dengan meneruskan objek literal string JavaScript ke dalam parameter data. Kita akan menyebut objek ini sebagai objek data. Anda dapat membuat kode objek ini secara manual, sesuai dengan deskripsi di bawah, atau menggunakan library Python helper jika mengetahui cara menggunakan Python, dan situs Anda dapat menggunakannya. Namun, jika Anda ingin membuat objek dengan tangan, bagian ini akan menjelaskan sintaksisnya.

Pertama, mari kita tampilkan contoh objek JavaScript sederhana yang mendeskripsikan tabel dengan tiga baris dan tiga kolom (Jenis String, Angka, dan 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 bahas sintaksisnya:

Objek data terdiri dari dua properti level teratas 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 dijelaskan sebagai mengambil nilai string harus diapit dengan tanda kutip. Misalnya, jika Anda ingin menentukan properti jenis sebagai angka, properti akan dinyatakan seperti ini: type: 'number', tetapi nilai itu sendiri, sebagai numerik, 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 di kolom. Mendukung nilai string berikut (contohnya mencakup properti v:, yang akan 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. Contoh nilai: v:'hello'
  • 'date' - Objek Tanggal JavaScript (bulan berbasis nol), dengan waktu 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' - Susunan 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 kolom. Harus unik dalam tabel. Gunakan karakter alfanumerik dasar, sehingga halaman host tidak memerlukan escape indah untuk mengakses kolom di JavaScript. Hati-hati, 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 sebagai referensi; Anda mungkin tidak perlu membaca pola tersebut, dan tidak harus ada. Klien Visualisasi Google tidak menggunakan nilai ini (nilai ini membaca nilai terformat sel). Jika DataTable berasal dari sumber data sebagai respons terhadap kueri dengan klausa format, pola yang Anda tentukan dalam klausa tersebut mungkin akan ditampilkan dalam nilai ini. Standar pola yang direkomendasikan adalah DecimalFormat ICU 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 tersebut 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. File 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, visualisasi tersebut akan mendeskripsikannya; 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 sel null, properti v harus null, meskipun sel tersebut masih dapat memiliki properti f dan p.
• f [Opsional] Versi string dari nilai v, yang diformat untuk tampilan. Biasanya, nilai akan cocok, meskipun tidak perlu. Jadi, jika Anda menentukan Date(2008, 0, 1) untuk v, Anda harus menentukan "1January 2008" atau string tertentu untuk properti ini. Nilai ini tidak dibandingkan dengan nilai v. Visualisasi tidak akan menggunakan nilai ini untuk penghitungan, hanya sebagai label untuk ditampilkan. Jika dihilangkan, versi string v akan otomatis dibuat menggunakan pemformat default. Nilai f dapat diubah menggunakan pemformat 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 visualisasi Anda mendukung properti tingkat sel apa pun, 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 dengan deskripsi kolom di cols. Untuk menunjukkan sel null, Anda dapat menentukan null, membiarkan kosong untuk sel dalam array, atau menghilangkan 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 contoh objek tabel 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'}
        ]}
  ]
}

Properti

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

Kelas Tampilan Data

Tampilan hanya baca dari DataTable pokok. DataView hanya memungkinkan pemilihan subset kolom dan/atau baris. Hal ini juga memungkinkan penyusunan ulang kolom/baris, dan menduplikasi kolom/baris.

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

• Penambahan atau penghapusan kolom dari tabel pokok tidak akan tercermin dalam tampilan, dan dapat menyebabkan perilaku yang tidak terduga dalam tampilan; Anda harus membuat DataView baru dari DataTable untuk menerapkan perubahan ini.
• Penambahan atau penghapusan baris dari tabel pokok dapat dilakukan dengan aman dan perubahan akan segera diterapkan ke tampilan (tetapi Anda harus memanggil draw() pada visualisasi apa pun setelah perubahan ini agar kumpulan baris baru dirender). Perlu diketahui bahwa jika tampilan Anda telah memfilter baris dengan memanggil salah satu metode setRows() or hideRows(), dan Anda menambahkan atau menghapus baris dari tabel pokok, perilakunya tidak diharapkan; Anda harus membuat DataView baru untuk mencerminkan tabel baru.
• Mengubah nilai sel dalam sel yang ada aman, dan perubahan akan segera disebarkan 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 pokok disebutkan, hal tersebut mengacu pada tingkat yang berada tepat di bawah level ini. Dengan kata lain, 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 seperempat kalender tanggal dari kolom lain. Lihat setColumns() untuk mengetahui detail selengkapnya.

Saat Anda mengubah 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 ditampilkan 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 dalam tampilan atau tabel data pokok, dalam urutan awal. 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. 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 dengan tabel aslinya, Anda akan mendapatkan hasil yang tidak dapat diprediksi.

viewAsJson

String JSON yang ditampilkan oleh DataView.toJSON(). Ini adalah deskripsi baris mana 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 dan menangani semua pemuatan, gambar, dan pembuatan kueri Sumber data untuk diagram. Class ini mengekspos metode praktis untuk menetapkan nilai pada diagram dan menggambarnya. Class ini menyederhanakan pembacaan dari sumber data, karena Anda tidak perlu membuat handler callback kueri. Anda juga dapat menggunakannya untuk menyimpan diagram dengan mudah untuk digunakan kembali.

Bonus lain menggunakan 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 mengetahui detailnya.

Namun, ChartWrapper saat ini hanya menyebarkan subkumpulan peristiwa yang ditampilkan oleh diagram: select, ready, dan error. Peristiwa lain tidak dikirimkan melalui instance ChartWrapper; untuk mendapatkan peristiwa lainnya, Anda harus memanggil getChart() dan berlangganan peristiwa secara langsung pada tuas 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)

opt_spec

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

Metode

ChartWrapper mengekspos metode tambahan berikut:

Acara

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

Contoh

Dua cuplikan berikut membuat diagram garis yang setara. Contoh pertama menggunakan notasi literal JSON untuk menentukan diagram; contoh 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, sekarang 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 untuk Anda sesuai kebutuhan.
2. Buat objek ChartWrapper yang menentukan diagram untuk 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 ditampilkan saat pengguna mengklik tombol "OK" pada dialog. Saat diterima, Anda harus memanggil ChartEditor.getChartWrapper() untuk mengambil diagram yang diubah pengguna.
4. Panggil ChartEditor.openDialog() dengan meneruskan ChartWrapper. Tindakan ini akan membuka dialog. Tombol dialog memungkinkan pengguna menutup editor. Instance ChartEditor tersedia selama masih dalam cakupan; instance tidak otomatis dihancurkan setelah pengguna menutup dialog.
5. Untuk memperbarui diagram dalam kode, panggil setChartWrapper().

Metode

Opsi

Editor bagan mendukung opsi berikut ini:

Acara

Editor diagram menampilkan peristiwa berikut:

Contoh

Kode contoh berikut membuka dialog editor diagram dengan diagram garis yang terisi. Jika pengguna mengklik "OK", 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 mirip SQL pada objek DataTable, misalnya menggabungkan objek atau mengelompokkan berdasarkan nilai kolom.

Namespace google.visualization.data menampilkan metode berikut:

group()

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

Tabel yang ditampilkan berisi satu baris untuk setiap kombinasi nilai di kolom kunci yang ditentukan. Setiap baris mencakup kolom kunci, ditambah satu kolom dengan nilai kolom gabungan di atas semua baris yang cocok dengan kombinasi kunci (misalnya, jumlah atau jumlah semua nilai dalam kolom yang ditentukan).

Namespace google.visualization.data mencakup beberapa nilai agregasi yang berguna (misalnya sum dan count), tetapi Anda dapat menentukan nilai Anda 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)

data_table

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

keys

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

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

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

kolom

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

• kolom - Angka yang menentukan indeks kolom yang akan ditampilkan.
• agregasi - Fungsi yang menerima array dari 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 dijelaskan di bawah ini. Anda harus mengetahui jenis data yang diterima metode ini dan hanya memanggilnya di kolom dengan jenis yang sesuai. API ini menyediakan beberapa fungsi agregasi yang berguna. Lihat Fungsi Agregasi yang Disediakan di bawah untuk mengetahui daftar, atau Membuat fungsi agregasi untuk mempelajari cara menulis fungsi agregasi Anda sendiri.
• type - Jenis nilai yang ditampilkan dari fungsi agregasi. Kolom 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 yang akan diterapkan ke kolom ini dalam tabel yang ditampilkan.

Nilai Hasil

DataTable dengan satu kolom untuk setiap kolom yang tercantum dalam keys dan satu kolom untuk setiap kolom yang tercantum dalam column. Tabel diurutkan menurut 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 Diberikan

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

Fungsi Agregasi yang Diberikan

API ini menyediakan fungsi agregasi berikut yang dapat Anda teruskan ke kolom. agregasi.

Membuat fungsi pengubah

Anda dapat membuat fungsi pengubah untuk melakukan transformasi nilai pada kunci transformasi sederhana sebelum fungsi group() mengelompokkan baris Anda. Fungsi ini mengambil nilai sel tunggal, melakukan tindakan pada nilai tersebut (misalnya menambahkan 1 ke nilai), dan menampilkannya. Jenis input dan nilai yang ditampilkan tidak harus sama, tetapi pemanggil harus mengetahui jenis input dan outputnya. 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 kumpulan nilai kolom dalam grup baris dan menampilkan satu angka: misalnya, menampilkan jumlah atau rata-rata nilai. Berikut adalah implementasi fungsi agregasi jumlah yang disediakan, yang menampilkan 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) ke dalam satu tabel hasil, mirip dengan pernyataan JOIN SQL. Anda menentukan satu atau beberapa pasangan kolom (kolom key) antara kedua tabel, dan tabel output akan menyertakan baris sesuai dengan metode penggabungan yang Anda tentukan: hanya baris yang kedua kunci cocok; semua baris dari satu tabel; atau semua baris dari kedua tabel, baik kunci tersebut cocok atau tidak. Tabel hasil hanya menyertakan kolom kunci, ditambah kolom tambahan yang Anda tentukan. Perhatikan bahwa dt2 tidak dapat memiliki kunci duplikat, tetapi dt1 dapat memiliki kunci duplikat. Istilah "kunci" berarti kombinasi dari semua nilai kolom kunci, bukan nilai kolom kunci tertentu; jadi jika baris memiliki nilai sel A | B | C serta 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 telah diisi untuk digabungkan dengan dt2.

dt2

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

joinMethod

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

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

keys

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

A	B
Jeni	Merah
Jeni	Biru
Feri	Merah

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

dt1Columns

Array kolom dari dt1 yang akan disertakan dalam tabel output, selain kolom kunci dt1. Array ini dapat menentukan kolom berdasarkan indeks, id, atau labelnya, lihat getColumnIndex.

dt2Columns

Array kolom dari dt2 yang akan disertakan dalam tabel output, selain kolom kunci dt2. Array ini dapat menentukan kolom berdasarkan indeks, id, atau labelnya, lihat getColumnIndex.

Nilai Hasil

DataTable dengan kolom kunci, dt1Columns, dan dt2Columns. Tabel ini diurutkan menurut kolom utama, dari kiri ke kanan. Jika joinMethod adalah 'inner', semua sel kunci 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

Formatter

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

• Formatter hanya mengubah nilai yang diformat, bukan nilai yang mendasarinya. Misalnya, nilai yang ditampilkan adalah "$1,000.00", tetapi nilai dasar tetap akan menjadi "1000".
• Pemformat hanya memengaruhi satu kolom dalam satu waktu. Untuk memformat ulang beberapa kolom, terapkan pemformat ke setiap kolom yang ingin Anda ubah.
• Jika Anda juga menggunakan pemformat yang ditentukan pengguna, pemformat Visualisasi Google tertentu akan menggantikan semua pemformat yang ditentukan pengguna.

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

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

Berikut adalah langkah-langkah umum untuk menggunakan pemformat:

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

Berikut contoh perubahan nilai tanggal berformat dari 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 menampilkan dua metode berikut:

Metode	Deskripsi
google.visualization.formatter_name(options)	Konstruktor, dengan formatter_name adalah nama formatterclass spesifik. options - Objek JavaScript umum yang menentukan opsi untuk pemformat tersebut. Objek ini adalah objek generik dengan pasangan properti/nilai yang memiliki properti khusus untuk pemformat tersebut. Lihat dokumentasi untuk pemformat tertentu 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 dari kolom yang akan diformat. Untuk memformat beberapa kolom, Anda harus memanggil metode ini beberapa kali, dengan nilai colIndex yang berbeda.

 

Google Visualization API menyediakan pemformat berikut:

Nama Formatter	Deskripsi
ArrowFormat	Menambahkan panah atas atau bawah, yang menunjukkan apakah nilai sel berada di atas atau di bawah nilai yang ditentukan.
BarFormat	Menambahkan batang berwarna, yang arah dan warnanya menunjukkan apakah nilai sel berada di atas atau di bawah nilai yang ditentukan.
ColorFormat	Mewarnai sel sesuai dengan apakah nilai berada dalam rentang yang ditentukan atau tidak.
DateFormat	Memformat nilai Date atau DateTime dengan beberapa cara, termasuk "January 1, 2009", "1/1/09", dan "Jan 1, 2009".
NumberFormat	Memformat berbagai aspek nilai numerik.
PatternFormat	Menggabungkan nilai sel pada baris yang sama ke dalam sel tertentu, bersama dengan teks arbitrer.

ArrowFormat

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

Opsi

ArrowFormat mendukung opsi berikut, yang diteruskan ke konstruktor:

Opsi	Deskripsi
base	Angka yang menunjukkan nilai dasar, digunakan untuk membandingkan nilai sel. Jika nilai sel lebih tinggi, sel akan menyertakan panah atas berwarna hijau; jika nilai sel lebih rendah, panah bawah akan ditampilkan dengan warna merah; jika sama, tanpa tanda 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});

BarFormat

Menambahkan batang berwarna ke sel numerik yang menunjukkan apakah nilai sel berada 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 dibandingkan dengan nilai sel. Jika nilai sel lebih tinggi, nilai sel akan digambar di sebelah kanan dasar; jika lebih rendah, nilai akan digambar ke kiri. Nilai defaultnya adalah 0.
colorNegative	String yang menunjukkan bagian nilai negatif batang. Nilai yang mungkin adalah 'red', 'green', dan 'blue'; nilai defaultnya adalah 'red'.
colorPositive	String yang menunjukkan warna bagian nilai positif pada batang. Nilai yang mungkin adalah 'red', 'green', dan 'blue'. Nilai defaultnya adalah 'biru'.
drawZeroLine	Boolean yang menunjukkan apakah akan menggambar garis dasar gelap berukuran 1 piksel saat nilai negatif ada. Garis gelap berfungsi untuk meningkatkan pemindaian visual pada 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 (benar), menampilkan nilai dan batang, sedangkan jika false (salah), 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%'});

ColorFormat

Menetapkan warna ke latar depan atau latar belakang sel numerik, bergantung pada nilai sel. Pemformat ini tidak biasa, karena tidak mengambil opsinya di konstruktor. Sebagai gantinya, panggil addRange() atau addGradientRange() sesering yang Anda inginkan untuk menambahkan rentang warna sebelum memanggil format(). Warna dapat ditentukan dalam format HTML apa pun yang dapat diterima, misalnya "black", "#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 untuk sel, bergantung pada nilai sel. Setiap sel yang memiliki nilai dalam rentang from—to yang ditentukan akan diberi nilai color dan bgcolor. Penting untuk menyadari bahwa rentang tersebut non-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 (termasuk) rentang, atau null. Jika null, nilainya akan cocok dengan -⁠. Batas string dibandingkan secara abjad terhadap nilai string. to - [String, Number, Date, DateTime, atau TimeOfDay] Batas tinggi (non-inklusif) rentang, atau null. Jika null, nilainya akan cocok dengan +⁠. Batas string dibandingkan secara abjad terhadap nilai string. warna - Warna yang akan diterapkan pada teks dalam sel yang cocok. Nilai dapat berupa nilai '#RRGGBB' atau konstanta warna yang ditentukan, (contoh: '#FF0000' atau 'red'). bgcolor - Warna yang akan diterapkan ke latar belakang sel yang cocok. Nilai dapat berupa nilai '#RRGGBB' atau konstanta warna yang ditentukan, (contoh: '#FF0000' atau 'red').
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, mulai 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 pelihat secara akurat; rentang yang paling sederhana dan mudah dibaca adalah dari warna yang sepenuhnya tersaturasi ke putih (misalnya, #FF0000—FFFFFF). from - [Number, Date, DateTime, atau TimeOfDay] Batas bawah (inklusif) rentang, atau null. Jika null, nilainya akan cocok dengan - Play. to - [Number, Date, DateTime, atau TimeOfDay] Batas yang lebih tinggi (non-inklusif) rentang, atau null. Jika null, nilainya akan cocok dengan +⁠. warna - Warna yang akan diterapkan pada teks dalam sel yang cocok. Warna ini sama untuk semua sel, apa pun nilainya. fromBgColor - Warna latar belakang untuk sel yang menyimpan nilai di ujung bawah gradien. Nilai dapat berupa nilai '#RRGGBB' atau konstanta warna yang ditentukan, (contoh: '#FF0000' atau 'red'). toBgColor - Warna latar belakang untuk sel yang menyimpan nilai di ujung gradien yang tinggi. Nilai dapat berupa nilai '#RRGGBB' atau konstanta warna yang ditentukan, (contoh: '#FF0000' atau 'red').
format(dataTable, columnIndex)	Metode format() standar untuk menerapkan format 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%'});

DateFormat

Memformat nilai Date JavaScript dengan berbagai cara, termasuk "January 1, 2016", "1/1/16", dan "Jan 1, 2016".

Opsi

DateFormat mendukung opsi berikut, yang diteruskan ke konstruktor:

Opsi	Deskripsi
formatType	Opsi pemformatan cepat untuk tanggal. Nilai string berikut didukung, memformat ulang tanggal 28 Februari 2016 seperti yang ditunjukkan: 'short' - Format pendek: misalnya, "28/28/16" 'medium' - Format sedang: misalnya, "28 Feb 2016" 'long' - Format panjang: misalnya, "28 Februari 2016" Anda tidak dapat menentukan formatType dan pattern sekaligus.
pattern	Pola format kustom yang akan diterapkan pada 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 berupa negatif). Objek tanggal dibuat secara default dengan asumsi zona waktu komputer tempat objek tersebut dibuat; opsi ini digunakan untuk menampilkan nilai tersebut dalam zona waktu yang berbeda. Misalnya, jika Anda membuat objek Date pukul 17.00 di komputer yang berlokasi di Greenwich, Inggris, dan menentukan timeZone ke -5 (options['timeZone'] = -5, atau Waktu Pasifik Timur di AS), nilai yang ditampilkan adalah pukul 12.00.

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 format 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 selengkapnya tentang pola yang didukung:

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

Pola	Deskripsi	Contoh Output
GG	Era penunjuk.	"IKLAN"
yy atau yyyy	tahun ini.	1996
S	Bulan dalam tahun. Untuk Januari: M menghasilkan 1 MM menghasilkan 01 MMM menghasilkan Jan MMMM menghasilkan bulan Januari	"Juli" "07"
d	Hari dalam bulan. Nilai tambahan 'd' akan menambahkan angka nol di awal.	10
h	Jam dalam skala 12 jam. Tambahan nilai 'h' akan menambahkan angka nol di awal.	12
H	Jam dalam skala 24 jam. Nilai Hk tambahan akan menambahkan angka nol di awal.	0
m	Menit dalam jam. Nilai tambahan 'M' akan menambahkan angka nol di awal.	30
d	Detik dalam menit. Tambahan nilai 's' akan menambahkan angka nol di awal.	55
S	Detik pecahan. Nilai 'S' tambahan akan diisi di sebelah kanan dengan angka nol.	978
E	Hari. Output berikut untuk "Selasa": E menghasilkan T EE atau EEE Produce Tu atau Sel EEEE Produces Tuesday (Selasa)	"Sel" "Selasa"
aa	AM/PM	"Sore/Malam"
k	Jam dalam hari (1~24). Nilai tambahan 'k' akan menambahkan angka nol di awal.	24
K	Jam dalam AM/PM (0~11). Nilai tambahan 'k' akan menambahkan angka 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: Hasil Z, ZZ, ZZZ -0500 ZZZZ dan produk lainnya "GMT -05.00"	"-0.800" "GMT -05.00"
v	Zona waktu (umum).	"Dst/GMT-5"
'	escape untuk teks	'Tanggal='
''	tanda petik tunggal	"yy"

NumberFormat

Menjelaskan cara memformat kolom numerik. Opsi format mencakup penentuan simbol awalan (seperti tanda dolar) atau tanda baca yang akan 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 berapa banyak digit yang akan ditampilkan setelah desimal. Defaultnya adalah 2. Jika Anda menentukan jumlah digit yang lebih banyak daripada jumlah yang ada, angka nol untuk nilai yang lebih kecil akan ditampilkan. Nilai yang terpotong akan dibulatkan (5 dibulatkan).
groupingSymbol	Karakter yang akan digunakan untuk mengelompokkan digit di sebelah kiri desimal menjadi set berisi tiga angka. Defaultnya adalah koma (,).
negativeColor	Warna teks untuk nilai negatif. Tidak ada nilai default. Nilai dapat berupa nilai warna HTML apa pun yang dapat diterima, seperti "merah" atau "#FF0000".
negativeParens	Boolean, dengan nilai benar menunjukkan bahwa nilai negatif harus diapit oleh tanda kurung. Defaultnya adalah true (benar).
pattern	String format. Jika disediakan, semua opsi lain 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 format 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%'});

PatternFormat

Memungkinkan Anda menggabungkan nilai kolom yang ditetapkan ke dalam satu kolom, bersama dengan teks arbitrer. Misalnya, jika Anda 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 mengetahui petunjuknya.

Metode

PatternFormat mendukung metode berikut:

Metode	Deskripsi
google.visualization.PatternFormat(pattern)	Konstruktor. Tidak mengambil objek opsi. Sebagai gantinya, parameter ini mengambil parameter pattern string. Ini adalah string yang menjelaskan nilai kolom mana yang akan dimasukkan ke dalam kolom tujuan, bersama dengan teks arbitrer. Sematkan placeholder dalam string Anda untuk menunjukkan nilai dari kolom lain yang akan disematkan. Placeholdernya adalah {#}, dengan # adalah indeks kolom sumber yang akan digunakan. Indeks adalah indeks dalam array srcColumnIndices dari metode format() di bawah. Untuk menyertakan karakter { atau } literal, ganti karakter tersebut seperti ini: \{ atau \}. Untuk menyertakan tanda \ literal, hapus 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 - DataTable tempat beroperasi. srcColumnIndices - Array yang berisi satu atau beberapa indeks kolom (berbasis nol) untuk diambil sebagai sumber dari DataTable pokok. Ini akan digunakan sebagai sumber data untuk parameter pattern di konstruktor. Nomor kolom tidak harus diurutkan. opt_dstColumnIndex - [optional] Kolom tujuan untuk menempatkan output dari manipulasi pattern. Jika tidak ditentukan, elemen pertama dalam srcColumIndices akan digunakan sebagai tujuan. Lihat contoh pemformatan setelah tabel.

Berikut adalah 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. Contoh 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', '[email protected]'],
  ['Paul McCartney', '[email protected]'],
  ['George Harrison', '[email protected]'],
  ['Ringo Starr', '[email protected]']
]);

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

Menampilkan kueri yang dikirim ke sumber data.

Konstruktor

google.visualization.Query(dataSourceUrl, opt_options)

Parameter

dataSourceUrl

URL [Wajib, String] yang akan dikirimi kueri. Lihat dokumentasi Diagram dan Spreadsheet untuk Google Spreadsheet.

opt_options

[Opsional, Objek] Peta opsi untuk permintaan. Catatan: Jika Anda mengakses sumber data yang dibatasi , Anda tidak boleh menggunakan parameter ini. Berikut ini 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' - Mengirim kueri menggunakan injeksi skrip.
  • 'makeRequest' - [Available only for nodes, which are deprecated] Kirim kueri menggunakan metode makeRequest() Gadget API. 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 - [Object] 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 hingga send. seconds adalah angka yang lebih besar 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 meningkatkan 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. Jika digunakan, metode ini 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 satu parameter dengan jenis google.visualization.QueryResponse.

QueryResponse

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()	DataTable	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 ditampilkan adalah pesan yang ditujukan untuk developer, dan dapat berisi informasi teknis, misalnya 'Column {salary} {/5}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 untuk pengguna akhir, misalnya 'Kueri Tidak Valid' atau 'Akses Ditolak'.
getReasons()	Array string	Menampilkan array nol dari entri lainnya. Setiap entri adalah string pendek dengan kode error atau peringatan yang muncul saat mengeksekusi kueri. Kode yang mungkin digunakan: access_denied Pengguna tidak memiliki izin untuk mengakses sumber data. invalid_query Kueri yang ditentukan mengalami error 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 respons tidak berisi tabel data apa pun. Menampilkan <false> jika eksekusi kueri berhasil dan respons 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 elemen visualisasi, pesan error akan ditampilkan di atas visualisasi. Selanjutnya, panggil fungsi yang sesuai di bawah ini untuk menampilkan atau menghapus pesan error.

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

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

Anda dapat melihat contoh error kustom pada Contoh 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 penampungnya.	Menambahkan blok tampilan error ke elemen halaman yang ditentukan, dengan teks dan format yang ditentukan. container - Elemen DOM tempat memasukkan pesan error. Jika penampung tidak dapat ditemukan, fungsi akan menampilkan error JavaScript. pesan - Pesan string yang akan ditampilkan. opt_detailedMessage - String pesan mendetail yang bersifat opsional. Secara default, teks ini merupakan teks pengarahan mouse, tetapi dapat diubah dalam properti opt_options.showInToolTip yang dijelaskan di bawah. opt_options - Objek opsional dengan properti yang menetapkan berbagai opsi tampilan untuk pesan. Opsi berikut ini didukung: showInTooltip - Nilai boolean jika true (benar) menampilkan pesan mendetail hanya sebagai teks tooltip, sedangkan false (salah) menampilkan pesan mendetail dalam isi penampung setelah pesan singkat. Nilai default adalah true. type - String yang menjelaskan jenis error, yang menentukan gaya CSS mana yang harus diterapkan ke 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 pada jenis peringatan (opt_options.type). Contoh: 'background-color: #33ff99; padding: 2px;' Nilai default adalah string kosong. removable - Nilai boolean, dengan true (benar) berarti pesan dapat ditutup dengan klik mouse dari pengguna. Nilai defaultnya adalah false (salah).
addErrorFromQueryResponse(container, response)	Nilai ID string yang mengidentifikasi objek error yang dibuat, atau null jika respons tidak menunjukkan error. Ini adalah nilai unik pada halaman, dan dapat digunakan untuk menghapus error atau menemukan elemen di dalamnya.	Teruskan respons kueri dan penampung pesan error ke metode ini: jika respons kueri menunjukkan adanya error kueri, pesan error akan ditampilkan dalam elemen halaman yang ditentukan. Jika respons kueri bernilai null, metode ini akan menampilkan error JavaScript. Teruskan QueryResponse yang diterima di pengendali kueri Anda 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 tempat memasukkan pesan error. Jika penampung tidak dapat ditemukan, fungsi akan menampilkan error JavaScript. response - Objek QueryResponse yang diterima oleh pengendali kueri Anda sebagai respons terhadap kueri. Jika nilai ini null, metode akan menampilkan error JavaScript.
removeError(id)	Boolean: true (benar) jika {i>error<i} dihapus; {i>false <i}jika sebaliknya.	Menghapus error yang ditentukan oleh ID dari halaman. id - ID string 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, error akan muncul. penampung - Elemen DOM yang menyimpan string error yang akan dihapus. Jika penampung tidak dapat ditemukan, fungsi akan menampilkan error JavaScript.
getContainer(errorId)	Menangani elemen DOM yang menyimpan error yang ditentukan, atau null jika tidak dapat ditemukan.	Mengambil handle ke elemen penampung yang menyimpan error yang ditentukan oleh errorID. errorId - ID String error yang dibuat menggunakan addError() atau addErrorFromQueryResponse().

Acara

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

Metode berikut memungkinkan developer 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 diagram tertentu
• google.visualization.events.trigger() mengaktifkan peristiwa.

addListener()

Panggil metode ini untuk mendaftar agar dapat 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)

source_visualization

Nama sebutan channel untuk instance visualisasi sumber.

event_name

Nama string peristiwa yang akan diproses. Visualisasi harus mendokumentasikan peristiwa 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 dapat digunakan untuk menghapus pemroses ini nanti jika diperlukan dengan memanggil google.visualization.events.removeListener().

Contoh

Berikut 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 diproses satu kali. Pemunculan peristiwa berikutnya tidak akan memanggil fungsi penanganan.

Contoh kapan hal ini berguna: setiap gambar menyebabkan peristiwa ready ditampilkan. Jika hanya ingin ready pertama yang mengeksekusi kode, Anda memerlukan addOneTimeListener, bukan addListener.

removeListener()

Panggil metode ini untuk membatalkan pendaftaran pemroses peristiwa yang ada.

google.visualization.events.removeListener(listener_handler)

listener_handler

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)

source_visualization

Handle ke instance visualisasi sumber tempat semua pemroses peristiwa harus dihapus.

trigger()

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

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

source_visualization

Nama sebutan channel ke instance visualisasi sumber. Jika memanggil fungsi ini dari dalam metode yang ditentukan oleh visualisasi pengiriman, Anda dapat meneruskan kata kunci this.

event_name

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

event_args

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

Contoh

Berikut contoh visualisasi yang menampilkan metode bernama "select" saat metode onclick dipanggil. 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 menampilkan 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
• draw()
• getAction() [opsional]
• getSelection() [opsional]
• removeAction() [opsional]
• setAction() [opsional]
• setSelection() [opsional]

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

Konstruktor

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

visualization_class_name(dom_element)

dom_element

Pointer ke elemen DOM tempat visualisasi harus disematkan.

Contoh

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

draw()

Menggambar visualisasi pada halaman. Di balik layar, pengambilan gambar dari server atau pembuatan grafik di halaman dapat dilakukan 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.

options

[Opsional] Peta pasangan nama/nilai dari opsi kustom. Contohnya mencakup tinggi dan lebar, warna latar belakang, dan teks. Dokumentasi visualisasi harus mencantumkan opsi yang tersedia, dan harus 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()

Hal ini diekspos 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()

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

selection_array getSelection()

Pengembalian

selection_array Array objek yang dipilih, masing-masing mendeskripsikan elemen data dalam tabel pokok 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 dalam DataTable yang mendasarinya. Jika properti row bernilai null, maka pilihannya adalah kolom; jika properti column bernilai null, maka pilihannya adalah baris; jika keduanya non-null, maka properti tersebut adalah item data spesifik. 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()

Hal ini diekspos secara opsional oleh visualisasi yang memiliki tooltip dan memungkinkan tindakan tooltip.

Menghapus objek tindakan tooltip dengan actionID yang diminta dari diagram Anda.

Contoh:

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

setAction()

Hal ini diekspos secara opsional oleh visualisasi yang memiliki tooltip dan memungkinkan tindakan tooltip. Fitur ini hanya berfungsi untuk diagram inti (batang, kolom, garis, area, sebar, kombinasi, balon, lingkaran, donat, batang lilin, histogram, area berundak).

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

setAction(action object)

Metode setAction mengambil objek sebagai parameter tindakannya. Objek ini harus menentukan 3 properti: id— ID tindakan yang sedang ditetapkan, text —teks yang akan muncul dalam 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, Anda dapat memilih entri data dalam visualisasi—misalnya, titik dalam diagram area, atau batang pada diagram batang. Saat metode ini dipanggil, visualisasi harus menunjukkan secara visual pilihan baru tersebut. Implementasi setSelection() tidak boleh mengaktifkan peristiwa "select". Visualisasi dapat mengabaikan bagian pilihan. Misalnya, tabel yang hanya dapat menampilkan baris yang dipilih dapat mengabaikan elemen sel atau kolom dalam implementasi setSelection(), atau tabel dapat memilih seluruh baris.

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

setSelection(selection_array)

selection_array

Array objek, masing-masing dengan properti baris dan/atau kolom numerik. row dan column adalah nomor baris atau kolom berbasis nol dari sebuah item dalam tabel data untuk 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.

Beraneka Metode Statis

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

arrayToDataTable()

Metode ini menggunakan array dua dimensi dan mengubahnya 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 mana pun, sehingga Anda dapat menentukan Objek Sel).

Sintaksis

google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)

twoDArray

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

opt_firstRowIsData

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

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 memerlukan sedikit kode yang lebih sedikit, dan Anda dapat menserialisasi serta 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)

chart_JSON_or_object

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 memuat library tersebut untuk Anda jika ini adalah visualisasi Google; Anda harus memuat visualisasi pihak ketiga secara eksplisit. Contoh: Table, PieChart, example.com.CrazyChart.
containerId	String	Wajib	tidak ada	ID elemen DOM di halaman Anda yang akan menghosting visualisasi.
opsi	Objek	Opsional	tidak ada	Objek yang menjelaskan opsi untuk visualisasi. Anda dapat menggunakan notasi literal JavaScript, atau memberikan handle ke objek. Contoh: "options": {"width": 400, "height": 240, "is3D": true, "title": "Company Performance"}
dataTable	Objek	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 terisi, 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 menetapkan dataSourceUrl, Anda dapat secara opsional menentukan string kueri seperti SQL menggunakan Bahasa kueri visualisasi untuk memfilter atau memanipulasi data.
refreshInterval	Angka	Opsional	Tidak ada	Seberapa sering, dalam detik, visualisasi harus memuat ulang sumber kuerinya. Gunakan parameter ini hanya saat menentukan dataSourceUrl.
kali dilihat	Objek ATAU Array	Opsional	Tidak ada	Menetapkan objek penginisialisasi DataView, yang bertindak sebagai filter pada 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 ini 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 memberikan versi visualisasi yang dapat disematkan untuk digunakan di berbagai tempat. Lihat halaman toolbar untuk mengetahui informasi selengkapnya dan contoh kode.