Menulis visualisasi Anda

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.