Menulis visualisasi Anda

Menulis kode visualisasi

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

Fungsi paling penting dalam library adalah subscribeToData, yang menggunakan dua argumen: fungsi callback yang merender visualisasi, dan Objek options yang menentukan jenis transformasi yang Anda inginkan untuk data Anda berapa lama proyek itu akan berlangsung. Untuk mempelajari lebih lanjut, tinjau referensi library.

Berikut ini memberikan garis besar tentang apa yang dapat dilakukan JavaScript visualisasi Anda seperti ini.

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 komunitas visualisasi.

Pembaruan dari fungsi subscribeToData terjadi saat data, gaya visual, atau perubahan ukuran iframe.

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 terjadi 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 JavaScript . Kode yang diupload harus berupa satu file yang menyertakan dscc library bantuan, library visualisasi JavaScript, dan visualisasi Anda pada kode sumber.

Untuk melakukannya di bash, Anda dapat menggunakan perintah cat, seperti di bawah ini.

cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js

Mendefinisikan manifes

File manifes visualisasi menyediakan {i>metadata<i} tentang visualisasi, seperti serta informasi tentang lokasi sumber daya visualisasi. Lokasinya file manifes disebut sebagai "{i>component ID<i}", dan digunakan untuk memuat visualisasi komunitas.

Tinjau referensi manifes untuk melihat contoh manifes.

Parameter devMode manifes menentukan perilaku penyimpanan data dalam cache visualisasi. Saat mengembangkan visualisasi, devMode harus true untuk memastikan bahwa hard refresh memuat resource versi terbaru. Setelah kode stabil, devMode harus false untuk memastikan bahwa laporan dengan visualisasi komunitas dimuat dengan cepat. Untuk mempelajari penyimpanan dalam cache lebih lanjut, lihat panduan lanjutan penyimpanan cache.

Langkah berikutnya

Sekarang setelah Anda memiliki kode untuk visualisasi Anda ditulis, pelajari cara menghosting visualisasi Anda.