Data Studio में पसंद के मुताबिक विज़ुअलाइज़ेशन बनाना

1. परिचय

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

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

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

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

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

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

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

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

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

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

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

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

इस कोडलैब/ट्यूटोरियल का इस्तेमाल कैसे किया जाएगा?

सिर्फ़ सरसरी तौर पर देखूंगा/देखूंगी. इसे पढ़ूंगा/पढ़ूंगी और इसमें दिए गए टास्क पूरे करूंगा/करूंगी.

Data Studio के साथ अपने अनुभव को क्या रेटिंग देंगे?

मैंने इसके बारे में कभी नहीं सुना. मुझे पता है कि यह क्या है, लेकिन मैं इसका इस्तेमाल नहीं करता/करती. मैं कभी-कभी इसका इस्तेमाल करता/करती हूं. मैं नियमित तौर पर इसका इस्तेमाल करता/करती हूं. मैं इसका इस्तेमाल करने में माहिर हूं.

इनमें से कौनसा विकल्प आपकी पृष्ठभूमि के बारे में बताता है?

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

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

D3.js Google Charts Chart.js Leaflet Highcharts Plot.ly अन्य

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

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

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

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

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

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

फ़ाइल नाम	फ़ाइल प्रकार	मकसद
manifest.json*	JSON	विज़ुअलाइज़ेशन के बारे में मेटाडेटा और विज़ुअलाइज़ेशन के सभी संसाधनों की जगह की जानकारी.
viz-codelab.json	JSON	प्रॉपर्टी पैनल के लिए, डेटा और स्टाइल कॉन्फ़िगरेशन के विकल्प.
viz-codelab.js	JavaScript	विज़ुअलाइज़ेशन को रेंडर करने के लिए JavaScript कोड.
viz-codelab.css (ज़रूरी नहीं)	CSS	विज़ुअलाइज़ेशन के लिए सीएसएस स्टाइल.

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

5. Hello, world! विज़ुअलाइज़ेशन बनाना

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

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

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

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

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

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

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

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

अहम जानकारी: पक्का करें कि आपने हर संसाधन के लिए, MY_GOOGLE_CLOUD_STORAGE_BUCKET की जगह सही बकेट/पाथ डाला हो.

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

manifest.json

{
    "name": "Community Visualization",
    "logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
    "organization": "Data 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 बकेट पर अपलोड करें. विज़ुअलाइज़ेशन को अपडेट करने पर, यह तरीका दोहराएं.

अहम जानकारी: पक्का करें कि आपकी फ़ाइलें सार्वजनिक हों. ऑब्जेक्ट को सार्वजनिक तौर पर पढ़ने की अनुमति देने के बारे में ज़्यादा जानने के लिए, Google Cloud का दस्तावेज़देखें.

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. Data Studio में, कम्यूनिटी विज़ुअलाइज़ेशन की जांच करना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 पर अपलोड करें और उन्हें ओवरराइट करें.

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

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 पर अपलोड करें और उन्हें ओवरराइट करें.

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

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

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

14. अगले चरण

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

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

कम्यूनिटी विज़ुअलाइज़ेशन के साथ और भी बहुत कुछ करना

• dscc हेल्पर लाइब्रेरी, मेनिफ़ेस्ट, और कॉन्फ़िगरेशन फ़ाइल के रेफ़रंस देखें.
• अपने विज़ुअलाइज़ेशन को हमारी कम्यूनिटी विज़ुअलाइज़ेशन गैलरी में सबमिट करें.
• Data Studio के लिए कम्यूनिटी कनेक्टर बनाएं.

अन्य संसाधन

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

संसाधन का टाइप	उपयोगकर्ता के लिए सुविधाएं	डेवलपर के लिए सुविधाएं
दस्तावेज़ के रूप में	सहायता केंद्र	डेवलपर डॉक्यूमेंटेशन
खबरें और अपडेट	Data Studio में साइन अप करें > उपयोगकर्ता सेटिंग	डेवलपर की मेलिंग सूची
सवाल पूछें	उपयोगकर्ता फ़ोरम	स्टैक ओवरफ़्लो [data-studio] Data Studio डेवलपर फ़ोरम
उदाहरण	रिपोर्ट गैलरी	ओपन सोर्स रिपॉज़िटरी