TabelData dan DataView

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

Daftar Isi

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

Bagaimana Data Direpresentasikan dalam Diagram

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

indeks: 0
type: string
label: 'Tugas'

 indeks: 1
type: number
label: 'Jam per Hari'
'Work' 11
'Makan' 2
'Perjalanan' 2
'Tonton TV' 2
'Tidur' 7

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

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

  • Tabel - Array kolom dan baris, serta peta opsional dari 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, serta label string, ID, pola, dan peta properti nama/nilai arbitrer opsional. Label adalah string yang mudah digunakan dan dapat ditampilkan oleh diagram; ID adalah ID opsional yang dapat digunakan sebagai pengganti indeks kolom. Kolom dapat dirujuk dalam kode dengan indeks berbasis nol atau dengan ID opsional. Lihat DataTable.addColumn() untuk mengetahui daftar jenis data yang didukung.
  • Baris - Baris adalah array sel, ditambah 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 berformat string opsional dari nilai yang Anda berikan. Contoh: kolom numerik mungkin diberi nilai 7 dan nilai berformat "tujuh". Jika nilai terformat diberikan, diagram akan menggunakan nilai sebenarnya untuk penghitungan dan rendering, tetapi mungkin menampilkan nilai berformat jika sesuai, misalnya jika pengguna mengarahkan kursor ke sebuah titik. Setiap sel juga memiliki peta opsional untuk 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 sebuah 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 kedua kolom tersebut adalah nilai X dan Y titik tersebut. Baca dokumentasi diagram Anda untuk mengetahui format data yang diperlukan.

DataTables dan DataView

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

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

DataTable DataView
Baca/Tulis Hanya baca
Dapat dibuat kosong lalu diisi Merupakan referensi ke DataTable yang ada. Tidak dapat diisi dari awal; harus dibuat instance-nya dengan referensi ke DataTable yang ada.
Data membutuhkan ruang penyimpanan. Data adalah referensi ke DataTable yang ada, dan tidak menggunakan ruang penyimpanan.
Dapat menambahkan/mengedit/menghapus baris, kolom, dan data, dan semua perubahan akan bersifat persisten. Dapat mengurutkan atau memfilter baris tanpa mengubah data pokok. Baris dan kolom dapat disembunyikan dan ditampilkan berulang kali.
Dapat digandakan Dapat menampilkan versi DataTable tampilan
Merupakan data sumber; tidak berisi referensi Referensi langsung ke DataTable; setiap perubahan dalam data DataTable segera tercermin 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 secara cepat dengan menggabungkan atau memanipulasi kolom lainnya.
Tidak ada baris atau kolom yang disembunyikan Dapat menyembunyikan atau menampilkan kolom yang dipilih

Membuat dan Mengisi DataTable

Ada beberapa cara berbeda untuk membuat dan mengisi DataTable:

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

Langkah-langkah:

  1. Membuat instance DataTable baru
  2. Tambahkan kolom
  3. Tambahkan satu atau beberapa baris, jika perlu, diisi dengan data. Anda dapat menambahkan baris kosong dan mengisinya nanti. Anda juga dapat menambahkan atau menghapus baris tambahan atau mengedit nilai sel satu per satu.

Kelebihan:

  • Anda dapat menentukan jenis data dan label dari setiap kolom.
  • Baik untuk membuat tabel di browser, dan tidak terlalu rentan terhadap kesalahan ketik dibandingkan metode literal JSON.

Kekurangan:

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

Contoh:

Berikut adalah beberapa contoh pembuatan tabel data yang sama menggunakan berbagai variasi 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 yang dieksekusi di browser.
  • Anda dapat secara eksplisit menentukan jenis data setiap kolom, atau membiarkan Google Chart menyimpulkan jenis data yang diteruskan.
    • Untuk menentukan jenis data kolom secara eksplisit, tentukan objek di baris header dengan properti type.
    • Agar Google Chart dapat menyimpulkan jenis data, 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]]);

Inisialisasi Literal JavaScript

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

Kelebihan:

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

Kekurangan:

  • Sintaksis sulit untuk benar, dan rentan terhadap kesalahan ketik.
  • Kode tidak mudah dibaca.
  • Mungkin 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 Chart Tools Datasource, balasan yang berhasil adalah instance DataTable. DataTable yang dihasilkan ini dapat disalin, diubah, atau disalin ke dalam 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 helper google.visualization.dataTableToCsv(data) menampilkan string CSV dengan data dari tabel data.

Input untuk fungsi ini dapat berupa DataTable atau DataView.

Fungsi ini menggunakan nilai terformat dari sel. Label kolom diabaikan.

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

Kode berikut akan menampilkan

Ramanujan,1729
Gauss,5050

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

Informasi Selengkapnya