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

1. शुरुआती जानकारी

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

ec3de192ad28e93e.png

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

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

आप इन चीज़ों के बारे में जानेंगे

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

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

आपको इनकी ज़रूरत होगी

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

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

2. झटपट सर्वे

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

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

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

सिर्फ़ स्की करना. इसे पढ़ें और कसरतें पूरी करें.

Looker Studio इस्तेमाल करने का आपका अनुभव कैसा रहा?

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

आपके बैकग्राउंड के बारे में इनमें से कौनसी बात सही है?

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

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

D3.js Google चार्ट Chart.js लीफ़लेट हाईचार्ट Plot.ly अन्य

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

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. नमस्ते, दुनिया लिखें! विज़ुअलाइज़ेशन

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

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

पहला चरण: Looker Studio कम्यूनिटी कॉम्पोनेंट लाइब्रेरी (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 फ़ाइल के कॉन्टेंट को viz-codelab.js नाम वाली नई फ़ाइल में कॉपी करके, सभी ज़रूरी JavaScript को एक ही फ़ाइल में जोड़ें. फ़ाइलों को जोड़ने के लिए, इन निर्देशों का पालन किया जा सकता है. हर बार सोर्स विज़ुअलाइज़ेशन कोड अपडेट करते समय यह चरण दोहराएं.

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 की कीमत पर जाएं. ध्यान दें: इस बात की संभावना नहीं है कि क्षेत्रीय स्टोरेज क्लास के लिए, आपके विज़ुअलाइज़ेशन स्टोरेज पर कोई खर्च होगा.

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

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. वेब इंटरफ़ेस या gsutil कमांड-लाइन टूल का इस्तेमाल करके, manifest.json, viz-codelab.js, viz-codelab.json, और viz-codelab.css फ़ाइलों को अपने Google Cloud Storage बकेट में अपलोड करें. अपना विज़ुअलाइज़ेशन अपडेट करते समय हर बार ऐसा ही करें.

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 Sheets by Google कनेक्टर चुनें.

पांचवां चरण: यूआरएल चुनें और पहले चरण में, 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 में साइन अप करें > उपयोगकर्ता सेटिंग

डेवलपर की ईमेल सूची

सवाल पूछें

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

उदाहरण

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

ओपन सोर्स डेटा स्टोर करने की जगह