Google telah membuat library Python open source yang membuat objek DataTable untuk digunakan dengan visualisasi. Library ini dapat digunakan untuk membuat DataTable di Python, dan menghasilkan output dalam salah satu dari tiga format berikut:
- String JSON -- Jika Anda menghosting halaman yang menghosting visualisasi yang menggunakan data Anda, Anda dapat membuat string JSON untuk diteruskan ke konstruktor
DataTableguna mengisinya. - Respons JSON -- Jika Anda tidak menghosting halaman yang menghosting visualisasi, dan hanya ingin bertindak sebagai sumber data untuk visualisasi eksternal, Anda dapat membuat string respons JSON lengkap yang dapat ditampilkan sebagai respons terhadap permintaan data.
- String JavaScript -- Anda dapat menghasilkan tabel data sebagai
string yang terdiri dari beberapa baris kode JavaScript yang akan membuat
dan mengisi objek
google.visualization.DataTabledengan data dari tabel Python Anda. Selanjutnya, Anda dapat menjalankan JavaScript ini di mesin untuk membuat dan mengisi objekgoogle.visualization.DataTable. Biasanya ini hanya digunakan untuk proses debug.
Dokumen ini mengasumsikan bahwa Anda memahami pemrograman Python dasar, dan telah membaca dokumentasi visualisasi pengantar untuk membuat visualisasi dan menggunakan visualisasi.
Daftar Isi
Cara Menggunakan Library
Berikut langkah-langkah dasarnya secara lebih mendetail:
1. Membuat objek gviz_api.DataTable
Impor library gviz_api.py dari link di atas dan buat instance class gviz_api.DataTable. Class ini menggunakan dua parameter:
skema tabel yang akan mendeskripsikan format data dalam tabel, dan
data opsional untuk mengisi tabel. Anda dapat menambahkan data nanti, jika ingin, atau menimpa data sepenuhnya, tetapi tidak dapat menghapus baris satu per satu, atau menghapus skema tabel.
2. Jelaskan skema tabel Anda
Skema tabel ditentukan oleh parameter table_description
yang diteruskan ke konstruktor. Anda tidak dapat mengubahnya nanti. Skema ini menjelaskan semua kolom dalam tabel: jenis data setiap kolom, ID, dan label opsional.
Setiap kolom dijelaskan oleh tuple: (ID [,data_type [,label [,custom_properties]]]).
- ID - ID string yang digunakan untuk mengidentifikasi kolom. Dapat menyertakan spasi. ID untuk setiap kolom harus unik.
- data_type - [opsional] Deskriptor string dari jenis data Python untuk data dalam kolom tersebut. Anda dapat menemukan daftar jenis data yang didukung dalam metode SingleValueToJS(). Contohnya antara lain "string" dan "boolean". Jika tidak ditentukan, defaultnya adalah "string".
- label - Nama yang mudah digunakan untuk kolom, yang dapat ditampilkan sebagai bagian dari visualisasi. Jika tidak ditentukan, nilai ID akan digunakan.
- custom_properties - Kamus {String:String} untuk properti kolom kustom.
Skema tabel adalah kumpulan tuple deskriptor kolom. Setiap anggota daftar, kunci kamus, atau nilai kamus harus berupa koleksi lain atau tuple deskripsi. Anda dapat menggunakan kombinasi kamus atau daftar apa pun, tetapi setiap kunci, nilai, atau anggota pada akhirnya harus mengevaluasi tuple deskripsi. Berikut beberapa contohnya.
- Daftar kolom: [('a', 'number'), ('b', 'string')]
- Dictionary of lists: {('a', 'number'): [('b', 'number'), ('c', 'string')]}
- Dictionary of dictionaries: {('a', 'number'): {'b': 'number', 'c': 'string'}}
- Dan seterusnya, dengan tingkat {i>nesting<i} apa pun.
3. Mengisi data Anda
Untuk menambahkan data ke tabel, bangun struktur elemen data dalam struktur yang sama persis dengan skema tabel. Jadi, misalnya, jika skema Anda berupa daftar, data harus berupa daftar:
- skema: [("warna", "string"), ("bentuk", "string")]
- data: [["biru", "persegi"], ["merah", "lingkaran"]]
Jika skema berupa kamus, maka datanya harus berupa kamus:
- skema: {("rowname", "string"): [("color", "string"), ("shape", "string")] }
- data: {"row1": ["biru", "persegi"], "row2": ["merah", "lingkaran"]}
Satu baris tabel adalah bagian dari data dan skema yang sesuai. Sebagai contoh, berikut ini cara penerapan skema daftar dua kolom ke dua baris data.
Schema:[(color),(shape)]
/ \
Data: [["blue", "square"], ["red", "circle"]]
Table:
Color Shape
blue square
red circle
Perhatikan bahwa kunci kamus di sini menghasilkan data kolom. Anda dapat menemukan contoh yang lebih kompleks dalam dokumentasi metode AppendData() dalam kode. Tujuan mengizinkan pembuatan bertingkat kompleks ini adalah agar Anda dapat menggunakan struktur data Python yang sesuai dengan kebutuhan Anda.
4. Output data Anda
Format output yang paling umum adalah JSON, jadi Anda mungkin akan menggunakan fungsi ToJsonResponse()
untuk membuat data yang akan ditampilkan. Namun, jika Anda mengurai permintaan input dan mendukung format output yang berbeda, Anda dapat memanggil metode output lainnya untuk menampilkan format lain, termasuk nilai yang dipisahkan koma, nilai yang dipisahkan tab, dan JavaScript. JavaScript biasanya hanya digunakan untuk proses debug. Lihat
Mengimplementasikan Sumber Data untuk mempelajari
cara memproses permintaan guna mendapatkan format respons yang diinginkan.
Contoh Penggunaan
Berikut adalah beberapa contoh yang menunjukkan cara menggunakan berbagai format output.
Contoh ToJSon dan ToJS
#!/usr/bin/python
import gviz_api
page_template = """
<html>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {packages:['table']});
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
%(jscode)s
var jscode_table = new google.visualization.Table(document.getElementById('table_div_jscode'));
jscode_table.draw(jscode_data, {showRowNumber: true});
var json_table = new google.visualization.Table(document.getElementById('table_div_json'));
var json_data = new google.visualization.DataTable(%(json)s, 0.6);
json_table.draw(json_data, {showRowNumber: true});
}
</script>
<body>
<H1>Table created using ToJSCode</H1>
<div id="table_div_jscode"></div>
<H1>Table created using ToJSon</H1>
<div id="table_div_json"></div>
</body>
</html>
"""
def main():
# Creating the data
description = {"name": ("string", "Name"),
"salary": ("number", "Salary"),
"full_time": ("boolean", "Full Time Employee")}
data = [{"name": "Mike", "salary": (10000, "$10,000"), "full_time": True},
{"name": "Jim", "salary": (800, "$800"), "full_time": False},
{"name": "Alice", "salary": (12500, "$12,500"), "full_time": True},
{"name": "Bob", "salary": (7000, "$7,000"), "full_time": True}]
# Loading it into gviz_api.DataTable
data_table = gviz_api.DataTable(description)
data_table.LoadData(data)
# Create a JavaScript code string.
jscode = data_table.ToJSCode("jscode_data",
columns_order=("name", "salary", "full_time"),
order_by="salary")
# Create a JSON string.
json = data_table.ToJSon(columns_order=("name", "salary", "full_time"),
order_by="salary")
# Put the JS code and JSON string into the template.
print "Content-type: text/html"
print
print page_template % vars()
if __name__ == '__main__':
main()
Contoh ToJSonResponse
JSonResponse digunakan oleh klien jarak jauh dalam permintaan data.
#!/usr/bin/python
import gviz_api
description = {"name": ("string", "Name"),
"salary": ("number", "Salary"),
"full_time": ("boolean", "Full Time Employee")}
data = [{"name": "Mike", "salary": (10000, "$10,000"), "full_time": True},
{"name": "Jim", "salary": (800, "$800"), "full_time": False},
{"name": "Alice", "salary": (12500, "$12,500"), "full_time": True},
{"name": "Bob", "salary": (7000, "$7,000"), "full_time": True}]
data_table = gviz_api.DataTable(description)
data_table.LoadData(data)
print "Content-type: text/plain"
print
print data_table.ToJSonResponse(columns_order=("name", "salary", "full_time"),
order_by="salary")