Menulis visualisasi Anda

Menulis kode visualisasi

Library helper Looker Studio menyediakan antarmuka antara Anda dan Looker Studio. Untuk menggunakan library, berikan fungsi callback yang merender visualisasi.

Fungsi yang paling penting dalam library ini adalah subscribeToData, yang mengambil dua argumen: fungsi callback yang merender visualisasi, dan objek options yang menentukan jenis transformasi yang Anda inginkan untuk data Anda. Untuk mempelajari lebih lanjut, tinjau referensi library.

Berikut adalah gambaran umum 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 visual, 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);

Menggabungkan 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.

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 dari manifes menentukan perilaku caching visualisasi. Saat mengembangkan visualisasi, devMode harus true untuk memastikan bahwa pemuatan ulang paksa memuat versi terbaru resource. Setelah kode stabil, devMode harus false untuk memastikan laporan dengan visualisasi komunitas dimuat dengan cepat. Untuk mempelajari lebih lanjut caching, lihat panduan lanjutan caching.

Langkah berikutnya

Setelah kode untuk visualisasi Anda ditulis, pelajari cara menghosting visualisasi Anda.