Google विज़ुअलाइज़ेशन API संदर्भ

इस पेज पर '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'}]
]);
क्या मुझे JavaScript या ऑब्जेक्ट लिटरल नोटेशन में अपनी DataTable बनानी चाहिए?

पैरामीटर के बिना कंस्ट्रक्टर को कॉल करके, DataTable बनाया जा सकता है. इसके लिए, नीचे दिए गए addColumn()/addRows() के तरीकों को कॉल करके या अपने-आप जानकारी भरने वाला JavaScript लिटरल ऑब्जेक्ट पास करके, उसे शुरू किया जा सकता है. दोनों तरीकों का ब्यौरा नीचे दिया गया है. आपको कौनसा इस्तेमाल करना चाहिए?

  • addColumn(), addRow(), और addRows() को कॉल करके, JavaScript में टेबल बनाने और उसे पॉप्युलेट करने की प्रोसेस काफ़ी आसान है. यह तरीका तब काम आता है, जब आप मैन्युअल तरीके से कोड डालेंगे. यह ऑब्जेक्ट लिटरल नोटेशन (इसके बारे में आगे जानकारी दी गई है) का इस्तेमाल करने से धीरे चलता है. हालांकि, छोटी टेबल (जैसे, 1,000 सेल) में आपको कोई खास अंतर नहीं दिखेगा.
  • बड़ी टेबल में, ऑब्जेक्ट-लिटरल नोटेशन का इस्तेमाल करके, DataTable ऑब्जेक्ट के बारे में सीधे तौर पर एलान की प्रक्रिया काफ़ी तेज़ी से की जाती है. हालांकि, यह सिंटैक्स को समझना मुश्किल हो सकता है. अगर आप कोड में ऑब्जेक्ट लिटरल सिंटैक्स जनरेट करें, तो इसका इस्तेमाल करें. इससे, गड़बड़ियों की संभावना कम हो जाती है.

 

तरीके

तरीका सामान लौटाने की वैल्यू जानकारी

addColumn(type, opt_label, opt_id)

या

addColumn(description_object)

नंबर

डेटा टेबल में एक नया कॉलम जोड़ता है और नए कॉलम का इंडेक्स दिखाता है. नए कॉलम के सभी सेल को null वैल्यू असाइन की जाती है. इस तरीके में दो हस्ताक्षर हैं:

पहले हस्ताक्षर में ये पैरामीटर होते हैं:

  • type - स्ट्रिंग और वैल्यू के साथ कॉलम की वैल्यू का स्ट्रिंग. टाइप इनमें से कोई एक हो सकता है: 'string', 'number', 'boolean', 'date', 'datetime', और 'timeofday'.
  • opt_label - [ज़रूरी नहीं] कॉलम के लेबल वाली एक स्ट्रिंग. आम तौर पर, कॉलम लेबल को विज़ुअलाइज़ेशन के हिस्से के तौर पर दिखाया जाता है. उदाहरण के लिए, टेबल में कॉलम हेडर के तौर पर या पाई चार्ट में लेजेंड लेबल के तौर पर. अगर कोई वैल्यू नहीं दी गई है, तो एक खाली स्ट्रिंग असाइन की गई है.
  • opt_id - [ज़रूरी नहीं] कॉलम के यूनीक आइडेंटिफ़ायर वाली स्ट्रिंग. अगर कोई वैल्यू नहीं दी गई है, तो खाली स्ट्रिंग असाइन की जाती है.

दूसरे हस्ताक्षर में इन सदस्यों वाला एक ऑब्जेक्ट पैरामीटर होता है:

  • type - स्ट्रिंग, डेटा टाइप का ब्यौरा देती है. ये वैल्यू ऊपर दिए गए type के बराबर हैं.
  • label - [ज़रूरी नहीं, स्ट्रिंग] कॉलम के लिए एक लेबल.
  • id - [ज़रूरी नहीं, स्ट्रिंग] कॉलम के लिए आईडी.
  • role - [ज़रूरी नहीं, स्ट्रिंग] कॉलम के लिए एक भूमिका.
  • pattern - [ज़रूरी नहीं, स्ट्रिंग] संख्या (या तारीख) फ़ॉर्मैट स्ट्रिंग, जो कॉलम की वैल्यू दिखाने का तरीका बताती है.

यह भी देखें: getColumnId, getColumnLabel, getColumnType, insertColumn, getColumnRole

addRow(opt_cellArray) नंबर

डेटा टेबल में नई लाइन जोड़ता है और नई लाइन का इंडेक्स दिखाता है.

  • opt_cellArray [वैकल्पिक] JavaScript नोटेशन में एक पंक्ति ऑब्जेक्ट, जिसमें नई पंक्ति का डेटा बताया गया है. अगर यह पैरामीटर शामिल नहीं है, तो इस तरीके से टेबल के आखिर में एक नई और खाली पंक्ति जोड़ दी जाएगी. यह पैरामीटर सेल के मानों की श्रेणी होता है: अगर आपको सिर्फ़ किसी सेल के लिए कोई वैल्यू तय करनी है, तो सिर्फ़ सेल के लिए वैल्यू (जैसे, 55 या 'नमस्ते' दें) {v:55, f:'Fifty-five'}). आप एक ही तरीके से कॉल में आसान वैल्यू और सेल ऑब्जेक्ट को मिला सकते हैं. किसी खाली सेल के लिए, null का इस्तेमाल करें या श्रेणी का इस्तेमाल न करें.

उदाहरण:

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) नंबर

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

  • numOrArray - कोई संख्या या अरे:
    • संख्या - यह तय करने वाली संख्या कि कितनी नई, बिना भरी हुई पंक्तियों को जोड़ना है.
    • अरे - लाइन ऑब्जेक्ट की श्रेणी, ताकि नई पंक्तियों के सेट को भरा जा सके. हर पंक्ति एक ऑब्जेक्ट होती है, जैसा कि addRow() में बताया गया है. किसी खाली सेल के लिए null या खाली श्रेणी का इस्तेमाल करें.

उदाहरण:

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) स्ट्रिंग

बताए गए कॉलम की वैल्यू को फ़ॉर्मैट करने के लिए इस्तेमाल किया गया फ़ॉर्मैटिंग पैटर्न दिखाता है.

  • columnIndex की संख्या शून्य से ज़्यादा या उसके बराबर होनी चाहिए. साथ ही, वह संख्या getNumberOfColumns() के बताए गए कॉलम की संख्या से कम होनी चाहिए.

क्वेरी से मिलने वाली डेटा टेबल के लिए, कॉलम पैटर्न डेटा सोर्स या क्वेरी की भाषा के format क्लॉज़ से सेट होता है. पैटर्न का एक उदाहरण '#,##0.00' है. पैटर्न के बारे में ज़्यादा जानने के लिए, क्वेरी की भाषा का रेफ़रंस देखें.

getColumnProperties(columnIndex) अस्वीकार करें

बताए गए कॉलम के लिए सभी प्रॉपर्टी का मैप दिखाता है. ध्यान दें कि प्रॉपर्टी ऑब्जेक्ट को रेफ़रंस के तौर पर दिखाया जाता है. इसलिए, वापस लाए गए ऑब्जेक्ट की वैल्यू बदलने पर, DataTable में उनकी वैल्यू बदल जाती है.

  • columnIndex, कॉलम का न्यूमेरिक इंडेक्स होता है, जिसमें प्रॉपर्टी के लिए डेटा मौजूद होता है.
getColumnProperty(columnIndex, name) ऑटो

किसी तय की गई प्रॉपर्टी के लिए वैल्यू दिखाता है या तय किए गए कॉलम के लिए ऐसी कोई वैल्यू सेट न होने पर, null वैल्यू दिखाता है. प्रॉपर्टी के हिसाब से, सामान लौटाने का टाइप अलग-अलग हो सकता है.

  • columnIndex की संख्या शून्य से ज़्यादा या उसके बराबर होनी चाहिए. साथ ही, वह संख्या getNumberOfColumns() के बताए गए कॉलम की संख्या से कम होनी चाहिए.
  • स्ट्रिंग के रूप में name, प्रॉपर्टी का नाम है.

यह भी देखें: setColumnProperty setColumnProperties

getColumnRange(columnIndex) अस्वीकार करें

किसी खास कॉलम में, वैल्यू के कम से कम और ज़्यादा से ज़्यादा वैल्यू दिखाता है. दिए गए ऑब्जेक्ट की प्रॉपर्टी min और max हैं. अगर रेंज में कोई वैल्यू नहीं है, तो min और max में null शामिल होगा.

columnIndex की संख्या शून्य से ज़्यादा या उसके बराबर होनी चाहिए. साथ ही, वह कॉलम में getNumberOfColumns() तरीके से दिखाए गए कॉलम की संख्या से कम होनी चाहिए.

getColumnRole(columnIndex) स्ट्रिंग तय किए गए कॉलम की भूमिका दिखाता है.
getColumnType(columnIndex) स्ट्रिंग

कॉलम इंडेक्स की मदद से दिए गए कॉलम का टाइप दिखाता है.

  • columnIndex की संख्या शून्य से ज़्यादा या उसके बराबर होनी चाहिए. साथ ही, वह संख्या getNumberOfColumns() के बताए गए कॉलम की संख्या से कम होनी चाहिए.

लौटाया गया कॉलम टाइप, इनमें से कोई एक हो सकता है: 'string', 'number', 'boolean', 'date', 'datetime', और 'timeofday'

getDistinctValues(columnIndex) ऑब्जेक्ट का कलेक्शन

किसी खास कॉलम के यूनीक वैल्यू को बढ़ते क्रम में दिखाता है.

  • columnIndex की संख्या शून्य से ज़्यादा या उसके बराबर होनी चाहिए. साथ ही, वह संख्या getNumberOfColumns() के बताए गए कॉलम की संख्या से कम होनी चाहिए.

दिए गए ऑब्जेक्ट का प्रकार वही है जो getValue तरीके से दिखाया गया है.

getFilteredRows(filters) ऑब्जेक्ट का कलेक्शन

सभी दिए गए फ़िल्टर से मेल खाने वाली पंक्तियों के लिए पंक्ति इंडेक्स दिखाता है. इंडेक्स, बढ़ते क्रम में दिए जाते हैं. इस तरीके के आउटपुट का इस्तेमाल, DataView.setRows() में इनपुट के तौर पर किया जा सकता है, ताकि विज़ुअलाइज़ेशन में पंक्तियों के दिखाए गए सेट को बदला जा सके.

filters - ऑब्जेक्ट की श्रेणी जो स्वीकार किए जाने वाले सेल का मान बताती है. पंक्ति वाले इंडेक्स से यह नतीजा तब मिलता है, जब वे दिए गए सभी फ़िल्टर से मेल खाते हों. हर फ़िल्टर, संख्या वाली column प्रॉपर्टी के साथ एक ऑब्जेक्ट होता है. यह पंक्ति में मौजूद कॉलम के इंडेक्स को तय करता है. साथ ही, इनमें से किसी एक को भी तय करता है:

  • value प्रॉपर्टी, जिसकी वैल्यू तय किए गए कॉलम के सेल से पूरी तरह मेल खानी चाहिए. वैल्यू, कॉलम के टाइप की तरह ही होनी चाहिए; या
  • यहां दी गई प्रॉपर्टी में से एक या दोनों, फ़िल्टर किए जाने वाले कॉलम की तरह एक ही हैं:
    • minValue - सेल के लिए तय की गई कम से कम वैल्यू. बताए गए कॉलम में सेल की वैल्यू, इस वैल्यू से ज़्यादा या उसके बराबर होनी चाहिए.
    • maxValue - सेल के लिए ज़्यादा से ज़्यादा वैल्यू. बताए गए कॉलम में सेल की वैल्यू, इस वैल्यू से कम या उसके बराबर होनी चाहिए.
    minValue (या maxValue) के लिए, शून्य या तय नहीं की गई वैल्यू का मतलब है कि रेंज की निचली (या ऊपरी) सीमा लागू नहीं की जाएगी.

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

उदाहरण: getFilteredRows([{column: 3, value: 42}, {column: 2, minValue: 'bar', maxValue: 'foo'}, {column: 1, test: (value, rowId, columnId, datatable) => { return value == "baz"; }}]) वह पंक्ति दिखाता है जिसमें बढ़ते क्रम में, उन सभी पंक्तियों के इंडेक्स होते हैं जिनके लिए चौथा कॉलम (कॉलम इंडेक्स 3) सटीक रूप से 42 है और तीसरा कॉलम (कॉलम इंडेक्स 2), 'बार' और 'foo' (दोनों को मिलाकर) के बीच का है.

getFormattedValue(rowIndex, columnIndex) स्ट्रिंग

किसी पंक्ति और कॉलम के इंडेक्स पर सेल के फ़ॉर्मैट की वैल्यू दिखाता है.

  • rowIndex, ऐसी संख्या होनी चाहिए जो शून्य से ज़्यादा या उसके बराबर हो. साथ ही, वह संख्या getNumberOfRows() की दी गई लाइनों की संख्या से कम होनी चाहिए.
  • ColumnIndex की संख्या शून्य से ज़्यादा या उसके बराबर होनी चाहिए. साथ ही, वह संख्या getNumberOfColumns() के बताए गए कॉलम की संख्या से कम होनी चाहिए.

कॉलम की वैल्यू को फ़ॉर्मैट करने के बारे में ज़्यादा जानकारी के लिए, क्वेरी की भाषा का रेफ़रंस देखें.

यह भी देखें: setFormattedValue

getNumberOfColumns() नंबर टेबल में कॉलम की संख्या दिखाता है.
getNumberOfRows() नंबर टेबल में पंक्तियों की संख्या दिखाता है.
getProperties(rowIndex, columnIndex) अस्वीकार करें

किसी सेल की सभी प्रॉपर्टी का मैप दिखाता है. ध्यान दें कि प्रॉपर्टी ऑब्जेक्ट को रेफ़रंस के तौर पर दिखाया जाता है. इसलिए, वापस लाए गए ऑब्जेक्ट में वैल्यू बदलने से DataTable में बदल जाता है.

  • rowIndex सेल की पंक्ति इंडेक्स है.
  • columnIndex सेल का कॉलम इंडेक्स है.
getProperty(rowIndex, columnIndex, name) ऑटो

किसी खास प्रॉपर्टी का मान देता है या null अगर बताए गए सेल के लिए ऐसी कोई प्रॉपर्टी सेट न की गई हो. प्रॉपर्टी के हिसाब से, सामान लौटाने का टाइप अलग-अलग हो सकता है.

  • rowIndex, ऐसी संख्या होनी चाहिए जो शून्य से ज़्यादा या उसके बराबर हो. साथ ही, वह संख्या getNumberOfRows() की दी गई लाइनों की संख्या से कम होनी चाहिए.
  • columnIndex की संख्या शून्य से ज़्यादा या उसके बराबर होनी चाहिए. साथ ही, वह संख्या getNumberOfColumns() के बताए गए कॉलम की संख्या से कम होनी चाहिए.
  • name एक ऐसी स्ट्रिंग है जिसमें प्रॉपर्टी का नाम है.

यह भी देखें: setCell setProperties setProperty

getRowProperties(rowIndex) अस्वीकार करें

किसी खास पंक्ति की सभी प्रॉपर्टी का मैप दिखाता है. ध्यान दें कि प्रॉपर्टी ऑब्जेक्ट को रेफ़रंस के तौर पर दिखाया जाता है. इसलिए, वापस लाए गए ऑब्जेक्ट की वैल्यू बदलने पर, DataTable में उनकी वैल्यू बदल जाती है.

  • rowIndex, जिस प्रॉपर्टी की प्रॉपर्टी को फ़ेच करता है उसका इंडेक्स है.
getRowProperty(rowIndex, name) ऑटो

बताई गई किसी पंक्ति के लिए ऐसी कोई प्रॉपर्टी सेट न होने पर, null नाम की किसी प्रॉपर्टी की वैल्यू दिखाता है. प्रॉपर्टी के हिसाब से, सामान लौटाने का टाइप अलग-अलग हो सकता है.

  • rowIndex, ऐसी संख्या होनी चाहिए जो शून्य से ज़्यादा या उसके बराबर हो. साथ ही, वह संख्या getNumberOfRows() की दी गई लाइनों की संख्या से कम होनी चाहिए.
  • name एक ऐसी स्ट्रिंग है जिसमें प्रॉपर्टी का नाम है.

यह भी देखें: setRowProperty setRowProperties

getSortedRows(sortColumns) संख्याओं का अरे

दिए गए डेटा के क्रम में बदलाव किए बिना, टेबल का क्रम से लगाया गया वर्शन दिखाता है. दिए गए डेटा को हमेशा के लिए क्रम से लगाने के लिए, sort() को कॉल करें. sortColumns पैरामीटर में पास किए जाने वाले टाइप के आधार पर, क्रम में लगाने का तरीका तय किया जा सकता है:

  • एक संख्या, कॉलम के इंडेक्स को क्रम से लगाने के बारे में बताती है. नतीजों को क्रम से लगाया जाएगा. उदाहरण: sortColumns(3) को चौथे कॉलम में, बढ़ते क्रम में लगाया जाएगा.
  • एक ऑब्जेक्ट, जिसमें क्रम से लगाने के लिए कॉलम इंडेक्स की संख्या और एक बूलियन प्रॉपर्टी desc शामिल होती है. अगर desc को सही पर सेट किया गया है, तो खास कॉलम को घटते क्रम में रखा जाएगा, नहीं तो क्रम में बढ़ते क्रम में लगाया जाएगा. उदाहरण: sortColumns({column: 3}) को चौथे कॉलम में, बढ़ते क्रम में रखा जाएगा; sortColumns({column: 3, desc: true}) को चौथे कॉलम के हिसाब से, घटते क्रम में लगाया जाएगा.
  • कॉलम की संख्याओं की श्रेणी, जिसे क्रम से लगाना है. पहला नंबर क्रम से लगाने के लिए पहला कॉलम होता है, वहीं दूसरा कॉलम, सेकंडरी कॉलम होता है. इसका मतलब है कि जब पहले कॉलम में दो वैल्यू बराबर होती हैं, तो अगले कॉलम में मौजूद वैल्यू की तुलना की जाती है. उदाहरण: sortColumns([3, 1, 6]) पहले चौथे कॉलम (पहले के क्रम में), फिर दूसरा कॉलम, बढ़ते क्रम में, और सातवें कॉलम (बढ़ते क्रम में) के हिसाब से क्रम में लगाया जाएगा.
  • ऑब्जेक्ट की कैटगरी, हर ऑब्जेक्ट के हिसाब से क्रम में लगाए गए कॉलम इंडेक्स की संख्या और एक वैकल्पिक बूलियन प्रॉपर्टी desc. अगर desc को 'सही है' पर सेट किया गया है, तो खास कॉलम को घटते क्रम में लगाया जाएगा. डिफ़ॉल्ट रूप से, यह बढ़ते हुए क्रम में होगा. पहला ऑब्जेक्ट क्रम से लगाने के लिए पहला कॉलम होता है, दूसरा ऑब्जेक्ट सेकंडरी ऑब्जेक्ट होता है वगैरह. इसका मतलब यह है कि जब पहले कॉलम में दो वैल्यू बराबर होती हैं, तो अगले कॉलम में मौजूद वैल्यू की तुलना की जाती है. उदाहरण: sortColumn([{column: 3}, {column: 1, desc: true}, {column: 6, desc: true}]) पहले चौथे कॉलम (पहले बढ़ते क्रम में) में, फिर कॉलम 2 में घटते क्रम में लगाया जाएगा. इसके बाद, कॉलम 7 को घटते क्रम में लगाया जाएगा.

दिखाई गई वैल्यू, संख्याओं की एक श्रेणी होती है. हर संख्या, DataTable पंक्ति का इंडेक्स होती है. दिखाई गई श्रेणी के हिसाब से DataTable पंक्तियों में बदलाव करने पर, तय की गई sortColumns के मुताबिक पंक्तियां बन जाएंगी. किसी विज़ुअलाइज़ेशन में पंक्तियों के दिखाए गए सेट को तुरंत बदलने के लिए, आउटपुट का इस्तेमाल DataView.setRows() के लिए इनपुट के तौर पर किया जा सकता है.

ध्यान दें कि क्रम में स्थिर रहने की गारंटी मिलती है. इसका मतलब है कि अगर आप दो पंक्तियों की बराबर की वैल्यू को क्रम से लगाते हैं, तो एक ही क्रम में उन पंक्तियों को हर बार एक ही क्रम में दिखाया जाएगा.
यह भी देखें: क्रम से लगाएं

उदाहरण: तीसरे कॉलम के हिसाब से बनाई गई पंक्तियों को दोहराने के लिए, इनका इस्तेमाल करें:

var rowInds = data.getSortedRows([{column: 2}]);
for (var i = 0; i < rowInds.length; i++) {
  var v = data.getValue(rowInds[i], 2);
}
getTableProperties अस्वीकार करें टेबल के लिए सभी प्रॉपर्टी का मैप दिखाता है.
getTableProperty(name) ऑटो

नाम वाली किसी प्रॉपर्टी की वैल्यू दिखाता है या null, अगर टेबल के लिए ऐसी कोई प्रॉपर्टी सेट नहीं की गई है. प्रॉपर्टी के हिसाब से, सामान लौटाने का टाइप अलग-अलग हो सकता है.

  • name एक ऐसी स्ट्रिंग है जिसमें प्रॉपर्टी का नाम है.

यह भी देखें: setTableProperties setTableProperty

getValue(rowIndex, columnIndex) अस्वीकार करें

किसी दी गई पंक्ति और कॉलम के इंडेक्स पर सेल की वैल्यू दिखाता है.

  • rowIndex, ऐसी संख्या होनी चाहिए जो शून्य से ज़्यादा या उसके बराबर हो. साथ ही, वह संख्या getNumberOfRows() की दी गई लाइनों की संख्या से कम होनी चाहिए.
  • columnIndex की संख्या शून्य से ज़्यादा या उसके बराबर होनी चाहिए. साथ ही, वह संख्या getNumberOfColumns() के बताए गए कॉलम की संख्या से कम होनी चाहिए.

मिलने वाली वैल्यू किस तरह की है, यह कॉलम के टाइप पर निर्भर करता है (getColumnType देखें):

  • अगर कॉलम टाइप 'स्ट्रिंग' है, तो वैल्यू एक स्ट्रिंग होती है.
  • अगर कॉलम का प्रकार 'संख्या' है, तो मान एक संख्या होती है.
  • अगर कॉलम का टाइप 'बूलियन' है, तो वैल्यू बूलियन होगी.
  • अगर कॉलम का टाइप 'तारीख' या 'तारीख और समय' है, तो वैल्यू को तारीख ऑब्जेक्ट माना जाता है.
  • अगर कॉलम का टाइप 'timeofday' है, तो वैल्यू चार संख्याओं की एक कैटगरी होती है: [घंटे, मिनट, सेकंड, मिलीसेकंड].
  • अगर सेल की वैल्यू शून्य है, तो यह null दिखाता है.
insertColumn(columnIndex, type [,label [,id]]) कभी नहीं

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

  • columnIndex एक संख्या है, जिसमें नए कॉलम का ज़रूरी इंडेक्स है.
  • type एक ऐसी स्ट्रिंग होनी चाहिए जिसमें कॉलम की वैल्यू के डेटा टाइप की जानकारी दी गई हो. यह इनमें से कोई एक हो सकता है: 'string', 'number', 'boolean', 'date', 'datetime', और 'timeofday'.
  • label एक ऐसी स्ट्रिंग होनी चाहिए जिसमें कॉलम का लेबल हो. आम तौर पर, कॉलम लेबल विज़ुअलाइज़ेशन के हिस्से के तौर पर दिखता है. उदाहरण के लिए, किसी टेबल में कॉलम हेडर या पाई चार्ट में लेजेंड लेबल के तौर पर. अगर कोई वैल्यू नहीं दी गई है, तो खाली स्ट्रिंग असाइन की जाती है.
  • id एक ऐसी स्ट्रिंग होनी चाहिए जिसमें कॉलम के लिए यूनीक आइडेंटिफ़ायर हो. अगर कोई वैल्यू नहीं दी गई है, तो एक खाली स्ट्रिंग असाइन की जाती है.

यह भी देखें: addColumn

insertRows(rowIndex, numberOrArray) कभी नहीं

किसी खास पंक्ति के इंडेक्स में, पंक्तियों की तय संख्या डालें.

  • rowIndex वह इंडेक्स नंबर है जहां नई पंक्ति(पंक्तियों) को शामिल करना है. पंक्तियां, इंडेक्स नंबर से शुरू करके जोड़ी जाएंगी.
  • numberOrArray को जोड़ने के लिए कई नई, खाली पंक्तियां या इंडेक्स में जोड़ने के लिए एक या ज़्यादा संख्या में भरी पंक्तियों की सूची होती है. पंक्ति ऑब्जेक्ट की श्रेणी जोड़ने के लिए, सिंटैक्स के लिए addRows() देखें.

यह भी देखें: addRows

removeColumn(columnIndex) कभी नहीं

किसी इंडेक्स से कॉलम हटा देता है.

  • columnIndex एक मान्य कॉलम इंडेक्स वाली संख्या होनी चाहिए.

यह भी देखें: हटाएं कॉलम

removeColumns(columnIndex, numberOfColumns) कभी नहीं

किसी इंडेक्स पर मौजूद कॉलम से, कॉलम की संख्या हटाता है.

  • numberOfColumns, हटाए जाने वाले कॉलम की संख्या है.
  • columnIndex एक मान्य कॉलम इंडेक्स वाली संख्या होनी चाहिए.

यह भी देखें: removeColumn

removeRow(rowIndex) कभी नहीं

किसी इंडेक्स से, पंक्ति हटा देता है.

  • rowIndex एक संख्या होनी चाहिए जिसमें पंक्ति का मान्य इंडेक्स हो.

यह भी देखें: removeRows

removeRows(rowIndex, numberOfRows) कभी नहीं

किसी इंडेक्स से, शुरू होने वाली पंक्तियों की संख्या हटाता है.

  • numberOfRows, पंक्तियों की वह संख्या है जिसे हटाना है.
  • rowIndex एक संख्या होनी चाहिए जिसमें पंक्ति का मान्य इंडेक्स हो.

यह भी देखें: removeRow

setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]]) कभी नहीं

यह सेल के मान, फ़ॉर्मैट की गई वैल्यू, और/या प्रॉपर्टी को सेट करता है.

  • rowIndex, ऐसी संख्या होनी चाहिए जो शून्य से ज़्यादा या उसके बराबर हो. साथ ही, वह संख्या getNumberOfRows() की दी गई लाइनों की संख्या से कम होनी चाहिए.
  • columnIndex की संख्या शून्य से ज़्यादा या उसके बराबर होनी चाहिए. साथ ही, वह संख्या getNumberOfColumns() के बताए गए कॉलम की संख्या से कम होनी चाहिए.
  • value [वैकल्पिक] तय सेल को असाइन किया गया मान है. इस वैल्यू को ओवरराइट करने से बचने के लिए, इस पैरामीटर को undefined पर सेट करें. इस वैल्यू को हटाने के लिए, इसे null पर सेट करें. वैल्यू का टाइप, कॉलम के टाइप पर निर्भर करता है (getColumnType() देखें):
    • अगर कॉलम का टाइप 'string' है, तो वैल्यू एक स्ट्रिंग होनी चाहिए.
    • अगर कॉलम का प्रकार 'संख्या' है, तो मान एक संख्या होनी चाहिए.
    • अगर कॉलम का टाइप 'बूलियन' है, तो वैल्यू बूलियन होनी चाहिए.
    • अगर कॉलम का टाइप 'तारीख' या 'तारीख और समय' है, तो वैल्यू को तारीख ऑब्जेक्ट होना चाहिए.
    • अगर कॉलम का टाइप 'timeofday' है, तो वैल्यू चार अंकों की कैटगरी होनी चाहिए: [घंटे, मिनट, सेकंड, मिलीसेकंड].
  • formattedValue [ज़रूरी नहीं] एक ऐसी स्ट्रिंग है जिसकी वैल्यू स्ट्रिंग के तौर पर फ़ॉर्मैट की गई होती है. इस वैल्यू को ओवरराइट करने से बचने के लिए, इस पैरामीटर को undefined पर सेट करें. इस वैल्यू को हटाने और एपीआई को ज़रूरत के मुताबिक value पर डिफ़ॉल्ट फ़ॉर्मैटिंग लागू करने के लिए, इसे null पर सेट करें. फ़ॉर्मैट को खाली छोड़ कर, इसे साफ़ तौर पर सेट करने के लिए, इसे किसी खाली स्ट्रिंग पर सेट करें. फ़ॉर्मैट किए गए मान का इस्तेमाल, आम तौर पर विज़ुअलाइज़ेशन में किया जाता है, ताकि वैल्यू के लेबल दिखाए जा सकें. उदाहरण के लिए, पाई चार्ट में फ़ॉर्मैट की गई वैल्यू, लेबल टेक्स्ट के तौर पर दिख सकती है.
  • properties [ज़रूरी नहीं] एक Object (नाम/वैल्यू वाला मैप) है, जिसमें इस सेल के लिए दूसरी प्रॉपर्टी मौजूद हैं. इस वैल्यू को ओवरराइट करने से बचने के लिए, इस पैरामीटर को undefined पर सेट करें. इस वैल्यू को मिटाने के लिए, इसे null पर सेट करें. कुछ विज़ुअलाइज़ेशन में, अपने डिसप्ले या व्यवहार में बदलाव करने के लिए, पंक्ति, कॉलम या सेल प्रॉपर्टी का इस्तेमाल किया जा सकता है. इसके बारे में जानकारी देने वाला दस्तावेज़ देखें.

यह भी देखें: setValue(), setFormattedValue(), setProperty(), setProperties().

setColumnLabel(columnIndex, label) कभी नहीं

किसी कॉलम का लेबल सेट करता है.

  • columnIndex की संख्या शून्य से ज़्यादा या उसके बराबर होनी चाहिए. साथ ही, वह संख्या getNumberOfColumns() के बताए गए कॉलम की संख्या से कम होनी चाहिए.
  • label एक स्ट्रिंग है, जिसे कॉलम को लेबल करने के लिए लेबल किया जाता है. आम तौर पर, कॉलम लेबल को विज़ुअलाइज़ेशन के हिस्से के तौर पर दिखाया जाता है. उदाहरण के लिए, कॉलम लेबल को टेबल में कॉलम हेडर के तौर पर या पाई चार्ट में लेजेंड लेबल के तौर पर दिखाया जा सकता है.

यह भी देखें: getColumnLabel

setColumnProperty(columnIndex, name, value) कभी नहीं

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

  • columnIndex की संख्या शून्य से ज़्यादा या उसके बराबर होनी चाहिए. साथ ही, वह संख्या getNumberOfColumns() के बताए गए कॉलम की संख्या से कम होनी चाहिए.
  • name एक ऐसी स्ट्रिंग है जिसमें प्रॉपर्टी का नाम है.
  • value, कॉलम की किसी खास प्रॉपर्टी की वैल्यू तय करने के लिए किसी भी टाइप की वैल्यू होती है.

यह भी देखें:setColumnProperties getColumnProperty

setColumnProperties(columnIndex, properties) कभी नहीं

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

  • columnIndex की संख्या शून्य से ज़्यादा या उसके बराबर होनी चाहिए. साथ ही, वह संख्या getNumberOfColumns() के बताए गए कॉलम की संख्या से कम होनी चाहिए.
  • properties एक Object (नाम/वैल्यू का मैप) है, जिसमें इस कॉलम के लिए अतिरिक्त प्रॉपर्टी हैं. अगर null के बारे में बताया गया है, तो कॉलम की सभी दूसरी प्रॉपर्टी हटा दी जाएंगी.

यह भी देखें: setColumnProperty getColumnProperty

setFormattedValue(rowIndex, columnIndex, formattedValue) कभी नहीं

सेल के फ़ॉर्मैट की गई वैल्यू सेट करता है.

  • rowIndex, ऐसी संख्या होनी चाहिए जो शून्य से ज़्यादा या उसके बराबर हो. साथ ही, वह संख्या getNumberOfRows() की दी गई लाइनों की संख्या से कम होनी चाहिए.
  • columnIndex की संख्या शून्य से ज़्यादा या उसके बराबर होनी चाहिए. साथ ही, वह संख्या getNumberOfColumns() के बताए गए कॉलम की संख्या से कम होनी चाहिए.
  • formattedValue एक ऐसी स्ट्रिंग है जिसकी वैल्यू डिसप्ले के लिए फ़ॉर्मैट की गई है. इस वैल्यू को हटाने और एपीआई को ज़रूरत के मुताबिक सेल वैल्यू पर डिफ़ॉल्ट फ़ॉर्मैटिंग लागू करने के लिए, इसे formatValue null पर सेट करें. साथ ही, फ़ॉर्मैटिंग की खाली वैल्यू को साफ़ तौर पर सेट करने के लिए, इसे खाली स्ट्रिंग पर सेट करें.

यह भी देखें: getFormattedValue

setProperty(rowIndex, columnIndex, name, value) कभी नहीं

किसी सेल की प्रॉपर्टी सेट करता है. कुछ विज़ुअलाइज़ेशन में, अपने डिसप्ले या व्यवहार में बदलाव करने के लिए, पंक्ति, कॉलम या सेल प्रॉपर्टी का इस्तेमाल किया जा सकता है. यह देखने के लिए कि कौनसी प्रॉपर्टी काम करती हैं, विज़ुअलाइज़ेशन दस्तावेज़ देखें.

  • rowIndex, ऐसी संख्या होनी चाहिए जो शून्य से ज़्यादा या उसके बराबर हो. साथ ही, वह संख्या getNumberOfRows() की दी गई लाइनों की संख्या से कम होनी चाहिए.
  • columnIndex की संख्या शून्य से ज़्यादा या उसके बराबर होनी चाहिए. साथ ही, वह संख्या getNumberOfColumns() के बताए गए कॉलम की संख्या से कम होनी चाहिए.
  • name एक ऐसी स्ट्रिंग है जिसमें प्रॉपर्टी का नाम है.
  • value किसी भी तरह का मान है, जिसे तय की गई सेल की खास प्रॉपर्टी को असाइन किया जाना है.

यह भी देखें: setCell setProperties getProperty

setProperties(rowIndex, columnIndex, properties) कभी नहीं

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

  • rowIndex, ऐसी संख्या होनी चाहिए जो शून्य से ज़्यादा या उसके बराबर हो. साथ ही, वह संख्या getNumberOfRows() की दी गई लाइनों की संख्या से कम होनी चाहिए.
  • columnIndex की संख्या शून्य से ज़्यादा या उसके बराबर होनी चाहिए. साथ ही, वह संख्या getNumberOfColumns() के बताए गए कॉलम की संख्या से कम होनी चाहिए.
  • properties एक Object (नाम/वैल्यू का मैप) है, जिसमें इस सेल के लिए और भी प्रॉपर्टी हैं. अगर null बताया गया है, तो सेल की सभी अतिरिक्त प्रॉपर्टी हटा दी जाएंगी.

यह भी देखें: setCell setProperty getProperty

setRowProperty(rowIndex, name, value) कभी नहीं

पंक्ति की प्रॉपर्टी सेट करता है. कुछ विज़ुअलाइज़ेशन में, अपने डिसप्ले या व्यवहार में बदलाव करने के लिए, पंक्ति, कॉलम या सेल प्रॉपर्टी का इस्तेमाल किया जा सकता है. यह देखने के लिए कि कौनसी प्रॉपर्टी काम करती हैं, विज़ुअलाइज़ेशन दस्तावेज़ देखें.

  • rowIndex, ऐसी संख्या होनी चाहिए जो शून्य से ज़्यादा या उसके बराबर हो. साथ ही, वह संख्या getNumberOfRows() की दी गई लाइनों की संख्या से कम होनी चाहिए.
  • name एक ऐसी स्ट्रिंग है जिसमें प्रॉपर्टी का नाम है.
  • value, किसी भी टाइप की वैल्यू है, जिसे तय की गई लाइन की खास प्रॉपर्टी को असाइन किया जाता है.

यह भी देखें: setRowProperties getRowProperty

setRowProperties(rowIndex, properties) कभी नहीं

एक से ज़्यादा पंक्ति की प्रॉपर्टी सेट करता है. कुछ विज़ुअलाइज़ेशन में, अपने डिसप्ले या व्यवहार में बदलाव करने के लिए, पंक्ति, कॉलम या सेल प्रॉपर्टी का इस्तेमाल किया जा सकता है. यह देखने के लिए कि कौनसी प्रॉपर्टी काम करती हैं, विज़ुअलाइज़ेशन दस्तावेज़ देखें.

  • rowIndex, ऐसी संख्या होनी चाहिए जो शून्य से ज़्यादा या उसके बराबर हो. साथ ही, वह संख्या getNumberOfRows() की दी गई लाइनों की संख्या से कम होनी चाहिए.
  • properties एक Object (नाम/वैल्यू का मैप) है, जिसमें इस पंक्ति के लिए दूसरी प्रॉपर्टी शामिल हैं. अगर null के बारे में जानकारी दी गई है, तो सभी अतिरिक्त प्रॉपर्टी हटा दी जाएंगी.

यह भी देखें: setRowProperty getRowProperty

setTableProperty(name, value) कभी नहीं

सिंगल टेबल प्रॉपर्टी सेट करता है. कुछ विज़ुअलाइज़ेशन में, टेबल, पंक्ति, कॉलम या सेल प्रॉपर्टी के साथ अपने डिसप्ले या व्यवहार में बदलाव किया जा सकता है. इसके बारे में जानकारी देने वाला दस्तावेज़ देखें.

  • name एक ऐसी स्ट्रिंग है जिसमें प्रॉपर्टी का नाम है.
  • value, टेबल की बताई गई प्रॉपर्टी को असाइन करने के लिए किसी भी तरह का मान होता है.

यह भी देखें: setTableProperties getTableProperty

setTableProperties(properties) कभी नहीं

एक से ज़्यादा टेबल प्रॉपर्टी सेट करता है. कुछ विज़ुअलाइज़ेशन में, टेबल, पंक्ति, कॉलम या सेल प्रॉपर्टी के साथ अपने डिसप्ले या व्यवहार में बदलाव किया जा सकता है. इसके बारे में जानकारी देने वाला दस्तावेज़ देखें.

  • properties एक Object (नाम/वैल्यू वाला मैप) है, जिसमें टेबल के लिए दूसरी प्रॉपर्टी हैं. अगर null के बारे में बताया गया है, तो टेबल की सभी दूसरी प्रॉपर्टी हटा दी जाएंगी.

यह भी देखें: setTableProperty getTableProperty

setValue(rowIndex, columnIndex, value) कभी नहीं

किसी सेल का मान सेट करता है. किसी मौजूदा सेल वैल्यू को ओवरराइट करने के अलावा, यह तरीका सेल के लिए फ़ॉर्मैट की गई सभी वैल्यू और प्रॉपर्टी को भी मिटा देगा.

  • rowIndex, ऐसी संख्या होनी चाहिए जो शून्य से ज़्यादा या उसके बराबर हो. साथ ही, वह संख्या getNumberOfRows() की दी गई लाइनों की संख्या से कम होनी चाहिए.
  • columnIndex की संख्या शून्य से ज़्यादा या उसके बराबर होनी चाहिए. साथ ही, वह संख्या getNumberOfColumns() के बताए गए कॉलम की संख्या से कम होनी चाहिए. इस तरीके से, इस सेल के लिए फ़ॉर्मैट की गई वैल्यू सेट नहीं की जा सकती. ऐसा करने के लिए, setFormattedValue() को कॉल करें.
  • value तय सेल के लिए असाइन किया गया मान है. रिटर्न की गई वैल्यू कॉलम टाइप पर निर्भर करती है (getColumnType देखें):
    • अगर कॉलम का टाइप 'string' है, तो वैल्यू एक स्ट्रिंग होनी चाहिए.
    • अगर कॉलम का प्रकार 'संख्या' है, तो मान एक संख्या होनी चाहिए.
    • अगर कॉलम का टाइप 'बूलियन' है, तो वैल्यू बूलियन होनी चाहिए.
    • अगर कॉलम का टाइप 'तारीख' या 'तारीख और समय' है, तो वैल्यू को तारीख ऑब्जेक्ट होना चाहिए.
    • अगर कॉलम का टाइप 'timeofday' है, तो वैल्यू चार अंकों की कैटगरी होनी चाहिए: [घंटे, मिनट, सेकंड, मिलीसेकंड].
    • किसी भी तरह के कॉलम के लिए, वैल्यू को null पर सेट किया जा सकता है.

यह भी देखें: 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]
  • 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 प्रॉपर्टी

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) नंबर

इससे, इस व्यू में इंडेक्स से जुड़े कॉलम की बुनियादी टेबल (या व्यू) की जानकारी मिलती है. viewColumnIndex की संख्या शून्य से ज़्यादा या उसके बराबर होनी चाहिए. साथ ही, वह संख्या getNumberOfColumns() के बताए गए कॉलम की संख्या से कम होनी चाहिए. अगर यह जेनरेट किया गया कॉलम है, तो -1 दिखाता है.

उदाहरण: अगर setColumns([3, 1, 4]) को पहले कॉल किया गया था, तो getTableColumnIndex(2), 4 के तौर पर दिखेगा.

getTableRowIndex(viewRowIndex) नंबर

इस व्यू में, किसी इंडेक्स की दी गई लाइन की इंडेक्स को उसके टेबल (या व्यू) में दिखाता है. viewRowIndex, ऐसी संख्या होनी चाहिए जो शून्य से ज़्यादा या उसके बराबर हो और कम से कम getNumberOfRows() तरीके से दी गई लाइनों की संख्या से कम हो.

उदाहरण: अगर setRows([3, 1, 4]) को पहले कॉल किया गया था, तो getTableRowIndex(2), 4 के तौर पर दिखेगा.

getViewColumnIndex(tableColumnIndex) नंबर

इस व्यू में, इंडेक्स को दिखाता है, जो दिए गए कॉलम (या व्यू) में दिए गए किसी कॉलम की मदद से उसके इंडेक्स में शामिल होता है. अगर एक से ज़्यादा ऐसे इंडेक्स मौजूद हैं, तो पहला (सबसे छोटा) इंडेक्स दिखाता है. अगर ऐसा कोई इंडेक्स मौजूद नहीं है (तय कॉलम, व्यू में नहीं है), तो -1 दिखता है. tableColumnIndex, संख्या में शून्य से ज़्यादा या उसके बराबर होनी चाहिए. साथ ही, यह कॉलम की संख्या से बुनियादी टेबल/व्यू के getNumberOfColumns() तरीके से मिलने वाली संख्या से कम होनी चाहिए.

उदाहरण: अगर setColumns([3, 1, 4]) को पहले कॉल किया गया था, तो getViewColumnIndex(4), 2 के तौर पर दिखेगा.

getViewColumns() संख्याओं का अरे

इस व्यू के कॉलम को क्रम में दिखाता है. इसका मतलब है कि अगर setColumns को कुछ श्रेणी के साथ कॉल किया जाता है और getViewColumns() को कॉल किया जाता है, तो आपको एक जैसा कलेक्शन मिलेगा.

getViewRowIndex(tableRowIndex) नंबर

इस व्यू में, ऐसे इंडेक्स को दिखाता है जो दिए गए टेबल (या व्यू) में, इसकी इंडेक्स में दी गई लाइन से मैप होता है. अगर एक से ज़्यादा ऐसे इंडेक्स मौजूद हैं, तो पहला (सबसे छोटा) इंडेक्स दिखाता है. अगर ऐसा कोई इंडेक्स मौजूद नहीं है, तो इंडेक्स में शामिल पंक्ति की वैल्यू '1' दिखती है. हालांकि, इंडेक्स में तय की गई पंक्ति का व्यू नहीं होता. tableRowIndex, बुनियादी टेबल/व्यू के getNumberOfRows() तरीके से मिलने वाली संख्या, शून्य से ज़्यादा या उसके बराबर और पंक्तियों की संख्या से कम होनी चाहिए.

उदाहरण: अगर setRows([3, 1, 4]) को पहले कॉल किया गया था, तो getViewRowIndex(4), 2 के तौर पर दिखेगा.

getViewRows() संख्याओं का अरे

इससे इस व्यू की लाइन क्रम में दिखती हैं. इसका मतलब है कि अगर setRows को कुछ श्रेणी के साथ कॉल किया जाता है और उसके बाद getViewRows() को कॉल किया जाता है, तो आपको एक जैसी कलेक्शन मिलनी चाहिए.

hideColumns(columnIndexes) कोई नहीं

बताए गए कॉलम को मौजूदा व्यू से छिपाता है. columnIndexes, संख्याओं की एक श्रेणी होती है, जो कॉलम के इंडेक्स को छिपाती है. ये इंडेक्स, इंडेक्स करने वाली टेबल/व्यू में मौजूद इंडेक्स नंबर होते हैं. columnIndexes में दी गई संख्याएं, तय किए गए क्रम में नहीं हैं (यानी, [3,4,1] में कोई दिक्कत नहीं है). बाकी कॉलम में, इंडेक्स का क्रम बना रहता है. पहले से छिपे किसी कॉलम के लिए इंडेक्स नंबर डालने पर कोई गड़बड़ी नहीं होगी. हालांकि, इंडेक्स करने के लिए वह वैल्यू डालें जो मौजूदा टेबल/व्यू में मौजूद नहीं है और फिर उस पर गड़बड़ी आएगी. कॉलम दिखाने के लिए, setColumns() को कॉल करें.

उदाहरण: अगर आपके पास 10 कॉलम वाली टेबल है और आप setColumns([2,7,1,7,9]) को कॉल करते हैं, फिर hideColumns([7,9]), तो व्यू में कॉलम [2,1] होंगे.

hideRows(min, max) कभी नहीं

इंडेक्स की उन सभी पंक्तियों को छिपाता है जो मौजूदा व्यू से कम से कम (ज़्यादा से ज़्यादा) के बीच होती हैं. ऊपर दिए गए hideRows(rowIndexes) के लिए, यह सुविधा सिंटैक्स है. उदाहरण के लिए, hideRows(5, 10), hideRows([5, 6, 7, 8, 9, 10]) के बराबर है.

hideRows(rowIndexes) कभी नहीं

बताई गई पंक्तियों को मौजूदा व्यू से छिपाता है. rowIndexes, संख्याओं की श्रेणी होती है. यह पंक्तियों के इंडेक्स को छिपाती है. ये इंडेक्स, बुनियादी टेबल/व्यू में मौजूद इंडेक्स नंबर होते हैं. rowIndexes में दी गई संख्याएं, एक-दूसरे के हिसाब से सही नहीं होनी चाहिए. जैसे, [3,4,1]. बची हुई लाइनों में, इंडेक्स का क्रम बना रहता है. पहले से छिपी हुई पंक्ति के लिए इंडेक्स संख्या डालने पर कोई गड़बड़ी नहीं होगी. हालांकि, वह इंडेक्स डालें जो बुनियादी टेबल/व्यू में मौजूद नहीं है और ऐसे में गड़बड़ी होगी. पंक्तियां दिखाने के लिए, setRows() को कॉल करें.

उदाहरण: अगर आपके पास 10 पंक्तियों वाली टेबल है और उसमें setRows([2,7,1,7,9]) और फिर hideRows([7,9]) को कॉल किया जाता है, तो व्यू में लाइनें [2,1] होंगी.

setColumns(columnIndexes) कभी नहीं

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

  • columnIndexes - संख्याओं और/या ऑब्जेक्ट की कैटगरी (मिलाई जा सकती है):
    • संख्याएं, व्यू में शामिल करने के लिए सोर्स डेटा कॉलम का इंडेक्स तय करते हैं. डेटा में बदलाव नहीं किया जाता. अगर आपको कोई भूमिका या कॉलम की दूसरी प्रॉपर्टी के बारे में साफ़ तौर पर बताना है, तो sourceColumn प्रॉपर्टी वाला एक ऑब्जेक्ट तय करें.
    • ऑब्जेक्ट किसी आपके दिए गए फ़ॉर्मूला के आधार पर तैयार किया गया कॉलम दिखाते हैं. कैलकुलेट किया गया कॉलम हर लाइन के लिए फ़्लाई पर एक मान बनाता है और उसे व्यू में जोड़ता है. ऑब्जेक्ट में ये प्रॉपर्टी होनी चाहिए:
      • calc [function] - फ़ंक्शन, जिसे कॉलम की हर पंक्ति के लिए कॉल किया जाएगा, ताकि उस सेल के लिए मान का हिसाब लगाया जा सके. फ़ंक्शन सिग्नेचर func(dataTable, row) है, जहां dataTable सोर्स DataTable है और row सोर्स डेटा लाइन का इंडेक्स है. फ़ंक्शन को type से तय किए गए प्रकार का एक मान देना चाहिए.
      • type [string] - उस वैल्यू का JavaScript टाइप जिसे कैलक फ़ंक्शन रिटर्न करता है.
      • label [वैकल्पिक, स्ट्रिंग] - जनरेट किए गए इस कॉलम को असाइन करने के लिए, एक वैकल्पिक लेबल. अगर कोई कॉलम नहीं दिया गया है, तो व्यू कॉलम में कोई लेबल नहीं होगा.
      • id [वैकल्पिक, स्ट्रिंग] - जनरेट किए गए इस कॉलम को असाइन करने के लिए एक वैकल्पिक आईडी.
      • sourceColumn - [ज़रूरी नहीं, नंबर] वैल्यू के तौर पर इस्तेमाल करने के लिए सोर्स कॉलम; अगर बताया गया हो, तो calc या type प्रॉपर्टी के बारे में न बताएं. यह किसी ऑब्जेक्ट के बजाय नंबर पास करने जैसा है, लेकिन इससे नए कॉलम के लिए भूमिका और प्रॉपर्टी तय की जा सकती है.
      • properties [वैकल्पिक, ऑब्जेक्ट] - एक ऑब्जेक्ट जिसमें ऐसी कोई भी प्रॉपर्टी होती है जो इस कॉलम में असाइन की जा सकती है. अगर कोई वैल्यू नहीं दी गई है, तो व्यू कॉलम में कोई प्रॉपर्टी नहीं होगी.
      • role [ज़रूरी नहीं है, स्ट्रिंग] - इस कॉलम में असाइन करने के लिए, भूमिका चुनें. अगर इसके बारे में जानकारी नहीं दी जाती है, तो मौजूदा भूमिका इंपोर्ट नहीं की जाएगी.

उदाहरण:

// 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) के लिए, यह सुविधा सिंटैक्स है. उदाहरण के लिए, setRows(5, 10) का मान setRows([5, 6, 7, 8, 9, 10]) के बराबर होता है.

setRows(rowIndexes) कभी नहीं

इसमें, टेबल/व्यू के इंडेक्स नंबर के आधार पर, दिखने वाली पंक्तियां सेट होती हैं. rowIndexes, इंडेक्स नंबर की श्रेणी होनी चाहिए. इससे पता चलता है कि व्यू में कौनसी लाइनें दिखानी हैं. श्रेणी उस क्रम के बारे में बताती है जिसमें पंक्तियों को दिखाना है. साथ ही, पंक्तियों को डुप्लीकेट किया जा सकता है. ध्यान दें कि सिर्फ़ rowIndexes में तय की गई पंक्तियां ही दिखाई जाएंगी; ऐसा करने से व्यू की बाकी सभी पंक्तियां हट जाती हैं. अरे में ऐसे डुप्लीकेट भी हो सकते हैं जो इस व्यू में बताई गई लाइन की डुप्लीकेट कॉपी बना रहे हों. उदाहरण के लिए, setRows([3, 4, 3, 2]) की वजह से, इस व्यू में पंक्ति 3 दो बार दिखे. इस तरह श्रेणी में, दिए गए टेबल/व्यू से लेकर इस व्यू तक की लाइनों की मैपिंग की जाती है. इस तरीके का इस्तेमाल करके, इनपुट जनरेट करने के लिए, getFilteredRows() या getSortedRows() का इस्तेमाल किया जा सकता है.

उदाहरण: किसी टेबल/व्यू की लाइन तीन और शून्य वाली व्यू बनाने के लिए: view.setRows([3, 0])

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) कभी नहीं

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

  • opt_container_ref [वैकल्पिक] - पेज पर मौजूद मान्य कंटेनर एलिमेंट का रेफ़रंस. अगर बताया गया हो, तो चार्ट वहां दिखाया जाएगा. अगर नहीं, तो चार्ट को containerId से बताए गए आईडी वाले एलिमेंट में बनाया जाएगा.
toJSON() स्ट्रिंग इससे, चार्ट के JSON को दिखाने वाला स्ट्रिंग वर्शन दिखता है.
clone() चार्टरैपर चार्ट रैपर की डीप कॉपी दिखाता है.
getDataSourceUrl() स्ट्रिंग अगर इस चार्ट को अपना डेटा डेटा सोर्स से मिलता है, तो इस डेटा सोर्स का यूआरएल दिखाता है. नहीं तो, कोई वैल्यू नहीं दिखती है.
getDataTable() google.visualization.DataTable

अगर इस चार्ट को अपना डेटा स्थानीय रूप से तय DataTable से मिलता है, तो चार्ट के DataTable का रेफ़रंस देगा. अगर इस चार्ट को किसी डेटा सोर्स से अपना डेटा मिलता है, तो वह शून्य दिखेगा.

जब भी आप ChartWrapper.draw() को कॉल करेंगे, तो आपके दिखाए गए ऑब्जेक्ट में किया गया कोई भी बदलाव चार्ट में दिखेगा.

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) किसी भी तरह का कॉन्टेंट

चुने गए चार्ट के विकल्प की वैल्यू दिखाता है

  • कुंजी - फिर से पाने के विकल्प का नाम. कोई मान्य नाम हो सकता है, जैसे कि 'vAxis.title'.
  • opt_default_value [ज़रूरी नहीं] - अगर बताई गई वैल्यू तय नहीं है या शून्य है, तो यह वैल्यू दिखेगी.
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 क्लास का इस्तेमाल, इन-पेज डायलॉग बॉक्स को खोलने के लिए किया जाता है. यह उपयोगकर्ता को विज़ुअलाइज़ेशन के दौरान, कस्टमाइज़ करने की सुविधा देता है.

चार्ट एडिटर का इस्तेमाल करने के लिए:

  1. charteditor पैकेज लोड करें. google.charts.load() में, पैकेज 'charteditor' को लोड करें. आपको उस तरह के चार्ट के लिए पैकेज लोड करने की ज़रूरत नहीं है जिसे आपने एडिटर में रेंडर किया है. चार्ट एडिटर आपके लिए ज़रूरत के मुताबिक सभी पैकेज लोड करेगा.
  2. ChartWrapper ऑब्जेक्ट बनाएं, जो उपयोगकर्ता के हिसाब से चार्ट के बारे में जानकारी दे. यह चार्ट, डायलॉग में दिखेगा और उपयोगकर्ता, एडिटर का इस्तेमाल करके चार्ट को फिर से डिज़ाइन कर सकता है, चार्ट का टाइप बदल सकता है या सोर्स डेटा को बदल सकता है.
  3. नया ChartEditor इंस्टेंस बनाएं और "ok" इवेंट सुनने के लिए रजिस्टर करें. उपयोगकर्ता के डायलॉग बॉक्स में "ठीक है" बटन पर क्लिक करने पर, यह इवेंट दिखता है. इसके मिलने पर, आपको उपयोगकर्ता को बदला गया चार्ट पाने के लिए, ChartEditor.getChartWrapper() को कॉल करना चाहिए.
  4. ChartWrapper पर पास करते हुए, ChartEditor.openDialog() को कॉल करें. इससे डायलॉग खुल जाएगा. डायलॉग बटन, उपयोगकर्ता को एडिटर बंद करने की सुविधा देता है. ChartEditor इंस्टेंस तब तक उपलब्ध रहता है, जब तक कि वह दायरे में रहता है; जब उपयोगकर्ता, डायलॉग बंद करता है, तब यह अपने-आप नहीं मिटता.
  5. कोड को चार्ट में अपडेट करने के लिए, setChartWrapper() पर कॉल करें.

तरीके

तरीका सामान लौटाने की वैल्यू जानकारी
openDialog(chartWrapper, opt_options) शून्य

चार्ट एडिटर को पेज पर एम्बेड किए गए डायलॉग बॉक्स के तौर पर खोलता है. फ़ंक्शन तुरंत रिटर्न करता है; डायलॉग बंद होने का इंतज़ार नहीं किया जाता. अगर आपका इंस्टेंस का दायरा नहीं खोता है, तो डायलॉग को फिर से खोलने के लिए, openDialog() को फिर से कॉल किया जा सकता है. हालांकि, आपको ChartWrapper ऑब्जेक्ट को फिर से पास करना होगा.

  • chartWrapper - विंडो में रेंडर करने के लिए शुरुआती चार्ट तय करने वाला ChartWrapper ऑब्जेक्ट. चार्ट में अपने-आप जानकारी भरी हुई होनी चाहिए DataTable या वह किसी मान्य डेटा सोर्स से कनेक्ट होनी चाहिए. यह रैपर अंदरूनी तौर पर चार्ट एडिटर में कॉपी होता है. इसलिए, अगर ChartWrapper हैंडल में कोई बदलाव किया जाता है, तो वह चार्ट एडिटर की कॉपी में नहीं दिखेगा.
  • opt_options - [ज़रूरी नहीं] चार्ट एडिटर में मौजूद किसी भी विकल्प वाला ऑब्जेक्ट. नीचे दी गई विकल्पों की टेबल देखें.
getChartWrapper() ChartWrapper चार्ट दिखाता है कि चार्ट में ChartWrapper उपयोगकर्ता बदलाव किए गए हैं.
setChartWrapper(chartWrapper) शून्य

रेंडर किए गए चार्ट को एडिटर पर अपडेट करने के लिए, यह तरीका अपनाएं.

chartWrapper - रेंडर करने के लिए नए चार्ट को दिखाने वाला ChartWrapper ऑब्जेक्ट. चार्ट में या तो अपने-आप जानकारी भरी हुई होनी चाहिए या फिर DataTable को किसी मान्य डेटा सोर्स से कनेक्ट किया जाना चाहिए.

closeDialog() शून्य चार्ट एडिटर का डायलॉग बॉक्स बंद करता है.

विकल्प

चार्ट एडिटर इन विकल्पों के साथ काम करता है:

नाम टाइप डिफ़ॉल्ट जानकारी
dataSourceInput एलिमेंट हैंडल या 'urlbox' शून्य

इसका इस्तेमाल करके उपयोगकर्ता को चार्ट के लिए डेटा सोर्स तय करने की सुविधा दें. यह प्रॉपर्टी इन दो में से एक वैल्यू हो सकती है:

  • 'urlbox' - बदलाव किए जा सकने वाले टेक्स्ट बॉक्स में, चार्ट का डेटा सोर्स यूआरएल दिखाएं. उपयोगकर्ता इसे बदल सकता है और नए डेटा सोर्स के आधार पर चार्ट फिर से बनाया जाएगा.
  • DOM एलिमेंट - इसकी मदद से, वह कस्टम एचटीएमएल एलिमेंट दिया जा सकता है जिसका इस्तेमाल करके, डेटा सोर्स चुना जाता है. किसी एचटीएमएल एलिमेंट को हैंडल पास करें. इसे एचटीएमएल कोड में बनाया गया है या पेज से कॉपी किया गया है. यह एलिमेंट, डायलॉग बॉक्स में दिखेगा. इसका इस्तेमाल, उपयोगकर्ता को चार्ट का डेटा सोर्स चुनने की अनुमति देने के लिए करें. उदाहरण के लिए, कई डेटा सोर्स के यूआरएल या उपयोगकर्ताओं के हिसाब से सही नामों वाला लिस्टबॉक्स बनाएं. उपयोगकर्ता इनमें से किसी को भी चुन सकते हैं. एलिमेंट के चुने जाने वाले हैंडलर को लागू करना होगा और चार्ट के डेटा सोर्स को बदलने के लिए इसका इस्तेमाल करना होगा: उदाहरण के लिए, या तो मौजूदा DataTable को बदलें या चार्ट के dataSourceUrl फ़ील्ड में बदलाव करें.

इवेंट

चार्ट एडिटर में ये इवेंट होते हैं:

नाम जानकारी प्रॉपर्टी
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 के साथ किया जा सकता है; इनका इस्तेमाल DataView के साथ नहीं किया जा सकता (DataView ऑब्जेक्ट सिर्फ़ पढ़ने के लिए हैं).

    फ़ॉर्मैट करने वाले टूल का इस्तेमाल करने के सामान्य चरण यहां दिए गए हैं:

    1. पॉप्युलेट हुआ DataTable ऑब्जेक्ट पाएं.
    2. हर उस कॉलम के लिए जिसे फिर से फ़ॉर्मैट करना है:
      1. एक ऐसा ऑब्जेक्ट बनाएं जो आपके फ़ॉर्मैटर के लिए सभी विकल्पों के बारे में बताता है. यह प्रॉपर्टी और वैल्यू के सेट वाला एक सामान्य JavaScript ऑब्जेक्ट है. फ़ॉर्मैटर के दस्तावेज़ देखकर पता लगाएं कि कौनसी प्रॉपर्टी काम करती हैं. (आपके पास विकल्प के तौर पर, एक ऑब्जेक्ट लिटरल नोटेशन ऑब्जेक्ट देने का विकल्प है.)
      2. अपने विकल्प ऑब्जेक्ट को पास करते हुए, अपना फ़ॉर्मैटर बनाएं.
      3. फिर से फ़ॉर्मैट करने के लिए formatter.format(table, colIndex) और DataTable और (शून्य-आधारित) कॉलम नंबर को पास करके कॉल करें. ध्यान दें कि हर कॉलम पर सिर्फ़ एक फ़ॉर्मैटर लागू किया जा सकता है. दूसरे फ़ॉर्मैटर को लागू करने से, पहले फ़ॉर्मैट का असर बदल जाएगा.
        अहम जानकारी: कई फ़ॉर्मैटर में खास फ़ॉर्मैटिंग दिखाने के लिए एचटीएमएल टैग ज़रूरी होते हैं. अगर आपका विज़ुअलाइज़ेशन, allowHtml विकल्प के साथ काम करता है, तो आपको इसे 'सही' पर सेट करना चाहिए.

    यहां, तारीख के कॉलम की तारीख की वैल्यू को लंबी तारीख के फ़ॉर्मैट में बदलने का उदाहरण दिया गया है, ताकि वे तारीख (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 एक खास फ़ॉर्मैटर क्लास का नाम है.

    • विकल्प - एक सामान्य JavaScript ऑब्जेक्ट, जो उस फ़ॉर्मैटर के लिए विकल्प बताता है. यह एक सामान्य ऑब्जेक्ट है, जिसमें प्रॉपर्टी/वैल्यू पेयर के लिए उस फ़ॉर्मैट की खास प्रॉपर्टी मौजूद हैं. आपके पास यह तय करने का विकल्प होता है कि कौनसे फ़ॉर्मैट के साथ काम करता है. इससे जुड़ा दस्तावेज़ देखें. तारीख के फ़ॉर्मैट वाले ऑब्जेक्ट के लिए, कंस्ट्रक्टर को कॉल करने के दो तरीके यहां दिए गए हैं. हम दो प्रॉपर्टी से पास हो रहे हैं:
    // 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)

    बताए गए कॉलम में डेटा को फिर से फ़ॉर्मैट करता है.

    • data - DataTable, जिसमें फ़ॉर्मैट किया जाने वाला डेटा होता है. यहां DataView का इस्तेमाल नहीं किया जा सकता.
    • colindex - फ़ॉर्मैट किए जाने वाले कॉलम का शून्य पर आधारित इंडेक्स. एक से ज़्यादा कॉलम फ़ॉर्मैट करने के लिए, आपको इस तरीके का इस्तेमाल कई बार करना होगा. इसमें, अलग-अलग colइंडेक्स वैल्यू होनी चाहिए.

     

    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)

    सेल के मान के आधार पर, सेल का फ़ोरग्राउंड रंग और/या बैकग्राउंड कलर तय करता है. fromto रेंज में तय वैल्यू वाले किसी भी सेल को color और bgcolor असाइन किया जाएगा. यह जानना ज़रूरी है कि ऐसी रेंज शामिल नहीं की जा सकती जिसमें सभी वर्ण शामिल हों. इसलिए, अगर 1 से 1,000 के बीच की सीमा और 1,000 से दूसरी की रेंज बनाई जाती है, तो 1,000 से 1,000 की वैल्यू शामिल नहीं की जाएगी!

    • from - [स्ट्रिंग, संख्या, तारीख, तारीख समय या समय का दिन] सीमा की निचली सीमा (दोनों सहित) या शून्य. अगर वैल्यू शून्य है, तो वह -∞ से मैच करेगी. स्ट्रिंग की सीमाओं की तुलना, स्ट्रिंग की वैल्यू के साथ वर्णमाला के क्रम से की जाती है.
    • to - [स्ट्रिंग, संख्या, तारीख, तारीख समय या समय का दिन] सीमा की सबसे ज़्यादा सीमा (बिना संदर्भ के) या शून्य. अगर वैल्यू शून्य है, तो यह +∞ से मेल खाएगी. स्ट्रिंग की सीमाओं की तुलना, स्ट्रिंग की वैल्यू के साथ वर्णमाला के क्रम से की जाती है.
    • color - मिलते-जुलते सेल के टेक्स्ट पर लागू किया जाने वाला रंग. वैल्यू '#RRGGBB' वैल्यू या कलर कॉन्सटेंट तय की जा सकती हैं. उदाहरण के लिए: '#FF0000' या 'red'.
    • bgcolor - मिलते-जुलते सेल के बैकग्राउंड में लागू होने वाला रंग. वैल्यू '#RRGGBB' वैल्यू या तय किए गए कलर कॉन्सटेंट हो सकती हैं. उदाहरण के लिए: '#FF0000' या 'red'.
    addGradientRange(from, to, color, fromBgColor, toBgColor)

    सेल के मान के हिसाब से, किसी रेंज से बैकग्राउंड का रंग तय करता है. कलर को स्केल किया जाता है, ताकि सेल की वैल्यू, रेंज के नीचे के रंग से लेकर ऊपरी सीमा के रंग तक हो. ध्यान दें कि यह तरीका, स्ट्रिंग वैल्यू की तुलना नहीं कर सकता, जैसा कि addRange() कर सकता है. सलाह: रंग की रेंज अक्सर दर्शकों के लिए सटीक तौर पर नाप पाना मुश्किल होता है. रेंज को पूरी तरह से संतृप्त रंग से बदलकर सफ़ेद करना सबसे आसान और आसान है (उदाहरण के लिए, #FF0000—FFFFFF.

    • से - [संख्या, तारीख, तारीख समय, या समय का दिन] सीमा की निचली सीमा (शामिल) या शून्य. अगर यह शून्य है, तो यह -∞ से मेल खाएगा.
    • से - [संख्या, तारीख, तारीख समय, या समय का दिन] सीमा की ऊपरी सीमा (बिना शामिल) या शून्य. अगर शून्य है, तो यह +∞ से मेल खाएगा.
    • color - मिलते-जुलते सेल के टेक्स्ट पर लागू किया जाने वाला रंग. सभी सेल के लिए एक ही रंग होता है, चाहे उनका मान कुछ भी हो.
    • fromBgColor - ग्रेडिएंट के निचले सिरे पर मान रखने वाले सेल के लिए बैकग्राउंड रंग. वैल्यू '#RRGGBB' वैल्यू या कलर कॉन्सटेंट तय की जा सकती हैं. उदाहरण के लिए: '#FF0000' या 'red'.
    • toBgColor - ग्रेडिएंट के उच्च सिरे पर मानों को धारण करने वाले सेल के लिए पृष्ठभूमि रंग. वैल्यू '#RRGGBB' वैल्यू या कलर कॉन्सटेंट तय की जा सकती हैं. उदाहरण के लिए: '#FF0000' या 'red'.

     

    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 के फ़ॉर्मैट में हैं:

    • 'छोटा' - छोटा फ़ॉर्मैट: उदाहरण, "28/2/16"
    • 'माध्यम' - मीडियम फ़ॉर्मैट: उदाहरण के लिए, "28 फ़रवरी, 2016 को"
    • 'लंबा' - लंबा प्रारूप: उदा., "28 फ़रवरी, 2016 को"

    formatType और pattern, दोनों के बारे में जानकारी नहीं दी जा सकती.

    pattern

    वैल्यू पर लागू करने के लिए एक कस्टम फ़ॉर्मैट पैटर्न, जो ICU की तारीख और समय के फ़ॉर्मैट की तरह होता है. उदाहरण के लिए: var formatter3 = new google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"});

    formatType और pattern, दोनों के बारे में जानकारी नहीं दी जा सकती. अगले सेक्शन में, पैटर्न के बारे में ज़्यादा जानकारी दी जा सकती है.

    timeZone समय क्षेत्र जिसमें तारीख का मान दिखाना है. यह संख्या की वैल्यू है, जो जीएमटी + समय क्षेत्रों की यह संख्या बताती है (नेगेटिव हो सकती है). तारीख ऑब्जेक्ट डिफ़ॉल्ट रूप से उस कंप्यूटर के समय क्षेत्र के साथ बनाया जाता है जिस पर वे बनाए जाते हैं; इस विकल्प का इस्तेमाल उस मान को अलग-अलग समय क्षेत्र में दिखाने के लिए किया जाता है. उदाहरण के लिए, अगर आपने ग्रीनविच, इंग्लैंड में मौजूद किसी कंप्यूटर पर शाम 5 बजे का 'तारीख' ऑब्जेक्ट बनाया है और उस समय क्षेत्र को -5 (options['timeZone'] = -5 या अमेरिका के पूर्वी पैसिफ़िक समय) के लिए तय किया है, तो वैल्यू को दोपहर 12 बजे दिखाया जाएगा.

    तरीके

    DateFormat पर ये तरीके काम करते हैं:

    तरीका जानकारी
    google.visualization.DateFormat(options)

    कंस्ट्रक्टर. ज़्यादा जानकारी के लिए, ऊपर मौजूद विकल्प सेक्शन देखें.

    format(dataTable, columnIndex) तय किए गए कॉलम में फ़ॉर्मैटिंग लागू करने के लिए, स्टैंडर्ड format() तरीका.
    formatValue(value)

    किसी वैल्यू के फ़ॉर्मैट की गई वैल्यू को दिखाता है. इस तरीके से DataTable की ज़रूरत नहीं है.

    नमूना कोड

    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

    साल का महीना. जनवरी के लिए:

    • M, 1 तैयार करता है
    • MM 01 का उत्पादन करता है
    • MMM, जनवरी में पैदा करता है
    • MMMM जनवरी

    "जुलाई"

    "07"

    दिन महीने का दिन. ज़्यादा 'd' वैल्यू के आगे शून्य दिखेंगे. 10
    घं° 12 घंटे के स्केल में घंटा. ज़्यादा 'h' मानों की शुरुआत में शून्य दिखेंगे. 12
    हाई 24 घंटे के स्केल में घंटा. अतिरिक्त Hk के वैल्यू की शुरुआत में शून्य दिखेंगे. 0
    m घंटे में. ज़्यादा 'M' वैल्यू के आगे शून्य लगाए जाएंगे. 30
    s सेकंड में. एक्स्ट्रा की वैल्यू की शुरुआत में शून्य दिखेंगे. 55
    एस फ़्रैक्शनल सेकंड. एक्स्ट्रा 'S' वैल्यू को दाईं ओर शून्य से डाला जाएगा. 978

    हफ़्ते का दिन. "मंगलवार" के लिए मिले नतीजे:

    • E, T बनाता है
    • EE या EEE, मंगलवार या मंगलवार को बनाएंगे
    • EEEE मंगलवार को जनरेट करता है

    "मंगल"

    "मंगलवार"

    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

    फ़ॉर्मैट स्ट्रिंग. दिए जाने पर, negativeColor को छोड़कर, बाकी सभी विकल्पों को अनदेखा किया जाता है.

    फ़ॉर्मैट स्ट्रिंग, ICU पैटर्न सेट का एक सबसेट है. उदाहरण के लिए, {pattern:'#,###%'} से मिलने वाली वैल्यू 10,7.5, और 0.5 के लिए "1,000%", "750%", और "50%" होगी.

    prefix वैल्यू के लिए स्ट्रिंग प्रीफ़िक्स, जैसे कि "$".
    suffix वैल्यू के लिए एक स्ट्रिंग सफ़िक्स, जैसे कि "%".

    तरीके

    NumberFormat पर ये तरीके काम करते हैं:

    तरीका जानकारी
    google.visualization.NumberFormat(options)

    कंस्ट्रक्टर. ज़्यादा जानकारी के लिए, ऊपर मौजूद विकल्प सेक्शन देखें.

    format(dataTable, columnIndex) बताए गए कॉलम में फ़ॉर्मैटिंग लागू करने के लिए मानक format() तरीका.
    formatValue(value)

    किसी वैल्यू के फ़ॉर्मैट की गई वैल्यू को दिखाता है. इस तरीके से DataTable इस्तेमाल करने की ज़रूरत नहीं है.

    नमूना कोड

    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 पैरामीटर की मदद लेती है. यह एक स्ट्रिंग है, जो यह बताती है कि किस कॉलम की वैल्यू को डेस्टिनेशन कॉलम में डालना है. साथ ही, इसमें यह भी बताया जाता है कि उसे किस कॉलम में डालना है. दूसरे यूआरएल से वैल्यू जोड़ने के लिए, अपनी स्ट्रिंग में प्लेसहोल्डर जोड़ें. प्लेसहोल्डर {#} हैं, जहां # इस्तेमाल किए जाने वाले सोर्स कॉलम का इंडेक्स होता है. इंडेक्स, नीचे दिए गए format() तरीके की srcColumnIndices श्रेणी में इंडेक्स है. लिटरल { or } वर्ण शामिल करने के लिए, इसे इस तरह एस्केप करें: लिट { या \}. शामिल करने के लिए, इसे \\ के तौर पर एस्केप करें.

    नमूना कोड

    नीचे दिए गए उदाहरण में, एक पैटर्न के लिए एक कंस्ट्रक्टर को दिखाया गया है जो एक ऐंकर एलिमेंट बनाता है. इसमें, format() तरीके से लिए गए पहले और दूसरे एलिमेंट शामिल हैं:

    var formatter = new google.visualization.PatternFormat(
      '<a href="mailto:{1}">{0}</a>');
    format(dataTable, srcColumnIndices, opt_dstColumnIndex)

    कुछ अतिरिक्त पैरामीटर के साथ, स्टैंडर्ड फ़ॉर्मैटिंग कॉल:

    • dataTable - वह DataTable जिस पर काम करना है.
    • srcColumnIndices - इसमें एक या एक से ज़्यादा (शून्य के आधार पर) कॉलम इंडेक्स की कैटगरी होती है, ताकि दिए गए DataTable से सोर्स के तौर पर हासिल किया जा सके. इसका इस्तेमाल कंस्ट्रक्टर के पैटर्न पैरामीटर के लिए डेटा सोर्स के तौर पर किया जाएगा. कॉलम नंबर, क्रम से लगाए गए नहीं होने चाहिए.
    • opt_dstColumnindex - [वैकल्पिक] pattern फेरबदल का आउटपुट रखने वाला डेस्टिनेशन कॉलम. अगर खास जानकारी न दी गई हो, तो srcColumIndices के पहले एलिमेंट का इस्तेमाल, डेस्टिनेशन के तौर पर किया जाएगा.

    टेबल के बाद फ़ॉर्मैटिंग के उदाहरण देखें.

    यहां, चार कॉलम वाली टेबल के लिए कुछ उदाहरण और आउटपुट दिए गए हैं.

    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 है
    1. _table_query_url क्वेरी का इस्तेमाल, क्वेरी डेटा सोर्स के यूआरएल को सेट करने के लिए किया जाता है.
    2. _table_query_refresh_interval क्वेरी का इस्तेमाल, क्वेरी रीफ़्रेश इंटरवल (सेकंड में) को सेट करने के लिए किया जाता है.
    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' होता है.

    तरीके

    तरीका सामान लौटाने की वैल्यू जानकारी
    abort() कभी नहीं setRefreshInterval() के साथ शुरू हुई ऑटोमेटेड क्वेरी को भेजना बंद कर देता है.
    setRefreshInterval(seconds) कभी नहीं

    यह नीति, send तरीके से हर तय अवधि (सेकंड में) को अपने-आप कॉल करने के लिए क्वेरी सेट करती है. यह send से शुरू होने वाले पहले कॉल से शुरू होती है. seconds एक ऐसी संख्या है जो शून्य से ज़्यादा या उसके बराबर है.

    अगर आप इस तरीके का इस्तेमाल करते हैं, तो send तरीके को कॉल करने से पहले आपको इसे कॉल करना चाहिए.

    इस तरीके को रद्द करने के लिए, फिर से शून्य (डिफ़ॉल्ट) का इस्तेमाल करें या abort() को कॉल करें.

    setTimeout(seconds) कभी नहीं टाइम आउट गड़बड़ी से पहले, डेटा सोर्स के जवाब का इंतज़ार करने के लिए, सेकंड की संख्या सेट करता है. seconds, शून्य से बड़ी संख्या है.
    टाइम आउट होने की डिफ़ॉल्ट अवधि 30 सेकंड होती है. अगर यह तरीका इस्तेमाल किया जाता है, तो send तरीके को कॉल करने से पहले, इसे इस्तेमाल करना ही चाहिए.
    setQuery(string) कभी नहीं क्वेरी स्ट्रिंग सेट करता है. string पैरामीटर की वैल्यू एक मान्य क्वेरी होनी चाहिए.
    अगर send यह तरीका इस्तेमाल किया जाता है, तो पहले इसका इस्तेमाल किया जाना चाहिए. क्वेरी की भाषा के बारे में ज़्यादा जानें.
    send(callback) कभी नहीं क्वेरी को डेटा सोर्स में भेजता है. callback एक ऐसा फ़ंक्शन होना चाहिए, जिसे डेटा सोर्स के जवाब देने पर कॉल किया जाए. कॉलबैक फ़ंक्शन को google.visualization.QueryResponse टाइप का एक पैरामीटर मिलेगा.

    क्वेरी रिस्पॉन्स

    डेटा सोर्स से मिली क्वेरी के रिस्पॉन्स को दिखाता है. इस क्लास का एक उदाहरण, कॉलबैक फ़ंक्शन में एक आर्ग्युमेंट के तौर पर पास किया जाता है. यह फ़ंक्शन Query.send को कॉल करते समय सेट किया गया था.

    तरीके

    तरीका सामान लौटाने की वैल्यू जानकारी
    getDataTable() डेटा टेबल डेटा सोर्स से मिली डेटा टेबल दिखाता है. अगर क्वेरी को लागू नहीं किया जाता और कोई डेटा नहीं दिखता, तो null दिखाता है.
    getDetailedMessage() स्ट्रिंग फ़ेल होने वाली क्वेरी के लिए गड़बड़ी का पूरा मैसेज दिखाता है. अगर क्वेरी एक्ज़ीक्यूट हो जाती है, तो इस तरीके से एक खाली स्ट्रिंग मिलती है. दिया गया मैसेज एक मैसेज है, जो डेवलपर के लिए है और इसमें तकनीकी जानकारी शामिल हो सकती है. जैसे, 'कॉलम {salary} मौजूद नहीं है'.
    getMessage() स्ट्रिंग फ़ेल होने वाली क्वेरी के लिए, एक छोटा सा गड़बड़ी का मैसेज दिखता है. अगर क्वेरी लागू होती है, तो इस तरीके से खाली स्ट्रिंग दिखती है. मिला मैसेज एक छोटा मैसेज होता है. यह असली उपयोगकर्ताओं के लिए होता है. उदाहरण के लिए, 'अमान्य क्वेरी' या 'ऐक्सेस अस्वीकार किया गया'.
    getReasons() स्ट्रिंग का कलेक्शन और प्रविष्टियों की शून्य श्रेणी देता है. हर एंट्री एक छोटी स्ट्रिंग होती है. इसमें गड़बड़ी या चेतावनी कोड होता है, जो क्वेरी को ट्रिगर करते समय उठाया जाता है. संभावित कोड:
    • access_denied उपयोगकर्ता के पास डेटा सोर्स को ऐक्सेस करने की अनुमति नहीं है.
    • invalid_query बताई गई क्वेरी में सिंटैक्स की एक गड़बड़ी है.
    • data_truncated एक या एक से ज़्यादा ऐसी डेटा पंक्तियां जो क्वेरी के चुने गए डेटा से मेल खाती हैं, आउटपुट साइज़ की सीमाओं की वजह से नहीं मिलीं. (चेतावनी).
    • timeout क्वेरी ने तय समय के अंदर जवाब नहीं दिया.
    hasWarning() बूलियन अगर क्वेरी को लागू करने पर कोई चेतावनी मिलती है, तो true दिखाता है.
    isError() बूलियन अगर क्वेरी एक्ज़ीक्यूट नहीं हो पाती है, तो true दिखाता है और रिस्पॉन्स में कोई डेटा टेबल नहीं होता है. अगर क्वेरी एक्ज़ीक्यूशन हो गई है और जवाब में डेटा टेबल मौजूद है, तो <false> दिखाता है.

    गड़बड़ी दिखाना

    अपने उपयोगकर्ताओं को कस्टम गड़बड़ी के मैसेज दिखाने के लिए एपीआई कई फ़ंक्शन देता है. इन फ़ंक्शन का इस्तेमाल करने के लिए, पेज पर कंटेनर एलिमेंट (आम तौर पर <div>) उपलब्ध कराएं, जिसमें एपीआई एक फ़ॉर्मैट वाला गड़बड़ी का मैसेज दिखाएगा. यह कंटेनर या तो विज़ुअलाइज़ेशन कंटेनर एलिमेंट हो सकता है या सिर्फ़ गड़बड़ियों के लिए एक कंटेनर हो सकता है. अगर विज़ुअलाइज़ेशन में एलिमेंट शामिल है, तो गड़बड़ी का मैसेज, विज़ुअलाइज़ेशन के ऊपर दिखेगा. इसके बाद, गड़बड़ी के मैसेज को दिखाने या हटाने के लिए, नीचे दिए गए फ़ंक्शन को कॉल करें.

    सभी फ़ंक्शन, नेमस्पेस google.visualization.errors में स्टैटिक फ़ंक्शन हैं.

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

    क्वेरी रैपर के उदाहरण में, कस्टम गड़बड़ी का एक उदाहरण देखा जा सकता है.

    फ़ंक्शन सामान लौटाने की वैल्यू जानकारी
    addError(container, message, opt_detailedMessage, opt_options) बनाए गए गड़बड़ी ऑब्जेक्ट की पहचान करने वाली स्ट्रिंग आईडी वैल्यू. यह पेज पर यूनीक वैल्यू होती है. इसका इस्तेमाल गड़बड़ी को हटाने या इसमें शामिल एलिमेंट ढूंढने के लिए किया जा सकता है.

    बताए गए पेज के एलिमेंट में गड़बड़ी का डिसप्ले ब्लॉक जोड़ता है. ऐसा करने से, टेक्स्ट और फ़ॉर्मैटिंग के बारे में पता चलता है.

    • container - DOM एलिमेंट जिसमें गड़बड़ी का मैसेज डाला जाएगा. अगर कंटेनर नहीं मिल रहा है, तो फ़ंक्शन एक JavaScript गड़बड़ी देगा.
    • मैसेज - दिखाया जाने वाला स्ट्रिंग मैसेज.
    • opt_detailedMessage - वैकल्पिक विस्तृत संदेश स्ट्रिंग. डिफ़ॉल्ट रूप से, यह माउसओवर टेक्स्ट होता है, लेकिन इसे नीचे बताए गए opt_options.showInToolTip प्रॉपर्टी में बदला जा सकता है.
    • opt_options - ऐसी वैकल्पिक प्रॉपर्टी जिसमें मैसेज के लिए दिखाने के अलग-अलग विकल्प सेट होते हैं. ये विकल्प काम करते हैं:
      • showInToolTip - बूलियन वैल्यू, जिसमें सही है, वह पूरी जानकारी को सिर्फ़ टूलटिप टेक्स्ट के रूप में दिखाता है, और 'गलत' कंटेनर के मुख्य हिस्से में छोटे मैसेज के बाद पूरी जानकारी दिखाता है. डिफ़ॉल्ट वैल्यू सही है.
      • type - गड़बड़ी टाइप के बारे में बताने वाली एक स्ट्रिंग, जो यह तय करती है कि इस मैसेज में किस सीएसएस को लागू करना चाहिए. इसके लिए 'गड़बड़ी' और 'चेतावनी' का इस्तेमाल किया जा सकता है. डिफ़ॉल्ट वैल्यू 'गड़बड़ी' होती है.
      • style - गड़बड़ी के मैसेज के लिए शैली स्ट्रिंग. यह स्टाइल, चेतावनी के टाइप (opt_options.type) पर लागू होने वाली किसी भी स्टाइल को बदल देगा. उदाहरण: 'background-color: #33ff99; padding: 2px;' डिफ़ॉल्ट वैल्यू एक खाली स्ट्रिंग है.
      • हटाने लायक - एक बूलियन वैल्यू, जहां सही का मतलब है कि उपयोगकर्ता के माउस से क्लिक करके मैसेज बंद किया जा सकता है. डिफ़ॉल्ट वैल्यू गलत है.
    addErrorFromQueryResponse(container, response)

    स्ट्रिंग आईडी की वैल्यू, जो बनाए गए गड़बड़ी ऑब्जेक्ट की पहचान करती है. अगर रिस्पॉन्स में कोई गड़बड़ी नहीं मिलती है, तो कोई वैल्यू नहीं दिखती. यह पेज पर मौजूद यूनीक वैल्यू होती है. इसका इस्तेमाल, गड़बड़ी को हटाने या इसमें मौजूद किसी एलिमेंट को ढूंढने के लिए किया जा सकता है.

    इस तरीके में क्वेरी जवाब और गड़बड़ी के मैसेज वाला कंटेनर पास करें: अगर क्वेरी का जवाब क्वेरी की गड़बड़ी दिखाता है, तो बताए गए पेज एलिमेंट में गड़बड़ी का मैसेज दिखाता है. अगर क्वेरी का जवाब शून्य है, तो मैथ में JavaScript की गड़बड़ी मिलेगी. गड़बड़ी दिखाने के लिए, अपने क्वेरी हैंडलर में मिले QueryResponse को यह मैसेज भेजें. इससे डिसप्ले का स्टाइल उस तरह के लिए भी सेट हो पाएगा जो इस तरह की हो (गड़बड़ी या चेतावनी, ठीक addError(opt_options.type))

    • container - DOM एलिमेंट जिसमें गड़बड़ी का मैसेज डाला जाएगा. अगर कंटेनर नहीं मिल रहा है, तो फ़ंक्शन एक JavaScript गड़बड़ी देगा.
    • response - Query के जवाब में आपके क्वेरी हैंडलर को मिला QueryResponse ऑब्जेक्ट. अगर यह कोई वैल्यू नहीं होती है, तो इस तरीके से JavaScript गड़बड़ी होगी.
    removeError(id) बूलियन: गड़बड़ी होने पर, 'सही'; नहीं तो 'गलत'.

    पेज से आईडी के ज़रिए बताई गई गड़बड़ी को हटा देता है.

    • id - addError() या addErrorFromQueryResponse() का इस्तेमाल करके बनाई गई गड़बड़ी का स्ट्रिंग आईडी.
    removeAll(container) कभी नहीं

    किसी दिए गए कंटेनर से सभी गड़बड़ी ब्लॉक हटाता है. अगर बताया गया कंटेनर मौजूद नहीं है, तो इसकी वजह से एक गड़बड़ी होगी.

    • कंटेनर - हटाने के लिए गड़बड़ी स्ट्रिंग रखने वाला DOM एलिमेंट. अगर कंटेनर नहीं मिल पाता है, तो फ़ंक्शन एक JavaScript गड़बड़ी देगा.
    getContainer(errorId) गड़बड़ियों की जानकारी देने वाले DOM एलिमेंट को हैंडल करें या अगर वह नहीं मिला है, तो कोई वैल्यू न डालें.

    errorID में बताई गई गड़बड़ी को होल्ड करने वाले कंटेनर एलिमेंट के हैंडल पर ले जाता है.

    • errorId - addError() या addErrorFromQueryResponse() का इस्तेमाल करके बनाई गई गड़बड़ी का स्ट्रिंग आईडी.

    इवेंट

    ज़्यादातर विज़ुअलाइज़ेशन, इवेंट को ट्रिगर करके यह दिखाते हैं कि कुछ हुआ है. चार्ट का उपयोगकर्ता होने के नाते, अक्सर आपको ये इवेंट सुनने होंगे. अपने विज़ुअलाइज़ेशन को कोड करने पर, आपको खुद भी ये इवेंट ट्रिगर करने होंगे.

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

    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);
    }

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

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

    ध्यान दें: ये विज़ुअलाइज़ेशन, विज़ुअलाइज़ेशन के नेमस्पेस में हैं, न कि 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()

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