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

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

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

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

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

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

  • Google Data Studio का कम्यूनिटी विज़ुअलाइज़ेशन कैसे काम करता है
  • ds-component helper library का इस्तेमाल करके कम्यूनिटी विज़ुअलाइज़ेशन बनाने का तरीका
  • अपने कम्यूनिटी विज़ुअलाइज़ेशन को Data Studio डैशबोर्ड में कैसे इंटिग्रेट करें

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

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

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

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

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

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

सिर्फ़ सरसरी तौर पर देखें इसे पढ़ें और एक्सरसाइज़ पूरी करें

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

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

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

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

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

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

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

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

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

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

फ़ाइल नाम

फ़ाइल प्रकार

मकसद

manifest.json*

JSON

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

myViz.json

JSON

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

myViz.js

JavaScript

यह विज़ुअलाइज़ेशन दिखाने के लिए ज़रूरी JavaScript कोड उपलब्ध कराता है.

myViz.css (ज़रूरी नहीं)

सीएसएस

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

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

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

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

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

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

myVizSource.js

function drawViz(data) {

  // set margins + canvas size
  const margin = { top: 10, bottom: 50, right: 10, left: 10 };
  const height = dscc.getHeight() - margin.top - margin.bottom;
  const width = dscc.getWidth() - margin.left - margin.right;

  // remove the svg if it already exists
  if (document.querySelector("svg")) {
    let oldSvg = document.querySelector("svg");
    oldSvg.parentNode.removeChild(oldSvg);
  }

  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("height", `${height}px`);
  svg.setAttribute("width", `${width}px`);

  const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  rect.setAttribute('width', `${width/2}px`);
  rect.setAttribute('height', `${height/2}px`);
  rect.style.fill =  'blue';

  svg.append(rect);

  document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });

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

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

Linux/Mac OS में स्ट्रिंग जोड़ने वाली स्क्रिप्ट

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

Windows स्क्रिप्ट

del myViz.js
type nul > myViz.js
type dscc.min.js >> myViz.js
echo.>> myViz.js
type myVizSource.js >> myViz.js

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

myViz.css

#myVizTitle {
  color: black;
  font-size: 24px;
  text-align: center;
  margin: 0 auto;
}

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

नीचे दिए गए कोड को कॉपी करें और इसे myViz.json. के तौर पर सेव करें. कॉन्फ़िगर की जा सकने वाली प्रॉपर्टी के बारे में ज़्यादा जानने के लिए, कॉन्फ़िगरेशन रेफ़रंस का दस्तावेज़ पढ़ें.

myViz.json

{
  "data": [
    {
      "id": "concepts",
      "label": "Concepts",
      "elements": [
        {
          "id": "barDimension",
          "label": "Dimension",
          "type": "DIMENSION",
          "options": {
            "min": 1,
            "max": 1
          }
        },
        {
          "id": "barMetric",
          "label": "Metric",
          "type": "METRIC",
          "options": {
            "min": 1,
            "max": 1
          }
        }
      ]
    }
  ],
  "style": [
    {
      "id": "color",
      "label": "Colors",
      "elements": [
        {
          "type": "FONT_COLOR",
          "id": "barColor",
          "label": "Bar Color",
          "defaultValue": "black"
        }
      ]
    }
  ]
}

पहला चरण: Google Cloud Platform (GCP) प्रोजेक्ट बनाना

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

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

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

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

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

manifest.json

{
  "name": "Community Visualization",
  "logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/bar_chart.png",
  "organization": "Data Studio Codelab",
  "supportUrl": "https://url",
  "packageUrl": "https://url",
  "privacyPolicyUrl": "https://url",
  "description": "Community Visualization Codelab",
  "devMode": true,
  "components": [{
    "id": "barChart",
    "name": "Bar Chart",
    "iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/bar_chart.png",
    "description": "Bar chart written in d3.js",
    "resource": {
      "js": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.js",
      "config": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.json",
      "css": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.css"
    }
  }]
}
  1. manifest.json, myViz.js, myViz.json, और myViz.css फ़ाइलों को Google Cloud Storage बकेट में अपलोड करें. इसके लिए, वेब इंटरफ़ेस या gsutil कमांड-लाइन टूल का इस्तेमाल करें. जब भी विज़ुअलाइज़ेशन अपडेट किया जाए, तब इस प्रोसेस को दोहराएं.

gsutil अपलोड कमांड

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

पहला चरण: कम्यूनिटी विज़ुअलाइज़ेशन के सैंपल डेटा सेट का यूआरएल कॉपी करें.

दूसरा चरण: Data Studio पर जाएं और नई रिपोर्ट बनाएं में जाकर, खाली पर क्लिक करें.

तीसरा चरण: सबसे नीचे दाईं ओर, नया डेटा सोर्स बनाएं पर क्लिक करें.

चौथा चरण: Google Sheets कनेक्टर चुनें.

पांचवां चरण: यूआरएल फ़ील्ड में, ऊपर दिए गए पहले चरण में मौजूद Google शीट का यूआरएल डालें.

छठा चरण: पेज पर सबसे ऊपर दाईं ओर, कनेक्ट करें पर क्लिक करें

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

सातवां चरण: अपनी रिपोर्ट में डेटा सोर्स जोड़ने के लिए, दिखने वाले बॉक्स में रिपोर्ट में जोड़ें पर क्लिक करें.

छठा चरण: टूलबार में, कम्यूनिटी विज़ुअलाइज़ेशन बटन पर क्लिक करें. इससे एक ड्रॉप-डाउन खुलता है.

सातवां चरण: अपने बकेट के नाम से पहले gs:// (चिपकाएं. उदाहरण के लिए: gs://community-viz-docs/myViz). इसके बाद, इसे "मेनिफ़ेस्ट पाथ" के लिए टेक्स्ट इनपुट में चिपकाएं. "कॉम्पोनेंट आईडी" में जाकर barChart जोड़ें और "जोड़ें" पर क्लिक करें.

आपका विज़ुअलाइज़ेशन, आपके कैनवस पर अपने-आप बन जाएगा. दाईं ओर मौजूद प्रॉपर्टी पैनल में, आपकी myViz.json फ़ाइल में मौजूद एलिमेंट दिखने चाहिए.

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

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

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

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

myVizSource.js

function drawViz(data) {

  // set margins + canvas size
  const margin = { top: 10, bottom: 50, right: 10, left: 10 };
  const height = dscc.getHeight() - margin.top - margin.bottom;
  const width = dscc.getWidth() - margin.left - margin.right;

  // remove the svg if it already exists
  if (document.querySelector("svg")) {
    let oldSvg = document.querySelector("svg");
    oldSvg.parentNode.removeChild(oldSvg);
  }

  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("height", `${height}px`);
  svg.setAttribute("width", `${width}px`);

  const fillColor =  data.style.barColor.value
  ? data.style.barColor.value.color
  : data.style.barColor.defaultValue;

  const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  rect.setAttribute('width', `${width/2}px`);
  rect.setAttribute('height', `${height/2}px`);
  rect.style.fill =  fillColor;
  svg.append(rect);

  document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });

दूसरा चरण: कंबाइंड JavaScript फ़ाइल बनाएं. इसके बाद, विज़ुअलाइज़ेशन फ़ाइलों को Google Cloud Storage पर फिर से अपलोड करें.

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

स्टाइल मेन्यू में मौजूद सिलेक्टर का इस्तेमाल करके, आपको रेक्टैंगल का रंग बदलने का विकल्प मिलना चाहिए.

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

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

myVizSource.js

function drawViz(data) {
  let rowData = data.tables.DEFAULT;

  // set margins + canvas size
  const margin = { top: 10, bottom: 50, right: 10, left: 10 };
  const padding = { top: 15, bottom: 15 };
  const height = dscc.getHeight() - margin.top - margin.bottom;
  const width = dscc.getWidth() - margin.left - margin.right;

  // remove the svg if it already exists
  if (document.querySelector("svg")) {
    let oldSvg = document.querySelector("svg");
    oldSvg.parentNode.removeChild(oldSvg);
  }

  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("height", `${height}px`);
  svg.setAttribute("width", `${width}px`);

  const fillColor =  data.style.barColor.value
  ? data.style.barColor.value.color
  : data.style.barColor.defaultValue;

  const maxBarHeight = height - padding.top - padding.bottom;
  const barWidth = width / (rowData.length * 2);

  // obtain the maximum bar metric value for scaling purposes
  let largestMetric = 0;

  rowData.forEach(function(row) {
    largestMetric = Math.max(largestMetric, row["barMetric"][0]);
  });

  rowData.forEach(function(row, i) {
    // 'barDimension' and 'barMetric' come from the id defined in myViz.json
    // 'dimId' is Data Studio's unique field ID, used for the filter interaction
    const barData = {
      dim: row["barDimension"][0],
      met: row["barMetric"][0],
      dimId: data.fields["barDimension"][0].id
    };

    // calculates the height of the bar using the row value, maximum bar
    // height, and the maximum metric value calculated earlier
    let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);

    // normalizes the x coordinate of the bar based on the width of the convas
    // and the width of the bar
    let barX = (width / rowData.length) * i + barWidth / 2;

    // create the "bar"
    let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    rect.setAttribute("x", barX);
    rect.setAttribute("y", maxBarHeight - barHeight);
    rect.setAttribute("width", barWidth);
    rect.setAttribute("height", barHeight);
    rect.setAttribute("data", JSON.stringify(barData));
    rect.style.fill = fillColor;
    svg.appendChild(rect);

    // add text labels
    let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
    let textX = barX + barWidth / 2;
    text.setAttribute("x", textX);
    text.setAttribute("text-anchor", "middle");
    let textY = maxBarHeight + padding.top;
    text.setAttribute("y", textY);
    text.setAttribute("fill", fillColor)
    text.innerHTML = barData["dim"];

    svg.appendChild(text);
  });

  document.body.appendChild(svg);
}

// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });

दूसरा चरण: कंबाइंड JavaScript फ़ाइल बनाएं. इसके बाद, विज़ुअलाइज़ेशन फ़ाइलों को Google Cloud Storage पर फिर से अपलोड करें.

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

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

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

myVizSource.js

// create a title element
var titleElement = document.createElement('div');
titleElement.id = 'myVizTitle';
document.body.appendChild(titleElement);

function drawViz(data) {
  let rowData = data.tables.DEFAULT;

  // set margins + canvas size
  const margin = { top: 10, bottom: 50, right: 10, left: 10 };
  const padding = { top: 15, bottom: 15 };
  const height = dscc.getHeight() - margin.top - margin.bottom;
  const width = dscc.getWidth() - margin.left - margin.right;

  const fillColor =  data.style.barColor.value
  ? data.style.barColor.value.color
  : data.style.barColor.defaultValue;

  // remove the svg if it already exists
  if (document.querySelector("svg")) {
    let oldSvg = document.querySelector("svg");
    oldSvg.parentNode.removeChild(oldSvg);
  }

  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("height", `${height}px`);
  svg.setAttribute("width", `${width}px`);

  const maxBarHeight = height - padding.top - padding.bottom;
  const barWidth = width / (rowData.length * 2);

  // obtain the maximum bar metric value for scaling purposes
  let largestMetric = 0;

  rowData.forEach(function (row) {
    largestMetric = Math.max(largestMetric, row["barMetric"][0]);
  });

  rowData.forEach(function (row, i) {
    // 'barDimension' and 'barMetric' come from the id defined in myViz.json
    // 'dimId' is Data Studio's unique field ID, used for the filter interaction
    const barData = {
      dim: row["barDimension"][0],
      met: row["barMetric"][0],
      dimId: data.fields["barDimension"][0].id
    };

    // calculates the height of the bar using the row value, maximum bar
    // height, and the maximum metric value calculated earlier
    let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);

    // normalizes the x coordinate of the bar based on the width of the convas
    // and the width of the bar
    let barX = (width / rowData.length) * i + barWidth / 2;

    // create the "bar"
    let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    rect.setAttribute("x", barX);
    rect.setAttribute("y", maxBarHeight - barHeight);
    rect.setAttribute("width", barWidth);
    rect.setAttribute("height", barHeight);
    rect.setAttribute("data", JSON.stringify(barData));
    // use style selector from Data Studio
    rect.style.fill = fillColor;
    svg.appendChild(rect);

    // add text labels
    let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
    let textX = barX + barWidth / 2;
    text.setAttribute("x", textX);
    text.setAttribute("text-anchor", "middle");
    let textY = maxBarHeight + padding.top;
    text.setAttribute("y", textY);
    text.setAttribute("fill", fillColor)
    text.innerHTML = barData["dim"];

    svg.appendChild(text);
  });

  document.body.appendChild(svg);

  // Get the human-readable name of the metric and dimension

  var metricName = data.fields['barMetric'][0].name;
  var dimensionName = data.fields['barDimension'][0].name;

  titleElement.innerText = metricName + ' by ' + dimensionName;

}

dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });

दूसरा चरण: कंबाइंड JavaScript फ़ाइल बनाएं. इसके बाद, विज़ुअलाइज़ेशन फ़ाइलों को Google Cloud Storage पर फिर से अपलोड करें.

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

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

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

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

अन्य संसाधन

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

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

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

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

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

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

डेवलपर डॉक्यूमेंटेशन

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

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

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

सवाल पूछें

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

Stack Overflow [google-data-studio]

Data Studio Developers फ़ोरम

वीडियो

YouTube पर Data Studio

जल्द ही उपलब्ध होगा!

उदाहरण

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

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