TabelData dan DataView

Halaman ini membahas representasi data internal yang digunakan oleh diagram, class DataTable dan DataView yang digunakan untuk meneruskan data ke diagram, serta berbagai cara membuat instance dan mengisi DataTable.

Daftar Isi

  1. Cara Data Diwakili dalam Diagram
  2. Skema Tabel Apa yang Digunakan Diagram Saya?
  3. DataTables dan DataView
  4. Membuat dan Mengisi Tabel Data
    1. Buat DataTable baru, lalu panggil addColumn()/addRows()/addRow()/setCell()
    2. arrayToDataTable()
    3. Penginisialisasi literal JavaScript
    4. Mengirim Kueri Sumber Data
  5. dataTableToCsv().
  6. Informasi Selengkapnya

Cara Data Diwakili dalam Diagram

Semua diagram menyimpan datanya di tabel. Berikut adalah representasi sederhana dari tabel data dua kolom yang terisi:

indeks: 0
jenis: string
label: 'Tugas'

 indeks: 1
jenis: angka
label: 'Jam per Hari'
'Work' [Kantor] 11
'Makan' 2
'Perjalanan' 2
'Tonton TV' 2
'Tidur' 7

Data disimpan dalam sel yang direferensikan sebagai (row, column), dengan row adalah indeks baris berbasis nol, dan column adalah indeks kolom berbasis nol atau ID unik yang dapat Anda tentukan.

Berikut adalah daftar lebih lengkap elemen dan properti tabel yang didukung; lihat Format Parameter Literal JavaScript Konstruktor untuk detail selengkapnya:

  • Tabel - Array kolom dan baris, serta peta opsional pasangan nama/nilai arbitrer yang dapat Anda tetapkan. Properti tingkat tabel saat ini tidak digunakan oleh diagram.
  • Kolom - Setiap kolom mendukung jenis data yang diperlukan, ditambah label string, ID, pola, dan peta properti nama/nilai arbitrer. Label adalah string yang mudah digunakan yang dapat ditampilkan oleh diagram; ID adalah ID opsional yang dapat digunakan sebagai pengganti indeks kolom. Kolom dapat dirujuk dalam kode baik oleh indeks berbasis nol ataupun dengan ID opsional. Lihat DataTable.addColumn() untuk daftar jenis data yang didukung.
  • Baris - Baris adalah array sel, serta peta opsional dari pasangan nama/nilai arbitrer yang dapat Anda tetapkan.
  • Sel - Setiap sel adalah objek yang berisi nilai sebenarnya dari jenis kolom, ditambah versi opsional format string dari nilai yang Anda berikan. Misalnya: kolom numerik mungkin diberi nilai 7 dan nilai berformat "tujuh". Jika nilai yang diformat diberikan, diagram akan menggunakan nilai sebenarnya untuk penghitungan dan rendering, tetapi mungkin menampilkan nilai berformat jika sesuai, misalnya jika pengguna mengarahkan kursor ke titik. Setiap sel juga memiliki peta opsional dari pasangan nama/nilai arbitrer.

Skema Tabel Apa yang Digunakan Diagram Saya?

Diagram yang berbeda menggunakan tabel dalam format yang berbeda: misalnya, diagram lingkaran mengharapkan tabel dua kolom dengan kolom string dan kolom angka, dengan setiap baris menjelaskan irisan, dan kolom pertama adalah label irisan dan kolom kedua adalah nilai irisan. Namun, diagram sebar mengharapkan tabel yang terdiri dari dua kolom numerik, dengan setiap baris berupa titik, dan dua kolomnya adalah nilai X dan Y dari titik tersebut. Baca dokumentasi diagram Anda untuk mempelajari format data yang diperlukan.

TabelData dan DataView

Tabel data diagram diwakili dalam JavaScript oleh objek DataTable atau objek DataView. Dalam beberapa kasus, Anda mungkin melihat literal JavaScript atau versi JSON dari DataTable yang digunakan, misalnya saat data dikirim melalui Internet oleh Sumber Data Diagram Alat, atau sebagai nilai input yang memungkinkan untuk ChartWrapper.

DataTable digunakan untuk membuat tabel data asli. DataView adalah class praktis yang menyediakan tampilan DataTable hanya baca, dengan metode untuk menyembunyikan atau mengurutkan ulang baris atau kolom dengan cepat tanpa mengubah data asli yang ditautkan. Berikut perbandingan singkat kedua class tersebut:

TabelData TampilanData
Baca/Tulis Hanya baca
Dapat dibuat kosong dan kemudian diisi Adalah referensi ke DataTable yang ada. Tidak dapat diisi dari awal; harus dibuat instance dengan referensi ke DataTable yang ada.
Data menggunakan ruang penyimpanan. Data adalah referensi ke DataTable yang ada dan tidak menggunakan ruang.
Dapat menambahkan/mengedit/menghapus baris, kolom, dan data, serta semua perubahan bersifat persisten. Dapat mengurutkan atau memfilter baris tanpa mengubah data pokok. Baris dan kolom dapat disembunyikan dan ditampilkan berulang kali.
Dapat di-clone Dapat menampilkan tampilan versi DataTable
Adalah data sumber; tidak berisi referensi Referensi langsung ke DataTable; perubahan apa pun dalam data DataTable akan segera ditampilkan dalam tampilan.
Dapat diteruskan ke diagram sebagai sumber data Dapat diteruskan ke diagram sebagai sumber data
Tidak mendukung kolom kalkulasi Mendukung kolom kalkulasi, yang merupakan kolom dengan nilai yang dihitung dengan cepat dengan menggabungkan atau memanipulasi kolom lain.
Tidak ada baris atau kolom yang disembunyikan Dapat menyembunyikan atau menampilkan kolom yang dipilih

Membuat dan Mengisi Tabel Data

Ada beberapa cara untuk membuat dan mengisi DataTable:

DataTable Kosong + addColumn()/addRows()/addRow()/setCell()

Langkah:

  1. Buat instance DataTable baru
  2. Tambahkan kolom
  3. Tambahkan satu atau beberapa baris, yang secara opsional diisi dengan data. Anda dapat menambahkan baris kosong dan mengisinya di lain waktu. Anda juga dapat menambahkan atau menghapus baris tambahan, atau mengedit nilai sel satu per satu.

Kelebihan:

  • Anda dapat menentukan jenis data dan label untuk setiap kolom.
  • Bagus untuk menghasilkan tabel di browser, dan tidak terlalu rentan terhadap kesalahan ketik daripada metode literal JSON.

Kekurangan:

  • Tidak seberguna membuat string literal JSON untuk diteruskan ke konstruktor DataTable saat membuat halaman di server web secara terprogram.
  • Bergantung pada kecepatan browser, dan dapat lebih lambat dari string literal JSON dengan tabel yang lebih besar (sekitar 1.000+ sel).

Contoh:

Berikut beberapa contoh pembuatan tabel data yang sama menggunakan variasi yang berbeda dari teknik ini:

// ------- Version 1------------
// Add rows + data at the same time
// -----------------------------
var data = new google.visualization.DataTable();

// Declare columns
data.addColumn('string', 'Employee Name');
data.addColumn('datetime', 'Hire Date');

// Add data.
data.addRows([
  ['Mike', {v:new Date(2008,1,28), f:'February 28, 2008'}], // Example of specifying actual and formatted values.
  ['Bob', new Date(2007,5,1)],                              // More typically this would be done using a
  ['Alice', new Date(2006,7,16)],                           // formatter.
  ['Frank', new Date(2007,11,28)],
  ['Floyd', new Date(2005,3,13)],
  ['Fritz', new Date(2011,6,1)]
]);



// ------- Version 2------------
// Add empty rows, then populate
// -----------------------------
var data = new google.visualization.DataTable();
  // Add columns
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date');

  // Add empty rows
  data.addRows(6);
  data.setCell(0, 0, 'Mike');
  data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
  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));

arrayToDataTable()

Fungsi bantuan ini membuat dan mengisi DataTable menggunakan satu panggilan.

Kelebihan:

  • Kode yang sangat sederhana dan dapat dibaca dieksekusi di browser.
  • Anda dapat secara eksplisit menentukan jenis data di setiap kolom, atau mengizinkan Google Chart menyimpulkan jenis dari data yang diteruskan.
    • Untuk menentukan jenis data kolom secara eksplisit, tentukan objek di baris header dengan properti type.
    • Agar Google Chart dapat menentukan jenis, gunakan string untuk label kolom.

Contoh:

var data = google.visualization.arrayToDataTable([
       ['Employee Name', 'Salary'],
       ['Mike', {v:22500, f:'22,500'}], // Format as "22,500".
       ['Bob', 35000],
       ['Alice', 44000],
       ['Frank', 27000],
       ['Floyd', 92000],
       ['Fritz', 18500]
      ],
      false); // 'false' means that the first row contains labels, not data.


var data = google.visualization.arrayToDataTable([
       [ {label: 'Year', id: 'year'},
         {label: 'Sales', id: 'Sales', type: 'number'}, // Use object notation to explicitly specify the data type.
         {label: 'Expenses', id: 'Expenses', type: 'number'} ],
       ['2014', 1000, 400],
       ['2015', 1170, 460],
       ['2016', 660, 1120],
       ['2017', 1030, 540]]);

Penginisialisasi Literal JavaScript

Anda dapat meneruskan objek literal JavaScript ke konstruktor tabel, yang menentukan juga skema tabel dan data.

Kelebihan:

  • Berguna saat membuat data di server web Anda.
  • Memproses lebih cepat daripada metode lain untuk tabel yang lebih besar (sekitar 1.000+ sel)

Kekurangan:

  • Sintaksis sulit untuk diberikan dengan benar, dan rentan terhadap kesalahan ketik.
  • Kode tidak terlalu mudah dibaca.
  • Sangat mirip, tetapi tidak sama dengan JSON.

Contoh:

var data = new google.visualization.DataTable(
   {
     cols: [{id: 'task', label: 'Employee Name', type: 'string'},
            {id: 'startDate', label: 'Start Date', type: 'date'}],
     rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'}]},
            {c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)}]},
            {c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)}]},
            {c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)}]},
            {c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)}]},
            {c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)}]}
           ]
   }
)

Mengirim Kueri Sumber Data

Saat Anda mengirim kueri ke Sumber Data Alat Diagram, balasan yang berhasil adalah instance DataTable. DataTable yang ditampilkan ini dapat disalin, diubah, atau disalin ke DataView sama seperti DataTable lainnya.

function drawVisualization() {
    var query = new google.visualization.Query(
        'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');

    // Apply query language statement.
    query.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    
    // Send the query with a callback function.
    query.send(handleQueryResponse);
  }

  function handleQueryResponse(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    var data = response.getDataTable();
    visualization = new google.visualization.LineChart(document.getElementById('visualization'));
    visualization.draw(data, {legend: 'bottom'});
  }

dataTableToCsv()

Fungsi google.visualization.dataTableToCsv(data helper) menampilkan string CSV dengan data dari tabel data.

Input untuk fungsi ini dapat berupa DataTable atau DataView.

Menggunakan nilai sel yang diformat. Label kolom diabaikan.

Karakter khusus seperti "," dan "\n" di-escape menggunakan aturan escaping CSV standar.

Kode berikut akan menampilkan

Ramanujan,1729
Gauss,5050

pada konsol JavaScript browser Anda:

<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
   google.charts.load("current", {packages:['corechart']});
   google.charts.setOnLoadCallback(drawChart);
   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Name', 'Number'],
        ['Ramanujan', 1729],
        ['Gauss', 5050]
      ]);
    var csv = google.visualization.dataTableToCsv(data);
    console.log(csv);
  }
  </script>
  </head>
</html>

Info Selengkapnya