इस पेज पर चार्ट डेटा टेबल में भूमिकाओं के सिद्धांत और इस्तेमाल के बारे में बताया गया है.
भूमिकाएं क्या होती हैं?
Google DataTable और DataView ऑब्जेक्ट अब कॉलम की भूमिकाओं के लिए खास तौर पर असाइन किए गए हैं. कॉलम की भूमिका, उस कॉलम में मौजूद डेटा के मकसद के बारे में बताती है. उदाहरण के लिए, हो सकता है कि एक कॉलम में, टूलटिप टेक्स्ट, डेटा पॉइंट एनोटेशन या अनिश्चितता के बारे में जानकारी देने वाला डेटा हो. कॉलम की ज़्यादातर भूमिकाएं, उनके आगे बने 'डेटा' कॉलम पर लागू होती हैं. भले ही, यह भूमिकाओं से ठीक पहले की गई हो या लगातार कॉलम के ग्रुप के पहले हो. उदाहरण के लिए, आपके पास एक कॉलम में दो कॉलम हो सकते हैं, एक 'टूलटिप' के लिए और दूसरा 'व्याख्या' के लिए. हालांकि, 'डोमेन' कॉलम का इस्तेमाल करने के बाद, हम आम तौर पर 'व्याख्या' और 'annotationText' कॉलम भूमिकाओं की भी अनुमति देते हैं.
ध्यान दें: अगर उपयोगकर्ता को किसी चार्ट पर कर्सर घुमाने पर दिखने वाले टूल के कॉन्टेंट को कंट्रोल करना है, तो टूलटिप देखें.
मूल रूप से, कॉलम के लिए सिर्फ़ दो भूमिकाएं उपलब्ध थीं: 'डोमेन', जो मेजर ऐक्सिस वैल्यू के बारे में बताता है; और 'डेटा', जो बार की ऊंचाई, पाई स्लाइस की चौड़ाई वगैरह के बारे में बताता है. टेबल में कॉलम के क्रम और टाइप के हिसाब से, ये भूमिकाएं असाइन की गई थीं. हालांकि, अब कॉलम की भूमिकाएं असाइन करने की सुविधा का इस्तेमाल करके, अब वैकल्पिक कॉलम जोड़े जा सकते हैं. इन कॉलम से आर्बिट्रेरी लेबल, होवर टेक्स्ट, और अनिश्चितता वाले बार जैसे चार्ट में नई और दिलचस्प सुविधाएं जोड़ी जा सकती हैं.
अगर किसी कॉलम की भूमिका तय नहीं की जाती है, तो चार्ट में डेटा फ़ॉर्मैट की खास बातों के मुताबिक, टेबल में कॉलम के क्रम के हिसाब से इसकी भूमिका का पता चलता है. इस पेज पर यह जानकारी दिखेगी कि आपके लिए कौनसी भूमिकाएं उपलब्ध हैं और उन्हें कैसे असाइन किया जा सकता है.
यहां इस बात की तुलना की गई है कि लाइन चार्ट से क्या किया जा सकता है. इसके लिए, सिर्फ़ डिफ़ॉल्ट और अनुमानित भूमिकाओं का इस्तेमाल किया जाता है. ऐसा करने के लिए, सिर्फ़ उन भूमिकाओं का इस्तेमाल होता है जो सीधे तौर पर असाइन की गई हैं.
लाइन चार्ट डेटा टेबल फ़ॉर्मैट:
कॉलम 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 चार्ट ने अनुमति दी है. हर तरह के चार्ट में सभी भूमिकाएं काम नहीं करतीं. हर चार्ट के दस्तावेज़ में यह जानकारी होगी कि कौनसी भूमिकाएं उपलब्ध हैं और वे कहां जाती हैं. चार्ट के अलग-अलग टाइप के लिए, भूमिकाएं अलग-अलग तरह से रेंडर की जाती हैं.
भूमिका | जानकारी | उदाहरण |
---|---|---|
एनोटेशन | चार्ट पर मौजूद डेटा पॉइंट के पास दिखाने के लिए टेक्स्ट. यह टेक्स्ट, उपयोगकर्ता के इंटरैक्शन के बिना दिखता है. एनोटेशन और एनोटेशन टेक्स्ट को, डेटा पॉइंट और कैटगरी (ऐक्सिस लेबल), दोनों के लिए असाइन किया जा सकता है. एनोटेशन दो तरह के होते हैं: पॉइंट (डिफ़ॉल्ट) जो तय किए गए पॉइंट के पास वाला एनोटेशन टेक्स्ट दिखाता है. साथ ही, जो लाइन को चार्ट एरिया से दो हिस्सों में बांटने वाली लाइन पर टेक्स्ट को दिखाता है. इस चार्ट विकल्प को सेट करके, लाइन स्टाइल की जानकारी दी जा सकती है: डेटा टाइप: स्ट्रिंग डिफ़ॉल्ट: खाली स्ट्रिंग |
डेटा: लेबल: 'साल', 'बिक्री', शून्य, शून्य, 'खर्च', शून्य, शून्य
भूमिका: डोमेन, डेटा, एनोटेशन, एनोटेशन टेक्स्ट, डेटा, एनोटेशन, एनोटेशन टेक्स्ट
'2004', 1000, शून्य, 'शून्य', 'शून्य', 'और'' के बाद
इस चार्ट में मौजूद '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 इस चार्ट में, 'बिक्री' सीरीज़ में एक खास सेगमेंट है, जिसे कॉलम तीन, पंक्ति एक और दो के ज़रिए दिखाया गया है. 'खर्च' सीरीज़ में, दो खास तरह के सेगमेंट पर फ़ोकस किया गया है. इन्हें पांचवें कॉलम, लाइन दो, तीन, और चार से दिखाया गया है. ध्यान दें कि ज़ोर देने के लिए दोनों बाउंडिंग बिंदुओं पर ज़ोर देना ज़रूरी है. |
इंटरवल | किसी खास पॉइंट के लिए, संभावित डेटा रेंज दिखाता है. इंटरवल आम तौर पर, I-बार की स्टाइल रेंज के इंंडिकेटर के तौर पर दिखाए जाते हैं. इंटरवल कॉलम, संख्या वाले कॉलम होते हैं. इनमें, बार में इंटरवल कॉलम जोड़े जाते हैं, जिनसे बार की कम और ज़्यादा वैल्यू का पता चलता है. इंटरवल वाली ऐसी वैल्यू जोड़नी चाहिए जो बाईं से दाईं ओर बढ़ती हों. डेटा टाइप: नंबर डिफ़ॉल्ट: कोई अंतराल नहीं |
डेटा: 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 कॉलम, सबसे नज़दीक के एनोटेशन कॉलम पर लागू होगा; बाईं ओर, data या domain कॉलम पर एनोटेशन लागू होगा.
भूमिका असाइन करना
भूमिकाओं को 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.setकॉलम मेथड
व्यू बनाते समय, कॉलम की भूमिका आसानी से सेट की जा सकती है. नया कैलकुलेट किया गया कॉलम बनाते समय यह मददगार होता है. ज़्यादा जानकारी के लिए, DataView.setColumns()
देखें.