Menulis kode visualisasi
Library helper Looker Studio menyediakan antarmuka antara Anda dan Looker Studio. Untuk menggunakan library ini, sediakan fungsi callback yang merender visualisasi.
Fungsi yang paling penting di library ini adalah subscribeToData
, yang menggunakan dua
argumen: fungsi callback
yang merender visualisasi, dan
objek options
yang menentukan jenis transformasi yang Anda inginkan
untuk dilakukan oleh data. Untuk mempelajari lebih lanjut, tinjau referensi library.
Berikut adalah garis besar tampilan JavaScript visualisasi Anda.
function drawViz(vizData){
var height = dscc.getHeight();
var width = dscc.getWidth();
console.log(vizData);
// this is where you write your viz code
}
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform})
Ada beberapa hal penting yang perlu diingat saat menulis visualisasi komunitas.
Update dari fungsi subscribeToData
terjadi saat data, gaya, atau ukuran iframe berubah.
Contoh:
// create and add the canvas
// do this one time
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);
function drawViz(data){
// clear the canvas
var ctx = canvasElement.getContext('2d');
ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
// viz code goes here
}
Looker Studio memuat dan menjalankan file JavaScript, bukan HTML. Semua manipulasi DOM harus dilakukan melalui JavaScript.
Misalnya: kode berikut menentukan dan menambahkan div
ke DOM.
// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);
Memaketkan kode
Visualisasi komunitas Looker Studio hanya memungkinkan Anda memuat satu file JavaScript. Kode yang diupload harus berupa satu file yang menyertakan library helper dscc, library visualisasi JavaScript, dan kode visualisasi Anda.
Untuk melakukannya di bash, Anda dapat menggunakan perintah cat
, seperti di bawah ini.
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
Menentukan manifes
File manifes visualisasi memberikan metadata tentang visualisasi, serta informasi tentang lokasi resource visualisasi. Lokasi file manifes disebut sebagai "ID komponen", dan digunakan untuk memuat visualisasi komunitas.
Tinjau referensi manifes untuk melihat contoh manifes.
Parameter devMode
manifes menentukan perilaku caching dari
visualisasi. Saat mengembangkan visualisasi, devMode
harus berupa true
untuk
memastikan bahwa hard refresh memuat versi terbaru resource. Setelah
kode stabil, devMode
harus menjadi false
untuk memastikan bahwa laporan dengan
visualisasi komunitas dimuat dengan cepat. Untuk mempelajari lebih lanjut tentang cache, lihat panduan lanjutan caching.
Langkah berikutnya
Setelah menulis kode untuk visualisasi Anda, pelajari cara menghosting visualisasi Anda.