विज़ुअलाइज़ेशन लिखना

ध्यान दें: कम्यूनिटी विज़ुअलाइज़ेशन की सुविधा "डेवलपर के लिए झलक" में है. इस अवधि के दौरान आने वाली सुविधाओं और सुधारों के बारे में ज़्यादा जानने के लिए, डेवलपर प्रीव्यू पेज पर जाएं.

विज़ुअलाइज़ेशन कोड लिखना

Looker Studio की हेल्पर लाइब्रेरी, आपके और Looker Studio के बीच एक इंटरफ़ेस उपलब्ध कराती है. लाइब्रेरी का इस्तेमाल करने के लिए, एक कॉलबैक फ़ंक्शन दें. यह फ़ंक्शन विज़ुअलाइज़ेशन को रेंडर करता है.

लाइब्रेरी में सबसे अहम फ़ंक्शन subscribeToData है. यह दो आर्ग्युमेंट लेता है: एक callback फ़ंक्शन, जो विज़ुअलाइज़ेशन रेंडर करता है. दूसरा options ऑब्जेक्ट, जो यह तय करता है कि आपको अपने डेटा में किस तरह का बदलाव करना है. ज़्यादा जानने के लिए, लाइब्रेरी का रेफ़रंस देखें.

यहां एक उदाहरण दिया गया है कि आपका विज़ुअलाइज़ेशन JavaScript कैसा दिख सकता है.

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})

कम्यूनिटी विज़ुअलाइज़ेशन लिखते समय, कुछ अहम बातों का ध्यान रखना ज़रूरी है.

subscribeToData फ़ंक्शन से अपडेट तब मिलते हैं, जब डेटा, स्टाइल या iframe के साइज़ में बदलाव होता है.

अहम जानकारी: drawViz() फ़ंक्शन को हर बार कॉल किए जाने पर, कैनवस को मिटा देना चाहिए. ऐसा न करने पर, यह iframe में विज़ुअलाइज़ेशन जोड़ता रहेगा.

उदाहरण के लिए:

// 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, एचटीएमएल फ़ाइलों के बजाय JavaScript फ़ाइलों को लोड और रन करता है. डीओएम में बदलाव करने के लिए, JavaScript का इस्तेमाल करना ज़रूरी है.

उदाहरण के लिए: यहां दिया गया कोड, DOM में div को तय करता है और उसे जोड़ता है.

// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);

कोड बंडल करना

Looker Studio के कम्यूनिटी विज़ुअलाइज़ेशन में, सिर्फ़ एक JavaScript फ़ाइल लोड की जा सकती है. अपलोड किया गया कोड एक ऐसी फ़ाइल होनी चाहिए जिसमें dscc helper library, JavaScript विज़ुअलाइज़ेशन लाइब्रेरी, और आपका विज़ुअलाइज़ेशन कोड शामिल हो.

बैश में ऐसा करने के लिए, नीचे दिए गए तरीके से cat कमांड का इस्तेमाल किया जा सकता है.

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

मेनिफ़ेस्ट तय करना

विज़ुअलाइज़ेशन की मेनिफ़ेस्ट फ़ाइल, विज़ुअलाइज़ेशन के बारे में मेटाडेटा उपलब्ध कराती है. साथ ही, विज़ुअलाइज़ेशन के संसाधनों की जगह के बारे में जानकारी देती है. मेनिफ़ेस्ट फ़ाइल की जगह को "कॉम्पोनेंट आईडी" कहा जाता है. इसका इस्तेमाल कम्यूनिटी विज़ुअलाइज़ेशन को लोड करने के लिए किया जाता है.

मेनिफ़ेस्ट का सैंपल देखने के लिए, मेनिफ़ेस्ट का रेफ़रंस देखें.

ध्यान दें: मेनिफ़ेस्ट का नाम manifest.json

होना चाहिए

मेनिफ़ेस्ट का devMode पैरामीटर, विज़ुअलाइज़ेशन के लिए कैश मेमोरी के इस्तेमाल का तरीका तय करता है. विज़ुअलाइज़ेशन डेवलप करते समय, devMode को true होना चाहिए, ताकि यह पक्का किया जा सके कि हार्ड रीफ़्रेश करने पर, रिसॉर्स का नया वर्शन लोड हो. कोड के स्टेबल होने के बाद, devMode को false किया जाना चाहिए, ताकि कम्यूनिटी विज़ुअलाइज़ेशन वाली रिपोर्ट जल्दी लोड हो सकें. कैश मेमोरी के बारे में ज़्यादा जानने के लिए, कैश मेमोरी के बारे में ज़्यादा जानकारी देने वाली गाइड देखें.

अगले चरण

अब जब आपने विज़ुअलाइज़ेशन के लिए कोड लिख लिया है, तो विज़ुअलाइज़ेशन को होस्ट करने का तरीका जानें.