Looker Studio में कस्टम विज़ुअलाइज़ेशन बनाना

1. परिचय

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

ec3de192ad28e93e.png

( Looker Studio में इस उदाहरण रिपोर्ट को देखने के लिए यहां क्लिक करें)

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

आपको क्या सीखने को मिलेगा

इस कोड लैब में, आपको इनके बारे में जानकारी मिलेगी:

  • Looker Studio का कम्यूनिटी विज़ुअलाइज़ेशन कैसे काम करता है.
  • ds-component helper library (dscc) का इस्तेमाल करके, कम्यूनिटी विज़ुअलाइज़ेशन बनाने का तरीका.
  • Looker Studio की रिपोर्ट में, कम्यूनिटी विज़ुअलाइज़ेशन का इस्तेमाल कैसे करें.

आपको किन चीज़ों की ज़रूरत होगी

इस कोड लैब को पूरा करने के लिए, आपको इनकी ज़रूरत होगी:

  • इंटरनेट और वेब ब्राउज़र का ऐक्सेस.
  • Google खाता.
  • Google Cloud Platform स्टोरेज बकेट का ऐक्सेस.
  • JavaScript की जानकारी.

2. छोटा सा सर्वे

आपने इस कोडलैब को क्यों चुना?

मुझे डेटा विज़ुअलाइज़ेशन में दिलचस्पी है. मुझे Looker Studio के बारे में ज़्यादा जानना है. मुझे अपना कम्यूनिटी विज़ुअलाइज़ेशन बनाना है. मुझे Looker Studio को किसी दूसरे प्लैटफ़ॉर्म के साथ इंटिग्रेट करना है. मुझे Google Cloud के समाधानों में दिलचस्पी है.

आपको इस कोडलैब/ट्यूटोरियल का इस्तेमाल कैसे करना है?

सिर्फ़ सरसरी तौर पर पढ़ें. इसे पढ़ें और इसमें दी गई कसरतें पूरी करें.

Looker Studio इस्तेमाल करने के अपने अनुभव को आप क्या रेटिंग देंगे?

मैंने इसके बारे में कभी नहीं सुना. मुझे पता है कि यह क्या है, लेकिन मैं इसका इस्तेमाल नहीं करता/करती. मैं कभी-कभी इसका इस्तेमाल करता/करती हूं. मैं इसका नियमित तौर पर इस्तेमाल करता/करती हूं. मैं एक विशेषज्ञ उपयोगकर्ता हूं.

इनमें से कौनसा विकल्प आपके बैकग्राउंड के बारे में सबसे अच्छी तरह बताता है?

Developer. डिज़ाइनर / यूएक्स स्पेशलिस्ट. बिज़नेस / डेटा / फ़ाइनेंशियल ऐनलिस्ट. डेटा साइंटिस्ट / डेटा इंजीनियर. मार्केटिंग / सोशल मीडिया / डिजिटल ऐनलिटिक्स एक्सपर्ट. अन्य.

आपको विज़ुअलाइज़ेशन के लिए, किन JavaScript लाइब्रेरी का इस्तेमाल करना है?

D3.js Google Charts Chart.js Leaflet Highcharts Plot.ly Other

सर्वे की जानकारी सबमिट करने के लिए, अगले पेज पर जाएं.

3. कम्यूनिटी विज़ुअलाइज़ेशन के बारे में खास जानकारी

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

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

cde32c0546ea89af.gif

4. कम्यूनिटी विज़ुअलाइज़ेशन डेवलपमेंट का वर्कफ़्लो

कम्यूनिटी विज़ुअलाइज़ेशन बनाने के लिए, आपको Google Cloud Platform के स्टोरेज बकेट में ये फ़ाइलें चाहिए. इन्हें आपको बाद में बनाना होगा:

फ़ाइल नाम

फ़ाइल प्रकार

मकसद

manifest.json*

JSON

विज़ुअलाइज़ेशन और विज़ुअलाइज़ेशन के सभी संसाधनों की जगहों के बारे में मेटाडेटा.

viz-codelab.json

JSON

प्रॉपर्टी पैनल के लिए, डेटा और स्टाइल कॉन्फ़िगरेशन के विकल्प.

viz-codelab.js

JavaScript

विज़ुअलाइज़ेशन को रेंडर करने के लिए JavaScript कोड.

viz-codelab.css (ज़रूरी नहीं)

सीएसएस

विज़ुअलाइज़ेशन के लिए सीएसएस स्टाइल.

*मेनिफ़ेस्ट फ़ाइल का नाम देना ज़रूरी है. अन्य फ़ाइलों के नाम अलग-अलग हो सकते हैं. हालांकि, यह ज़रूरी है कि उनके नाम/जगह की जानकारी, मेनिफ़ेस्ट फ़ाइल में दी गई हो.

5. 'नमस्ते, दुनिया के लोगों!' विज़ुअलाइज़ेशन लिखना

इस सेक्शन में, आपको Hello, world! विज़ुअलाइज़ेशन को रेंडर करने के लिए ज़रूरी कोड जोड़ना होगा.

विज़ुअलाइज़ेशन का JavaScript सोर्स लिखें

पहला चरण: Looker Studio Community Component Library (dscc) पेज से dscc.min.js फ़ाइल डाउनलोड करें और उसे अपनी वर्किंग डायरेक्ट्री में कॉपी करें.

दूसरा चरण: इस कोड को किसी टेक्स्ट एडिटर में कॉपी करें और इसे अपनी लोकल वर्किंग डायरेक्ट्री में viz-codelab-src.js के तौर पर सेव करें.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Render the viz.
  container.textContent = 'Hello, viz world!';

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

JavaScript बंडल फ़ाइल तैयार करना

तीसरा चरण: विज़ुअलाइज़ेशन हेल्पर लाइब्रेरी (dscc.min.js) और अपनी viz-codelab-src.js फ़ाइल के कॉन्टेंट को कॉपी करके, ज़रूरी सभी JavaScript को एक फ़ाइल में मिलाएं. इसके बाद, इस नई फ़ाइल का नाम viz-codelab.js रखें. फ़ाइलों को जोड़ने के लिए, इन कमांड का इस्तेमाल किया जा सकता है. सोर्स विज़ुअलाइज़ेशन कोड को अपडेट करने पर, यह चरण दोहराएं.

Linux/Mac OS के लिए, एक साथ कई फ़ाइलों को जोड़ने वाली स्क्रिप्ट

cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js

Windows में फ़ाइलें जोड़ने की स्क्रिप्ट

del viz-codelab.js
type nul > viz-codelab.js
type dscc.min.js >> viz-codelab.js
echo.>> viz-codelab.js
type viz-codelab-src.js >> viz-codelab.js

6. विज़ुअलाइज़ेशन के लिए सीएसएस लिखें

सीएसएस फ़ाइल, आपके विज़ुअलाइज़ेशन की स्टाइल तय करती है. हालांकि, यह ज़रूरी नहीं है. नीचे दी गई सीएसएस को कॉपी करें और इसे viz-codelab.css. के तौर पर सेव करें

viz-codelab.css

table {
    width: 100%;
    border-collapse: collapse;
}

tr {
    border-bottom: 1pt solid #d1d1d1;
}

th, td {
    padding: 8px;
    text-align: left;
}

7. JSON कॉन्फ़िगरेशन लिखना

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

नीचे दिए गए कोड को कॉपी करें और इसे viz-codelab.json. के तौर पर सेव करें. कॉन्फ़िगर की जा सकने वाली प्रॉपर्टी के बारे में ज़्यादा जानने के लिए, कम्यूनिटी विज़ुअलाइज़ेशन कॉन्फ़िगरेशन रेफ़रंस देखें.

viz-codelab.json

{
    "data": [
        {
            "id": "concepts",
            "label": "Concepts",
            "elements": [
                {
                    "id": "tableDimension",
                    "label": "Dimension",
                    "type": "DIMENSION",
                    "options": {
                        "min": 1,
                        "max": 1
                    }
                },
                {
                    "id": "tableMetric",
                    "label": "Metric",
                    "type": "METRIC",
                    "options": {
                        "min": 1,
                        "max": 1
                    }
                }
            ]
        }
    ],
    "style": [
        {
            "id": "header",
            "label": "Table Header",
            "elements": [
                {
                    "type": "FILL_COLOR",
                    "id": "headerBg",
                    "label": "Header Background Color",
                    "defaultValue": "#e0e0e0"
                }
            ]
        }
    ]
}

8. क्लाउड स्टोरेज प्रोजेक्ट और बकेट बनाना

पहला चरण: Google Cloud Platform (GCP) प्रोजेक्ट बनाएं या किसी मौजूदा प्रोजेक्ट का इस्तेमाल करें.

दूसरा चरण: GCP बकेट बनाएं. सुझाई गई स्टोरेज क्लास, रीजनल है. मुफ़्त टियर के बारे में जानकारी पाने के लिए, Cloud Storage की कीमत पेज पर जाएं. ध्यान दें: ऐसा हो सकता है कि रीजनल स्टोरेज क्लास के लिए, विज़ुअलाइज़ेशन स्टोरेज पर कोई शुल्क न लगे.

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

49cd3d8692e6bf51.png

9. manifest.json फ़ाइल लिखना

मेनिफ़ेस्ट फ़ाइल से, विज़ुअलाइज़ेशन की जगह और संसाधनों के बारे में जानकारी मिलती है. इसका नाम "manifest.json" होना चाहिए. साथ ही, इसे पिछले चरण में बनाए गए बकेट/पाथ में होना चाहिए. यह वही पाथ होना चाहिए जिसका इस्तेमाल आपके कॉम्पोनेंट आईडी के लिए किया गया था.

नीचे दिए गए कोड को किसी टेक्स्ट एडिटर में कॉपी करें और इसे manifest.json. के तौर पर सेव करें

मेनिफ़ेस्ट के बारे में ज़्यादा जानने के लिए, मेनिफ़ेस्ट रेफ़रंस दस्तावेज़ पढ़ें.

manifest.json

{
    "name": "Community Visualization",
    "logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
    "organization": "Looker Studio Codelab",
    "organizationUrl": "https://url",
    "termsOfServiceUrl": "https://url",
    "supportUrl": "https://url",
    "packageUrl": "https://url",
    "privacyPolicyUrl": "https://url",
    "description": "Community Visualization Codelab",
    "devMode": true,
    "components": [
        {
            "id": "tableChart",
            "name": "Table",
            "iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
            "description": "A simple table chart.",
            "resource": {
                "js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.js",
                "config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.json",
                "css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.css"
            }
        }
    ]
}

10. Google Cloud Storage में विज़ुअलाइज़ेशन फ़ाइलें अपलोड करना

  1. manifest.json, viz-codelab.js, viz-codelab.json, और viz-codelab.css फ़ाइलों को अपने Google Cloud Storage बकेट में अपलोड करें. इसके लिए, वेब इंटरफ़ेस या gsutil कमांड-लाइन टूल का इस्तेमाल करें. जब भी विज़ुअलाइज़ेशन अपडेट किया जाए, तब इस प्रोसेस को दोहराएं.

84c15349e32d9fa6.png

gsutil अपलोड कमांड

gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read viz-codelab.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET

11. Looker Studio में अपने कम्यूनिटी विज़ुअलाइज़ेशन को टेस्ट करना

5ce4532d02aac5e8.gif

रिपोर्ट बनाना और डेटा जोड़ना

पहला चरण: कम्यूनिटी विज़ुअलाइज़ेशन के सैंपल डेटा सेट का यूआरएल कॉपी करें. इसके अलावा, अपनी पसंद का कोई भी डेटा सोर्स इस्तेमाल करें और यहां दिया गया तरीका छोड़ दें.

दूसरा चरण: Looker Studio में साइन इन करें. सबसे ऊपर बाईं ओर, + बनाएं पर क्लिक करें. इसके बाद, रिपोर्ट चुनें.

तीसरा चरण: आपको रिपोर्ट एडिटर टूल दिखेगा, जिसमें रिपोर्ट में डेटा जोड़ें पैनल खुला होगा.

चौथा चरण: डेटा से कनेक्ट करें टैब में, Google का Google Sheets कनेक्टर चुनें.

पांचवां चरण: यूआरएल चुनें और पहले चरण में Google शीट का यूआरएल चिपकाएं.

छठा चरण: सबसे नीचे दाईं ओर, जोड़ें पर क्लिक करें.

सातवां चरण: अगर आपको यह पुष्टि करने के लिए कहा जाता है कि आपको इस रिपोर्ट में डेटा जोड़ना है, तो रिपोर्ट में जोड़ें पर क्लिक करें. 'बिना टाइटल वाली रिपोर्ट' नाम की एक रिपोर्ट बन जाती है. साथ ही, रिपोर्ट में सैंपल डेटा के साथ एक डिफ़ॉल्ट टेबल जुड़ जाती है. इसके बाद, डिफ़ॉल्ट टेबल को चुनें और मिटाएं. ऐसा करने से, आपको एक खाली रिपोर्ट मिलेगी. हालांकि, ऐसा करना ज़रूरी नहीं है.

अपनी रिपोर्ट में कम्यूनिटी विज़ुअलाइज़ेशन जोड़ना

पहला चरण: टूलबार में, कम्यूनिटी विज़ुअलाइज़ेशन और कॉम्पोनेंट 1d6173ab730fc552.png पर क्लिक करें .

दूसरा चरण: कम्यूनिटी गैलरी खोलने के लिए, + ज़्यादा एक्सप्लोर करें पर क्लिक करें.

तीसरा चरण: खुद का विज़ुअलाइज़ेशन बनाएं पर क्लिक करें

चौथा चरण: अपने कम्यूनिटी विज़ुअलाइज़ेशन की जांच करें और जोड़ें में जाकर, मेनिफ़ेस्ट पाथ डालें. इसके बाद, सबमिट करें पर क्लिक करें. मैनिफ़ेस्ट पाथ, Google Cloud Storage बकेट का नाम और पाथ होता है. यह आपके विज़ुअलाइज़ेशन के मैनिफ़ेस्ट की जगह की ओर ले जाता है. इसके आगे gs://. प्रीफ़िक्स लगा होता है. उदाहरण के लिए: gs://community-viz-docs/viz-codelab. अगर आपने मान्य मेनिफ़ेस्ट पाथ डाला है, तो विज़ुअलाइज़ेशन कार्ड रेंडर होना चाहिए.

पांचवां चरण: विज़ुअलाइज़ेशन कार्ड पर क्लिक करके उसे अपनी रिपोर्ट में जोड़ें.

छठा चरण: अगर आपसे पूछा जाए, तो विज़ुअलाइज़ेशन को रेंडर करने की अनुमति दें.

सातवां चरण: अगर चाहें, तो टेबल के लिए चुने गए डाइमेंशन और मेट्रिक को अपडेट करें. अगर दिए गए सैंपल डेटा सेट का इस्तेमाल किया जा रहा है, तो डाइमेंशन को देश और मेट्रिक को जनसंख्या पर सेट करें. कोडलैब में बाद तक, विज़ुअलाइज़ेशन पर इसका कोई असर नहीं पड़ेगा.

दाईं ओर मौजूद प्रॉपर्टी पैनल में, viz-codelab.json में कॉन्फ़िगर किए गए एलिमेंट दिखते हैं.

सेटअप पैनल में, विज़ुअलाइज़ेशन में एक डाइमेंशन और एक मेट्रिक का इस्तेमाल किया जा सकता है.

6ebe61619e340878.png

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

2b78982c01d6359f.png

12. डेटा को टेबल के तौर पर रेंडर करना

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

रेंडर करने के लिए डेटा, tables ऑब्जेक्ट में उपलब्ध होता है. इसे आपके विज़ुअलाइज़ेशन के लिए तय किए गए ट्रांसफ़ॉर्म के आधार पर स्ट्रक्चर किया जाता है. इस कोडलैब में, विज़ुअलाइज़ेशन के लिए टेबल फ़ॉर्मैट (tableTransform) का अनुरोध किया गया है. इसमें एक headers ऑब्जेक्ट और एक rows ऑब्जेक्ट शामिल होता है. इस ऑब्जेक्ट में वह सारा डेटा होता है जिसकी मदद से हम टेबल रेंडर कर सकते हैं.

पहला चरण: viz-codelab-src.js के कॉन्टेंट की जगह नीचे दिया गया कोड डालें.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Create the table.
  const table = document.createElement('table');
  const tableHeader = document.createElement('thead');
  const tableBody = document.createElement('tbody');

  data.tables.DEFAULT.headers.forEach(function (column) {
    const tableColumn = document.createElement('th');
    tableColumn.textContent = column.name;
    tableHeader.appendChild(tableColumn);
  });

  data.tables.DEFAULT.rows.forEach(function(row) {
    const tableRow = document.createElement('tr');
    row.forEach(function(cell) {
      const tableCell = document.createElement('td');
      if (typeof cell == 'number') {
        tableCell.textContent = new Intl.NumberFormat().format(cell);
      } else {
        tableCell.textContent = cell;
      }
      tableRow.appendChild(tableCell);
    });
    tableBody.appendChild(tableRow);
  });
  table.appendChild(tableHeader);
  table.appendChild(tableBody);

  // Render the table.
  container.appendChild(table);

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

दूसरा चरण: JavaScript बंडल फ़ाइल तैयार करें. इसके बाद, Google Cloud Storage में अपनी विज़ुअलाइज़ेशन फ़ाइलें अपलोड करें और उन्हें बदलें.

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

66db5bde61501b01.png

13. स्टाइल में बदलावों को डाइनैमिक तरीके से लागू करना

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

सभी स्टाइल एलिमेंट की स्थिति, style ऑब्जेक्ट में उपलब्ध होती है. इसमें हर आइटम की कुंजी, आपके विज़ुअलाइज़ेशन स्टाइल कॉन्फ़िगरेशन (viz-codelab.json) के आधार पर तय की जाती है. इस सेक्शन के लिए, आपको चुना गया फ़िल कलर मिलेगा. इसका इस्तेमाल करके, टेबल हेडर के बैकग्राउंड के रंग को अपडेट किया जा सकेगा.

पहला चरण: अपनी viz-codelab-src.js फ़ाइल में मौजूद कोड को यहां दिए गए कोड से बदलें.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Create the table.
  const table = document.createElement('table');
  const tableHeader = document.createElement('thead');
  const tableBody = document.createElement('tbody');

  data.tables.DEFAULT.headers.forEach(function (column) {
    const tableColumn = document.createElement('th');
    tableColumn.textContent = column.name;
    tableHeader.appendChild(tableColumn);
  });

  data.tables.DEFAULT.rows.forEach(function(row) {
    const tableRow = document.createElement('tr');
    row.forEach(function(cell) {
      const tableCell = document.createElement('td');
      if (typeof cell == 'number') {
        tableCell.textContent = new Intl.NumberFormat().format(cell);
      } else {
        tableCell.textContent = cell;
      }
      tableRow.appendChild(tableCell);
    });
    tableBody.appendChild(tableRow);
  });
  table.appendChild(tableHeader);
  table.appendChild(tableBody);

  // Set header color based on style control.
  tableHeader.style.backgroundColor = data.style.headerBg.value.color;

  // Render the table.
  container.appendChild(table);

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

दूसरा चरण: JavaScript बंडल फ़ाइल तैयार करें. इसके बाद, Google Cloud Storage में अपनी विज़ुअलाइज़ेशन फ़ाइलें अपलोड करें और उन्हें बदलें.

तीसरा चरण: Looker Studio की रिपोर्ट को रीफ़्रेश करें, ताकि कम्यूनिटी विज़ुअलाइज़ेशन को फिर से लोड किया जा सके और उसकी जांच की जा सके.

चौथा चरण: स्टाइल पैनल में जाकर, हेडर के बैकग्राउंड का रंग स्टाइल कंट्रोल का इस्तेमाल करके, टेबल हेडर के बैकग्राउंड का रंग बदलें.

cde32c0546ea89af.gif

बधाई हो! आपने Looker Studio में कम्यूनिटी विज़ुअलाइज़ेशन बना लिया है! यह कोडलैब यहीं खत्म होता है. अब देखते हैं कि आपको आगे क्या करना है.

14. अगले चरण

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

कम्यूनिटी विज़ुअलाइज़ेशन का ज़्यादा फ़ायदा पाना

अन्य संसाधन

इस कोडलैब में शामिल कॉन्टेंट के बारे में ज़्यादा जानने के लिए, यहां दिए गए अलग-अलग संसाधनों का इस्तेमाल करें.

संसाधन का टाइप

उपयोगकर्ता से जुड़ी सुविधाएँ

डेवलपर के लिए सुविधाएं

दस्तावेज़ के रूप में

सहायता केंद्र

डेवलपर के लिए दस्तावेज़

खबरें और अपडेट

Looker Studio > उपयोगकर्ता सेटिंग में जाकर साइन अप करें

डेवलपर के लिए ईमेल पाने वाली सूची

सवाल पूछें

उपयोगकर्ता फ़ोरम

उदाहरण

रिपोर्ट गैलरी

ओपन सोर्स रिपॉज़िटरी