इस पेज पर 'Google विज़ुअलाइज़ेशन एपीआई' के ज़रिए दिखाए गए ऑब्जेक्ट और सभी विज़ुअलाइज़ेशन में दिखाए गए मानक तरीके शामिल हैं.
ध्यान दें: Google विज़ुअलाइज़ेशन एपीआई नेमस्पेस
google.visualization.*
है
श्रेणियों पर एक नोट
कुछ ब्राउज़र, JavaScript के क्रम में कॉमा का इस्तेमाल ठीक से नहीं करते. इसलिए, उनका इस्तेमाल न करें. किसी कलेक्शन के बीच में मौजूद किसी भी वैल्यू को खाली छोड़ा जा सकता है. उदाहरण के लिए:
data = ['a','b','c', ,]; // BAD
data = ['a','b','c']; // OK
data = ['a','b', ,'d']; // Also OK. The third value is undefined.
डेटा टेबल क्लास
दो डाइमेंशन वाली ऐसी टेबल दिखाता है जिसमें बदलाव किया जा सकता है. DataTable
की रीड ओनली कॉपी बनाने के लिए, डेटा व्यू बनाएं. इससे, खास वैल्यू, पंक्तियां या कॉलम दिखाए जा सकते हैं.
हर कॉलम को डेटा टाइप असाइन किया जाता है. साथ ही, आईडी, लेबल, और पैटर्न स्ट्रिंग के साथ-साथ कई वैकल्पिक प्रॉपर्टी भी असाइन की जाती हैं.
इसके अलावा, किसी भी सेल, लाइन, कॉलम या पूरी टेबल के लिए कस्टम प्रॉपर्टी (नाम/वैल्यू के जोड़े) असाइन की जा सकती हैं. कुछ विज़ुअलाइज़ेशन खास कस्टम प्रॉपर्टी के साथ काम करते हैं; उदाहरण के लिए, टेबल विज़ुअलाइज़ेशन 'स्टाइल' नाम की सेल प्रॉपर्टी के साथ काम करता है. इसकी मदद से, आप रेंडर किए गए टेबल सेल में इनलाइन सीएसएस स्टाइल स्ट्रिंग असाइन कर सकते हैं. विज़ुअलाइज़ेशन में, अपने दस्तावेज़ में उन सभी कस्टम प्रॉपर्टी के बारे में बताया जाना चाहिए जो उसके साथ काम करती हैं.
यह भी देखें: QueryResponse.getDataTable
कंस्ट्रक्टर
सिंटैक्स
DataTable(opt_data, opt_version)
- opt_data
-
[ज़रूरी नहीं] टेबल शुरू करने के लिए इस्तेमाल किया गया डेटा. यह या तो पॉप्युलेट हुई टेबल पर
DataTable.toJSON()
को कॉल करके दिया गया JSON हो सकता है या फिर एक JavaScript ऑब्जेक्ट हो सकता है जिसमें टेबल शुरू करने के लिए डेटा इस्तेमाल किया गया हो. JavaScript लिटरल ऑब्जेक्ट के स्ट्रक्चर के बारे में यहां बताया गया है. अगर यह पैरामीटर नहीं दिया जाता है, तो एक नई और खाली डेटा टेबल दिखेगी. - opt_version
- [ज़रूरी नहीं] यह न्यूमेरिक वैल्यू होती है जिसमें वायर प्रोटोकॉल का वर्शन बताया गया होता है. इसका इस्तेमाल सिर्फ़ चार्ट टूल डेटा लागू करने वाले लोग करते हैं. मौजूदा वर्शन 0.6 है.
जानकारी
DataTable
ऑब्जेक्ट का इस्तेमाल, विज़ुअलाइज़ेशन में पास किए गए डेटा को होल्ड करने के लिए किया जाता है.
DataTable
, दो डाइमेंशन वाली बुनियादी टेबल है. हर कॉलम में मौजूद सारा डेटा, एक ही तरह का होना चाहिए. हर कॉलम में एक डिस्क्रिप्टर होता है, जिसमें इसका डेटा टाइप, उस कॉलम के लिए लेबल
(जिसे विज़ुअलाइज़ेशन से दिखाया जा सकता है) और एक आईडी होता है, जिसका इस्तेमाल खास
कॉलम (कॉलम इंडेक्स का इस्तेमाल करने के विकल्प के तौर पर) के बारे में जानकारी देने के लिए किया जा सकता है. DataTable
ऑब्जेक्ट, किसी खास वैल्यू, पंक्ति, कॉलम या पूरे DataTable
को असाइन की गई आर्बिट्रेरी प्रॉपर्टी के मैप पर भी काम करता है. विज़ुअलाइज़ेशन इनका इस्तेमाल ज़्यादा सुविधाओं के लिए कर सकता है; उदाहरण के लिए, टेबल विज़ुअलाइज़ेशन कस्टम प्रॉपर्टी का इस्तेमाल करता है, ताकि आप अलग-अलग सेल के लिए आर्बिट्रेरी क्लास के नाम या स्टाइल असाइन कर सकें.
टेबल में मौजूद हर सेल में एक वैल्यू होती है. सेल में कोई भी वैल्यू या कॉलम के हिसाब से तय की गई वैल्यू हो सकती है. सेल, डेटा का "फ़ॉर्मैट किया गया" वर्शन ले सकते हैं. यह डेटा का स्ट्रिंग वर्शन होता है, जिसे विज़ुअलाइज़ेशन की मदद से दिखाने के लिए फ़ॉर्मैट किया जाता है. विज़ुअलाइज़ेशन में, फ़ॉर्मैट किए गए वर्शन को दिखाने के लिए, विज़ुअलाइज़ेशन का इस्तेमाल किया जा सकता है, लेकिन ऐसा करना ज़रूरी नहीं है. हालांकि, विज़ुअलाइज़ेशन में डेटा को क्रम से लगाने या हिसाब लगाने के लिए हमेशा उसी डेटा का इस्तेमाल किया जाएगा, जैसे कि ग्राफ़ में बिंदु कहां रखना है. उदाहरण के लिए, "कम" "मध्यम" और "ज़्यादा" को फ़ॉर्मैट की गई वैल्यू के तौर पर 1, 2, और 3 दिया जा सकता है.
कंस्ट्रक्टर को कॉल करने के बाद, डेटा लाइन जोड़ने के लिए, एक ही लाइन के लिए addRow()
पर या एक से ज़्यादा लाइन के लिए addRows()
को कॉल किया जा सकता है. addColumn()
तरीकों को कॉल करके भी कॉलम जोड़े जा सकते हैं. पंक्तियों और कॉलम को हटाने के तरीके भी हैं. हालांकि, पंक्तियों या कॉलम को हटाने के बजाय, आप ऐसा DataView
बना सकते हैं जो DataTable
का चुनिंदा व्यू हो.
विज़ुअलाइज़ेशन के draw()
तरीके में पास होने के बाद, DataTable
में वैल्यू बदलने पर, चार्ट में तुरंत बदलाव नहीं होता. कोई भी बदलाव देखने के लिए, आपको
draw()
को फिर से कॉल करना होगा.
ध्यान दें: Google चार्ट, डेटा टेबल पर कोई पुष्टि नहीं करता. (अगर ऐसा किया जाता है, तो चार्ट रेंडर होने में ज़्यादा समय लेंगे.) अगर कोई ऐसी संख्या दी जाती है जहां आपके कॉलम में कोई स्ट्रिंग होने की उम्मीद होती है या इसका उलटा हो सकता है, तो Google चार्ट में वैल्यू को समझने के लिए सबसे अच्छे तरीके से कोशिश करेगा. हालांकि, इसमें Google की कोई गलती नहीं होगी.
उदाहरण
नीचे दिए गए उदाहरण में, लिटरल स्ट्रिंग के साथ DataTable
को इंस्टैंशिएट और पॉप्युलेट करना दिखाया गया है. इसमें वही डेटा है जो ऊपर दिए गए JavaScript उदाहरण में दिखाया गया है:
var dt = new google.visualization.DataTable({ cols: [{id: 'task', label: 'Task', type: 'string'}, {id: 'hours', label: 'Hours per Day', type: 'number'}], rows: [{c:[{v: 'Work'}, {v: 11}]}, {c:[{v: 'Eat'}, {v: 2}]}, {c:[{v: 'Commute'}, {v: 2}]}, {c:[{v: 'Watch TV'}, {v:2}]}, {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}] }, 0.6);
यह उदाहरण एक नया, खाली DataTable
बनाता है और फिर ऊपर दिए गए डेटा के हिसाब से, इसे मैन्युअल तरीके से भरता है:
var data = new google.visualization.DataTable(); data.addColumn('string', 'Task'); data.addColumn('number', 'Hours per Day'); data.addRows([ ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', {v:7, f:'7.000'}] ]);
पैरामीटर के बिना कंस्ट्रक्टर को कॉल करके, DataTable
बनाया जा सकता है. इसके लिए, नीचे दिए गए addColumn()
/addRows()
के तरीकों को कॉल करके या अपने-आप जानकारी भरने वाला JavaScript लिटरल ऑब्जेक्ट पास करके, उसे शुरू किया जा सकता है. दोनों तरीकों का ब्यौरा नीचे दिया गया है. आपको कौनसा इस्तेमाल करना चाहिए?
-
addColumn()
,addRow()
, औरaddRows()
को कॉल करके, JavaScript में टेबल बनाने और उसे पॉप्युलेट करने की प्रोसेस काफ़ी आसान है. यह तरीका तब काम आता है, जब आप मैन्युअल तरीके से कोड डालेंगे. यह ऑब्जेक्ट लिटरल नोटेशन (इसके बारे में आगे जानकारी दी गई है) का इस्तेमाल करने से धीरे चलता है. हालांकि, छोटी टेबल (जैसे, 1,000 सेल) में आपको कोई खास अंतर नहीं दिखेगा. -
बड़ी टेबल में, ऑब्जेक्ट-लिटरल नोटेशन का इस्तेमाल करके,
DataTable
ऑब्जेक्ट के बारे में सीधे तौर पर एलान की प्रक्रिया काफ़ी तेज़ी से की जाती है. हालांकि, यह सिंटैक्स को समझना मुश्किल हो सकता है. अगर आप कोड में ऑब्जेक्ट लिटरल सिंटैक्स जनरेट करें, तो इसका इस्तेमाल करें. इससे, गड़बड़ियों की संभावना कम हो जाती है.
तरीके
तरीका | सामान लौटाने की वैल्यू | जानकारी |
---|---|---|
या
|
नंबर |
डेटा टेबल में एक नया कॉलम जोड़ता है और नए कॉलम का इंडेक्स दिखाता है. नए कॉलम के सभी सेल
को पहले हस्ताक्षर में ये पैरामीटर होते हैं:
दूसरे हस्ताक्षर में इन सदस्यों वाला एक ऑब्जेक्ट पैरामीटर होता है:
यह भी देखें: getColumnId, getColumnLabel, getColumnType, insertColumn, getColumnRole |
addRow(opt_cellArray) |
नंबर |
डेटा टेबल में नई लाइन जोड़ता है और नई लाइन का इंडेक्स दिखाता है.
उदाहरण: data.addRow(); // Add an empty row data.addRow(['Hermione', new Date(1999,0,1)]); // Add a row with a string and a date value. // Add a row with two cells, the second with a formatted value. data.addRow(['Hermione', {v: new Date(1999,0,1), f: 'January First, Nineteen ninety-nine'} ]); data.addRow(['Col1Val', null, 'Col3Val']); // Second column is undefined. data.addRow(['Col1Val', , 'Col3Val']); // Same as previous. |
addRows(numOrArray) |
नंबर |
डेटा टेबल में नई पंक्तियां जोड़ता है और आखिरी जोड़ी गई पंक्ति का इंडेक्स दिखाता है. इस तरीके का इस्तेमाल करके, नई खाली पंक्तियां बनाई जा सकती हैं. इसके अलावा, इसका इस्तेमाल नीचे दी गई जानकारी के हिसाब से पंक्तियों को भरने के लिए किया जा सकता है.
उदाहरण: data.addRows([ ['Ivan', new Date(1977,2,28)], ['Igor', new Date(1962,7,5)], ['Felix', new Date(1983,11,17)], ['Bob', null] // No date set for Bob. ]); यह भी देखें: insertRows |
clone() |
डेटा टेबल | डेटा टेबल का क्लोन दिखाता है. नतीजा, टेबल की प्रॉपर्टी, पंक्ति की प्रॉपर्टी, टेबल की प्रॉपर्टी, और कॉलम प्रॉपर्टी की तुलना के अलावा, डेटा टेबल की डीप कॉपी होती है. ये मामूली लाइनें होती हैं. इसका मतलब है कि नॉन-प्राइमरी प्रॉपर्टी का इस्तेमाल रेफ़रंस के तौर पर किया जाता है, लेकिन बुनियादी प्रॉपर्टी को वैल्यू के हिसाब से कॉपी किया जाता है. |
getColumnId(columnIndex) |
स्ट्रिंग |
दी गई टेबल में, कॉलम इंडेक्स से तय किए गए किसी कॉलम की पहचान करता है. क्वेरी से मिलने वाली डेटा टेबल के लिए, कॉलम आइडेंटिफ़ायर डेटा सोर्स से सेट होता है. क्वेरी की भाषा का इस्तेमाल करते समय, कॉलम को रेफ़र करने के लिए इनका इस्तेमाल किया जा सकता है. यह भी देखें: Query.setQuery |
getColumnIndex(columnIdentifier) |
स्ट्रिंग, नंबर |
अगर यह इस टेबल में मौजूद है, तो कॉलम इंडेक्स, आईडी या लेबल से मिले कॉलम की इंडेक्स वैल्यू देता है, नहीं तो -1. जब columnIdentifier एक स्ट्रिंग होती है, तब सबसे पहले
कॉलम को उसके आईडी से, फिर उसके लेबल से ढूंढा जाता है.यह भी देखें: getColumnId, getColumnLabel |
getColumnLabel(columnIndex) |
स्ट्रिंग |
दी गई टेबल में, कॉलम इंडेक्स से तय कॉलम के लेबल को दिखाता है.
कॉलम लेबल को आम तौर पर विज़ुअलाइज़ेशन के हिस्से के तौर पर दिखाया जाता है. उदाहरण के लिए, कॉलम लेबल को टेबल में कॉलम हेडर के तौर पर या पाई चार्ट में लेजेंड लेबल के तौर पर दिखाया जा सकता है. क्वेरी से मिली डेटा टेबल के लिए, कॉलम का लेबल, डेटा सोर्स या क्वेरी भाषा के label क्लॉज़ से सेट किया जाता है. यह भी देखें: setColumnLabel |
getColumnPattern(columnIndex) |
स्ट्रिंग |
बताए गए कॉलम की वैल्यू को फ़ॉर्मैट करने के लिए इस्तेमाल किया गया फ़ॉर्मैटिंग पैटर्न दिखाता है.
क्वेरी से मिलने वाली डेटा टेबल के लिए, कॉलम पैटर्न डेटा सोर्स या क्वेरी की भाषा के |
getColumnProperties(columnIndex)
|
अस्वीकार करें |
बताए गए कॉलम के लिए सभी प्रॉपर्टी का मैप दिखाता है. ध्यान दें कि प्रॉपर्टी ऑब्जेक्ट को रेफ़रंस के तौर पर दिखाया जाता है. इसलिए, वापस लाए गए ऑब्जेक्ट की वैल्यू बदलने पर,
|
getColumnProperty(columnIndex, name)
|
ऑटो |
किसी तय की गई प्रॉपर्टी के लिए वैल्यू दिखाता है या तय किए गए कॉलम के लिए ऐसी कोई वैल्यू सेट न होने पर,
यह भी देखें: setColumnProperty setColumnProperties |
getColumnRange(columnIndex) |
अस्वीकार करें |
किसी खास कॉलम में, वैल्यू के कम से कम और ज़्यादा से ज़्यादा वैल्यू दिखाता है. दिए गए ऑब्जेक्ट की प्रॉपर्टी
|
getColumnRole(columnIndex) |
स्ट्रिंग | तय किए गए कॉलम की भूमिका दिखाता है. |
getColumnType(columnIndex) |
स्ट्रिंग |
कॉलम इंडेक्स की मदद से दिए गए कॉलम का टाइप दिखाता है.
लौटाया गया कॉलम टाइप, इनमें से कोई एक हो सकता है: |
getDistinctValues(columnIndex) |
ऑब्जेक्ट का कलेक्शन |
किसी खास कॉलम के यूनीक वैल्यू को बढ़ते क्रम में दिखाता है.
दिए गए ऑब्जेक्ट का प्रकार वही है जो |
getFilteredRows(filters) |
ऑब्जेक्ट का कलेक्शन |
सभी दिए गए फ़िल्टर से मेल खाने वाली पंक्तियों के लिए पंक्ति इंडेक्स दिखाता है. इंडेक्स,
बढ़ते क्रम में दिए जाते हैं. इस तरीके के आउटपुट का इस्तेमाल,
दूसरी वैकल्पिक प्रॉपर्टी,
उदाहरण: |
getFormattedValue(rowIndex, columnIndex)
|
स्ट्रिंग |
किसी पंक्ति और कॉलम के इंडेक्स पर सेल के फ़ॉर्मैट की वैल्यू दिखाता है.
कॉलम की वैल्यू को फ़ॉर्मैट करने के बारे में ज़्यादा जानकारी के लिए, क्वेरी की भाषा का रेफ़रंस देखें. यह भी देखें: setFormattedValue |
getNumberOfColumns() |
नंबर | टेबल में कॉलम की संख्या दिखाता है. |
getNumberOfRows() |
नंबर | टेबल में पंक्तियों की संख्या दिखाता है. |
getProperties(rowIndex, columnIndex)
|
अस्वीकार करें |
किसी सेल की सभी प्रॉपर्टी का मैप दिखाता है. ध्यान दें कि प्रॉपर्टी ऑब्जेक्ट को
रेफ़रंस के तौर पर दिखाया जाता है. इसलिए, वापस लाए गए ऑब्जेक्ट में वैल्यू बदलने से
|
getProperty(rowIndex, columnIndex, name)
|
ऑटो |
किसी खास प्रॉपर्टी का मान देता है या
यह भी देखें: setCell setProperties setProperty |
getRowProperties(rowIndex)
|
अस्वीकार करें |
किसी खास पंक्ति की सभी प्रॉपर्टी का मैप दिखाता है. ध्यान दें कि प्रॉपर्टी ऑब्जेक्ट को रेफ़रंस के तौर पर दिखाया जाता है. इसलिए, वापस लाए गए ऑब्जेक्ट की वैल्यू बदलने पर,
|
getRowProperty(rowIndex, name)
|
ऑटो |
बताई गई किसी पंक्ति के लिए ऐसी कोई प्रॉपर्टी सेट न होने पर,
यह भी देखें: setRowProperty setRowProperties |
getSortedRows(sortColumns) |
संख्याओं का अरे |
दिए गए डेटा के क्रम में बदलाव किए बिना, टेबल का क्रम से लगाया गया वर्शन दिखाता है.
दिए गए डेटा को हमेशा के लिए क्रम से लगाने के लिए,
दिखाई गई वैल्यू, संख्याओं की एक श्रेणी होती है. हर संख्या,
ध्यान दें कि क्रम में स्थिर रहने की गारंटी मिलती है. इसका मतलब है कि अगर आप दो पंक्तियों की बराबर की वैल्यू को क्रम से लगाते हैं, तो एक ही क्रम में उन पंक्तियों को हर बार एक ही क्रम में दिखाया जाएगा. उदाहरण: तीसरे कॉलम के हिसाब से बनाई गई पंक्तियों को दोहराने के लिए, इनका इस्तेमाल करें: var rowInds = data.getSortedRows([{column: 2}]); for (var i = 0; i < rowInds.length; i++) { var v = data.getValue(rowInds[i], 2); } |
getTableProperties
|
अस्वीकार करें | टेबल के लिए सभी प्रॉपर्टी का मैप दिखाता है. |
getTableProperty(name) |
ऑटो |
नाम वाली किसी प्रॉपर्टी की वैल्यू दिखाता है या
यह भी देखें: setTableProperties setTableProperty |
getValue(rowIndex, columnIndex) |
अस्वीकार करें |
किसी दी गई पंक्ति और कॉलम के इंडेक्स पर सेल की वैल्यू दिखाता है.
मिलने वाली वैल्यू किस तरह की है, यह कॉलम के टाइप पर निर्भर करता है (getColumnType देखें):
|
insertColumn(columnIndex, type [,label [,id]])
|
कभी नहीं |
आपके दिए गए इंडेक्स में, डेटा टेबल में एक नया कॉलम शामिल करता है. किसी इंडेक्स पर या उसके बाद के सभी कॉलम को ज़्यादा इंडेक्स पर शिफ़्ट कर दिया जाता है.
यह भी देखें: addColumn |
insertRows(rowIndex, numberOrArray) |
कभी नहीं |
किसी खास पंक्ति के इंडेक्स में, पंक्तियों की तय संख्या डालें.
यह भी देखें: addRows |
removeColumn(columnIndex) |
कभी नहीं |
किसी इंडेक्स से कॉलम हटा देता है.
यह भी देखें: हटाएं कॉलम |
removeColumns(columnIndex, numberOfColumns)
|
कभी नहीं |
किसी इंडेक्स पर मौजूद कॉलम से, कॉलम की संख्या हटाता है.
यह भी देखें: removeColumn |
removeRow(rowIndex) |
कभी नहीं |
किसी इंडेक्स से, पंक्ति हटा देता है.
यह भी देखें: removeRows |
removeRows(rowIndex, numberOfRows) |
कभी नहीं |
किसी इंडेक्स से, शुरू होने वाली पंक्तियों की संख्या हटाता है.
यह भी देखें: removeRow |
setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]])
|
कभी नहीं |
यह सेल के मान, फ़ॉर्मैट की गई वैल्यू, और/या प्रॉपर्टी को सेट करता है.
यह भी देखें: setValue(), setFormattedValue(), setProperty(), setProperties(). |
setColumnLabel(columnIndex, label)
|
कभी नहीं |
किसी कॉलम का लेबल सेट करता है.
यह भी देखें: getColumnLabel |
setColumnProperty(columnIndex, name, value)
|
कभी नहीं |
सिंगल कॉलम प्रॉपर्टी सेट करता है. कुछ विज़ुअलाइज़ेशन में, अपने डिसप्ले या व्यवहार में बदलाव करने के लिए, पंक्ति, कॉलम या सेल प्रॉपर्टी का इस्तेमाल किया जा सकता है. इसके बारे में जानकारी देने वाला दस्तावेज़ देखें.
यह भी देखें:setColumnProperties getColumnProperty |
setColumnProperties(columnIndex, properties)
|
कभी नहीं |
एक से ज़्यादा कॉलम प्रॉपर्टी सेट करता है. कुछ विज़ुअलाइज़ेशन में, अपने डिसप्ले या व्यवहार में बदलाव करने के लिए, पंक्ति, कॉलम या सेल प्रॉपर्टी का इस्तेमाल किया जा सकता है. इसके बारे में जानकारी देने वाला दस्तावेज़ देखें.
यह भी देखें: setColumnProperty getColumnProperty |
setFormattedValue(rowIndex, columnIndex, formattedValue)
|
कभी नहीं |
सेल के फ़ॉर्मैट की गई वैल्यू सेट करता है.
यह भी देखें: getFormattedValue |
setProperty(rowIndex, columnIndex, name, value)
|
कभी नहीं |
किसी सेल की प्रॉपर्टी सेट करता है. कुछ विज़ुअलाइज़ेशन में, अपने डिसप्ले या व्यवहार में बदलाव करने के लिए, पंक्ति, कॉलम या सेल प्रॉपर्टी का इस्तेमाल किया जा सकता है. यह देखने के लिए कि कौनसी प्रॉपर्टी काम करती हैं, विज़ुअलाइज़ेशन दस्तावेज़ देखें.
यह भी देखें: setCell setProperties getProperty |
setProperties(rowIndex, columnIndex, properties)
|
कभी नहीं |
एक से ज़्यादा सेल प्रॉपर्टी सेट करता है. कुछ विज़ुअलाइज़ेशन में, अपने डिसप्ले या व्यवहार में बदलाव करने के लिए, पंक्ति, कॉलम या सेल प्रॉपर्टी का इस्तेमाल किया जा सकता है. इसके बारे में जानकारी देने वाला दस्तावेज़ देखें.
यह भी देखें: setCell setProperty getProperty |
setRowProperty(rowIndex, name, value)
|
कभी नहीं |
पंक्ति की प्रॉपर्टी सेट करता है. कुछ विज़ुअलाइज़ेशन में, अपने डिसप्ले या व्यवहार में बदलाव करने के लिए, पंक्ति, कॉलम या सेल प्रॉपर्टी का इस्तेमाल किया जा सकता है. यह देखने के लिए कि कौनसी प्रॉपर्टी काम करती हैं, विज़ुअलाइज़ेशन दस्तावेज़ देखें.
यह भी देखें: setRowProperties getRowProperty |
setRowProperties(rowIndex, properties)
|
कभी नहीं |
एक से ज़्यादा पंक्ति की प्रॉपर्टी सेट करता है. कुछ विज़ुअलाइज़ेशन में, अपने डिसप्ले या व्यवहार में बदलाव करने के लिए, पंक्ति, कॉलम या सेल प्रॉपर्टी का इस्तेमाल किया जा सकता है. यह देखने के लिए कि कौनसी प्रॉपर्टी काम करती हैं, विज़ुअलाइज़ेशन दस्तावेज़ देखें.
यह भी देखें: setRowProperty getRowProperty |
setTableProperty(name, value)
|
कभी नहीं |
सिंगल टेबल प्रॉपर्टी सेट करता है. कुछ विज़ुअलाइज़ेशन में, टेबल, पंक्ति, कॉलम या सेल प्रॉपर्टी के साथ अपने डिसप्ले या व्यवहार में बदलाव किया जा सकता है. इसके बारे में जानकारी देने वाला दस्तावेज़ देखें.
यह भी देखें: setTableProperties getTableProperty |
setTableProperties(properties) |
कभी नहीं |
एक से ज़्यादा टेबल प्रॉपर्टी सेट करता है. कुछ विज़ुअलाइज़ेशन में, टेबल, पंक्ति, कॉलम या सेल प्रॉपर्टी के साथ अपने डिसप्ले या व्यवहार में बदलाव किया जा सकता है. इसके बारे में जानकारी देने वाला दस्तावेज़ देखें.
यह भी देखें: setTableProperty getTableProperty |
setValue(rowIndex, columnIndex, value) |
कभी नहीं |
किसी सेल का मान सेट करता है. किसी मौजूदा सेल वैल्यू को ओवरराइट करने के अलावा, यह तरीका सेल के लिए फ़ॉर्मैट की गई सभी वैल्यू और प्रॉपर्टी को भी मिटा देगा.
यह भी देखें: setCell, setFormattedValue, setProperty, setProperties |
sort(sortColumns) |
कभी नहीं |
पंक्तियों को क्रम से लगाने के लिए, तय किए गए कॉलम के मुताबिक क्रम में लगाया जाता है. DataTable को इस तरीके से
बदला गया है. क्रम से लगाने के बारे में जानने के लिए, getSortedRows() देखें. यह तरीका, क्रम से लगाए गए डेटा को नहीं दिखाता है.यह भी देखें: getsortedRows उदाहरण: तीसरे कॉलम और फिर दूसरे कॉलम के मुताबिक क्रम से लगाने के लिए, यह इस्तेमाल करें: data.sort([{column: 2}, {column: 1}]);
|
toJSON() |
स्ट्रिंग |
DataTable का JSON दिखाता है जिसे
DataTable कंस्ट्रक्टर में पास किया जा सकता है. उदाहरण के लिए: {"cols":[{"id":"Col1","label":"","type":"date"}], "rows":[ {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]}, {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]} ] } |
कंस्ट्रक्टर के JavaScript के लिटरल डेटा पैरामीटर का फ़ॉर्मैट
आप डेटा पैरामीटर में, JavaScript स्ट्रिंग लिटरल ऑब्जेक्ट पास करके, DataTable
को शुरू कर सकते हैं. हम इस ऑब्जेक्ट को डेटा ऑब्जेक्ट कहते हैं. नीचे दिए गए ब्यौरे के मुताबिक, आप इस ऑब्जेक्ट को मैन्युअल तरीके से कोड कर सकते हैं. अगर आपको Python इस्तेमाल करने का तरीका पता है, तो आप हेल्पर Python लाइब्रेरी का इस्तेमाल कर सकते हैं. आपकी साइट इसका इस्तेमाल कर सकती है. हालांकि, अगर आपको ऑब्जेक्ट को हाथ से बनाना है, तो इस सेक्शन में सिंटैक्स के बारे में बताया जाएगा.
सबसे पहले, तीन सरल टेबल (तीन संख्याएं, स्ट्रिंग, और तारीख के टाइप) वाली टेबल के बारे में बताने वाले एक सामान्य JavaScript ऑब्जेक्ट का उदाहरण देखें:
{ cols: [{id: 'A', label: 'NEW A', type: 'string'}, {id: 'B', label: 'B-label', type: 'number'}, {id: 'C', label: 'C-label', type: 'date'} ], rows: [{c:[{v: 'a'}, {v: 1.0, f: 'One'}, {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'} ]}, {c:[{v: 'b'}, {v: 2.0, f: 'Two'}, {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'} ]}, {c:[{v: 'c'}, {v: 3.0, f: 'Three'}, {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'} ]} ], p: {foo: 'hello', bar: 'world!'} }
अब सिंटैक्स का ब्यौरा देते हैं:
डेटा ऑब्जेक्ट में दो ज़रूरी टॉप लेवल प्रॉपर्टी, cols
और rows
, और एक वैकल्पिक p
प्रॉपर्टी होती है. यह आर्बिट्रेरी वैल्यू वाला मैप होता है.
ध्यान दें: दिखाई गई सभी प्रॉपर्टी के नाम और स्ट्रिंग कॉन्सटेंट केस-सेंसिटिव होते हैं. साथ ही, स्ट्रिंग वैल्यू लेने के लिए बताई गई प्रॉपर्टी के लिए कोटेशन मार्क का इस्तेमाल किया जाना चाहिए.
उदाहरण के लिए, अगर टाइप प्रॉपर्टी को संख्या के तौर पर दिखाना है, तो इसे इस तरह से दिखाया जाएगा: type: 'number'
लेकिन संख्या को अंकों में भी इस तरह से दिखाया जाएगा:
v: 42
cols
प्रॉपर्टी
cols
, हर कॉलम के आईडी और टाइप की जानकारी देने वाले ऑब्जेक्ट की कैटगरी है. हर प्रॉपर्टी, नीचे दी गई प्रॉपर्टी के साथ एक ऑब्जेक्ट होती है (केस-सेंसिटिव):
-
type
[ज़रूरी है] कॉलम में डेटा किस तरह का है. स्ट्रिंग के इन वैल्यू का इस्तेमाल किया जा सकता है (उदाहरण के लिए: v: प्रॉपर्टी, जिसमें बाद में बताया गया है):-
'बूलियन' - JavaScript बूलियन वैल्यू ('सही' या 'गलत'). वैल्यू का उदाहरण:
v:'true'
-
'number' - JavaScript नंबर की वैल्यू. उदाहरण के लिए वैल्यू:
v:7
,v:3.14
,v:-55
- 'string' - JavaScript स्ट्रिंग का मान. उदाहरण के लिए वैल्यू:
v:'hello'
-
'date' - JavaScript तारीख ऑब्जेक्ट (शून्य-आधारित महीना), जिसमें समय कम किया गया है. उदाहरण
वैल्यू:
v:new Date(2008, 0, 15)
-
'datetime' - समय सहित JavaScript तारीख ऑब्जेक्ट. वैल्यू का उदाहरण:
v:new Date(2008, 0, 15, 14, 30, 45)
-
'timeofday' - तीन संख्याओं की श्रेणी और एक चौथा चौथाई कोड है जो
घंटे (01 का आधी रात का समय), मिनट, सेकंड, और वैकल्पिक मिलीसेकंड को दिखाता है. उदाहरण के लिए वैल्यू:
v:[8, 15, 0]
,v: [6, 12, 1, 144]
-
'बूलियन' - JavaScript बूलियन वैल्यू ('सही' या 'गलत'). वैल्यू का उदाहरण:
-
id
[वैकल्पिक] कॉलम का स्ट्रिंग आईडी. टेबल में यूनीक होना चाहिए. बुनियादी अक्षर और अंक इस्तेमाल करें, ताकि होस्ट पेज को JavaScript में कॉलम को ऐक्सेस करने के लिए फ़ैंसी एस्केप की ज़रूरत न पड़े. ध्यान रखें कि JavaScript कीवर्ड न चुनें. जैसे:id:'col_1'
-
label
[वैकल्पिक] स्ट्रिंग का वह मान जिसे कुछ कॉलम, इस कॉलम के लिए दिखाते हैं. जैसे:label:'Height'
-
pattern
[ज़रूरी नहीं] स्ट्रिंग पैटर्न, जिसका इस्तेमाल डेटा सोर्स, संख्या, तारीख या समय के कॉलम की वैल्यू को फ़ॉर्मैट करने के लिए करता था. यह सिर्फ़ रेफ़रंस के लिए है. पैटर्न को पढ़ने की ज़रूरत शायद न हो. Google विज़ुअलाइज़ेशन क्लाइंट इस वैल्यू का इस्तेमाल नहीं करता (यह सेल के फ़ॉर्मैट की गई वैल्यू को पढ़ता है). अगरDataTable
, फ़ॉर्मैट क्लॉज़ वाली क्वेरी के जवाब में डेटा सोर्स से आया है, तो उस क्लॉज़ में चुना गया पैटर्न, इस वैल्यू में दिखाया जाएगा. सुझाए गए पैटर्न के लिए, ICU DecimalFormat और SimpleDateFormat का इस्तेमाल किया जाता है. -
p
[वैकल्पिक] वह ऑब्जेक्ट जो सेल पर लागू की गई कस्टम वैल्यू का मैप है. ये वैल्यू किसी भी JavaScript टाइप की हो सकती हैं. अगर आपका विज़ुअलाइज़ेशन किसी भी सेल-लेवल की प्रॉपर्टी के साथ काम करता है, तो वह इसके बारे में बताएगा. ऐसा न होने पर, इस प्रॉपर्टी को अनदेखा कर दिया जाएगा. उदाहरण:p:{style: 'border: 1px solid green;'}
.
cols
उदाहरण
cols: [{id: 'A', label: 'NEW A', type: 'string'}, {id: 'B', label: 'B-label', type: 'number'}, {id: 'C', label: 'C-label', type: 'date'}]
rows
प्रॉपर्टी में पंक्ति ऑब्जेक्ट की सूची होती है.
हर लाइन ऑब्जेक्ट की एक ज़रूरी प्रॉपर्टी होती है, जिसे c
कहा जाता है. यह उस पंक्ति में शामिल सेल की कैटगरी होती है. इसमें एक वैकल्पिक p
प्रॉपर्टी भी होती है, जो पूरी पंक्ति को असाइन करने के लिए आर्बिट्ररी कस्टम वैल्यू का मैप तय करती है. अगर आपका विज़ुअलाइज़ेशन, किसी भी पंक्ति-लेवल प्रॉपर्टी के साथ काम करता है, तो वह इसके बारे में बताएगा. ऐसा न होने पर, इस प्रॉपर्टी को अनदेखा कर दिया जाएगा.
टेबल के हर सेल में, किसी ऑब्जेक्ट की जानकारी देने वाली ये प्रॉपर्टी होती हैं:
-
v
[वैकल्पिक] सेल की वैल्यू. डेटा टाइप, कॉलम के डेटा टाइप से मेल खाना चाहिए. अगर सेल शून्य है, तोv
प्रॉपर्टी शून्य होनी चाहिए. हालांकि, इसमें अब भीf
औरp
प्रॉपर्टी हो सकती हैं. -
f
[ज़रूरी नहीं]v
वैल्यू का स्ट्रिंग वर्शन, जिसे डिसप्ले करने के लिए फ़ॉर्मैट किया गया है. आम तौर पर, वैल्यू मेल खाएंगी, लेकिन उनकी ज़रूरत नहीं है. इसलिए, अगर आपv
के लिएDate(2008, 0, 1)
बताते हैं, तो आपको "1 जनवरी, 2008" या ऐसी कोई स्ट्रिंग डालनी होगी. इस मान की जांचv
मान के लिए नहीं की जाती है. विज़ुअलाइज़ेशन, इस वैल्यू का इस्तेमाल गिनती के लिए सिर्फ़ डिसप्ले के लेबल के तौर पर नहीं करेगा. शामिल न किए जाने पर,v
का स्ट्रिंग वर्शन अपने-आप जनरेट हो जाएगा. इसके लिए, डिफ़ॉल्ट फ़ॉर्मैटर का इस्तेमाल किया जाएगा.f
की वैल्यू को अपने फ़ॉर्मैट का इस्तेमाल करके बदला जा सकता है. इसके अलावा, इसेsetFormattedValue()
याsetCell()
के साथ भी सेट किया जा सकता है याgetFormattedValue()
से फ़ेच किया जा सकता है. -
p
[वैकल्पिक] वह ऑब्जेक्ट जो सेल पर लागू की गई कस्टम वैल्यू का मैप है. ये वैल्यू किसी भी JavaScript टाइप की हो सकती हैं. अगर आपका विज़ुअलाइज़ेशन किसी भी सेल-लेवल प्रॉपर्टी के साथ काम करता है, तो उसके बारे में यहां बताया जाएगा. इन प्रॉपर्टी कोgetProperty()
औरgetProperties()
तरीकों से वापस पाया जा सकता है. उदाहरण:p:{style: 'border: 1px solid green;'}
.
पंक्ति की श्रेणी में सेल उसी क्रम में होने चाहिए जिस क्रम में cols
में उनके कॉलम की जानकारी है. कोई नल सेल बताने के लिए, आप null
बता सकते हैं, अरे में किसी सेल के लिए खाली छोड़ सकते हैं, या पीछे वाले श्रेणी के सदस्यों को छोड़ सकते हैं. इसलिए, पहली दो सेल के लिए, शून्य वाली पंक्ति
दिखाने के लिए, आप [ , , {cell_val}]
या
[null, null, {cell_val}]
तय कर सकते हैं.
यहां तीन कॉलम वाले टेबल टेबल के ऑब्जेक्ट का नमूना दिया गया है, जिसमें डेटा की तीन पंक्तियां हैं:
{ cols: [{id: 'A', label: 'NEW A', type: 'string'}, {id: 'B', label: 'B-label', type: 'number'}, {id: 'C', label: 'C-label', type: 'date'} ], rows: [{c:[{v: 'a'}, {v: 1.0, f: 'One'}, {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'} ]}, {c:[{v: 'b'}, {v: 2.0, f: 'Two'}, {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'} ]}, {c:[{v: 'c'}, {v: 3.0, f: 'Three'}, {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'} ]} ] }
p प्रॉपर्टी
टेबल-लेवल की प्रॉपर्टी p
, DataTable
पर लागू की गई कस्टम वैल्यू का मैप है. ये वैल्यू किसी भी JavaScript टाइप की हो सकती हैं. अगर आपका विज़ुअलाइज़ेशन,
किसी भी डेटा टेबल लेवल की प्रॉपर्टी के साथ काम करता है, तो यह उसके बारे में जानकारी देगा. ऐसा न होने पर, यह प्रॉपर्टी
ऐप्लिकेशन के इस्तेमाल के लिए उपलब्ध हो जाएगी.
उदाहरण: p:{className: 'myDataTable'}
.
डेटा व्यू क्लास
इसमें मौजूद DataTable का रीड ओनली व्यू. DataView
, सिर्फ़ कॉलम और/या पंक्तियों के सबसेट को चुनने की अनुमति देता है. इससे कॉलम/पंक्तियों को फिर से क्रम में लगाया जा सकता है. साथ ही, कॉलम/पंक्तियों को डुप्लीकेट किया जा सकता है.
व्यू, दिए गए DataTable
पर लाइव विंडो होती है, न कि डेटा का स्टैटिक स्नैपशॉट.
हालांकि, आपको टेबल के स्ट्रक्चर को बदलते समय
सावधानी रखनी चाहिए, जैसा कि यहां बताया गया है:
-
मौजूदा टेबल में कॉलम जोड़ने या हटाने से व्यू नहीं दिखेगा. इससे व्यू में अनचाहा व्यवहार हो सकता है. इन बदलावों को लागू करने के लिए, आपको
DataTable
से एक नयाDataView
बनाना होगा. -
इसमें मौजूद पंक्तियों को जोड़ना या हटाना सुरक्षित है. बदलाव, व्यू में तुरंत लागू हो जाएंगे. हालांकि, इस बदलाव के बाद, किसी भी विज़ुअलाइज़ेशन पर
draw()
को कॉल करने के लिए, नई लाइन को रेंडर करना होगा. ध्यान दें कि अगर आपके व्यू में से किसी एकsetRows() or hideRows()
तरीके को कॉल करके पंक्तियां फ़िल्टर की गई हैं और आप दिए गए टेबल में पंक्तियां जोड़ते या हटाते हैं, तो अनचाहा व्यवहार नहीं दिखेगा; नई टेबल दिखाने के लिए आपको एक नयाDataView
बनाना होगा. -
मौजूदा सेल में सेल की वैल्यू बदलना सुरक्षित है और बदलाव तुरंत
DataView
पर लागू कर दिए जाते हैं. हालांकि, इस बदलाव के बाद, नई विज़ुअलाइज़ेशन वैल्यू रेंडर करने के लिए, आपको किसी भी विज़ुअलाइज़ेशन परdraw()
को कॉल करना होगा.
किसी और DataView
से भी DataView
बनाया जा सकता है. ध्यान दें कि जब भी किसी बुनियादी टेबल या व्यू के बारे में बताया जाता है, तो यह इस लेवल से ठीक नीचे के लेवल की जानकारी देता है. दूसरे शब्दों में, यह इस DataView
को बनाने के लिए इस्तेमाल किए गए डेटा ऑब्जेक्ट के बारे में बताता है.
DataView
आपके दिए गए फ़ॉर्मूला के आधार पर तैयार किए गए कॉलम के साथ भी काम करता है. ये ऐसे कॉलम हैं जिनकी वैल्यू का हिसाब, आपके दिए गए फ़ंक्शन का इस्तेमाल करके तुरंत लगाया जाता है. उदाहरण के लिए, ऐसा कॉलम शामिल किया जा सकता है जो दो पिछले कॉलम का योग हो. इसके अलावा, कोई ऐसा कॉलम शामिल किया जा सकता है जो किसी दूसरे कॉलम में मौजूद तारीख की कैलेंडर तिमाही कैलकुलेट करके दिखाता हो. ज़्यादा जानकारी के लिए, setColumns()
देखें.
पंक्ति या कॉलम को छिपाने या दिखाने पर, DataView
में बदलाव करने पर, विज़ुअलाइज़ेशन पर तब तक असर नहीं पड़ेगा, जब तक कि विज़ुअलाइज़ेशन पर draw()
को फिर से कॉल नहीं किया जाता.
डेटा के दिलचस्प सबसेट के साथ DataView
बनाने के लिए, DataView.getFilteredRows()
को DataView.setRows()
के साथ जोड़ा जा सकता है: जैसा कि यहां दिखाया गया है:
var data = new google.visualization.DataTable(); data.addColumn('string', 'Employee Name'); data.addColumn('date', 'Start Date'); data.addRows(6); data.setCell(0, 0, 'Mike'); data.setCell(0, 1, new Date(2008, 1, 28)); data.setCell(1, 0, 'Bob'); data.setCell(1, 1, new Date(2007, 5, 1)); data.setCell(2, 0, 'Alice'); data.setCell(2, 1, new Date(2006, 7, 16)); data.setCell(3, 0, 'Frank'); data.setCell(3, 1, new Date(2007, 11, 28)); data.setCell(4, 0, 'Floyd'); data.setCell(4, 1, new Date(2005, 3, 13)); data.setCell(5, 0, 'Fritz'); data.setCell(5, 1, new Date(2007, 9, 2)); // Create a view that shows everyone hired since 2007. var view = new google.visualization.DataView(data); view.setRows(view.getFilteredRows([{column: 1, minValue: new Date(2007, 0, 1)}])); var table = new google.visualization.Table(document.getElementById('test_dataview')); table.draw(view, {sortColumn: 1});
कंस्ट्रक्टर
नया DataView
इंस्टेंस बनाने के दो तरीके हैं:
कंस्ट्रक्टर 1
var myView = new google.visualization.DataView(data)
data
-
व्यू को शुरू करने के लिए,
DataTable
याDataView
का इस्तेमाल किया गया. डिफ़ॉल्ट रूप से, डेटा टेबल या व्यू के मूल कॉलम में सभी कॉलम और लाइनें होती हैं. इस व्यू में पंक्तियां या कॉलम छिपाने या दिखाने के लिए, सहीset...()
याhide...()
तरीके अपनाएं.
यह भी देखें:
setकॉलम(), hideColumn(), setRows(), hideRows().
कंस्ट्रक्टर 2
इस कंस्ट्रक्टर ने DataTable
को एक क्रम में DataView
असाइन करके, एक नया DataView
बनाया.
यह आपको DataView
का इस्तेमाल करके, उसे फिर से बनाने में मदद करता है. DataView.toJSON()
.
var myView = google.visualization.DataView.fromJSON(data, viewAsJson)
- डेटा
-
वह
DataTable
ऑब्जेक्ट जिसका इस्तेमाल आपनेDataView
बनाने के लिए किया था, जिस पर आपनेDataView.toJSON()
को कॉल किया था. अगर यह टेबल मूल टेबल से अलग है, तो आपको उम्मीद से अलग नतीजे मिलेंगे. - viewAsJson
-
JSON स्ट्रिंग,
DataView.toJSON()
से मिली. यह इस बात का ब्यौरा है कि डेटा DataTable में किन पंक्तियों को दिखाना या छिपाना है.
तरीके
तरीका | सामान लौटाने की वैल्यू | जानकारी |
---|---|---|
DataTable में ब्यौरे देखें. |
मिलते-जुलते DataTable तरीकों की तरह ही, इसमें भी पंक्ति/कॉलम के इंडेक्स,
व्यू में मौजूद इंडेक्स को दिखाते हैं, न कि दिए गए टेबल/व्यू को.
|
|
getTableColumnIndex(viewColumnIndex)
|
नंबर |
इससे, इस व्यू में इंडेक्स से जुड़े कॉलम की बुनियादी टेबल (या व्यू) की जानकारी मिलती है.
उदाहरण: अगर |
getTableRowIndex(viewRowIndex) |
नंबर |
इस व्यू में, किसी इंडेक्स की दी गई लाइन की इंडेक्स को उसके टेबल (या व्यू) में दिखाता है.
उदाहरण: अगर |
getViewColumnIndex(tableColumnIndex)
|
नंबर |
इस व्यू में, इंडेक्स को दिखाता है, जो दिए गए कॉलम (या व्यू) में दिए गए किसी कॉलम की मदद से उसके इंडेक्स में शामिल होता है. अगर एक से ज़्यादा ऐसे इंडेक्स मौजूद हैं, तो पहला (सबसे छोटा) इंडेक्स दिखाता है. अगर ऐसा कोई इंडेक्स मौजूद नहीं है (तय कॉलम, व्यू में नहीं है), तो -1 दिखता है.
उदाहरण: अगर |
getViewColumns() |
संख्याओं का अरे |
इस व्यू के कॉलम को क्रम में दिखाता है. इसका मतलब है कि अगर |
getViewRowIndex(tableRowIndex) |
नंबर |
इस व्यू में, ऐसे इंडेक्स को दिखाता है जो दिए गए टेबल (या व्यू) में, इसकी इंडेक्स में दी गई लाइन से मैप होता है. अगर एक से ज़्यादा ऐसे इंडेक्स मौजूद हैं, तो पहला (सबसे छोटा) इंडेक्स दिखाता है. अगर ऐसा कोई इंडेक्स मौजूद नहीं है, तो इंडेक्स में शामिल पंक्ति की वैल्यू '1' दिखती है. हालांकि, इंडेक्स में तय की गई पंक्ति का व्यू नहीं होता.
उदाहरण: अगर |
getViewRows() |
संख्याओं का अरे |
इससे इस व्यू की लाइन क्रम में दिखती हैं. इसका मतलब है कि अगर |
hideColumns(columnIndexes) |
कोई नहीं |
बताए गए कॉलम को मौजूदा व्यू से छिपाता है.
उदाहरण: अगर आपके पास 10 कॉलम वाली टेबल है और आप
|
hideRows(min, max) |
कभी नहीं |
इंडेक्स की उन सभी पंक्तियों को छिपाता है जो मौजूदा व्यू से कम से कम (ज़्यादा से ज़्यादा) के बीच होती हैं.
ऊपर दिए गए |
hideRows(rowIndexes) |
कभी नहीं |
बताई गई पंक्तियों को मौजूदा व्यू से छिपाता है.
उदाहरण: अगर आपके पास 10 पंक्तियों वाली टेबल है और उसमें
|
setColumns(columnIndexes) |
कभी नहीं |
इससे पता चलता है कि इस व्यू में कौनसे कॉलम दिख रहे हैं. तय नहीं किए गए कॉलम छिपा दिए जाएंगे. यह डेटा टेबल/व्यू या कैलकुलेटेड कॉलम में मौजूद कॉलम इंडेक्स की कैटगरी है. अगर यह तरीका इस्तेमाल नहीं किया जा रहा, तो सभी कॉलम डिफ़ॉल्ट रूप से दिखाए जाते हैं. अरे में एक ही कॉलम को कई बार दिखाने के लिए डुप्लीकेट भी हो सकते हैं. कॉलम, तय किए गए क्रम में दिखेंगे.
उदाहरण: // Show some columns directly from the underlying data. // Shows column 3 twice. view.setColumns([3, 4, 3, 2]); // Underlying table has a column specifying a value in centimeters. // The view imports this directly, and creates a calculated column // that converts the value into inches. view.setColumns([1,{calc:cmToInches, type:'number', label:'Height in Inches'}]); function cmToInches(dataTable, rowNum){ return Math.floor(dataTable.getValue(rowNum, 1) / 2.54); } |
setRows(min, max) |
कभी नहीं |
इस व्यू में लाइनों को सभी इंडेक्स (इसके अंदर मौजूद टेबल/व्यू में) पर सेट करता है. यह कम से कम और ज़्यादा से ज़्यादा (दोनों को मिलाकर) के बीच होता है. नीचे |
setRows(rowIndexes) |
कभी नहीं |
इसमें, टेबल/व्यू के इंडेक्स नंबर के आधार पर, दिखने वाली पंक्तियां सेट होती हैं.
उदाहरण: किसी टेबल/व्यू की लाइन तीन और शून्य वाली व्यू बनाने के लिए: |
toDataTable() |
डेटा टेबल |
DataTable ऑब्जेक्ट दिखाता है. इसमें DataView की दिखने वाली पंक्तियां और कॉलम होते हैं.
|
toJSON() |
स्ट्रिंग |
यह इस DataView को दिखाता है. इस स्ट्रिंग में असल डेटा शामिल नहीं है. इसमें सिर्फ़ खास DataView सेटिंग, जैसे कि दिखने वाली पंक्तियां और कॉलम शामिल हैं. इस स्ट्रिंग को फिर से बनाने के लिए, इस स्ट्रिंग को सेव करें और उसे स्टैटिक
DataView.fromJSON()
कंस्ट्रक्टर को पास करें. इसमें
जनरेट किए गए कॉलम शामिल नहीं होंगे.
|
चार्टरपर क्लास
आपके चार्ट को रैप करने और आपके चार्ट के लिए सभी लोडिंग, ड्रॉइंग, और
डेटा सोर्स क्वेरी को हैंडल करने के लिए, ChartWrapper
क्लास का इस्तेमाल किया जाता है. क्लास, चार्ट पर वैल्यू सेट करने और उसे बनाने के लिए,
सुविधा के तरीके दिखाता है. यह क्लास, डेटा सोर्स से पढ़ना आसान कर देती है, क्योंकि आपको क्वेरी कॉलबैक हैंडलर बनाने की ज़रूरत नहीं होती. इसका इस्तेमाल फिर से इस्तेमाल करने के लिए, चार्ट को आसानी से सेव करने के लिए भी किया जा सकता है.
ChartWrapper
का इस्तेमाल करने का एक और फ़ायदा यह है कि आप डाइनैमिक लोडिंग का इस्तेमाल करके,
लाइब्रेरी लोड की संख्या कम कर सकते हैं. साथ ही, आपको पैकेज अलग से लोड करने की ज़रूरत नहीं है, क्योंकि ChartWrapper
आपके लिए पैकेज पैकेज को खोजने और लोड करने का काम संभालेगा.
ज़्यादा जानकारी के लिए ये उदाहरण देखें.
हालांकि, ChartWrapper
फ़िलहाल सिर्फ़ इवेंट के सबसेट को चार्ट में भेजता है:
चुनें, तैयार है, और गड़बड़ी करता है. अन्य इवेंट, चार्टरैपर इंस्टेंस के ज़रिए नहीं भेजे जाते हैं. दूसरे इवेंट पाने के लिए, आपको getChart()
को कॉल करना होगा और सीधे चार्ट हैंडल पर इवेंट की सदस्यता लेनी होगी, जैसा कि यहां दिखाया गया है:
var wrapper; function drawVisualization() { // Draw a column chart wrapper = new google.visualization.ChartWrapper({ chartType: 'ColumnChart', dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'], [700, 300, 400, 500, 600, 800]], options: {'title': 'Countries'}, containerId: 'visualization' }); // Never called. google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler); // Must wait for the ready event in order to // request the chart and subscribe to 'onmouseover'. google.visualization.events.addListener(wrapper, 'ready', onReady); wrapper.draw(); // Never called function uselessHandler() { alert("I am never called!"); } function onReady() { google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler); } // Called function usefulHandler() { alert("Mouseover event!"); } }
निर्माता
ChartWrapper(opt_spec)
- opt_spec
- [ज़रूरी नहीं] - चार्ट की जानकारी देने वाला JSON ऑब्जेक्ट या उस ऑब्जेक्ट का सीरियल स्ट्रिंग वर्शन. इस ऑब्जेक्ट का फ़ॉर्मैट drawचार्ट() दस्तावेज़ में दिखाया जाता है. अगर इसके बारे में नहीं बताया गया है, तो आपको सभी सही प्रॉपर्टी सेट करनी होंगी. इसके लिए, आपको इस ऑब्जेक्ट के ज़रिए दिखाए गए set... मैथड को इस्तेमाल करना होगा.
तरीके
चार्टवपर, नीचे दिए गए अन्य तरीके बताता है:
तरीका | रिटर्न टाइप | जानकारी |
---|---|---|
draw(opt_container_ref) |
कभी नहीं |
चार्ट ड्रॉ करता है. चार्ट या डेटा में बदलाव करने के लिए, आपको इस तरीके से कॉल करना होगा.
|
toJSON() |
स्ट्रिंग | इससे, चार्ट के JSON को दिखाने वाला स्ट्रिंग वर्शन दिखता है. |
clone() |
चार्टरैपर | चार्ट रैपर की डीप कॉपी दिखाता है. |
getDataSourceUrl() |
स्ट्रिंग | अगर इस चार्ट को अपना डेटा डेटा सोर्स से मिलता है, तो इस डेटा सोर्स का यूआरएल दिखाता है. नहीं तो, कोई वैल्यू नहीं दिखती है. |
getDataTable() |
google.visualization.DataTable |
अगर इस चार्ट को अपना डेटा स्थानीय रूप से तय
जब भी आप |
getChartType() |
स्ट्रिंग |
रैप किए गए चार्ट की क्लास का नाम. अगर यह Google चार्ट है, तो google.visualization को नाम नहीं दिया जाएगा. उदाहरण के लिए, अगर यह ट्रीमैप चार्ट था, तो यह "google.विज़ुअलाइज़ेशन.ट्रीमैप" के बजाय "ट्रीमैप" दिखाएगा.
|
getChartName() |
स्ट्रिंग | setChartName() से असाइन किए गए चार्ट का नाम दिखाता है. |
getChart() |
चार्ट ऑब्जेक्ट का रेफ़रंस |
इससे, चार्टरैपर के बनाए गए चार्ट का रेफ़रंस मिलता है. उदाहरण के लिए,
google.visualization.BarChart
या
google.visualization.ColumnChart
.
इससे तब तक शून्य दिखेगा, जब तक कि आप charWrapper ऑब्जेक्ट पर draw() को कॉल नहीं कर देते, और यह एक तैयार इवेंट देता है. दिखाए गए ऑब्जेक्ट पर कॉल किए गए तरीके, पेज पर दिखेंगे.
|
getContainerId() |
स्ट्रिंग | चार्ट के DOM कंटेनर एलिमेंट का आईडी. |
getQuery() |
स्ट्रिंग | अगर इस चार्ट में क्वेरी स्ट्रिंग है, तो वह क्वेरी स्ट्रिंग और डेटा सोर्स की क्वेरी करती है. |
getRefreshInterval() |
नंबर | अगर यह चार्ट किसी डेटा सोर्स के लिए क्वेरी करता है, तो इसके लिए कोई भी रीफ़्रेश इंटरवल. शून्य से पता चलता है कि पेज को रीफ़्रेश नहीं किया गया है. |
getOption(key, opt_default_val) |
किसी भी तरह का कॉन्टेंट |
चुने गए चार्ट के विकल्प की वैल्यू दिखाता है
|
getOptions() |
अस्वीकार करें | इस चार्ट के लिए विकल्प ऑब्जेक्ट दिखाता है. |
getView() |
ऑब्जेक्ट या श्रेणी |
DataView इनीशियलाइज़र ऑब्जेक्ट को उसी फ़ॉर्मैट में दिखाता है जिस पर
dataview.toJSON() दिखता है. इसके अलावा, यह इन ऑब्जेक्ट की कैटगरी भी दिखाता है.
|
setDataSourceUrl(url) |
कभी नहीं | इस चार्ट के लिए इस्तेमाल करने के लिए, डेटा सोर्स का यूआरएल सेट करता है. अगर इस ऑब्जेक्ट के लिए कोई डेटा टेबल भी सेट की जाती है, तो डेटा सोर्स के यूआरएल को अनदेखा कर दिया जाएगा. |
setDataTable(table) |
कभी नहीं | चार्ट के लिए DataTable सेट करता है. इनमें से कोई एक वैल्यू पास करें: शून्य; DataTable ऑब्जेक्ट; DataTable का JSON प्रज़ेंटेशन; या arrayToDataTable() के सिंटैक्स के मुताबिक श्रेणी. |
setChartType(type) |
कभी नहीं |
इससे चार्ट किस तरह का है, यह सेट होता है. रैप किए गए चार्ट में क्लास का नाम पास करें. अगर यह Google चार्ट है, तो google.visualization को इसके लिए मंज़ूरी न दें. उदाहरण के लिए, किसी पाई चार्ट के लिए,
"PieChart" को पास करें.
|
setChartName(name) |
कभी नहीं | चार्ट के लिए एक आर्बिट्रेरी नाम सेट करता है. जब तक कि कस्टम चार्ट को इसे इस्तेमाल करने के लिए साफ़ तौर पर न बनाया गया हो, चार्ट में इसे कहीं भी नहीं दिखाया जाता है. |
setContainerId(id) |
कभी नहीं | चार्ट के लिए, शामिल डीओएम एलिमेंट का आईडी सेट करता है. |
setQuery(query_string) |
कभी नहीं | क्वेरी स्ट्रिंग सेट करता है, अगर यह चार्ट किसी डेटा सोर्स की क्वेरी करता है. अगर यह वैल्यू तय की जाती है, तो आपको डेटा सोर्स का यूआरएल भी सेट करना होगा. |
setRefreshInterval(interval) |
कभी नहीं | अगर यह किसी डेटा सोर्स की क्वेरी करता है, तो इस चार्ट के लिए रीफ़्रेश इंटरवल सेट करता है. अगर यह वैल्यू तय की जा रही है, तो आपको डेटा सोर्स का यूआरएल भी सेट करना होगा. ज़ीरो का मतलब है कि डेटा रीफ़्रेश नहीं किया जाएगा. |
setOption(key, value) |
कभी नहीं |
सिंगल चार्ट विकल्प वैल्यू सेट करता है, जहां key विकल्प का नाम है और value वैल्यू है. किसी विकल्प को अनसेट करने के लिए, वैल्यू के लिए शून्य डालें. ध्यान दें कि बटन कोई सही नाम हो सकता है, जैसे कि 'vAxis.title' .
|
setOptions(options_obj) |
कभी नहीं | चार्ट के लिए पूरा विकल्प ऑब्जेक्ट सेट करता है. |
setView(view_spec) |
कभी नहीं |
DataView इनीशियलाइज़र ऑब्जेक्ट सेट करता है. यह बुनियादी डेटा पर फ़िल्टर के तौर पर काम करता है. इस चार्ट को लागू करने के लिए, चार्ट रैपर में DataTable या डेटा सोर्स का बुनियादी डेटा होना चाहिए. आप कोई स्ट्रिंग या DataView शुरू करने वाला ऑब्जेक्ट पास कर सकते हैं, जैसे कि dataview.toJSON() से मिला. आप DataView शुरू करने वाले ऑब्जेक्ट की श्रेणी भी पास कर सकते हैं. इस तरह, श्रेणी में मौजूद पहला DataView , डेटा के नए टेबल को बनाने के लिए, दिए गए डेटा पर लागू होता है. साथ ही, पहले DataView को लागू करने से शुरू होने वाली डेटा टेबल पर दूसरा DataView भी लागू होता है.
|
इवेंट
चार्टरैपर ऑब्जेक्ट, ये इवेंट दिखाता है. ध्यान रखें कि किसी भी इवेंट के बारे में जानकारी देने से पहले, आपको
ChartWrapper.draw()
को कॉल करना होगा.
नाम | जानकारी | प्रॉपर्टी |
---|---|---|
error |
जब चार्ट को रेंडर करते समय कोई गड़बड़ी होती है, तब सक्रिय किया जाता है. | आईडी, मैसेज |
ready |
चार्ट, मेथड कॉल के लिए तैयार है. चार्ट बनाने के बाद, अगर आपको चार्ट के साथ इंटरैक्ट करना है और कॉल करने के तरीके इस्तेमाल करने हैं, तो आपको draw तरीके को कॉल करने से पहले, इस इवेंट के लिए लिसनर सेट अप करना चाहिए. साथ ही, इवेंट चालू होने के बाद ही उन्हें कॉल करना चाहिए.
|
कभी नहीं |
select |
जब उपयोगकर्ता किसी बार या लेजेंड पर क्लिक करता है, तब सक्रिय होता है. चार्ट का एलिमेंट चुनने पर, डेटा टेबल में मौजूद सेल को चुना जाता है; जब कोई लेजेंड चुना जाता है, तब डेटा टेबल में मौजूद उस कॉलम को चुना जाता है. अगर आपको चुना गया है, तो यह जानने के लिए
ChartWrapper.getChart().
getSelection() को कॉल करें. ध्यान रखें कि यह सिर्फ़ तब काम करेगा, जब चुने गए चार्ट में चुने गए इवेंट का इस्तेमाल किया जाएगा.
|
कभी नहीं |
उदाहरण
नीचे दिए गए दो स्निपेट, एक जैसा लाइन चार्ट बनाते हैं. पहला उदाहरण, चार्ट की परिभाषा बताने के लिए, JSON लिटरल नोटेशन का इस्तेमाल करता है. दूसरा उदाहरण, इन वैल्यू को सेट करने के लिए, चार्टरैपर मैथड का इस्तेमाल करता है.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Visualization API Sample</title> <!-- One script tag loads all the required libraries! --> <script type="text/javascript" src='https://www.gstatic.com/charts/loader.js'></script> <script> google.charts.load('current); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var wrap = new google.visualization.ChartWrapper({ 'chartType':'LineChart', 'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1', 'containerId':'visualization', 'query':'SELECT A,D WHERE D > 100 ORDER BY D', 'options': {'title':'Population Density (people/km^2)', 'legend':'none'} }); wrap.draw(); } </script> </head> <body> <div id="visualization" style="height: 400px; width: 400px;"></div> </body> </html>
वही चार्ट, अब सेटर के तरीकों का इस्तेमाल कर रहा है:
<!DOCTYPE html> <html> <head> <meta http-equiv='content-type' content='text/html; charset=utf-8'/> <title>Google Visualization API Sample</title> <!-- One script tag loads all the required libraries! --> <script type="text/javascript" src='https://www.gstatic.com/charts/loader.js'></script> <script type="text/javascript"> google.charts.load('current'); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { // Define the chart using setters: var wrap = new google.visualization.ChartWrapper(); wrap.setChartType('LineChart'); wrap.setDataSourceUrl('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1'); wrap.setContainerId('visualization'); wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D'); wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none'}); wrap.draw(); } </script> </head> <body> <div id='visualization' style='height: 400px; width: 400px;'></div> </body> </html>
चार्ट एडिटर क्लास
ChartEditor
क्लास का इस्तेमाल, इन-पेज डायलॉग बॉक्स को खोलने के लिए किया जाता है. यह उपयोगकर्ता को
विज़ुअलाइज़ेशन के दौरान, कस्टमाइज़ करने की सुविधा देता है.
चार्ट एडिटर का इस्तेमाल करने के लिए:
-
charteditor
पैकेज लोड करें.google.charts.load()
में, पैकेज 'charteditor' को लोड करें. आपको उस तरह के चार्ट के लिए पैकेज लोड करने की ज़रूरत नहीं है जिसे आपने एडिटर में रेंडर किया है. चार्ट एडिटर आपके लिए ज़रूरत के मुताबिक सभी पैकेज लोड करेगा. -
ChartWrapper
ऑब्जेक्ट बनाएं, जो उपयोगकर्ता के हिसाब से चार्ट के बारे में जानकारी दे. यह चार्ट, डायलॉग में दिखेगा और उपयोगकर्ता, एडिटर का इस्तेमाल करके चार्ट को फिर से डिज़ाइन कर सकता है, चार्ट का टाइप बदल सकता है या सोर्स डेटा को बदल सकता है. -
नया ChartEditor इंस्टेंस बनाएं और "ok"
इवेंट सुनने के लिए रजिस्टर करें. उपयोगकर्ता के डायलॉग बॉक्स में "ठीक है" बटन पर क्लिक करने पर, यह इवेंट दिखता है. इसके मिलने पर, आपको उपयोगकर्ता को बदला गया चार्ट पाने के लिए,
ChartEditor.getChartWrapper()
को कॉल करना चाहिए. -
ChartWrapper
पर पास करते हुए,ChartEditor.openDialog()
को कॉल करें. इससे डायलॉग खुल जाएगा. डायलॉग बटन, उपयोगकर्ता को एडिटर बंद करने की सुविधा देता है.ChartEditor
इंस्टेंस तब तक उपलब्ध रहता है, जब तक कि वह दायरे में रहता है; जब उपयोगकर्ता, डायलॉग बंद करता है, तब यह अपने-आप नहीं मिटता. - कोड को चार्ट में अपडेट करने के लिए,
setChartWrapper()
पर कॉल करें.
तरीके
तरीका | सामान लौटाने की वैल्यू | जानकारी |
---|---|---|
openDialog(chartWrapper, opt_options) |
शून्य |
चार्ट एडिटर को पेज पर एम्बेड किए गए डायलॉग बॉक्स के तौर पर खोलता है. फ़ंक्शन तुरंत रिटर्न करता है; डायलॉग बंद होने का इंतज़ार नहीं किया जाता. अगर आपका
इंस्टेंस का दायरा नहीं खोता है, तो डायलॉग को फिर से खोलने के लिए,
|
getChartWrapper() |
ChartWrapper |
चार्ट दिखाता है कि चार्ट में ChartWrapper उपयोगकर्ता बदलाव किए गए हैं. |
setChartWrapper(chartWrapper) |
शून्य |
रेंडर किए गए चार्ट को एडिटर पर अपडेट करने के लिए, यह तरीका अपनाएं.
chartWrapper - रेंडर करने के लिए नए चार्ट को
दिखाने वाला |
closeDialog() |
शून्य | चार्ट एडिटर का डायलॉग बॉक्स बंद करता है. |
विकल्प
चार्ट एडिटर इन विकल्पों के साथ काम करता है:
नाम | टाइप | डिफ़ॉल्ट | जानकारी |
---|---|---|---|
dataSourceInput |
एलिमेंट हैंडल या 'urlbox' | शून्य |
इसका इस्तेमाल करके उपयोगकर्ता को चार्ट के लिए डेटा सोर्स तय करने की सुविधा दें. यह प्रॉपर्टी इन दो में से एक वैल्यू हो सकती है:
|
इवेंट
चार्ट एडिटर में ये इवेंट होते हैं:
नाम | जानकारी | प्रॉपर्टी |
---|---|---|
ok |
जब उपयोगकर्ता डायलॉग पर "ठीक है" बटन पर क्लिक करता है, तब सक्रिय होता है. यह तरीका मिलने के बाद,
आपको उपयोगकर्ता को कॉन्फ़िगर किया गया चार्ट वापस पाने के लिए, getChartWrapper() पर कॉल करना चाहिए.
|
कोई नहीं |
cancel |
जब उपयोगकर्ता डायलॉग बॉक्स पर "रद्द करें" बटन पर क्लिक करता है, तब यह सक्रिय होता है. | कोई नहीं |
उदाहरण
नीचे दिए गए उदाहरण कोड में, पॉप-अप लाइन चार्ट वाला चार्ट एडिटर डायलॉग खुलता है. अगर उपयोगकर्ता
"ठीक है" पर क्लिक करता है, तो बदला गया चार्ट, पेज पर बताए गए <div>
में सेव हो जाएगा.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Visualization API Sample </title> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {packages: ['charteditor']}); </script> <script type="text/javascript"> google.charts.setOnLoadCallback(loadEditor); var chartEditor = null; function loadEditor() { // Create the chart to edit. var wrapper = new google.visualization.ChartWrapper({ 'chartType':'LineChart', 'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1', 'query':'SELECT A,D WHERE D > 100 ORDER BY D', 'options': {'title':'Population Density (people/km^2)', 'legend':'none'} }); chartEditor = new google.visualization.ChartEditor(); google.visualization.events.addListener(chartEditor, 'ok', redrawChart); chartEditor.openDialog(wrapper, {}); } // On "OK" save the chart to a <div> on the page. function redrawChart(){ chartEditor.getChartWrapper().draw(document.getElementById('vis_div')); } </script> </head> <body> <div id="vis_div" style="height: 400px; width: 600px;"></div> </body> </html>
डेटा में बदलाव करने के तरीके
google.visualization.data
नेमस्पेस में, DataTable
ऑब्जेक्ट पर SQL-जैसे कार्रवाइयां करने के स्टैटिक तरीके होते हैं. उदाहरण के लिए, उन्हें जॉइन करना या कॉलम वैल्यू के हिसाब से ग्रुप करना.
google.visualization.data
नेमस्पेस यह जानकारी देती है:
तरीका | जानकारी |
---|---|
google.visualization.data.group
|
टेबल को दिखाने के लिए, SQL Group BY कार्रवाई करता है. इसमें टेबल को तय कॉलम में वैल्यू के हिसाब से ग्रुप किया जाता है. |
google.visualization.data.join
|
यह एक या ज़्यादा कुंजी कॉलम पर दो डेटा टेबल को जोड़ता है. |
ग्रुप()
अपने-आप भरी गई DataTable
ऑब्जेक्ट लेता है और SQL-जैसे ग्रुप BY कार्रवाई करता है.
इसके लिए, टेबल में दी गई कॉलम वैल्यू के हिसाब से ग्रुप की गई पंक्तियां मिलती हैं. ध्यान दें कि यह DataTable
के इनपुट में बदलाव नहीं करता.
दिखाई गई टेबल में, खास कुंजी कॉलम के वैल्यू के हर कॉम्बिनेशन के लिए एक पंक्ति शामिल होती है. हर लाइन में मुख्य कॉलम शामिल होते हैं. साथ ही, कुंजी के कॉम्बिनेशन से मैच होने वाली सभी लाइनों पर एक कॉलम वैल्यू के साथ एक कॉलम शामिल होता है. उदाहरण के लिए, तय किए गए कॉलम में मौजूद सभी वैल्यू की कुल संख्या या कुल वैल्यू.
google.visualization.data
नेमस्पेस में एग्रीगेशन की कई वैल्यू शामिल होती हैं. उदाहरण के लिए, sum और count. हालांकि, आपके पास अपनी वैल्यू तय करने का विकल्प होता है, जैसे कि स्टैंडर्ड डीवीएशन या दूसरा सबसे ज़्यादा मान. अपना तरीका बताने के बाद, अपना एग्रीगेटर तय करने के निर्देश दिए गए हैं.
सिंटैक्स
google.visualization.data.group(data_table, keys, columns)
- data_table
-
इनपुट
DataTable
.group()
पर कॉल करने से इसमें बदलाव नहीं होगा. - बटन
-
संख्याओं और/या ऑब्जेक्ट की कैटगरी, जिससे पता चलता है कि किस कॉलम के हिसाब से ग्रुप बनाना है. नतीजों की टेबल में
इस श्रेणी के हर कॉलम के साथ-साथ, कॉलम में मौजूद सभी कॉलम शामिल होते हैं. अगर कोई संख्या है, तो यह इनपुट के
DataTable
कॉलम का कॉलम इंडेक्स है. अगर किसी ऑब्जेक्ट में, ऐसा फ़ंक्शन शामिल है जो बताए गए कॉलम में बदलाव कर सकता है (उदाहरण के लिए, उस कॉलम की वैल्यू में 1 जोड़ें). ऑब्जेक्ट में ये प्रॉपर्टी होनी चाहिए:- कॉलम - वह संख्या जो dt से कॉलम इंडेक्स होती है और उसमें बदलाव लागू करना होता है.
- modifier - एक ऐसा फ़ंक्शन जो एक वैल्यू स्वीकार करता है (हर लाइन के लिए उस कॉलम में सेल वैल्यू). यह बदली गई वैल्यू दिखाता है. इस फ़ंक्शन का इस्तेमाल कॉलम वैल्यू में बदलाव करने के लिए किया जाता है, ताकि इसके ग्रुप बनाने में मदद मिल सके: उदाहरण के लिए, तारीख वाले कॉलम से चौथाई का हिसाब लगाने वाले कौनसे Quarter फ़ंक्शन को कॉल करके, एपीआई इसे पंक्तियों के हिसाब से ग्रुप में बांट सकता है. कैलकुलेट की गई वैल्यू, दिखाई गई टेबल के मुख्य कॉलम में दिखती है. इस फ़ंक्शन को इन ऑब्जेक्ट के अंदर इनलाइन किया जा सकता है. इसके अलावा, यह एक ऐसा फ़ंक्शन हो सकता है जिसे आपने अपने कोड में कहीं और तय किया हो (यह कॉल करने के दायरे में होना चाहिए). एपीआई एक आसान मॉडिफ़ायर फ़ंक्शन उपलब्ध कराता है; यहां बताया गया है कि अपने खुद के ज़्यादा उपयोगी फ़ंक्शन कैसे बनाएं. आपके पास इस तरह के डेटा को स्वीकार करने वाले डेटा टाइप की जानकारी होनी चाहिए. साथ ही, आपको इसे सिर्फ़ उस तरह के कॉलम पर कॉल करना होगा. आपको इस फ़ंक्शन के रिटर्न टाइप की जानकारी भी होनी चाहिए. साथ ही, इसके बारे में आगे दी गई टाइप प्रॉपर्टी में बताएं.
- type - फ़ंक्शन modifier के ज़रिए लौटाया गया टाइप. यह एक JavaScript स्ट्रिंग का नाम होना चाहिए, उदाहरण के लिए: 'number' या 'बूलियन'.
-
label - [ज़रूरी नहीं] लौटाए गए
DataTable
में इस कॉलम को असाइन करने वाला स्ट्रिंग लेबल. -
id - [ज़रूरी नहीं] लौटाए गए
DataTable
में इस कॉलम को असाइन करने वाला स्ट्रिंग आईडी.
उदाहरण:[0]
,[0,2]
,[0,{column:1, modifier:myPlusOneFunc, type:'number'},2]
- कॉलम
-
[ज़रूरी नहीं] आपको आउटपुट टेबल में शामिल करने के लिए, खास कॉलम
के अलावा किन कॉलम को
तय करने की सुविधा मिलती है. पंक्ति ग्रुप की सभी पंक्तियां एक ही आउटपुट लाइन में कंप्रेस की जाती हैं. इसलिए, आपको यह तय करना होगा कि उस पंक्ति ग्रुप के लिए कौनसी वैल्यू दिखानी है. उदाहरण के लिए, आपके पास सेट की पहली लाइन में मौजूद कॉलम की वैल्यू या उस ग्रुप की सभी पंक्तियों के औसत को दिखाने का विकल्प है.
कॉलम ऑब्जेक्ट की एक श्रेणी होती है, जिनमें ये प्रॉपर्टी होती हैं:
- कॉलम - वह संख्या जो दिखाई जाने वाले कॉलम का इंडेक्स बताती है.
- एग्रीगेशन - एक फ़ंक्शन, जो इस लाइन ग्रुप में इस कॉलम की सभी वैल्यू के लिए कैटगरी स्वीकार करता है और नतीजे वाली लाइन में दिखाने के लिए एक वैल्यू दिखाता है. सामान लौटाने की वैल्यू, उसी तरह की होनी चाहिए जो ऑब्जेक्ट की type प्रॉपर्टी में दी गई है. अपना एग्रीगेशन फ़ंक्शन बनाने के बारे में जानकारी नीचे दी गई है. आपको पता होना चाहिए कि यह तरीका किस तरह के डेटा के साथ काम करता है और इसे सिर्फ़ सही तरह के कॉलम पर कॉल करता है. एपीआई कई एग्रीगेशन फ़ंक्शन उपलब्ध कराता है. सूची के लिए, नीचे दिए गए एग्रीगेशन फ़ंक्शन देखें या अपना एग्रीगेशन फ़ंक्शन लिखने का तरीका जानने के लिए, एग्रीगेशन फ़ंक्शन बनाना देखें.
- type - एग्रीगेशन फ़ंक्शन का रिटर्न टाइप. यह एक JavaScript स्ट्रिंग का प्रकार नाम होना चाहिए, उदाहरण के लिए: 'number' या 'बूलियन'.
- लेबल - [ज़रूरी नहीं] 'लौटाया गया' टेबल के इस कॉलम में लागू करने के लिए एक स्ट्रिंग लेबल.
- id - [ज़रूरी नहीं] दी गई टेबल में, इस कॉलम पर लागू करने के लिए एक स्ट्रिंग आईडी.
सामान लौटाने की वैल्यू
कुंजियों में दिए गए हर कॉलम के लिए, एक कॉलम वाला DataTable
. इसके बाद, कॉलम में मौजूद हर कॉलम के लिए एक कॉलम. टेबल को मुख्य पंक्तियों के हिसाब से, बाईं से दाईं ओर क्रम से लगाया गया है.
उदाहरण
// This call will group the table by column 0 values. // It will also show column 3, which will be a sum of // values in that column for that row group. var result = google.visualization.data.group( dt, [0], [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}] ); *Input table* 1 'john' 'doe' 10 1 'jane' 'doe' 100 3 'jill' 'jones' 50 3 'jack' 'jones' 75 5 'al' 'weisenheimer' 500 *Output table* 1 110 3 125 5 500
उपलब्ध कराए गए मॉडिफ़ायर फ़ंक्शन
एपीआई में ये मॉडिफ़ायर फ़ंक्शन होते हैं, जिन्हें आप बटन में पास कर सकते हैं. modifier पैरामीटर का इस्तेमाल करता है.
फ़ंक्शन | इनपुट श्रेणी का प्रकार | रिटर्न टाइप | जानकारी |
---|---|---|---|
google.visualization.data.month |
तारीख | संख्या | तारीख के हिसाब से, यह शून्य-आधारित महीने की वैल्यू (0, 1, 2 वगैरह) दिखाएगा. |
एग्रीगेशन फ़ंक्शन उपलब्ध कराना
एपीआई में एग्रीगेशन के ये फ़ंक्शन मिलते हैं, जिन्हें कॉलम में पास किया जा सकता है. एग्रीगेशन पैरामीटर की श्रेणी.
फ़ंक्शन | इनपुट श्रेणी का प्रकार | रिटर्न टाइप | जानकारी |
---|---|---|---|
google.visualization.data.avg |
संख्या | संख्या | दी गई श्रेणी का औसत मान. |
google.visualization.data.count |
किसी भी प्रकार की | संख्या | ग्रुप में पंक्तियों की संख्या. शून्य और डुप्लीकेट वैल्यू को गिना जाता है. |
google.visualization.data.max |
संख्या, स्ट्रिंग, तारीख | संख्या, स्ट्रिंग, तारीख, शून्य | श्रेणी में ज़्यादा से ज़्यादा मान. स्ट्रिंग के लिए, शब्दों के क्रम के हिसाब से बनाई गई सूची में यह पहला आइटम होता है. तारीख की वैल्यू के लिए, यह आखिरी तारीख होती है. शून्य को अनदेखा कर दिया जाता है. ज़्यादा से ज़्यादा वैल्यू होने पर, कोई वैल्यू नहीं दिखती. |
google.visualization.data.min |
संख्या, स्ट्रिंग, तारीख | संख्या, स्ट्रिंग, तारीख, शून्य | श्रेणी में कम से कम मान. स्ट्रिंग के लिए, शब्दों के क्रम के हिसाब से बनाई गई सूची में यह आखिरी आइटम होता है. तारीख की वैल्यू के लिए, यह सबसे पहली तारीख होती है. शून्य को अनदेखा कर दिया जाता है. अगर कोई कम से कम वैल्यू नहीं है, तो कोई वैल्यू नहीं दिखती है. |
google.visualization.data.sum |
संख्या | संख्या | श्रेणी में मौजूद सभी वैल्यू का जोड़. |
मॉडिफ़ायर फ़ंक्शन बनाना
group()
फ़ंक्शन आपकी पंक्तियों को ग्रुप करे, इससे पहले आप बदलाव की ऑनकी वैल्यू को आसान बनाने के लिए एक मॉडिफ़ायर फ़ंक्शन बना सकते हैं. यह फ़ंक्शन किसी एक सेल की वैल्यू लेता है, उस पर कार्रवाई करता है (उदाहरण के लिए, वैल्यू में 1 जोड़ता है), और उसे लौटाता है. यह ज़रूरी नहीं है कि इनपुट और रिटर्न
टाइप एक ही तरह के हों, लेकिन कॉल करने वाले (कॉलर) को इनपुट और आउटपुट टाइप की जानकारी होनी चाहिए. यहां एक ऐसे फ़ंक्शन का उदाहरण दिया गया है जो तारीख को स्वीकार करता है और तिमाही को रिटर्न करता है:
// Input type: Date // Return type: number (1-4) function getQuarter(someDate) { return Math.floor(someDate.getMonth()/3) + 1; }
एग्रीगेशन फ़ंक्शन बनाना
आप किसी एग्रीगेशन फ़ंक्शन का इस्तेमाल करके, पंक्ति ग्रुप में कॉलम की वैल्यू का एक सेट स्वीकार कर सकते हैं और एक संख्या दिखा सकते हैं. उदाहरण के लिए, संख्या या वैल्यू का औसत दिखाना. यहां दिए गए गिनती एग्रीगेशन फ़ंक्शन का लागू किया गया है. इससे यह पता चलता है कि पंक्ति ग्रुप में कितनी पंक्तियां हैं:
// Input type: Array of any type // Return type: number function count(values) { return values.length; }
शामिल करें()
इस तरीके से, दो डेटा टेबल (DataTable
या DataView
ऑब्जेक्ट) को एक ही
नतीजा दिखाने वाली टेबल में जोड़ा जा सकता है, जो SQL जॉइन स्टेटमेंट की तरह होती है. आप दो टेबल के बीच एक या एक से ज़्यादा कॉलम के जोड़े तय करते हैं (की कॉलम). आउटपुट टेबल में, जोड़ने के तरीके के मुताबिक पंक्तियां शामिल होती हैं: सिर्फ़ वे पंक्तियां जिनमें दोनों कुंजियां मेल खाती हैं; एक टेबल की सभी पंक्तियां; या दोनों टेबल की सभी पंक्तियां, चाहे दोनों कुंजियां मेल खाती हों या नहीं. नतीजों की टेबल में सिर्फ़ खास कॉलम और आपके चुने अन्य कॉलम शामिल होते हैं. ध्यान दें कि dt2 में डुप्लीकेट कुंजियां नहीं हो सकतीं, लेकिन dt1 हो सकती है. "कुंजी" शब्द का मतलब है, कुंजी के सभी कॉलम की वैल्यू को एक साथ जोड़ना, न कि किसी खास कुंजी कॉलम की वैल्यू को. इसलिए, अगर किसी पंक्ति में सेल वैल्यू A | B | C और कॉलम 0 हैं, तो कुंजी 1 होती है.
सिंटैक्स
google.visualization.data.join(dt1, dt2, joinMethod, keys, dt1Columns, dt2Columns);
- dt1
- dt2 में शामिल होने के लिए
DataTable
भरा गया. - dt2
-
dt1 में शामिल होने के लिए,
DataTable
की जानकारी अपने-आप भर गई. इस टेबल में एक जैसी कई कुंजियां नहीं हो सकतीं. यहां कुंजी, मुख्य कॉलम की वैल्यू का कॉम्बिनेशन होती है. - joinmethod
-
ऐसी स्ट्रिंग जिसमें शामिल होने का टाइप बताया जाता है. अगर dt1 में ऐसी कई पंक्तियां हैं जो dt2
पंक्ति से मेल खाती हैं, तो आउटपुट टेबल में सभी dt1 पंक्तियां शामिल होंगी. इनमें से कोई एक वैल्यू चुनें:
- 'full' - आउटपुट टेबल में दोनों टेबल की सभी पंक्तियां शामिल होती हैं. इससे फ़र्क़ नहीं पड़ता कि बटन मैच होते हैं या नहीं. मेल न खाने वाली पंक्तियों में कोई सेल नहीं होगी; मैच होने वाली लाइनें जोड़ दी जाती हैं.
- 'अंदरूनी' - पूरी तरह से जॉइन करने पर सिर्फ़ वे पंक्तियां शामिल होती हैं जिनमें कुंजियां मेल खाती हों.
- 'left' - आउटपुट टेबल में dt1 की सभी पंक्तियां शामिल होती हैं. इससे कोई फ़र्क़ नहीं पड़ता कि dt2 में कोई मिलती-जुलती पंक्ति है या नहीं.
- 'right' - आउटपुट टेबल में dt2 की सभी लाइनें शामिल हैं. इसमें, dt1 से मैच होने वाली कोई लाइन नहीं है.
- बटन
-
दोनों टेबल से तुलना करने के लिए, मुख्य कॉलम की कैटगरी. हर जोड़ी दो एलिमेंट वाली कैटगरी होती है, पहली
dt1 में एक कुंजी, और dt2 में एक कुंजी होती है. यह श्रेणी कॉलम को उनके इंडेक्स, आईडी या लेबल के हिसाब से बता सकती है, देखने के लिए
getColumnIndex
देखें.
दोनों टेबल में कॉलम एक ही तरह के होने चाहिए. टेबल से पंक्ति शामिल करने के लिए, सभी दी गई कुंजियां, joinMethod की ओर से दिए गए नियम के मुताबिक होनी चाहिए. कुंजी कॉलम हमेशा आउटपुट टेबल में शामिल किए जाते हैं. सिर्फ़ बाईं ओर मौजूद टेबल dt1 में ही डुप्लीकेट कुंजियां शामिल की जा सकती हैं. dt2 में मौजूद कुंजियां यूनीक होनी चाहिए. यहां "बटन" शब्द का मतलब है, खास कॉलम का एक खास सेट, न कि अलग-अलग कॉलम की वैल्यू. उदाहरण के लिए, अगर आपके मुख्य कॉलम A और B हैं, तो इस टेबल में सिर्फ़ यूनीक कुंजी वैल्यू होंगी (और इसलिए, इन्हें dt2 के तौर पर इस्तेमाल किया जा सकता है):जवाब B जेन लाल जेन नीला फ़्रेड लाल [[0,0], [2,1]]
, दोनों टेबल के पहले कॉलम और dt1 के तीसरे कॉलम की तुलना dt2 के दूसरे कॉलम से लेता है. - dt1कॉलम
-
dt1 के मुख्य कॉलम के साथ, dt1 से कॉलम की श्रेणी, जिसे आउटपुट टेबल में शामिल किया जाना है. यह श्रेणी कॉलम को उनके इंडेक्स, आईडी या लेबल के हिसाब से बता सकती है,
getColumnIndex
देखें. - dt2कॉलम
-
dt2 के मुख्य कॉलम के अलावा, dt2 से कॉलम की श्रेणी, जिसे आउटपुट टेबल में शामिल किया जाना है. यह श्रेणी कॉलम को उनके इंडेक्स, आईडी या लेबल के हिसाब से बता सकती है,
getColumnIndex
देखें.
सामान लौटाने की वैल्यू
DataTable
, मुख्य कॉलम, dt1कॉलम, और dt2कॉलम के साथ. यह टेबल, बाईं से दाईं ओर मौजूद मुख्य कॉलम के हिसाब से क्रम से लगाई गई है. जब joinMethod 'अंदरूनी' हो, तो सभी मुख्य सेल में जानकारी भरी जानी चाहिए. अगर कोई मेल खाने वाली कुंजी नहीं मिलती, तो मेल खाने वाले किसी भी तरीके के लिए टेबल में शून्य कुंजी वाले किसी भी सेल के लिए कोई वैल्यू नहीं होगी.
उदाहरण
*Tables* dt1 dt2 bob | 111 | red bob | 111 | point bob | 111 | green ellyn | 222 | square bob | 333 | orange jane | 555 | circle fred | 555 | blue jane | 777 | triangle jane | 777 | yellow fred | 666 | dodecahedron * Note that right table has duplicate Jane entries, but the key we will use is * columns 0 and 1. The left table has duplicate key values, but that is * allowed. *Inner join* google.visualization.data.join(dt1, dt2, 'inner', [[0,0],[1,1]], [2], [2]); bob | 111 | red | point bob | 111 | green | point jane | 777 | yellow | triangle * Note that both rows from dt1 are included and matched to * the equivalent dt2 row. *Full join* google.visualization.data.join(dt1, dt2, 'full', [[0,0],[1,1]], [2], [2]); bob | 111 | red | point bob | 111 | green | point bob | 333 | orange | null ellyn | 222 | null | square fred | 555 | blue | null fred | 666 | null | dodecahedron jane | 555 | null | circle jane | 777 | yellow | triangle *Left join* google.visualization.data.join(dt1, dt2, 'left', [[0,0],[1,1]], [2], [2]); bob | 111 | red | point bob | 111 | green | point bob | 333 | orange | null fred | 555 | blue | null jane | 777 | yellow | triangle *Right join* google.visualization.data.join(dt1, dt2, 'right', [[0,0],[1,1]], [2], [2]); bob | 111 | red | point bob | 111 | green | point ellyn | 222 | null | square fred | 666 | null | dodecahedron jane | 555 | null | circle jane | 777 | yellow | triangle
फ़ॉर्मैट
Google विज़ुअलाइज़ेशन एपीआई ऐसे फ़ॉर्मैट करने वाले टूल उपलब्ध कराता है जिनका इस्तेमाल करके किसी विज़ुअलाइज़ेशन में डेटा को फिर से फ़ॉर्मैट किया जा सकता है. ये फ़ॉर्मैटर, सभी पंक्तियों में दिए गए कॉलम की फ़ॉर्मैटिंग की वैल्यू को बदलते हैं. ध्यान दें:
- फ़ॉर्मैट की गई वैल्यू, सिर्फ़ फ़ॉर्मैट की गई वैल्यू में ही बदलाव करती है. मूल वैल्यू में कोई बदलाव नहीं किया जाता. उदाहरण के लिए, दिख रही वैल्यू "1,000.00 डॉलर" होगी, लेकिन मौजूदा वैल्यू "1,000" होगी.
- फ़ॉर्मैट करने वाले टूल, एक बार में सिर्फ़ एक कॉलम पर असर डालते हैं. कई कॉलम को दोबारा फ़ॉर्मैट करने के लिए, जिस कॉलम को बदलना है उसके लिए फ़ॉर्मैटिंग का इस्तेमाल करें.
- अगर आप उपयोगकर्ता के तय किए गए फ़ॉर्मैट का इस्तेमाल भी करते हैं, तो Google विज़ुअलाइज़ेशन के कुछ फ़ॉर्मैट, उपयोगकर्ता की ओर से तय किए गए सभी फ़ॉर्मैट को बदल देंगे.
- पॉप्युलेट हुआ
DataTable
ऑब्जेक्ट पाएं. - हर उस कॉलम के लिए जिसे फिर से फ़ॉर्मैट करना है:
- एक ऐसा ऑब्जेक्ट बनाएं जो आपके फ़ॉर्मैटर के लिए सभी विकल्पों के बारे में बताता है. यह प्रॉपर्टी और वैल्यू के सेट वाला एक सामान्य JavaScript ऑब्जेक्ट है. फ़ॉर्मैटर के दस्तावेज़ देखकर पता लगाएं कि कौनसी प्रॉपर्टी काम करती हैं. (आपके पास विकल्प के तौर पर, एक ऑब्जेक्ट लिटरल नोटेशन ऑब्जेक्ट देने का विकल्प है.)
- अपने विकल्प ऑब्जेक्ट को पास करते हुए, अपना फ़ॉर्मैटर बनाएं.
-
फिर से फ़ॉर्मैट करने के लिए
formatter
.format(table, colIndex)
औरDataTable
और (शून्य-आधारित) कॉलम नंबर को पास करके कॉल करें. ध्यान दें कि हर कॉलम पर सिर्फ़ एक फ़ॉर्मैटर लागू किया जा सकता है. दूसरे फ़ॉर्मैटर को लागू करने से, पहले फ़ॉर्मैट का असर बदल जाएगा.
अहम जानकारी: कई फ़ॉर्मैटर में खास फ़ॉर्मैटिंग दिखाने के लिए एचटीएमएल टैग ज़रूरी होते हैं. अगर आपका विज़ुअलाइज़ेशन,allowHtml
विकल्प के साथ काम करता है, तो आपको इसे 'सही' पर सेट करना चाहिए.
डेटा पर लागू की गई असल फ़ॉर्मैटिंग उस जगह से ली जाती है जहां एपीआई लोड किया गया है. ज़्यादा जानकारी के लिए, खास जगह के साथ चार्ट लोड करना देखें.
ज़रूरी जानकारी: फ़ॉर्मैट करने वालों का इस्तेमाल सिर्फ़ DataTable
के साथ किया जा सकता है; इनका इस्तेमाल DataView
के साथ नहीं किया जा सकता (DataView
ऑब्जेक्ट सिर्फ़ पढ़ने के लिए हैं).
फ़ॉर्मैट करने वाले टूल का इस्तेमाल करने के सामान्य चरण यहां दिए गए हैं:
यहां, तारीख के कॉलम की तारीख की वैल्यू को लंबी तारीख के फ़ॉर्मैट में बदलने का उदाहरण दिया गया है, ताकि वे तारीख (1 जनवरी, 2009" का इस्तेमाल कर सकें):
var data = new google.visualization.DataTable(); data.addColumn('string', 'Employee Name'); data.addColumn('date', 'Start Date'); data.addRows(3); data.setCell(0, 0, 'Mike'); data.setCell(0, 1, new Date(2008, 1, 28)); data.setCell(1, 0, 'Bob'); data.setCell(1, 1, new Date(2007, 5, 1)); data.setCell(2, 0, 'Alice'); data.setCell(2, 1, new Date(2006, 7, 16)); // Create a formatter. // This example uses object literal notation to define the options. var formatter = new google.visualization.DateFormat({formatType: 'long'}); // Reformat our data. formatter.format(data, 1); // Draw our data var table = new google.visualization.Table(document.getElementById('dateformat_div')); table.draw(data, {showRowNumber: true});
ज़्यादातर फ़ॉर्मैट में ये दो तरीके दिखाए जाते हैं:
तरीका | जानकारी |
---|---|
google.visualization.formatter_name(options) |
कंस्ट्रक्टर, जहां formatter_name एक खास फ़ॉर्मैटर क्लास का नाम है.
// Object literal technique var formatter = new google.visualization.DateFormat({formatType: 'long', timeZone: -5}); // Equivalent property setting technique var options = new Object(); options['formatType'] = 'long'; options['timeZone'] = -5; var formatter = new google.visualization.DateFormat(options); |
format(data, colIndex) |
बताए गए कॉलम में डेटा को फिर से फ़ॉर्मैट करता है.
|
Google विज़ुअलाइज़ेशन API नीचे दिए गए फ़ॉर्मैट उपलब्ध कराता है:
फ़ॉर्मैट करने वाले का नाम | जानकारी |
---|---|
ऐरो फ़ॉर्मैट | यह विकल्प, अप या डाउन ऐरो को जोड़ता है. इससे पता चलता है कि सेल की वैल्यू, किसी खास वैल्यू से ज़्यादा है या कम. |
Barformat | एक रंगीन बार जोड़ता है, जिसकी दिशा और रंग बताता है कि सेल का मान किसी खास मान से ज़्यादा है या कम है. |
कलर फ़ॉर्मैट | वैल्यू को किसी खास रेंज में आने या न होने के हिसाब से, सेल को रंगता है. |
तारीख का फ़ॉर्मैट | "1 जनवरी, 2009," "1/1/09", और "1 जनवरी, 2009" समेत अलग-अलग तरीकों से तारीख या तारीख और समय वाली वैल्यू को फ़ॉर्मैट करता है. |
नंबर फ़ॉर्मैट | संख्या वाली वैल्यू के अलग-अलग पहलुओं को फ़ॉर्मैट करता है. |
पैटर्न फ़ॉर्मैट | एक ही लाइन में मौजूद सेल की वैल्यू को आर्बिट्रेरी टेक्स्ट के साथ किसी खास सेल में जोड़ता है. |
ऐरो फ़ॉर्मैट
किसी न्यूमेरिक सेल में अप या डाउन ऐरो जोड़ता है, जो इस बात पर निर्भर करता है कि वैल्यू तय आधार वैल्यू से ज़्यादा है या कम. अगर मूल वैल्यू के बराबर है, तो कोई ऐरो नहीं दिखाया जाता है.
विकल्प
ArrowFormat
इन विकल्पों के साथ काम करता है, जो कंस्ट्रक्टर को पास किए जाते हैं:
Option | जानकारी |
---|---|
base |
वह संख्या जो मूल वैल्यू को बताती है. इसका इस्तेमाल सेल वैल्यू से तुलना करने के लिए किया जाता है. अगर सेल की वैल्यू ज़्यादा है, तो सेल में हरा अप ऐरो शामिल होगा; अगर सेल की वैल्यू कम है, तो यह लाल रंग का डाउन ऐरो शामिल करेगा; अगर ऐसा है, तो कोई ऐरो नहीं होगा. |
नमूना कोड
var data = new google.visualization.DataTable(); data.addColumn('string', 'Department'); data.addColumn('number', 'Revenues Change'); data.addRows([ ['Shoes', {v:12, f:'12.0%'}], ['Sports', {v:-7.3, f:'-7.3%'}], ['Toys', {v:0, f:'0%'}], ['Electronics', {v:-2.1, f:'-2.1%'}], ['Food', {v:22, f:'22.0%'}] ]); var table = new google.visualization.Table(document.getElementById('arrowformat_div')); var formatter = new google.visualization.ArrowFormat(); formatter.format(data, 1); // Apply formatter to second column table.draw(data, {allowHtml: true, showRowNumber: true});
बारफ़ॉर्मैट
किसी संख्या वाली सेल में रंग वाला बार जोड़ता है, जिससे यह पता चलता है कि सेल की वैल्यू, किसी खास वैल्यू से ज़्यादा है या कम है.
विकल्प
BarFormat
इन विकल्पों के साथ काम करता है, जो कंस्ट्रक्टर को पास किए जाते हैं:
Option | उदाहरणजानकारी |
---|---|
base |
वह संख्या जो सेल के मान से तुलना करने के लिए मूल मान है. अगर सेल की वैल्यू ज़्यादा है, तो उसे आधार की दाईं ओर बनाया जाएगा और अगर वह कम है, तो उसे बाईं ओर बनाया जाएगा. डिफ़ॉल्ट वैल्यू 0 है. |
colorNegative |
बार के नेगेटिव वैल्यू वाले सेक्शन को दिखाने वाली स्ट्रिंग. संभावित वैल्यू 'लाल', 'हरे', और 'नीला' है. डिफ़ॉल्ट वैल्यू 'लाल' है. |
colorPositive |
बार के पॉज़िटिव वैल्यू सेक्शन का रंग दिखाने वाली स्ट्रिंग. वैल्यू 'लाल', 'हरे', और 'नीली' हो सकती हैं. डिफ़ॉल्ट रंग 'नीला' होता है. |
drawZeroLine |
बूलियन यह बताता है कि नेगेटिव वैल्यू मौजूद होने पर 1 पिक्सल की डार्क बेस लाइन बनाई जाए या नहीं. गहरे रंग की लाइन में, बार की विज़ुअल स्कैनिंग को बेहतर बनाने की सुविधा है. डिफ़ॉल्ट वैल्यू 'false' होती है. |
max |
बार श्रेणी के लिए अधिकतम संख्या. डिफ़ॉल्ट वैल्यू, टेबल में सबसे ज़्यादा वैल्यू होती है. |
min |
बार रेंज के लिए कम से कम संख्या. डिफ़ॉल्ट वैल्यू, टेबल में सबसे कम वैल्यू होती है. |
showValue |
अगर सही है, तो वैल्यू और बार दिखते हैं. अगर गलत है, तो सिर्फ़ बार दिखाता है. डिफ़ॉल्ट वैल्यू सही है. |
width |
हर बार की मोटाई, पिक्सल में. डिफ़ॉल्ट वैल्यू 100 है. |
नमूना कोड
var data = new google.visualization.DataTable(); data.addColumn('string', 'Department'); data.addColumn('number', 'Revenues'); data.addRows([ ['Shoes', 10700], ['Sports', -15400], ['Toys', 12500], ['Electronics', -2100], ['Food', 22600], ['Art', 1100] ]); var table = new google.visualization.Table(document.getElementById('barformat_div')); var formatter = new google.visualization.BarFormat({width: 120}); formatter.format(data, 1); // Apply formatter to second column table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});
रंग फ़ॉर्मैट
सेल की वैल्यू के आधार पर, किसी न्यूमेरिक सेल के फ़ोरग्राउंड या बैकग्राउंड के लिए रंग तय करता है. यह फ़ॉर्मैट एक असामान्य चीज़ है.
इसमें कंस्ट्रक्टर इसमें अपने विकल्प शामिल नहीं करता है. इसके बजाय, format()
को कॉल करने से पहले, आपको कलर रेंज जोड़ने के लिए, addRange()
या addGradientRange()
को जितनी बार चाहें उतनी बार कॉल करना चाहिए. रंग किसी भी मान्य एचटीएमएल फ़ॉर्मैट में बताए जा सकते हैं, जैसे कि "काला", "#000000" या "#000".
तरीके
ColorFormat
पर ये तरीके काम करते हैं:
तरीका | जानकारी |
---|---|
google.visualization.ColorFormat() |
कंस्ट्रक्टर. कोई तर्क नहीं लेता. |
addRange(from, to, color, bgcolor) |
सेल के मान के आधार पर, सेल का फ़ोरग्राउंड रंग और/या बैकग्राउंड कलर तय करता है. from—to रेंज में तय वैल्यू वाले किसी भी सेल को color और bgcolor असाइन किया जाएगा. यह जानना ज़रूरी है कि ऐसी रेंज शामिल नहीं की जा सकती जिसमें सभी वर्ण शामिल हों. इसलिए, अगर 1 से 1,000 के बीच की सीमा और 1,000 से दूसरी की रेंज बनाई जाती है, तो 1,000 से 1,000 की वैल्यू शामिल नहीं की जाएगी!
|
addGradientRange(from, to, color, fromBgColor,
toBgColor)
|
सेल के मान के हिसाब से, किसी रेंज से बैकग्राउंड का रंग तय करता है. कलर को स्केल किया जाता है, ताकि सेल की वैल्यू, रेंज के नीचे के रंग से लेकर ऊपरी सीमा के रंग तक हो. ध्यान दें कि यह तरीका, स्ट्रिंग वैल्यू की तुलना नहीं कर सकता, जैसा कि
|
format(dataTable, columnIndex) |
बताए गए कॉलम में फ़ॉर्मैटिंग लागू करने के लिए मानक format() तरीका. |
नमूना कोड
var data = new google.visualization.DataTable(); data.addColumn('string', 'Department'); data.addColumn('number', 'Revenues'); data.addRows([ ['Shoes', 10700], ['Sports', -15400], ['Toys', 12500], ['Electronics', -2100], ['Food', 22600], ['Art', 1100] ]); var table = new google.visualization.Table(document.getElementById('colorformat_div')); var formatter = new google.visualization.ColorFormat(); formatter.addRange(-20000, 0, 'white', 'orange'); formatter.addRange(20000, null, 'red', '#33ff33'); formatter.format(data, 1); // Apply formatter to second column table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});
तारीख फ़ॉर्मैट
JavaScript Date
मान को कई तरह से फ़ॉर्मैट करता है, जिसमें "1 जनवरी 2016," "1/1/16" और "1 जनवरी 2016" शामिल हैं.
विकल्प
DateFormat
इन विकल्पों के साथ काम करता है, जो कंस्ट्रक्टर को पास किए जाते हैं:
Option | जानकारी |
---|---|
formatType |
तारीख के लिए एक तेज़ फ़ॉर्मैटिंग विकल्प. नीचे दी गई स्ट्रिंग वैल्यू का इस्तेमाल किया जा सकता है, जो 28 फ़रवरी, 2016 के फ़ॉर्मैट में हैं:
|
pattern |
वैल्यू पर लागू करने के लिए एक कस्टम फ़ॉर्मैट पैटर्न, जो ICU की तारीख और समय के फ़ॉर्मैट की तरह होता है.
उदाहरण के लिए:
|
timeZone |
समय क्षेत्र जिसमें तारीख का मान दिखाना है. यह संख्या की वैल्यू है, जो जीएमटी +
समय क्षेत्रों की यह संख्या बताती है (नेगेटिव हो सकती है). तारीख ऑब्जेक्ट डिफ़ॉल्ट रूप से उस कंप्यूटर के समय क्षेत्र के साथ बनाया जाता है जिस पर वे बनाए जाते हैं; इस विकल्प का इस्तेमाल उस मान को अलग-अलग समय क्षेत्र में दिखाने के लिए किया जाता है. उदाहरण के लिए, अगर आपने ग्रीनविच, इंग्लैंड में मौजूद किसी कंप्यूटर पर
शाम 5 बजे का 'तारीख' ऑब्जेक्ट बनाया है और उस समय क्षेत्र को -5
(options['timeZone'] = -5 या अमेरिका के पूर्वी पैसिफ़िक समय) के लिए तय किया है, तो
वैल्यू को दोपहर 12 बजे दिखाया जाएगा.
|
तरीके
DateFormat
पर ये तरीके काम करते हैं:
तरीका | जानकारी |
---|---|
google.visualization.DateFormat(options) |
कंस्ट्रक्टर. ज़्यादा जानकारी के लिए, ऊपर मौजूद विकल्प सेक्शन देखें. |
format(dataTable, columnIndex) |
तय किए गए कॉलम में फ़ॉर्मैटिंग लागू करने के लिए, स्टैंडर्ड format() तरीका. |
formatValue(value) |
किसी वैल्यू के फ़ॉर्मैट की गई वैल्यू को दिखाता है.
इस तरीके से |
नमूना कोड
function drawDateFormatTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Employee Name'); data.addColumn('date', 'Start Date (Long)'); data.addColumn('date', 'Start Date (Medium)'); data.addColumn('date', 'Start Date (Short)'); data.addRows([ ['Mike', new Date(2008, 1, 28, 0, 31, 26), new Date(2008, 1, 28, 0, 31, 26), new Date(2008, 1, 28, 0, 31, 26)], ['Bob', new Date(2007, 5, 1, 0), new Date(2007, 5, 1, 0), new Date(2007, 5, 1, 0)], ['Alice', new Date(2006, 7, 16), new Date(2006, 7, 16), new Date(2006, 7, 16)] ]); // Create three formatters in three styles. var formatter_long = new google.visualization.DateFormat({formatType: 'long'}); var formatter_medium = new google.visualization.DateFormat({formatType: 'medium'}); var formatter_short = new google.visualization.DateFormat({formatType: 'short'}); // Reformat our data. formatter_long.format(data, 1); formatter_medium.format(data,2); formatter_short.format(data, 3); // Draw our data var table = new google.visualization.Table(document.getElementById('dateformat_div')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); }
तारीख के पैटर्न के बारे में ज़्यादा जानकारी
यहां बताया गया है कि कौनसे पैटर्न इस्तेमाल किए जा सकते हैं:
पैटर्न, ICU की तारीख और समय के फ़ॉर्मैट से मिलते-जुलते हैं, लेकिन फ़िलहाल ये पैटर्न काम नहीं करते हैं: A D F g u w W पैटर्न से
टकराव से बचने के लिए, आउटपुट में दिखने वाले लिटरल टेक्स्ट को सिंगल कोट से घिरा होना चाहिए, सिर्फ़ एक कोट नहीं, जैसे कि दोगुने. जैसे,
"K 'o''clock.'"
.
पैटर्न | जानकारी | आउटपुट का उदाहरण |
---|---|---|
GG | पुराने डिज़ाइन वाला. | "विज्ञापन" |
yy या yyyy | वर्ष. | 1996 |
M |
साल का महीना. जनवरी के लिए:
|
"जुलाई" "07" |
दिन | महीने का दिन. ज़्यादा 'd' वैल्यू के आगे शून्य दिखेंगे. | 10 |
घं° | 12 घंटे के स्केल में घंटा. ज़्यादा 'h' मानों की शुरुआत में शून्य दिखेंगे. | 12 |
हाई | 24 घंटे के स्केल में घंटा. अतिरिक्त Hk के वैल्यू की शुरुआत में शून्य दिखेंगे. | 0 |
m | घंटे में. ज़्यादा 'M' वैल्यू के आगे शून्य लगाए जाएंगे. | 30 |
s | सेकंड में. एक्स्ट्रा की वैल्यू की शुरुआत में शून्य दिखेंगे. | 55 |
एस | फ़्रैक्शनल सेकंड. एक्स्ट्रा 'S' वैल्यू को दाईं ओर शून्य से डाला जाएगा. | 978 |
ई |
हफ़्ते का दिन. "मंगलवार" के लिए मिले नतीजे:
|
"मंगल" "मंगलवार" |
आ | AM/PM | "पीएम" |
k | दिन में घंटा (1~24). ज़्यादा 'k' वैल्यू वाली शुरुआत के नतीजे शून्य होंगे. | 24 |
हज़ार | AM/PM में समय (0~11). ज़्यादा 'k' वैल्यू वाली शुरुआत के नतीजे शून्य होंगे. | 0 |
z | टाइम ज़ोन. समय क्षेत्र 5 के लिए, "UTC+5" देता है |
"यूटीसी+5" |
Z |
RFC 822 फ़ॉर्मैट में समय क्षेत्र. समय क्षेत्र के लिए -5: Z, ZZ, ZZZ प्रॉडक्ट -0500 ZZZZ और अन्य प्रॉडक्ट "GMT -05:00" |
"-0800 को" "जीएमटी -05:00" |
v | समय क्षेत्र (सामान्य) |
"Etc/GMT-5" |
' | टेक्स्ट के लिए एस्केप | 'तारीख=' |
'' | सिंगल कोट | ''वाई |
नंबर फ़ॉर्मैट
यह बताता है कि न्यूमेरिक कॉलम को कैसे फ़ॉर्मैट किया जाना चाहिए. फ़ॉर्मैट करने के विकल्पों में, प्रीफ़िक्स सिंबल (जैसे कि डॉलर का निशान) या विराम चिह्न का इस्तेमाल, हज़ार मार्कर के तौर पर किया जा सकता है.
विकल्प
NumberFormat
इन विकल्पों के साथ काम करता है, जो कंस्ट्रक्टर को पास किए जाते हैं:
Option | जानकारी |
---|---|
decimalSymbol |
दशमलव मार्कर के रूप में इस्तेमाल किया जाने वाला वर्ण. डिफ़ॉल्ट रूप से, एक बिंदु (डॉट) होता है. |
fractionDigits |
वह संख्या जो दशमलव के बाद दिखाए जाने वाले अंकों की संख्या बताती है. डिफ़ॉल्ट संख्या 2 होती है. संख्या से ज़्यादा अंक डालने पर, छोटी वैल्यू के लिए शून्य दिखेंगे. छोटी की गई वैल्यू को राउंड अप कर दिया जाएगा (5 को राउंड अप किया जाएगा). |
groupingSymbol |
दशमलव के बाईं ओर अंकों का तीन में समूह बनाने के लिए इस्तेमाल किया जाने वाला वर्ण. डिफ़ॉल्ट वैल्यू, कॉमा ({0/}) होती है. |
negativeColor |
नेगेटिव वैल्यू के लिए टेक्स्ट का रंग. कोई डिफ़ॉल्ट वैल्यू नहीं है. वैल्यू कोई भी एचटीएमएल कलर वैल्यू हो सकती है, जैसे कि "लाल" या "#FF0000". |
negativeParens |
बूलियन, जहां सही बताता है कि नेगेटिव वैल्यू को ब्रैकेट से घिरा होना चाहिए. यह डिफ़ॉल्ट रूप से 'सही' पर सेट होती है. |
pattern |
फ़ॉर्मैट स्ट्रिंग. दिए जाने पर,
फ़ॉर्मैट स्ट्रिंग,
ICU पैटर्न सेट
का एक सबसेट है.
उदाहरण के लिए, |
prefix |
वैल्यू के लिए स्ट्रिंग प्रीफ़िक्स, जैसे कि "$". |
suffix |
वैल्यू के लिए एक स्ट्रिंग सफ़िक्स, जैसे कि "%". |
तरीके
NumberFormat
पर ये तरीके काम करते हैं:
तरीका | जानकारी |
---|---|
google.visualization.NumberFormat(options) |
कंस्ट्रक्टर. ज़्यादा जानकारी के लिए, ऊपर मौजूद विकल्प सेक्शन देखें. |
format(dataTable, columnIndex) |
बताए गए कॉलम में फ़ॉर्मैटिंग लागू करने के लिए मानक format() तरीका. |
formatValue(value) |
किसी वैल्यू के फ़ॉर्मैट की गई वैल्यू को दिखाता है. इस तरीके से |
नमूना कोड
var data = new google.visualization.DataTable(); data.addColumn('string', 'Department'); data.addColumn('number', 'Revenues'); data.addRows([ ['Shoes', 10700], ['Sports', -15400], ['Toys', 12500], ['Electronics', -2100], ['Food', 22600], ['Art', 1100] ]); var table = new google.visualization.Table(document.getElementById('numberformat_div')); var formatter = new google.visualization.NumberFormat( {prefix: '$', negativeColor: 'red', negativeParens: true}); formatter.format(data, 1); // Apply formatter to second column table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});
पैटर्न फ़ॉर्मैट
इसकी मदद से, आप तय किए गए कॉलम की वैल्यू को एक ही कॉलम में, मनमाने टेक्स्ट के साथ मर्ज कर सकते हैं. उदाहरण के लिए, अगर आपके पास पहले नाम के लिए एक कॉलम और उपनाम के लिए एक कॉलम है, तो आपके पास एक आखिरी कॉलम है जिसमें {last name}, {first name} हो सकता है. यह फ़ॉर्मैटर, कंस्ट्रक्टर और format()
तरीके के नियमों का पालन नहीं करता है. निर्देशों के लिए नीचे दिए गए तरीके वाला सेक्शन देखें.
तरीके
PatternFormat
पर ये तरीके काम करते हैं:
तरीका | जानकारी |
---|---|
google.visualization.PatternFormat(pattern) |
कंस्ट्रक्टर. विकल्प ऑब्जेक्ट नहीं लेता. इसके बजाय, यह स्ट्रिंग pattern पैरामीटर की मदद लेती है. यह एक स्ट्रिंग है, जो यह बताती है कि किस कॉलम की वैल्यू को डेस्टिनेशन कॉलम में डालना है. साथ ही, इसमें यह भी बताया जाता है कि उसे किस कॉलम में डालना है. दूसरे यूआरएल से वैल्यू जोड़ने के लिए, अपनी स्ट्रिंग में प्लेसहोल्डर जोड़ें. प्लेसहोल्डर
नमूना कोडनीचे दिए गए उदाहरण में, एक पैटर्न के लिए एक कंस्ट्रक्टर को दिखाया गया है जो एक
ऐंकर एलिमेंट बनाता है. इसमें, var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>'); |
format(dataTable, srcColumnIndices,
opt_dstColumnIndex)
|
कुछ अतिरिक्त पैरामीटर के साथ, स्टैंडर्ड फ़ॉर्मैटिंग कॉल:
टेबल के बाद फ़ॉर्मैटिंग के उदाहरण देखें. |
यहां, चार कॉलम वाली टेबल के लिए कुछ उदाहरण और आउटपुट दिए गए हैं.
Row before formatting (4 columns, last is blank): John | Paul | Jones | [empty] var formatter = new google.visualization.PatternFormat("{0} {1} {2}"); formatter.format(data, [0,1,2], 3); Output: John | Paul | Jones | John Paul Jones var formatter = new google.visualization.PatternFormat("{1}, {0}"); formatter.format(data, [0,2], 3); Output: John | Paul | Jones | Jones, John
नमूना कोड
यहां दिए गए उदाहरण में, ईमेल पता बनाने के लिए दो कॉलम के डेटा को जोड़ने का तरीका बताया गया है. यह मूल सोर्स कॉलम को छिपाने के लिए, DataView ऑब्जेक्ट का इस्तेमाल करता है:
var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('string', 'Email'); data.addRows([ ['John Lennon', 'john@beatles.co.uk'], ['Paul McCartney', 'paul@beatles.co.uk'], ['George Harrison', 'george@beatles.co.uk'], ['Ringo Starr', 'ringo@beatles.co.uk'] ]); var table = new google.visualization.Table(document.getElementById('patternformat_div')); var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>'); // Apply formatter and set the formatted value of the first column. formatter.format(data, [0, 1]); var view = new google.visualization.DataView(data); view.setColumns([0]); // Create a view with the first column only. table.draw(view, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});
GadgetHelper
विज़ुअल लिखने का काम आसान बनाने के लिए हेल्पर क्लास, जो Google विज़ुअलाइज़ेशन एपीआई का इस्तेमाल करती है.
निर्माता
google.visualization.GadgetHelper()
तरीके
तरीका | सामान लौटाने की वैल्यू | जानकारी |
---|---|---|
createQueryFromPrefs(prefs) |
google.visualization.Query |
स्टैटिक. google.visualization.Query का एक नया इंस्टेंस बनाएं और
गैजेट की प्राथमिकताओं के हिसाब से इसकी प्रॉपर्टी सेट करें. पैरामीटर prefs का टाइप _IG_Prefs है
|
validateResponse(response) |
बूलियन |
स्टैटिक. पैरामीटर response , google.visualization.QueryResponse जैसा है. जवाब में डेटा होने पर,
true दिखाता है. अगर क्वेरी एक्ज़ीक्यूट नहीं हो पाती और जवाब में डेटा नहीं होता, तो false दिखाता है. अगर कोई गड़बड़ी होती है, तो इस तरीके से गड़बड़ी का मैसेज दिखता है.
|
क्वेरी क्लास
Google स्प्रेडशीट जैसे बाहरी डेटा सोर्स पर डेटा भेजने के लिए, नीचे दिए गए ऑब्जेक्ट उपलब्ध हैं.
- क्वेरी - आउटगोइंग डेटा अनुरोध को रैप करता है.
- QueryResponse - डेटा सोर्स से मिलने वाले रिस्पॉन्स को मैनेज करता है.
क्वेरी
किसी डेटा सोर्स को भेजी गई क्वेरी को दिखाता है.
निर्माता
google.visualization.Query(dataSourceUrl, opt_options)
पैरामीटर
- dataSourceUrl
- क्वेरी भेजने के लिए [ज़रूरी है, स्ट्रिंग] यूआरएल. Google स्प्रेडशीट के लिए, चार्ट और स्प्रेडशीट दस्तावेज़ देखें.
- opt_options
-
[वैकल्पिक, ऑब्जेक्ट] अनुरोध के विकल्पों का मैप. ध्यान दें: अगर आप सीमित डेटा सोर्स को ऐक्सेस कर रहे हैं, तो आपको इस पैरामीटर का इस्तेमाल नहीं करना चाहिए. इस्तेमाल की जा सकने वाली प्रॉपर्टी यहां दी गई हैं:
-
sendमेथड - [ज़रूरी नहीं, स्ट्रिंग] यह बताता है कि क्वेरी भेजने के लिए कौनसे तरीके इस्तेमाल किए जाएं. स्ट्रिंग के लिए इनमें से कोई एक वैल्यू चुनें:
- 'xhr' - XmlHttpRequest का इस्तेमाल करके, क्वेरी भेजें.
- 'scriptInjection' - स्क्रिप्ट इंजेक्शन का इस्तेमाल करके क्वेरी भेजें.
-
'makeRequest' - [सिर्फ़ उन गैजेट के लिए उपलब्ध है जो अब उपलब्ध नहीं हैं] क्वेरी को गैजेट एपीआई के इस्तेमाल से भेजें
makeRequest()
तरीका. अगर बताया गया हो, तो आपको makeRequestParams भी तय करना चाहिए. -
'auto' - डेटा सोर्स यूआरएल के
tqrt
यूआरएल पैरामीटर से बताए गए तरीके का इस्तेमाल करें.tqrt
में ये वैल्यू हो सकती हैं: 'xhr', 'scriptInjection' या 'makeRequest'. अगरtqrt
मौजूद नहीं है या उसकी वैल्यू अमान्य है, तो समान डोमेन वाले अनुरोधों के लिए डिफ़ॉल्ट रूप से 'xhr' और क्रॉस-डोमेन अनुरोधों के लिए 'scriptInjection' होगा.
-
makeRequestParams - [ऑब्जेक्ट]
makeRequest()
क्वेरी के लिए पैरामीटर का मैप. इसका इस्तेमाल सिर्फ़ तब किया जाता है, जब sendMethod 'makeRequest' होता है.
-
sendमेथड - [ज़रूरी नहीं, स्ट्रिंग] यह बताता है कि क्वेरी भेजने के लिए कौनसे तरीके इस्तेमाल किए जाएं. स्ट्रिंग के लिए इनमें से कोई एक वैल्यू चुनें:
तरीके
तरीका | सामान लौटाने की वैल्यू | जानकारी |
---|---|---|
abort() |
कभी नहीं |
setRefreshInterval() के साथ शुरू हुई ऑटोमेटेड क्वेरी को भेजना बंद कर देता है.
|
setRefreshInterval(seconds)
|
कभी नहीं |
यह नीति, अगर आप इस तरीके का इस्तेमाल करते हैं, तो
इस तरीके को रद्द करने के लिए, फिर से शून्य (डिफ़ॉल्ट) का इस्तेमाल करें या
|
setTimeout(seconds) |
कभी नहीं |
टाइम आउट गड़बड़ी से पहले, डेटा सोर्स के जवाब का इंतज़ार करने के लिए, सेकंड की संख्या सेट करता है. seconds , शून्य से बड़ी संख्या है. टाइम आउट होने की डिफ़ॉल्ट अवधि 30 सेकंड होती है. अगर यह तरीका इस्तेमाल किया जाता है, तो send तरीके को कॉल करने से पहले, इसे इस्तेमाल करना ही चाहिए.
|
setQuery(string) |
कभी नहीं |
क्वेरी स्ट्रिंग सेट करता है. string पैरामीटर की वैल्यू एक
मान्य क्वेरी होनी चाहिए. अगर send यह तरीका इस्तेमाल किया जाता है, तो पहले इसका इस्तेमाल किया जाना चाहिए.
क्वेरी की भाषा के बारे में ज़्यादा जानें.
|
send(callback) |
कभी नहीं |
क्वेरी को डेटा सोर्स में भेजता है. callback एक ऐसा फ़ंक्शन होना चाहिए, जिसे डेटा
सोर्स के जवाब देने पर कॉल किया जाए. कॉलबैक फ़ंक्शन को google.visualization.QueryResponse टाइप का एक पैरामीटर मिलेगा.
|
क्वेरी रिस्पॉन्स
डेटा सोर्स से मिली क्वेरी के रिस्पॉन्स को दिखाता है. इस क्लास का एक उदाहरण, कॉलबैक फ़ंक्शन में एक आर्ग्युमेंट के तौर पर पास किया जाता है. यह फ़ंक्शन Query.send को कॉल करते समय सेट किया गया था.
तरीके
तरीका | सामान लौटाने की वैल्यू | जानकारी |
---|---|---|
getDataTable() |
डेटा टेबल |
डेटा सोर्स से मिली डेटा टेबल दिखाता है. अगर क्वेरी को
लागू नहीं किया जाता और कोई डेटा नहीं दिखता, तो null दिखाता है.
|
getDetailedMessage() |
स्ट्रिंग | फ़ेल होने वाली क्वेरी के लिए गड़बड़ी का पूरा मैसेज दिखाता है. अगर क्वेरी एक्ज़ीक्यूट हो जाती है, तो इस तरीके से एक खाली स्ट्रिंग मिलती है. दिया गया मैसेज एक मैसेज है, जो डेवलपर के लिए है और इसमें तकनीकी जानकारी शामिल हो सकती है. जैसे, 'कॉलम {salary} मौजूद नहीं है'. |
getMessage() |
स्ट्रिंग | फ़ेल होने वाली क्वेरी के लिए, एक छोटा सा गड़बड़ी का मैसेज दिखता है. अगर क्वेरी लागू होती है, तो इस तरीके से खाली स्ट्रिंग दिखती है. मिला मैसेज एक छोटा मैसेज होता है. यह असली उपयोगकर्ताओं के लिए होता है. उदाहरण के लिए, 'अमान्य क्वेरी' या 'ऐक्सेस अस्वीकार किया गया'. |
getReasons() |
स्ट्रिंग का कलेक्शन |
और प्रविष्टियों की शून्य श्रेणी देता है. हर एंट्री एक छोटी स्ट्रिंग होती है. इसमें गड़बड़ी या चेतावनी कोड होता है, जो क्वेरी को ट्रिगर करते समय उठाया जाता है. संभावित कोड:
|
hasWarning() |
बूलियन | अगर क्वेरी को लागू करने पर कोई चेतावनी मिलती है, तो true दिखाता है. |
isError() |
बूलियन |
अगर क्वेरी एक्ज़ीक्यूट नहीं हो पाती है, तो true दिखाता है और रिस्पॉन्स में कोई डेटा टेबल नहीं होता है. अगर क्वेरी एक्ज़ीक्यूशन हो गई है और जवाब में डेटा टेबल मौजूद है, तो <false> दिखाता है.
|
गड़बड़ी दिखाना
अपने उपयोगकर्ताओं को कस्टम गड़बड़ी के मैसेज दिखाने के लिए एपीआई कई फ़ंक्शन देता है. इन
फ़ंक्शन का इस्तेमाल करने के लिए, पेज पर कंटेनर एलिमेंट (आम तौर पर
<div>
) उपलब्ध कराएं, जिसमें एपीआई एक फ़ॉर्मैट वाला गड़बड़ी का मैसेज दिखाएगा. यह कंटेनर या तो विज़ुअलाइज़ेशन कंटेनर एलिमेंट हो सकता है या सिर्फ़ गड़बड़ियों के लिए एक कंटेनर हो सकता है. अगर विज़ुअलाइज़ेशन में एलिमेंट शामिल है, तो गड़बड़ी का मैसेज, विज़ुअलाइज़ेशन के ऊपर दिखेगा.
इसके बाद, गड़बड़ी के मैसेज को दिखाने या हटाने के लिए, नीचे दिए गए फ़ंक्शन को कॉल करें.
सभी फ़ंक्शन, नेमस्पेस google.visualization.errors
में स्टैटिक फ़ंक्शन हैं.
कई विज़ुअलाइज़ेशन एक गड़बड़ी वाला इवेंट दिखा सकते हैं. इस बारे में ज़्यादा जानने के लिए, गड़बड़ी वाला इवेंट देखें.
क्वेरी रैपर के उदाहरण में, कस्टम गड़बड़ी का एक उदाहरण देखा जा सकता है.
फ़ंक्शन | सामान लौटाने की वैल्यू | जानकारी |
---|---|---|
addError(container, message, opt_detailedMessage,
opt_options)
|
बनाए गए गड़बड़ी ऑब्जेक्ट की पहचान करने वाली स्ट्रिंग आईडी वैल्यू. यह पेज पर यूनीक वैल्यू होती है. इसका इस्तेमाल गड़बड़ी को हटाने या इसमें शामिल एलिमेंट ढूंढने के लिए किया जा सकता है. |
बताए गए पेज के एलिमेंट में गड़बड़ी का डिसप्ले ब्लॉक जोड़ता है. ऐसा करने से, टेक्स्ट और फ़ॉर्मैटिंग के बारे में पता चलता है.
|
addErrorFromQueryResponse(container, response) |
स्ट्रिंग आईडी की वैल्यू, जो बनाए गए गड़बड़ी ऑब्जेक्ट की पहचान करती है. अगर रिस्पॉन्स में कोई गड़बड़ी नहीं मिलती है, तो कोई वैल्यू नहीं दिखती. यह पेज पर मौजूद यूनीक वैल्यू होती है. इसका इस्तेमाल, गड़बड़ी को हटाने या इसमें मौजूद किसी एलिमेंट को ढूंढने के लिए किया जा सकता है. |
इस तरीके में क्वेरी जवाब और गड़बड़ी के मैसेज वाला कंटेनर पास करें: अगर क्वेरी का जवाब
क्वेरी की गड़बड़ी दिखाता है, तो बताए गए पेज एलिमेंट में गड़बड़ी का मैसेज दिखाता है. अगर क्वेरी का जवाब शून्य है, तो मैथ में JavaScript की गड़बड़ी मिलेगी. गड़बड़ी दिखाने के लिए, अपने क्वेरी हैंडलर में मिले QueryResponse को यह मैसेज भेजें. इससे डिसप्ले का स्टाइल उस तरह के लिए भी सेट हो पाएगा जो इस तरह की हो (गड़बड़ी
या चेतावनी, ठीक
|
removeError(id) |
बूलियन: गड़बड़ी होने पर, 'सही'; नहीं तो 'गलत'. |
पेज से आईडी के ज़रिए बताई गई गड़बड़ी को हटा देता है.
|
removeAll(container) |
कभी नहीं |
किसी दिए गए कंटेनर से सभी गड़बड़ी ब्लॉक हटाता है. अगर बताया गया कंटेनर मौजूद नहीं है, तो इसकी वजह से एक गड़बड़ी होगी.
|
getContainer(errorId) |
गड़बड़ियों की जानकारी देने वाले DOM एलिमेंट को हैंडल करें या अगर वह नहीं मिला है, तो कोई वैल्यू न डालें. |
errorID में बताई गई गड़बड़ी को होल्ड करने वाले कंटेनर एलिमेंट के हैंडल पर ले जाता है.
|
इवेंट
ज़्यादातर विज़ुअलाइज़ेशन, इवेंट को ट्रिगर करके यह दिखाते हैं कि कुछ हुआ है. चार्ट का उपयोगकर्ता होने के नाते, अक्सर आपको ये इवेंट सुनने होंगे. अपने विज़ुअलाइज़ेशन को कोड करने पर, आपको खुद भी ये इवेंट ट्रिगर करने होंगे.
इन तरीकों का इस्तेमाल करके, डेवलपर इवेंट सुन सकते हैं. साथ ही, मौजूदा इवेंट हैंडलर हटा सकते हैं या विज़ुअलाइज़ेशन में मौजूद इवेंट ट्रिगर कर सकते हैं.
- google.visualization.events.addListener() और google.visualization.events.addOneTimeListener() इवेंट को सुनें.
- google.visualization.events.removeListener() किसी मौजूदा लिसनर को हटा देता है
- google.visualization.events.removeAllListeners() किसी खास चार्ट के लिए, सभी सुनने वालों को हटा देता है
- google.visualization.events.trigger() इवेंट को सक्रिय करता है.
addListener()
अपने पेज पर होस्ट किए गए विज़ुअलाइज़ेशन से सक्रिय होने वाले इवेंट पाने के लिए, इस तरीके को कॉल करें. आपको यह बताना होगा कि इवेंट के कौनसे आर्ग्युमेंट, अगर कोई हैं, हैंडलिंग फ़ंक्शन में पास किए जाएंगे.
google.visualization.events.addListener(source_visualization, event_name, handling_function)
- सोर्स_विज़ुअलाइज़ेशन
- सोर्स विज़ुअलाइज़ेशन इंस्टेंस का हैंडल.
- event_name
- जिस इवेंट की स्ट्रिंग को सुनना है उसका नाम. विज़ुअलाइज़ेशन में इस बात का रिकॉर्ड होना चाहिए कि वह कौनसे इवेंट में थ्रो करता है.
- handling_function की सुविधा
- सोर्स JavaScript के विज़ुअलाइज़ेशन के ज़रिए, event_name इवेंट को चालू करने पर लोकल JavaScript फ़ंक्शन का नाम. किसी भी आर्ग्युमेंट आर्ग्युमेंट को, हैंडलिंग फ़ंक्शन के तौर पर पास किया जाएगा.
लौटाए गए सामान
नए लिसनर के लिए लिसनर हैंडलर. हैंडलर की मदद से, बाद में इस लिसनर को हटाया जा सकता है. इसके लिए, google.visualization.events.removeListener() को कॉल करें.
उदाहरण
इवेंट चुनने के लिए रजिस्ट्रेशन का एक उदाहरण यहां दिया गया है
var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, options); google.visualization.events.addListener(table, 'select', selectHandler); function selectHandler() { alert('A table row was selected'); }
addOneTimeListener()
यह addListener()
की तरह है, लेकिन इसे उन इवेंट के लिए बनाया गया है जिन्हें सिर्फ़ एक बार सुना जाना चाहिए. इवेंट के बाद के थ्रो, हैंडलिंग फ़ंक्शन शुरू नहीं करेंगे.
यह एक उदाहरण है, जब यह फ़ायदेमंद होता है: हर ड्रॉ की वजह से ready
इवेंट होता है. अपना कोड एक्ज़ीक्यूट करने के लिए, अगर आप सिर्फ़ पहले ready
चाहते हैं, तो addListener
के बजाय, आपको addOneTimeListener
का इस्तेमाल करना होगा.
removeListener()
मौजूदा इवेंट लिसनर का रजिस्ट्रेशन रद्द करने के लिए यह तरीका अपनाएं.
google.visualization.events.removeListener(listener_handler)
- listener_handler
- सुनने वाला हैंडलर, जिसे हटाया जाना है, जैसा कि google.visualization.events.addListener().
removeAllListeners()
किसी खास विज़ुअलाइज़ेशन इंस्टेंस के सभी इवेंट लिसनर का रजिस्ट्रेशन रद्द करने के लिए, इस तरीके का इस्तेमाल करें.
google.visualization.events.removeAllListeners(source_visualization)
- सोर्स_विज़ुअलाइज़ेशन
- सोर्स विज़ुअलाइज़ेशन के उस इंस्टेंस का हैंडल जिससे इवेंट को सुनने वाले सभी लोगों को हटाया जाना चाहिए.
ट्रिगर()
विज़ुअलाइज़ेशन को लागू करने वाले लोग कहते हैं. किसी आर्बिट्रेरी नाम और वैल्यू के सेट वाला इवेंट सक्रिय करने के लिए, अपने विज़ुअलाइज़ेशन से इस तरीके का इस्तेमाल करें.
google.visualization.events.trigger(source_visualization, event_name, event_args)
- सोर्स_विज़ुअलाइज़ेशन
-
सोर्स विज़ुअलाइज़ेशन इंस्टेंस का हैंडल. अगर आप भेजने की विज़ुअलाइज़ेशन के बताए गए तरीके से इस फ़ंक्शन को कॉल कर रहे हैं, तो आप
this
कीवर्ड में पास कर सकते हैं. - event_name
- इवेंट को कॉल करने के लिए स्ट्रिंग का नाम. आप अपनी पसंद का कोई भी स्ट्रिंग मान चुन सकते हैं.
- event_args
- [वैकल्पिक] पैसे पाने के तरीके को पास करने के लिए नाम/वैल्यू पेयर का मैप. उदाहरण के लिए:{message: "नमस्ते,!", स्कोर: 10, नाम: "फ़्रेड"}. अगर किसी इवेंट की ज़रूरत न हो, तो कोई वैल्यू नहीं डाली जा सकती. रिसीवर को इस पैरामीटर के लिए शून्य की वैल्यू सेट करनी होगी.
उदाहरण
यहां एक विज़ुअलाइज़ेशन का उदाहरण है, जिसमें ऑनक्लिक मैथड को कॉल करने पर "चुनें" नाम का तरीका इस्तेमाल किया जाता है. यह कोई वैल्यू नहीं लौटाता है.
MyVisualization.prototype.onclick = function(rowIndex) { this.highlightRow(this.selectedRow, false); // Clear previous selection this.highlightRow(rowIndex, true); // Highlight new selection // Save the selected row index in case getSelection is called. this.selectedRow = rowIndex; // Trigger a select event. google.visualization.events.trigger(this, 'select', null); }
स्टैंडर्ड विज़ुअलाइज़ेशन के तरीके और प्रॉपर्टी
हर विज़ुअलाइज़ेशन को ज़रूरी और वैकल्पिक तरीकों और प्रॉपर्टी के नीचे दिया गया सेट दिखाना चाहिए. हालांकि, ध्यान दें कि इन मानकों को लागू करने के लिए किसी भी तरह की जांच नहीं की जाती है. इसलिए, आपको हर विज़ुअलाइज़ेशन के लिए दस्तावेज़ पढ़ना चाहिए.
- कंस्ट्रक्टर
- ड्रॉ
- getAction() [वैकल्पिक]
- getSelection() [वैकल्पिक]
- removeAction() [ज़रूरी नहीं]
- setAction() [ज़रूरी नहीं]
- setSelection() [ज़रूरी नहीं]
ध्यान दें: ये विज़ुअलाइज़ेशन, विज़ुअलाइज़ेशन के नेमस्पेस में हैं, न कि google.विज़ुअलाइज़ेशन नेमस्पेस.
कंस्ट्रक्टर
कंस्ट्रक्टर के पास आपकी विज़ुअलाइज़ेशन क्लास का नाम होना चाहिए और उस क्लास का इंस्टेंस देना चाहिए.
visualization_class_name(dom_element)
- dom_एलिमेंट
- उस DOM एलिमेंट का पॉइंटर जहां विज़ुअलाइज़ेशन को एम्बेड किया जाना चाहिए.
उदाहरण
var org = new google.visualization.OrgChart(document.getElementById('org_div'));
ड्रॉ()
पेज पर विज़ुअलाइज़ेशन दिखाता है. परदे के पीछे यह सर्वर से ग्राफ़िक ला सकता है या लिंक किए गए विज़ुअलाइज़ेशन कोड का इस्तेमाल करके पेज पर ग्राफ़िक बना सकता है. जब भी डेटा या विकल्प बदलें, तब आपको इस तरीके से कॉल करना चाहिए. ऑब्जेक्ट को कंस्ट्रक्टर में पास किए गए DOM एलिमेंट में ड्रॉ किया जाना चाहिए.
draw(data[, options])
- डेटा
-
DataTable
याDataView
के पास डेटा है, जो चार्ट बनाने के लिए इस्तेमाल किया जाता है. चार्ट सेDataTable
को निकालने का कोई स्टैंडर्ड तरीका नहीं है. - विकल्प
-
[वैकल्पिक] पसंद के मुताबिक विकल्पों के नाम/वैल्यू पेयर का मैप. उदाहरण के लिए, लंबाई और चौड़ाई, बैकग्राउंड के रंग, और कैप्शन. विज़ुअलाइज़ेशन के दस्तावेज़ में, उपलब्ध विकल्पों की सूची होनी चाहिए. साथ ही, अगर आप इस पैरामीटर के बारे में कुछ नहीं बताते हैं, तो उन्हें डिफ़ॉल्ट विकल्पों के साथ भी काम करना चाहिए.
विकल्प मैप में पास करने के लिए JavaScript ऑब्जेक्ट लिटरल सिंटैक्स का इस्तेमाल किया जा सकता है: उदाहरण के लिए,
{x:100, y:200, title:'An Example'}
उदाहरण
chart.draw(myData, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
getAction()
यह सुविधा, टूलटिप वाले विज़ुअलाइज़ेशन से दिखती है. साथ ही, यह टूलटिप कार्रवाइयों की अनुमति देती है.
अनुरोध की गई actionID
के साथ टूलटिप कार्रवाई ऑब्जेक्ट दिखाता है.
उदाहरण:
// Returns the action object with the ID 'alertAction'. chart.getAction('alertAction');
getSelection()
यह विकल्प के तौर पर, आपको ऐसे विज़ुअलाइज़ेशन दिखाता है जो आपको चुने गए डेटा को ग्राफ़िक में ऐक्सेस करने की अनुमति देना चाहते हैं.
selection_array getSelection()
लौटाए गए सामान
selection_array चुने गए ऑब्जेक्ट की श्रेणी, हर ऑब्जेक्ट में, विज़ुअलाइज़ेशन बनाने के लिए इस्तेमाल की गई टेबल (DataView
या DataTable
)
का डेटा एलिमेंट बताया जाता है. हर ऑब्जेक्ट में row
और/या column
प्रॉपर्टी होती है,
जिसमें चुने गए आइटम की पंक्ति और/या कॉलम को इंडेक्स किया जाता है
DataTable
. अगर row
प्रॉपर्टी शून्य है, तो चुना गया कॉलम एक कॉलम है. अगर column
प्रॉपर्टी शून्य है, तो चुना गया विकल्प एक पंक्ति है. अगर दोनों प्रॉपर्टी शून्य नहीं हैं, तो यह एक खास डेटा आइटम है. चुने गए आइटम की वैल्यू पाने के लिए, DataTable.getValue()
तरीके को कॉल किया जा सकता है. वापस पाई गई श्रेणी को
setSelection()
में पास किया जा सकता है.
उदाहरण
function myClickHandler(){ var selection = myVis.getSelection(); var message = ''; for (var i = 0; i < selection.length; i++) { var item = selection[i]; if (item.row != null && item.column != null) { message += '{row:' + item.row + ',column:' + item.column + '}'; } else if (item.row != null) { message += '{row:' + item.row + '}'; } else if (item.column != null) { message += '{column:' + item.column + '}'; } } if (message == '') { message = 'nothing'; } alert('You selected ' + message); }
removeAction()
यह सुविधा, टूलटिप वाले विज़ुअलाइज़ेशन से दिखती है. साथ ही, यह टूलटिप कार्रवाइयों की अनुमति देती है.
आपके चार्ट से अनुरोध की गई actionID
वाली टूलटिप कार्रवाई ऑब्जेक्ट हटा देता है.
उदाहरण:
// Removes an action from chart with the ID of 'alertAction'. chart.removeAction('alertAction');
setAction()
यह सुविधा, टूलटिप वाले विज़ुअलाइज़ेशन से दिखती है. साथ ही, यह टूलटिप कार्रवाइयों की अनुमति देती है. यह सिर्फ़ मुख्य चार्ट (बार, कॉलम, लाइन, एरिया, स्कैटर, कॉम्बो, बबल, पाई, डोनट, कैंडलस्टिक, हिस्टोग्राम, स्टेप्ड एरिया) के लिए काम करता है.
जब उपयोगकर्ता कार्रवाई के टेक्स्ट पर क्लिक करता है, तो होने वाली कार्रवाई के लिए एक टूलटिप सेट करता है.
setAction(action object)
setAction
का तरीका, ऑब्जेक्ट को उसके कार्रवाई पैरामीटर के तौर पर लेता है. इस ऑब्जेक्ट में तीन प्रॉपर्टी होनी चाहिए: id
— सेट की जा रही कार्रवाई का आईडी text
,
वह टेक्स्ट जिसे कार्रवाई के लिए टूलटिप में दिखना चाहिए और action
वह फ़ंक्शन जो उपयोगकर्ता के कार्रवाई टेक्स्ट पर क्लिक करने पर चलता है.
चार्ट के draw()
तरीके को कॉल करने से पहले, सभी और सभी टूलटिप कार्रवाइयां सेट कर दी जानी चाहिए.
उदाहरण:
// Sets a tooltip action which will pop an alert box on the screen when triggered. chart.setAction({ id: 'alertAction', text: 'Trigger Alert', action: function() { alert('You have triggered an alert'); } });
setAction
का तरीका भी दो अतिरिक्त प्रॉपर्टी को तय कर सकता है: visible
और enabled
. इन प्रॉपर्टी में ऐसे फ़ंक्शन होने चाहिए जो boolean
की वैल्यू दिखाते हों. इससे पता चलता है कि टूलटिप कार्रवाई दिखेगी और/या चालू है.
उदाहरण:
// The visible/enabled functions can contain any logic to determine their state // as long as they return boolean values. chart.setAction({ id: 'alertAction', text: 'Trigger Alert', action: function() { alert('You have triggered an alert'); }, visible: function() { return true; }, enabled: function() { return true; } });
setSelection()
इसमें, विज़ुअलाइज़ेशन में डेटा एंट्री चुनी जाती है—उदाहरण के लिए, एरिया चार्ट में कोई पॉइंट या बार चार्ट में बार. जब इस तरीके को कॉल किया जाता है, तो विज़ुअलाइज़ेशन में विज़ुअल तौर पर यह बताना चाहिए कि नया विकल्प क्या है. setSelection()
को लागू करने पर, "select" इवेंट सक्रिय नहीं होना चाहिए. विज़ुअलाइज़ेशन, चुने गए हिस्से को अनदेखा कर सकता है. उदाहरण के लिए, हो सकता है कि टेबल में सिर्फ़ चुनी गई लाइनें ही दिखें. इसकी वजह यह भी है कि setSelection()
लागू करने के दौरान, सेल या कॉलम के एलिमेंट को अनदेखा किया जा सकता है या पूरी पंक्ति को चुना जा सकता है.
जब भी इस तरीके को कॉल किया जाता है, तो चुने गए सभी आइटम से चुने हुए का निशान हटा दिया जाता है. साथ ही, पास की गई नई
सूची लागू हो जानी चाहिए. अलग-अलग आइटम से चुने हुए का निशान हटाने का कोई साफ़ तरीका नहीं है; अलग-अलग आइटम
हटाने के लिए, उन आइटम के साथ setSelection()
को कॉल करें जिन्हें चुना गया है; सभी एलिमेंट से चुने हुए का निशान हटाने के लिए,
setSelection()
, setSelection(null)
या setSelection([])
को कॉल करें.
setSelection(selection_array)
- selection_array
-
ऑब्जेक्ट की श्रेणी, जिनमें से हर एक में संख्या वाली लाइन और/या कॉलम प्रॉपर्टी है.
row
औरcolumn
, चुनी गई डेटा टेबल में मौजूद किसी आइटम की पंक्ति या कॉलम की संख्या नहीं होती है. पूरा कॉलम चुनने के लिए,row
को शून्य पर सेट करें; पूरी पंक्ति चुनने के लिए,column
को शून्य पर सेट करें. उदाहरण:setSelection([{row:0,column:1},{row:1, column:null}])
(0,1) पर सेल चुनता है और पूरी पंक्ति 1.
अलग-अलग स्टैटिक तरीके
इस सेक्शन में google.visualization
नेमस्पेस के बारे में बताने वाले कई काम के तरीके दिए गए हैं.
arrayToDataTable()
यह तरीका दो-डाइमेंशन वाली श्रेणी को लेकर उसे DataTable में बदलता है.
दिए गए डेटा से कॉलम डेटा टाइप अपने-आप तय होते हैं. श्रेणी डेटा की पहली पंक्ति (यानी कॉलम हेडर पंक्ति) में ऑब्जेक्ट लिटरल नोटेशन (जैसे, {label: 'Start Date', type: 'date'}
) का इस्तेमाल करके भी कॉलम डेटा टाइप तय किए जा सकते हैं. वैकल्पिक डेटा भूमिकाओं का इस्तेमाल भी किया जा सकता है, लेकिन इन्हें ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल करके साफ़ तौर पर बताया जाना चाहिए. ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल किसी भी सेल के लिए किया जा सकता है, जो आपको सेल ऑब्जेक्ट तय करने देता है.
सिंटैक्स
google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)
- twoDArray
- दो डाइमेंशन वाली श्रेणी, जहां हर लाइन, डेटा टेबल की एक पंक्ति को दिखाती है. अगर opt_firstRowIsData गलत (डिफ़ॉल्ट) है, तो पहली लाइन को हेडर लेबल माना जाएगा. हर कॉलम के डेटा टाइप की जानकारी, अपने-आप दी जाती है. अगर किसी सेल में कोई वैल्यू नहीं है, तो उसके हिसाब से शून्य या खाली वैल्यू डालें.
- opt_firstRowIsData
- पहली लाइन, हेडर लाइन के बारे में बताती है या नहीं. अगर सही है, तो सभी पंक्तियां डेटा मानी जाती हैं. अगर वैल्यू गलत है, तो पहली लाइन को हेडर लाइन माना जाता है और वैल्यू को कॉलम लेबल के तौर पर असाइन किया जाता है. डिफ़ॉल्ट रूप से गलत पर सेट होती है.
लौटाए गए सामान
एक नया DataTable
.
उदाहरण
इस कोड में, एक ही DataTable
ऑब्जेक्ट बनाने के तीन तरीके दिए गए हैं:
// Version 1: arrayToDataTable method var data2 = google.visualization.arrayToDataTable([ [{label: 'Country', type: 'string'}, {label: 'Population', type: 'number'}, {label: 'Area', type: 'number'}, {type: 'string', role: 'annotation'}], ['CN', 1324, 9640821, 'Annotated'], ['IN', 1133, 3287263, 'Annotated'], ['US', 304, 9629091, 'Annotated'], ['ID', 232, 1904569, 'Annotated'], ['BR', 187, 8514877, 'Annotated'] ]); // Version 2: DataTable.addRows var data3 = new google.visualization.DataTable(); data3.addColumn('string','Country'); data3.addColumn('number','Population'); data3.addColumn('number','Area'); data3.addRows([ ['CN', 1324, 9640821], ['IN', 1133, 3287263], ['US', 304, 9629091], ['ID', 232, 1904569], ['BR', 187, 8514877] ]); // Version 3: DataTable.setValue var data = new google.visualization.DataTable(); data.addColumn('string','Country'); data.addColumn('number', 'Population'); data.addColumn('number', 'Area'); data.addRows(5); data.setValue(0, 0, 'CN'); data.setValue(0, 1, 1324); data.setValue(0, 2, 9640821); data.setValue(1, 0, 'IN'); data.setValue(1, 1, 1133); data.setValue(1, 2, 3287263); data.setValue(2, 0, 'US'); data.setValue(2, 1, 304); data.setValue(2, 2, 9629091); data.setValue(3, 0, 'ID'); data.setValue(3, 1, 232); data.setValue(3, 2, 1904569); data.setValue(4, 0, 'BR'); data.setValue(4, 1, 187); data.setValue(4, 2, 8514877);
Drawचार्ट()
इस तरीके से एक कॉल में चार्ट बन जाता है. इस तरीके का इस्तेमाल करने का फ़ायदा यह है कि कोड की कोडिंग पहले से कम होती है. साथ ही, आप फिर से इस्तेमाल करने के लिए, विज़ुअलाइज़ेशन को टेक्स्ट स्ट्रिंग के तौर पर सेव कर सकते हैं और उसे सेव भी कर सकते हैं. इस तरीके से, बनाए गए चार्ट का हैंडल नहीं मिलता. इसलिए, चार्ट इवेंट की पहचान करने के लिए, मैथड सुनने वालों को असाइन नहीं किया जा सकता.
सिंटैक्स
google.visualization.drawChart(chart_JSON_or_object)
- chart_JSON_or_object
- JSON लिटरल स्ट्रिंग या JavaScript ऑब्जेक्ट में, ये प्रॉपर्टी शामिल होती हैं (केस-सेंसिटिव):
प्रॉपर्टी | टाइप | ज़रूरी है | डिफ़ॉल्ट | जानकारी |
---|---|---|---|---|
चार्ट का प्रकार | स्ट्रिंग | ज़रूरी है | कोई नहीं |
विज़ुअलाइज़ेशन के क्लास का नाम. Google चार्ट के लिए google.visualization पैकेज का नाम हटाया जा सकता है. अगर सही विज़ुअलाइज़ेशन लाइब्रेरी पहले से लोड नहीं की गई है, तो यह तरीका आपके लिए लाइब्रेरी लोड करेगा. हालांकि, यह Google विज़ुअलाइज़ेशन है. आपको तीसरे पक्ष के विज़ुअलाइज़ेशन को साफ़ तौर पर लोड करना होगा. उदाहरण: Table ,
PieChart , example.com.CrazyChart .
|
containerId | स्ट्रिंग | ज़रूरी है | कोई नहीं | आपके पेज पर डीओएम एलिमेंट का आईडी, जो विज़ुअलाइज़ेशन को होस्ट करेगा. |
विकल्प | अस्वीकार करें | ज़रूरी नहीं | कोई नहीं |
विज़ुअलाइज़ेशन के विकल्पों को बताने वाला ऑब्जेक्ट. आप या तो JavaScript लिटरल नोटेशन का इस्तेमाल करें या फिर ऑब्जेक्ट के लिए हैंडल उपलब्ध कराएं. उदाहरण:
"options": {"width": 400, "height": 240,
"is3D": true, "title": "Company Performance"}
|
डेटा टेबल | अस्वीकार करें | ज़रूरी नहीं | कभी नहीं |
विज़ुअलाइज़ेशन को पॉप्युलेट करने के लिए, DataTable का इस्तेमाल किया जाता है. यह डेटाटेबल का लिटरल JSON स्ट्रिंग
हो सकता है, जैसा कि ऊपर बताया गया हो. इसके अलावा, यह किसी बड़ी संख्या में google.visualization.DataTable ऑब्जेक्ट या 2-डाइमेंशन वाली उस कैटगरी के लिए हो सकता है जिसे
arrayToDataTable(opt_firstRowIsData=false)
ने स्वीकार किया हो.
आपको यह प्रॉपर्टी या dataSourceUrl प्रॉपर्टी तय करनी होगी.
|
dataSourceUrl | स्ट्रिंग | ज़रूरी नहीं | कभी नहीं |
चार्ट के डेटा को पॉप्युलेट करने के लिए, डेटा सोर्स की क्वेरी. उदाहरण के लिए, Google स्प्रेडशीट. आपको इस प्रॉपर्टी या
dataTable प्रॉपर्टी के बारे में बताना होगा.
|
क्वेरी | स्ट्रिंग | ज़रूरी नहीं | कभी नहीं |
अगर dataSourceUrl के बारे में बताया जा रहा है, तो डेटा को फ़िल्टर करने या उसमें हेर-फेर करने के लिए, आपके पास विज़ुअलाइज़ेशन क्वेरी की भाषा
का इस्तेमाल करके, SQL-जैसी क्वेरी स्ट्रिंग तय करने का विकल्प होता है.
|
रीफ़्रेश इंटरवल | नंबर | ज़रूरी नहीं | कभी नहीं |
विज़ुअलाइज़ेशन में, क्वेरी का सोर्स कितनी बार रीफ़्रेश होना चाहिए. इसका इस्तेमाल सिर्फ़ तब करें, जब dataSourceUrl बताया जा रहा हो.
|
देखें | ऑब्जेक्ट या श्रेणी | ज़रूरी नहीं | कभी नहीं |
DataView इनीशियलाइज़र ऑब्जेक्ट सेट करता है. यह dataTable या dataSourceUrl पैरामीटर के हिसाब से, दिए गए डेटा
पर फ़िल्टर के तौर पर काम करता है.
आप कोई स्ट्रिंग या DataView शुरू करने वाला ऑब्जेक्ट पास कर सकते हैं, जैसे कि
dataview.toJSON() से मिला.
उदाहरण: "view": {"columns": [1, 2]} आप DataView इनीशियलाइज़र ऑब्जेक्ट की कैटगरी भी पास कर सकते हैं. ऐसे में, श्रेणी का पहला DataView , बुनियादी डेटा पर लागू होता है, ताकि नई डेटा टेबल बनाई जा सके. साथ ही, पहले DataView को पहले DataView के लागू होने पर बनने वाली डेटा टेबल पर लागू किया जाता है.
|
उदाहरण
स्प्रेडशीट डेटा सोर्स के आधार पर टेबल चार्ट बनाता है. इसमें क्वेरी SELECT A,D WHERE D > 100 Order BY D शामिल होती है
<script type="text/javascript"> google.charts.load('current'); // Note: No need to specify chart packages. function drawVisualization() { google.visualization.drawChart({ "containerId": "visualization_div", "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1", "query":"SELECT A,D WHERE D > 100 ORDER BY D", "refreshInterval": 5, "chartType": "Table", "options": { "alternatingRowStyle": true, "showRowNumber" : true } }); } google.charts.setOnLoadCallback(drawVisualization); </script>
इस उदाहरण की मदद से वही टेबल बनती है, लेकिन DataTable
लोकल तौर पर बनती है:
<script type='text/javascript'> google.charts.load('current'); function drawVisualization() { var dataTable = [ ["Country", "Population Density"], ["Indonesia", 117], ["China", 137], ["Nigeria", 142], ["Pakistan", 198], ["India", 336], ["Japan", 339], ["Bangladesh", 1045] ]; google.visualization.drawChart({ "containerId": "visualization_div", "dataTable": dataTable, "refreshInterval": 5, "chartType": "Table", "options": { "alternatingRowStyle": true, "showRowNumber" : true, } }); } google.charts.setOnLoadCallback(drawVisualization); </script>
यह उदाहरण, चार्ट की JSON स्ट्रिंग को दिखाता है. हो सकता है कि यह फ़ाइल:
<script type="text/javascript"> google.charts.load('current'); var myStoredString = '{"containerId": "visualization_div",' + '"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",' + '"query":"SELECT A,D WHERE D > 100 ORDER BY D",' + '"refreshInterval": 5,' + '"chartType": "Table",' + '"options": {' + ' "alternatingRowStyle": true,' + ' "showRowNumber" : true' + '}' + '}'; function drawVisualization() { google.visualization.drawChart(myStoredString); } google.charts.setOnLoadCallback(drawVisualization); </script>
drawToolbar()
यह टूलबार एलिमेंट का कंस्ट्रक्टर है, जिसे कई विज़ुअलाइज़ेशन से जोड़ा जा सकता है. इस टूलबार की मदद से, उपयोगकर्ता विज़ुअलाइज़ेशन में मौजूद डेटा को अलग-अलग फ़ॉर्मैट में एक्सपोर्ट कर सकता है. इसके अलावा, यह एम्बेड किए गए वर्शन को अलग-अलग जगहों पर इस्तेमाल कर सकता है. ज़्यादा जानकारी और कोड के उदाहरण के लिए, टूलबार पेज देखें.