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

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

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

लाइब्रेरी में सबसे प्रमुख फ़ंक्शन 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 का साइज़ बदल जाता है.

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

// 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 के ज़रिए होना चाहिए.

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

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

कोड बंडल करना

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

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

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

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

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

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

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

अगले चरण

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