इस पेज पर, चार्ट की डेटा टेबल में भूमिकाओं के कॉन्सेप्ट और उनके इस्तेमाल के बारे में बताया गया है.
भूमिकाएं क्या होती हैं?
Google DataTable और DataView ऑब्जेक्ट अब साफ़ तौर पर असाइन की गई कॉलम भूमिकाओं के साथ काम करते हैं. कॉलम में दी गई भूमिका से यह पता चलता है कि कॉलम में मौजूद डेटा का मकसद क्या है: उदाहरण के लिए, किसी कॉलम में टूलटिप टेक्स्ट, डेटा पॉइंट एनोटेशन या अनिश्चितता दिखाने वाले इंडिकेटर की जानकारी देने वाला डेटा हो सकता है. कॉलम में दी जाने वाली ज़्यादातर भूमिकाएं, उसके पहले मौजूद 'डेटा' कॉलम पर लागू होती हैं. भले ही, वह रोल कॉलम के किसी ग्रुप में शामिल होने से ठीक पहले हो या पहले ग्रुप में शामिल हो. उदाहरण के लिए, 'डेटा' कॉलम के बाद दो कॉलम हो सकते हैं. एक 'टूलटिप' के लिए और दूसरा 'एनोटेशन' के लिए. हालांकि, 'डोमेन' कॉलम के बाद, हम आम तौर पर 'एनोटेशन' और 'ऐनोटेशन टेक्स्ट' कॉलम की भूमिकाओं की भी अनुमति देते हैं.
ध्यान दें: अगर आपको टूलटिप के उस कॉन्टेंट को कंट्रोल करना है जो उपयोगकर्ता के चार्ट पर कर्सर घुमाने पर दिखता है, तो टूलटिप देखें.
पहले, कॉलम के लिए सिर्फ़ दो भूमिकाएं उपलब्ध होती थीं: 'डोमेन', जो मुख्य ऐक्सिस वैल्यू की जानकारी देता है; और 'डेटा', जो बार की ऊंचाई, पाई स्लाइस की चौड़ाई वगैरह की जानकारी देता है. ये भूमिकाएं, टेबल में कॉलम के क्रम और टाइप के आधार पर, सीधे तौर पर असाइन की गई थीं. हालांकि, कॉलम की भूमिकाएं साफ़ तौर पर असाइन करने की सुविधा की मदद से, अब ऐसे कॉलम जोड़े जा सकते हैं जो चार्ट में नई और दिलचस्प सुविधाएं देते हैं. जैसे, आर्बिट्रेरी एनोटेशन लेबल, होवर टेक्स्ट, और अनिश्चितता वाले बार.
अगर किसी कॉलम की भूमिका साफ़ तौर पर असाइन नहीं की जाती है, तो उसकी भूमिका का अनुमान, टेबल में कॉलम के क्रम से लगाया जाता है. ऐसा, चार्ट के डेटा फ़ॉर्मैट की जानकारी के मुताबिक किया जाता है. इस पेज पर आपको पता चलेगा कि कौनसी भूमिकाएं साफ़ तौर पर असाइन की जा सकती हैं और उन्हें कैसे असाइन किया जा सकता है.
यहां इस बारे में तुलना की गई है कि अतिरिक्त, साफ़ तौर पर असाइन की गई भूमिकाओं की तुलना में, सिर्फ़ डिफ़ॉल्ट और अनुमानित भूमिकाओं का इस्तेमाल करके, लाइन चार्ट में क्या-क्या किया जा सकता है.
लाइन चार्ट डेटा टेबल का फ़ॉर्मैट:
कॉलम 0 | कॉलम 1 | ... | कॉलम N | |
---|---|---|---|---|
मकसद | लाइन 1 की वैल्यू | ... | लाइन N की वैल्यू | |
डेटा टाइप | नंबर | ... | नंबर | |
भूमिका | डोमेन | डेटा | ... | डेटा |
कॉलम में ये भूमिकाएं असाइन की जा सकती हैं: काम करना (ज़रूरी नहीं) |
|
|
... |
|
साफ़ कॉलम से जुड़ी भूमिकाओं के बिना चार्ट | साफ़ कॉलम में मौजूद भूमिकाओं वाला चार्ट |
---|---|
|
|
इस चार्ट में, भूमिकाओं को साफ़ तौर पर लागू नहीं किया जाता. इसलिए, इसमें सिर्फ़ बेसिक डेटा और डोमेन कॉलम का लेआउट इस्तेमाल किया जा सकता है, जैसा कि ऊपर दिखाया गया है. डेटा टेबल: var data = new google.visualization.DataTable(); data.addColumn('string', 'Month'); // Implicit domain label col. data.addColumn('number', 'Sales'); // Implicit series 1 data col. data.addRows([ ['April',1000], ['May', 1170], ['June', 660], ['July', 1030] ]); |
इस चार्ट में साफ़ तौर पर भूमिकाएं असाइन की गई हैं. इसलिए, वैकल्पिक कॉलम जोड़े जा सकते हैं. इस चार्ट में एनोटेशन, एनोटेशन टेक्स्ट, इंटरवल, और तय की गई भूमिकाओं के लिए वैकल्पिक कॉलम हैं.
डेटा टेबल: var data = new google.visualization.DataTable(); data.addColumn('string', 'Month'); // Implicit domain label col. data.addColumn('number', 'Sales'); // Implicit series 1 data col. data.addColumn({type:'number', role:'interval'}); // interval role col. data.addColumn({type:'number', role:'interval'}); // interval role col. data.addColumn({type:'string', role:'annotation'}); // annotation role col. data.addColumn({type:'string', role:'annotationText'}); // annotationText col. data.addColumn({type:'boolean',role:'certainty'}); // certainty col. data.addRows([ ['April',1000, 900, 1100, 'A','Stolen data', true], ['May', 1170, 1000, 1200, 'B','Coffee spill', true], ['June', 660, 550, 800, 'C','Wumpus attack', true], ['July', 1030, null, null, null, null, false] ]); |
कौनसी भूमिकाएं उपलब्ध हैं?
नीचे दी गई टेबल में, Google चार्ट में शामिल सभी भूमिकाओं की सूची दी गई है. सभी तरह की भूमिकाएं हर तरह के चार्ट के लिए उपलब्ध नहीं होती हैं. हर चार्ट के दस्तावेज़ में बताया जाएगा कि कौनसी भूमिकाएं उपलब्ध हैं और वे कहां जाती हैं. अलग-अलग तरह के चार्ट के लिए, भूमिकाएं अलग-अलग तरीके से रेंडर की जाती हैं.
भूमिका | ब्यौरा | उदाहरण |
---|---|---|
एनोटेशन | इससे जुड़े डेटा पॉइंट के पास, चार्ट में दिखने वाला टेक्स्ट. टेक्स्ट, उपयोगकर्ता के इंटरैक्शन के बिना दिखता है. एनोटेशन और एनोटेशन टेक्स्ट को डेटा पॉइंट और कैटगरी (ऐक्सिस लेबल), दोनों के लिए असाइन किया जा सकता है. एनोटेशन दो तरह की होती हैं: पॉइंट (डिफ़ॉल्ट), जो बताए गए पॉइंट के पास
जानकारी देने वाले टेक्स्ट को बनाता है और दूसरा, जो एनोटेशन टेक्स्ट को चार्ट के एरिया को दो हिस्सों में बांटता है. आपके पास इस चार्ट का विकल्प सेट करके,
लाइन की स्टाइल तय करने का विकल्प है: डेटा टाइप: स्ट्रिंग डिफ़ॉल्ट: स्ट्रिंग खाली है |
डेटा: लेबल: 'साल', 'बिक्री', शून्य, शून्य, शून्य, शून्य, नया, शून्य, शून्य, शून्य, 'खर्च', शून्य, शून्य, शून्य
भूमिका: डोमेन, डेटा, जानकारी, व्याख्या, जानकारी, डेटा, व्याख्या, व्याख्या, टिप्पणी
इस चार्ट में 'A' और 'B' एनोटेशन हैं. जानकारी देने वाला टेक्स्ट देखने के लिए, एनोटेशन पर कर्सर घुमाएं. ध्यान दें कि एनोटेशन टेक्स्ट की वैल्यू देखने के लिए, आपको एनोटेशन पर कर्सर घुमाना होगा, न कि उस डेटा पॉइंट पर जिस पर इसे लागू किया गया है. एनोटेशन और एनोटेशन टेक्स्ट, दोनों की सेल के लिए शून्य वैल्यू स्वीकार की जाती हैं. हालांकि, अगर आपके पास एनोटेशन टेक्स्ट की वैल्यू है, तो आपके पास उससे जुड़ी एनोटेशन वैल्यू होनी चाहिए. |
annotationText | जब उपयोगकर्ता इससे जुड़ी जानकारी पर कर्सर घुमाता है, तब टेक्स्ट को बड़ा किया जाता है. एनोटेशन और एनोटेशन टेक्स्ट को डेटा पॉइंट और कैटगरी (ऐक्सिस लेबल), दोनों के लिए असाइन किया जा सकता है. अगर आपके पास एनोटेशन टेक्स्ट कॉलम है, तो आपके पास जानकारी वाला एक कॉलम भी होना चाहिए. इसके उलट, टूलटिप टेक्स्ट तब दिखता है, जब उपयोगकर्ता, चार्ट में इससे जुड़े डेटा पॉइंट पर कर्सर घुमाता है. डेटा टाइप: स्ट्रिंग डिफ़ॉल्ट: स्ट्रिंग खाली है |
|
निश्चितता | इससे पता चलता है कि डेटा पॉइंट तय है या नहीं. रिपोर्ट के दिखने का तरीका, चार्ट के टाइप पर निर्भर करता है. उदाहरण के लिए, इसे डैश वाली लाइनों या धारीदार फ़िल्टर से दिखाया जा सकता है. लाइन और एरिया चार्ट के लिए, दो डेटा पॉइंट के बीच का सेगमेंट तभी तय होता है, जब दोनों डेटा पॉइंट तय हों. डेटा टाइप: बूलियन, जहां सही का मतलब होता है और गलत की जानकारी नहीं होती है. डिफ़ॉल्ट: सही |
|
फ़ोकस | तय किए गए चार्ट डेटा पॉइंट पर ज़ोर देता है. इसे एक मोटी लाइन और/या बड़े बिंदु के तौर पर दिखाया जाता है. लाइन और एरिया चार्ट में, दो डेटा पॉइंट के बीच के सेगमेंट पर तब ही ध्यान दिया जाता है, जब दोनों डेटा पॉइंट पर ज़ोर दिया गया हो. डेटा टाइप: बूलियन डिफ़ॉल्ट: गलत |
डेटा: label: 'Year', 'Sales', null, 'Expenses', null role: domain, data, emphasis, data, emphasis '2004', 1000, true, 400, false '2005', 1170, true, 460, true '2006', 660, false, 1120, true '2007', 1030, false, 540, true इस चार्ट में, 'सेल्स' सीरीज़ में एक सेगमेंट है, जिस पर ज़्यादा ज़ोर दिया गया है. इसे कॉलम तीसरी, पंक्ति एक, और दो से दिखाया गया है. 'खर्च' सीरीज़ में दो ऐसे सेगमेंट हैं जिन पर खास तौर पर ध्यान दिया जाता है. इन्हें पांचवें कॉलम, पंक्ति दो, तीन, और चार के हिसाब से दिखाया गया है. ध्यान दें कि किस तरह ज़ोर देने के लिए, दोनों बाउंडिंग पॉइंट पर ज़ोर देना ज़रूरी है. |
इंटरवल | किसी खास पॉइंट के लिए, डेटा की संभावित सीमा के बारे में बताता है. इंटरवल को आम तौर पर, आई-बार स्टाइल रेंज इंडिकेटर के तौर पर दिखाया जाता है. इंटरवल कॉलम, अंकों वाले कॉलम होते हैं. बार की सबसे छोटी और सबसे बड़ी वैल्यू को पेयर में जोड़कर, इंटरवल कॉलम जोड़ें. इंटरवल वैल्यू को बाईं से दाईं ओर, बढ़ती हुई वैल्यू के साथ जोड़ा जाना चाहिए. डेटा टाइप: नंबर डिफ़ॉल्ट: कोई इंटरवल नहीं |
डेटा: label: 'Day', 'Stock value', null, null role: domain, data, interval, interval 'Mon', 38, 20, 45 'Tue', 55, 31, 66 'Wed', 77, 50, 80 'Thurs', 66, 50, 77 इस चार्ट में, इंटरवल वैल्यू, पॉइंट के आस-पास एक I-बार तय करती हैं. वैल्यू बाईं से दाईं ओर बढ़ती हैं. किसी पॉइंट के आस-पास के सबसे ज़्यादा और सबसे कम इंटरवल, बार के ऊपरी और निचले हिस्से को दिखाते हैं. ध्यान दें: इंटरवल की पूरी जानकारी के लिए इंटरवल देखें. |
दायरा | इससे पता चलता है कि कोई पॉइंट, दायरे में है या नहीं. अगर कोई पॉइंट दायरे से बाहर है, तो उसे विज़ुअल तौर पर हटा दिया जाता है. अगर दोनों में से कोई भी एंडपॉइंट स्कोप में है, तो लाइन और एरिया चार्ट के लिए दो डेटा पॉइंट के बीच का सेगमेंट स्कोप में होगा. डेटा टाइप: बूलियन, जहां 'सही' का मतलब स्कोप में है. डिफ़ॉल्ट: सही |
डेटा: label: 'Year', 'Sales', null, 'Expenses', null role: domain, data, scope, data, scope '2004', 1000, false, 400, true '2005', 1170, false, 460, false '2006', 660, true, 1120, false '2007', 1030, true, 540, false पहला स्कोप वाला कॉलम, बाईं ओर मौजूद 'बिक्री' डेटा कॉलम पर लागू होता है. पहले सेगमेंट को आउट ऑफ़ स्कोप से बाहर किया गया है, क्योंकि दोनों बाउंड्री पॉइंट स्कोप से बाहर हैं. दूसरा स्कोप वाला कॉलम, बाईं ओर मौजूद 'खर्च' डेटा कॉलम पर लागू होता है. पहले सेगमेंट को इन-स्कोप के तौर पर मार्क किया गया है, क्योंकि इसका एक बाउंड्री पॉइंट दायरे में है. बाकी लाइन, स्कोप से बाहर है, क्योंकि बाकी सभी पॉइंट को 'स्कोप से बाहर' के तौर पर मार्क किया गया है. |
स्टाइल |
आपके डेटा के अलग-अलग पहलुओं की कुछ प्रॉपर्टी को स्टाइल करता है. वे वैल्यू ये हैं:
डेटा टाइप: स्ट्रिंग, जहां एक डिफ़ॉल्ट: शून्य |
डेटा: label: 'Character', 'Popularity', 'Style', role: domain, data, style, 'Hulk', 50, 'color: green', 'Captain America', 75, 'color: #0000cf;' + 'stroke-color: #cf001d', 'Wolverine', 90, 'opacity: 0.5;' + 'stroke-width: 5;' + 'stroke-color: #01a0ff;' + 'fill-color: #fff600', 'Iron Man', 60, 'color: #db9500;' + 'stroke-width: 10;' + 'stroke-color: #a30300', 'Spider Man', 100, 'bar {' + 'fill-color: #c8001d;' + 'stroke-width: 3;' + 'stroke-color: #1800c8}'
इस चार्ट में, हर बार को ध्यान दें: पॉइंट, लाइन, और बार की स्टाइल को पसंद के मुताबिक बनाने के तरीके के बारे में ज़्यादा जानकारी कहीं भी दी गई है. हर तरह के चार्ट के लिए विकल्प भी देखें, जहां दूसरी तरह की इकाइयों के लिए भी स्टाइल तय की जा सकती हैं. जैसे, एरिया, टेक्स्ट, और बॉक्स. |
टूलटिप |
जब कोई उपयोगकर्ता इस पंक्ति से जुड़े डेटा पॉइंट पर कर्सर घुमाता है, तो दिखने वाला टेक्स्ट. ध्यान दें: यह बबल चार्ट विज़ुअलाइज़ेशन में काम नहीं करता. बबल चार्ट के एचटीएमएल टूलटिप के कॉन्टेंट को पसंद के मुताबिक नहीं बनाया जा सकता. डेटा टाइप: स्ट्रिंग डिफ़ॉल्ट: डेटा पॉइंट वैल्यू |
डेटा: label: 'Year', 'Sales', null, 'Expenses', null role: domain, data, tooltip, data, tooltip '2004', 1000, '1M$ sales, 400, '$0.4M expenses in 2004' in 2004' '2005', 1170, '1.17M$ sales, 460, '$0.46M expenses in 2005' in 2005' '2006', 660, '.66$ sales, 1120, '$1.12M expenses in 2006' in 2006' '2007', 1030, '1.03M$ sales, 540, '$0.54M expenses in 2007' in 2007' टूलटिप टेक्स्ट देखने के लिए, डेटा पॉइंट पर कर्सर घुमाएं. टूलटिप डेटा को कॉलम 3 और 5 की दोनों लाइनों के सभी पॉइंट के लिए असाइन किया गया है. ध्यान दें: टूलटिप को पसंद के मुताबिक बनाने के बारे में ज़्यादा जानने के लिए, टूलटिप देखें. |
डोमेन | आपको एक से ज़्यादा डोमेन वाला चार्ट (यहां दिखाया गया है) डिज़ाइन किए बिना, खास तौर पर इस भूमिका को असाइन करने की ज़रूरत नहीं है. डेटा टेबल के बेसिक फ़ॉर्मैट से, चार्टिंग इंजन को यह पता लगाने में मदद मिलती है कि कौनसे कॉलम डोमेन कॉलम हैं. हालांकि, आपको यह पता होना चाहिए कि कौनसे कॉलम, डोमेन कॉलम हैं. इससे आपको पता होना चाहिए कि कौनसे दूसरे कॉलम में इसमें बदलाव किए जा सकते हैं. डोमेन कॉलम, चार्ट के मुख्य ऐक्सिस पर लेबल के बारे में बताता है. एक ही चार्ट में एक से ज़्यादा स्केल को सपोर्ट करने के लिए, कभी-कभी एक से ज़्यादा डोमेन कॉलम का इस्तेमाल किया जा सकता है. डेटा टाइप: आम तौर पर स्ट्रिंग, लेकिन कभी-कभी संख्या या तारीख |
डेटा: label: '2009, '2009, '2009, '2008, '2008 '2008 Quarter', Sales', Expenses', Quarter', Sales', Expenses' role: domain, data, data, domain, data, data 'Q1/09', 1000, 400, 'Q1/08', 800, 300 'Q2/09', 1170, 460, 'Q2/08', 750, 400 'Q3/09', 660, 1120, 'Q3/08', 700, 540 'Q4/09', 1030, 540, 'Q4/08', 820, 620 यह उदाहरण एक मल्टी-डोमेन चार्ट के बारे में बताता है. पहले दो डेटा कॉलम पहले डोमेन ("2009 तिमाही") को संशोधित करते हैं और अंतिम दो डेटा कॉलम दूसरे डोमेन ("2008 तिमाही") को संशोधित करते हैं. दोनों डोमेन एक ही ऐक्सिस स्केल पर लगाए गए हैं. |
डेटा | आपको अलग से यह भूमिका असाइन करने की ज़रूरत नहीं है. डेटा टेबल के बेसिक फ़ॉर्मैट की मदद से, चार्टिंग इंजन यह अनुमान लगा पाता है कि कौनसे कॉलम, डोमेन कॉलम हैं. हालांकि, आपको पता होना चाहिए कि कौनसे कॉलम, डेटा कॉलम हैं, ताकि आप जान सकें कि कौनसे दूसरे कॉलम में डेटा में बदलाव किया जा सकता है. डेटा रोल कॉलम से, चार्ट में रेंडर करने के लिए सीरीज़ का डेटा तय होता है. ज़्यादातर चार्ट के लिए, एक कॉलम = एक सीरीज़ होती है. हालांकि, चार्ट के टाइप के हिसाब से यह अलग-अलग हो सकता है. उदाहरण के लिए, स्कैटर चार्ट में पहली सीरीज़ के लिए दो डेटा कॉलम और हर अतिरिक्त सीरीज़ के लिए एक अलग डेटा कॉलम की ज़रूरत होती है. कैंडलस्टिक चार्ट में हर सीरीज़ के लिए चार डेटा कॉलम होने चाहिए. डेटा टाइप: नंबर |
भूमिका का क्रम और जुड़ाव
इस डायग्राम में दिखाया गया है कि भूमिका वाले कौनसे कॉलम, किसी दूसरे रोल कॉलम पर लागू हो सकते हैं. डोमेन के कॉलम को छोड़कर सभी कॉलम, उस सबसे नज़दीकी बाएं पड़ोसी पर लागू होते हैं जिस पर इसे लागू किया जा सकता है.
उदाहरण के लिए, उदाहरण के लिए, स्कोप कॉलम बाईं तरफ़ मौजूद सबसे नज़दीकी data कॉलम पर लागू होता है; annotationText कॉलम इसकी बाईं ओर मौजूद सबसे नज़दीकी एनोटेशन कॉलम पर लागू होगा; इसकी बाईं ओर मौजूद सबसे नज़दीकी डेटा या डोमेन कॉलम पर एनोटेशन लागू होगा.
भूमिका असाइन करना
DataTable ऑब्जेक्ट में कॉलम की प्रॉपर्टी के तौर पर भूमिकाएं असाइन की जाती हैं. भूमिका वाला कॉलम बनाने के कई तरीके हैं, लेकिन सबसे सामान्य तरीके यहां दिए गए हैं:
पहली दो तकनीकें, नीचे दिया गया चार्ट ड्रॉ करती हैं:
DataTable.addColumn का तरीका
इस उदाहरण में, तीन बार पर इंटरवल मार्कर के साथ एक बार चार्ट बनाया गया है. इंटरवल मार्कर को तीसरे और चौथे कॉलम में बताया जाता है. इसके लिए, DataTable.addColumn() तरीके का इस्तेमाल किया जाता है.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain column.
data.addColumn('number', 'Sales'); // Implicit data column.
data.addColumn({type:'number', role:'interval'});
data.addColumn({type:'number', role:'interval'});
data.addColumn('number', 'Expenses');
data.addRows([
['April',1000, 900, 1100, 400],
['May', 1170, 1000, 1200, 460],
['June', 660, 550, 800, 1120],
['July', 1030, , , 540]
]);
var chart = new google.visualization.BarChart(
document.getElementById('visualization'));
chart.draw(data,
{width: 800, height: 600, title: 'Company Performance'});
JavaScript लिटरल नोटेशन
JSON की लिटरल वैल्यू में, आपको "role":"role-type"
वैल्यू वाले कॉलम की p
प्रॉपर्टी तय करनी होगी.
इस उदाहरण में, JavaScript लिटरल नोटेशन का इस्तेमाल करके भूमिकाएं तय करने का तरीका बताया गया है. ऐसा सिर्फ़ टेबल बनाते समय किया जा सकता है.
{"cols":[ {"id":"","label":"Month","pattern":"","type":"string"}, {"id":"","label":"Sales","pattern":"","type":"number"}, {"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}}, {"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}}, {"id":"","label":"Expenses","pattern":"","type":"number"}], "rows":[ {"c":[ {"v":"April","f":null}, {"v":1000,"f":null}, {"v":900,"f":null}, {"v":1100,"f":null}, {"v":400,"f":null}]}, {"c":[ {"v":"May","f":null}, {"v":1170,"f":null}, {"v":1000,"f":null}, {"v":1200,"f":null}, {"v":460,"f":null}]}, {"c":[{"v":"June","f":null}, {"v":660,"f":null}, {"v":550,"f":null}, {"v":800,"f":null}, {"v":1120,"f":null}]}, {"c":[ {"v":"July","f":null}, {"v":1030,"f":null}, {"v":null,"f":null}, {"v":null,"f":null}, {"v":540,"f":null}]}], "p":null }
DataView.setColumn का तरीका
व्यू बनाते समय, कॉलम की भूमिका साफ़ तौर पर सेट की जा सकती है. यह फ़ॉर्मूला के आधार पर तैयार किया गया नया कॉलम बनाते समय काम आता है. ज़्यादा जानकारी के लिए, DataView.setColumns()
पर जाएं.