विज़ुअलाइज़ेशन कोड लिखना
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})
कम्यूनिटी विज़ुअलाइज़ेशन लिखते समय कुछ ज़रूरी बातों का ध्यान रखना चाहिए.
डेटा, स्टाइल या
iframe के साइज़ में बदलाव होने पर, subscribeToData फ़ंक्शन से मिलने वाले अपडेट होते हैं.
उदाहरण के लिए:
// 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 फ़ाइलों को लोड करता है और चलाता है, एचटीएमएल के बजाय. सभी DOM हेर-फेर JavaScript के ज़रिए ही होने चाहिए.
उदाहरण के लिए: नीचे दिया गया कोड, DOM में div को परिभाषित करता है और जोड़ता है.
// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);
कोड को बंडल करना
Looker Studio के कम्यूनिटी विज़ुअलाइज़ेशन की मदद से, सिर्फ़ एक JavaScript फ़ाइल लोड की जा सकती है. अपलोड किया गया कोड एक ऐसी फ़ाइल होनी चाहिए जिसमें डीएससीसी हेल्पर लाइब्रेरी, सभी JavaScript विज़ुअलाइज़ेशन लाइब्रेरी, और विज़ुअलाइज़ेशन कोड शामिल हों.
बैश में ऐसा करने के लिए, नीचे दिए गए cat कमांड का इस्तेमाल किया जा सकता है.
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
मेनिफ़ेस्ट को तय करना
विज़ुअलाइज़ेशन मेनिफ़ेस्ट फ़ाइल में, विज़ुअलाइज़ेशन के बारे में मेटाडेटा के साथ-साथ विज़ुअलाइज़ेशन संसाधनों की जगह के बारे में जानकारी भी होती है. मेनिफ़ेस्ट फ़ाइल की जगह को "कॉम्पोनेंट आईडी" कहा जाता है. इसका इस्तेमाल, कम्यूनिटी विज़ुअलाइज़ेशन को लोड करने के लिए किया जाता है.
सैंपल मेनिफ़ेस्ट देखने के लिए, मेनिफ़ेस्ट रेफ़रंस की समीक्षा करें.
होना चाहिएमेनिफ़ेस्ट का devMode पैरामीटर, विज़ुअलाइज़ेशन को कैश मेमोरी में सेव करने का तरीका तय करता है. विज़ुअलाइज़ेशन बनाते समय devMode, true होना चाहिए. इससे यह पक्का किया जा सकेगा कि हार्ड रीफ़्रेश, संसाधनों के सबसे नए वर्शन को लोड करें. कोड स्टेबल होने के बाद, devMode false होना चाहिए. इससे यह पक्का किया जा सकेगा कि कम्यूनिटी विज़ुअलाइज़ेशन वाली रिपोर्ट तेज़ी से लोड हों. कैश मेमोरी में सेव करने के बारे में ज़्यादा जानने के लिए, कैश मेमोरी में सेव करने की बेहतर गाइड देखें.
अगले चरण
अब आपके पास अपने विज़ुअलाइज़ेशन का कोड लिख लिया गया है, इसलिए अपना विज़ुअलाइज़ेशन होस्ट करने का तरीका जानें.