1. Pengantar
Looker Studio memungkinkan Anda membuat dasbor interaktif yang aktif dengan visualisasi data yang menarik, tanpa biaya. Ambil data Anda dari berbagai sumber dan buat laporan tanpa batas di Looker Studio, dengan kemampuan pengeditan dan berbagi penuh. Screenshot berikut adalah contoh laporan Looker Studio:
( Klik di sini untuk melihat contoh laporan ini di Looker Studio)
Looker Studio menyediakan beberapa jenis diagram bawaan, termasuk diagram garis, diagram batang, diagram lingkaran, dan diagram sebar. Visualisasi komunitas memungkinkan Anda membuat dan menggunakan visualisasi JavaScript kustom Anda sendiri di Looker Studio. Anda juga dapat membagikan visualisasi komunitas Anda kepada orang lain agar mereka dapat menggunakannya dengan data mereka sendiri.
Yang akan Anda pelajari
Dalam lab kode ini, Anda akan mempelajari:
- Cara kerja visualisasi komunitas Looker Studio.
- Cara membuat visualisasi komunitas menggunakan library helper komponen ds (dscc).
- Cara menggunakan visualisasi komunitas dalam laporan Looker Studio.
Yang Anda butuhkan
Untuk menyelesaikan lab kode ini, Anda memerlukan:
- Akses ke internet dan browser web.
- Akun Google.
- Akses ke bucket penyimpanan Google Cloud Platform.
- Memahami Javascript.
2. Survei cepat
Mengapa Anda memilih codelab ini?
Bagaimana rencana Anda menggunakan codelab/tutorial ini?
Bagaimana penilaian Anda terhadap pengalaman Anda dengan Looker Studio?
Apa yang paling tepat menggambarkan latar belakang Anda?
Library visualisasi JavaScript apa yang ingin Anda gunakan?
Lanjutkan ke halaman berikutnya untuk mengirimkan informasi survei.
3. Ringkasan visualisasi komunitas
Visualisasi komunitas Looker Studio memungkinkan Anda membuat dan menggunakan visualisasi JavaScript kustom di dasbor.
Dalam codelab ini, Anda akan membuat visualisasi komunitas diagram tabel yang mendukung 1 dimensi, 1 metrik, dan gaya header tabel.
4. Alur kerja pengembangan visualisasi komunitas
Untuk membuat visualisasi komunitas, Anda memerlukan file berikut di bucket penyimpanan Google Cloud Platform, yang akan Anda buat di langkah selanjutnya:
Nama file | Jenis file | Tujuan |
manifest.json* | JSON | Metadata tentang visualisasi dan lokasi semua resource visualisasi. |
viz-codelab.json | JSON | Opsi konfigurasi data dan gaya untuk panel Properti. |
viz-codelab.js | JavaScript | Kode JavaScript untuk merender visualisasi. |
viz-codelab.css (opsional) | CSS | Gaya CSS untuk visualisasi. |
*Manifes adalah satu-satunya file yang memiliki nama wajib. File lainnya dapat diberi nama berbeda, asalkan nama/lokasinya ditentukan dalam file manifes.
5. Menulis visualisasi Hello, world!
Di bagian ini, Anda akan menambahkan kode yang diperlukan untuk merender visualisasi Hello, world! sederhana.
Menulis sumber JavaScript visualisasi
Langkah 1: Download file dscc.min.js dari halaman Looker Studio Community Component Library (dscc) dan salin ke direktori kerja Anda.
Langkah 2: Salin kode berikut ke editor teks dan simpan sebagai viz-codelab-src.js di direktori kerja lokal Anda.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Render the viz.
container.textContent = 'Hello, viz world!';
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
Menyiapkan file paket JavaScript
Langkah 3: Gabungkan semua JavaScript yang diperlukan ke dalam satu file dengan menyalin konten library helper visualisasi (dscc.min.js) dan file viz-codelab-src.js ke dalam file baru bernama viz-codelab.js. Perintah berikut dapat dijalankan untuk menggabungkan file. Ulangi langkah ini setiap kali Anda memperbarui kode visualisasi sumber.
Skrip penggabungan Linux/Mac OS
cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js
Skrip penggabungan Windows
del viz-codelab.js
type nul > viz-codelab.js
type dscc.min.js >> viz-codelab.js
echo.>> viz-codelab.js
type viz-codelab-src.js >> viz-codelab.js
6. Menulis CSS visualisasi
File CSS menentukan gaya untuk visualisasi Anda dan bersifat opsional. Salin CSS berikut dan simpan sebagai viz-codelab.css.
viz-codelab.css
table {
width: 100%;
border-collapse: collapse;
}
tr {
border-bottom: 1pt solid #d1d1d1;
}
th, td {
padding: 8px;
text-align: left;
}
7. Tulis konfigurasi JSON
Konfigurasi visualisasi menentukan atribut data dan gaya yang didukung dan diperlukan oleh visualisasi Anda. Visualisasi dalam codelab ini memerlukan satu dimensi dan satu metrik, serta memiliki satu elemen gaya untuk memilih warna pengisi. Pelajari dimensi dan metrik lebih lanjut.
Salin kode berikut dan simpan sebagai viz-codelab.json.Untuk mempelajari lebih lanjut properti yang dapat Anda konfigurasi, tinjau Referensi Konfigurasi Visualisasi Komunitas.
viz-codelab.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "tableDimension",
"label": "Dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "tableMetric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "header",
"label": "Table Header",
"elements": [
{
"type": "FILL_COLOR",
"id": "headerBg",
"label": "Header Background Color",
"defaultValue": "#e0e0e0"
}
]
}
]
}
8. Membuat project dan bucket Cloud Storage
Langkah 1: Buat Project Google Cloud Platform (GCP) atau gunakan project yang sudah ada.
Langkah 2: Buat bucket GCP. Kelas penyimpanan yang direkomendasikan adalah Regional. Buka Harga Cloud Storage untuk mengetahui detail tentang paket gratis. Catatan: Penyimpanan visualisasi Anda kemungkinan tidak akan dikenai biaya apa pun untuk kelas penyimpanan Regional.
Langkah 3: Catat nama/jalur bucket Anda, dimulai dengan bagian setelah Buckets/. Jalur ini disebut sebagai "ID komponen" di Looker Studio dan digunakan untuk mengidentifikasi serta men-deploy visualisasi.
9. Tulis file manifest.json
File manifes memberikan informasi tentang lokasi dan resource visualisasi Anda. File ini harus diberi nama "manifest.json", dan harus berada di bucket/jalur yang dibuat pada langkah sebelumnya, jalur yang sama yang digunakan untuk ID komponen Anda.
Salin kode berikut ke editor teks dan simpan sebagai manifest.json.
Untuk mempelajari lebih lanjut manifes, buka dokumentasi referensi manifes.
manifest.json
{
"name": "Community Visualization",
"logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"organization": "Looker Studio Codelab",
"organizationUrl": "https://url",
"termsOfServiceUrl": "https://url",
"supportUrl": "https://url",
"packageUrl": "https://url",
"privacyPolicyUrl": "https://url",
"description": "Community Visualization Codelab",
"devMode": true,
"components": [
{
"id": "tableChart",
"name": "Table",
"iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"description": "A simple table chart.",
"resource": {
"js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.js",
"config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.json",
"css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.css"
}
}
]
}
10. Upload file visualisasi Anda ke Google Cloud Storage
- Upload file
manifest.json,viz-codelab.js,viz-codelab.json, danviz-codelab.csske bucket Google Cloud Storage Anda menggunakan antarmuka web atau alat command line gsutil. Ulangi langkah ini setiap kali Anda memperbarui visualisasi.
Perintah upload gsutil
gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read viz-codelab.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
11. Menguji Visualisasi Komunitas di Looker Studio
Membuat laporan dan menambahkan data
Langkah 1: Salin URL untuk set data contoh Visualisasi Komunitas. Atau, gunakan sumber data pilihan Anda dan lewati langkah-langkah berikut.
Langkah 2: Login ke Looker Studio. Di kiri atas, klik + Buat, lalu pilih Laporan.
Langkah 3: Anda akan melihat alat editor laporan, dengan panel Tambahkan data ke laporan terbuka.
Langkah 4: Di tab Hubungkan ke data, pilih konektor Google Spreadsheet dari Google.
Langkah 5: Pilih URL dan tempelkan URL Spreadsheet Google dari langkah 1.
Langkah 6: Di kanan bawah, klik Tambahkan.
Langkah 7: Jika diminta untuk mengonfirmasi Anda akan menambahkan data ke laporan ini, klik TAMBAHKAN KE LAPORAN. Laporan Tanpa Judul dibuat dan tabel default ditambahkan ke laporan dengan contoh data. Atau, pilih dan hapus tabel default sehingga Anda hanya memiliki laporan kosong.
Menambahkan visualisasi komunitas ke laporan
Langkah 1: Di toolbar, klik Komponen dan visualisasi komunitas 
.
Langkah 2: Klik + Jelajahi lainnya untuk membuka Galeri Komunitas.
Langkah 3: Klik Buat visualisasi Anda sendiri
Langkah 4: Di bagian Uji dan tambahkan visualisasi komunitas Anda, masukkan Jalur manifes, lalu klik Kirim. Jalur manifes adalah nama dan jalur bucket Google Cloud Storage yang mengarah ke lokasi manifes visualisasi Anda, yang diawali dengan gs://.. Misalnya: gs://community-viz-docs/viz-codelab. Jika Anda telah memasukkan jalur Manifes yang valid, kartu visualisasi akan dirender.
Langkah 5: Klik kartu visualisasi untuk menambahkannya ke laporan Anda.
Langkah 6: Jika diminta, berikan izin Anda agar visualisasi dapat dirender.
Langkah 7: Secara opsional, perbarui dimensi dan metrik yang dipilih untuk tabel. Jika Anda menggunakan set data contoh yang disediakan, tetapkan dimensi ke Negara dan metrik ke Populasi. Tindakan ini tidak akan memengaruhi visualisasi hingga nanti di codelab.
Panel properti di sisi kanan mencerminkan elemen yang dikonfigurasi di viz-codelab.json.
Di panel Penyiapan, visualisasi memungkinkan satu Dimensi dan satu Metrik.
Di panel Gaya, visualisasi memiliki satu elemen untuk menata gaya Header Tabel. Pada titik ini, kontrol gaya tidak akan berpengaruh pada visualisasi hingga kode visualisasi diperbarui pada langkah selanjutnya. Catatan: Anda akan melihat opsi gaya tambahan untuk visualisasi yang tidak Anda tentukan dalam file konfigurasi. Hal ini wajar, karena semua visualisasi memiliki serangkaian kontrol umum yang otomatis tersedia.
12. Merender data sebagai tabel
Di bagian ini, Anda akan memperbarui visualisasi untuk menampilkan set data contoh Visualisasi Komunitas sebagai tabel.
Data yang akan dirender tersedia di objek tables dan disusun berdasarkan transformasi yang ditentukan oleh visualisasi Anda. Dalam codelab ini, visualisasi meminta format tabel (tableTransform) yang mencakup objek headers dan objek rows yang berisi semua data yang kita butuhkan untuk merender tabel.
Langkah 1: Ganti konten viz-codelab-src.js dengan kode di bawah.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Create the table.
const table = document.createElement('table');
const tableHeader = document.createElement('thead');
const tableBody = document.createElement('tbody');
data.tables.DEFAULT.headers.forEach(function (column) {
const tableColumn = document.createElement('th');
tableColumn.textContent = column.name;
tableHeader.appendChild(tableColumn);
});
data.tables.DEFAULT.rows.forEach(function(row) {
const tableRow = document.createElement('tr');
row.forEach(function(cell) {
const tableCell = document.createElement('td');
if (typeof cell == 'number') {
tableCell.textContent = new Intl.NumberFormat().format(cell);
} else {
tableCell.textContent = cell;
}
tableRow.appendChild(tableCell);
});
tableBody.appendChild(tableRow);
});
table.appendChild(tableHeader);
table.appendChild(tableBody);
// Render the table.
container.appendChild(table);
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
Langkah 2: Siapkan file paket JavaScript, lalu upload dan ganti file visualisasi Anda ke Google Cloud Storage.
Langkah 3: Muat ulang laporan Looker Studio untuk memuat ulang dan menguji visualisasi komunitas Anda. Tabel kini merender data (yaitu, Spreadsheet Google) dan menampilkan kolom header berdasarkan dimensi dan metrik yang dipilih. Ubah ukuran visualisasi untuk melihat semua baris.
13. Menerapkan perubahan gaya secara dinamis
Di bagian ini, Anda akan memperbarui visualisasi untuk menata gaya header tabel berdasarkan warna pengisi yang dipilih di panel Gaya.
Status semua elemen gaya tersedia di objek style, dengan setiap kunci item ditentukan berdasarkan konfigurasi gaya visualisasi Anda (viz-codelab.json). Untuk bagian ini, Anda akan mendapatkan warna pengisi yang dipilih dan menggunakannya untuk memperbarui warna latar belakang header tabel.
Langkah 1: Ganti kode dalam file viz-codelab-src.js dengan kode di bawah.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Create the table.
const table = document.createElement('table');
const tableHeader = document.createElement('thead');
const tableBody = document.createElement('tbody');
data.tables.DEFAULT.headers.forEach(function (column) {
const tableColumn = document.createElement('th');
tableColumn.textContent = column.name;
tableHeader.appendChild(tableColumn);
});
data.tables.DEFAULT.rows.forEach(function(row) {
const tableRow = document.createElement('tr');
row.forEach(function(cell) {
const tableCell = document.createElement('td');
if (typeof cell == 'number') {
tableCell.textContent = new Intl.NumberFormat().format(cell);
} else {
tableCell.textContent = cell;
}
tableRow.appendChild(tableCell);
});
tableBody.appendChild(tableRow);
});
table.appendChild(tableHeader);
table.appendChild(tableBody);
// Set header color based on style control.
tableHeader.style.backgroundColor = data.style.headerBg.value.color;
// Render the table.
container.appendChild(table);
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
Langkah 2: Siapkan file paket JavaScript, lalu upload dan ganti file visualisasi Anda ke Google Cloud Storage.
Langkah 3: Muat ulang laporan Looker Studio untuk memuat ulang dan menguji visualisasi komunitas Anda.
Langkah 4: Di panel Gaya, gunakan kontrol gaya Warna Latar Belakang Header untuk mengubah warna latar belakang header tabel.
Selamat! Anda telah membuat visualisasi komunitas di Looker Studio. Tindakan ini akan membawa Anda ke akhir codelab ini. Sekarang, mari kita lihat langkah selanjutnya yang dapat Anda lakukan.
14. Langkah berikutnya
Memperluas visualisasi
- Pelajari lebih lanjut data dan format yang tersedia untuk visualisasi Anda.
- Pelajari lebih lanjut elemen gaya yang tersedia dan tambahkan gaya tambahan ke visualisasi Anda.
- Menambahkan interaksi ke visualisasi
- Mempelajari cara mengembangkan visualisasi secara lokal
Lakukan lebih banyak hal dengan visualisasi komunitas
- Tinjau referensi untuk library helper dscc, manifes, dan file konfigurasi.
- Kirimkan visualisasi Anda ke Galeri Visualisasi Komunitas kami.
- Buat konektor komunitas untuk Looker Studio.
Referensi lainnya
Berikut adalah berbagai referensi yang dapat Anda akses untuk membantu Anda mempelajari lebih dalam materi yang dibahas dalam codelab ini.
Resource Type | Fitur Pengguna | Fitur Developer |
Dokumentasi | ||
Berita & Info Terbaru | Daftar di Looker Studio > Setelan Pengguna | |
Ajukan Pertanyaan | ||
Contoh |