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

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

ध्यान दें: Google विज़ुअलाइज़ेशन एपीआई नेमस्पेस google.visualization.* है

DataTable क्लास

यह वैल्यू की दो-डाइमेंशन में बदली जा सकने वाली टेबल को दिखाता है. किसी DataTable (खास वैल्यू, लाइनें या कॉलम को दिखाने के लिए फ़िल्टर किया गया) की रीड-ओनली कॉपी बनाने के लिए, DataView बनाएं.

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

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

यह भी देखें: 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 की संख्या वाली सेल की वैल्यू के लिए, फ़ॉर्मैट की गई वैल्यू के तौर पर "low" "medium" और "high" की वैल्यू असाइन की जा सकती है.

कंस्ट्रक्टर को कॉल करने के बाद, डेटा की लाइनें जोड़ने के लिए, एक पंक्ति के लिए addRow() या एक से ज़्यादा पंक्तियों के लिए addRows() पर कॉल करें. addColumn() तरीकों का इस्तेमाल करके कॉलम जोड़े जा सकते हैं. पंक्तियों और कॉलम को हटाने के तरीके भी हैं. हालांकि, पंक्तियों या कॉलम को हटाने के बजाय, ऐसा DataView बनाएं जो DataTable का चुनिंदा व्यू हो.

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

ध्यान दें: 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'}]
]);

तरीके

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.

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.
]);

var rowInds = data.getSortedRows([{column: 2}]);
for (var i = 0; i < rowInds.length; i++) {
  var v = data.getValue(rowInds[i], 2);
}

{"cols":[{"id":"Col1","label":"","type":"date"}],
 "rows":[
   {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]},
   {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]}
 ]
}

कंस्ट्रक्टर के JavaScript लिटरल डेटा पैरामीटर का फ़ॉर्मैट

data पैरामीटर में JavaScript स्ट्रिंग का लिटरल ऑब्जेक्ट पास करके, DataTable को शुरू किया जा सकता है. हम इस ऑब्जेक्ट को data ऑब्जेक्ट कॉल करेंगे. नीचे दिए गए ब्यौरे के मुताबिक, इस ऑब्जेक्ट को हाथ से कोड किया जा सकता है. इसके अलावा, अगर आपको Python का इस्तेमाल करना आता है और आपकी साइट पर इसका इस्तेमाल किया जा सकता है, तो helper 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!'}
}

अब सिंटैक्स के बारे में बताते हैं:

data ऑब्जेक्ट में दो ज़रूरी टॉप-लेवल प्रॉपर्टी होती हैं, cols और rows. साथ ही, एक वैकल्पिक p प्रॉपर्टी होती है, जो आर्बिट्रेरी वैल्यू का मैप होती है.

ध्यान दें: दिखाए गए सभी प्रॉपर्टी नाम और स्ट्रिंग कॉन्सटेंट केस-सेंसिटिव (बड़े और छोटे अक्षरों में अंतर) होते हैं. साथ ही, स्ट्रिंग वैल्यू लेने के तौर पर बताई गई प्रॉपर्टी की वैल्यू, कोटेशन मार्क के बीच में होनी चाहिए. उदाहरण के लिए, अगर आपको टाइप प्रॉपर्टी को नंबर के तौर पर बताना है, तो इसे इस तरह दिखाया जाएगा: type: 'number'. हालांकि, वैल्यू के तौर पर संख्या को इस तरह दिखाया जाएगा: v: 42

cols प्रॉपर्टी

cols, ऑब्जेक्ट का कलेक्शन है. यह हर कॉलम के आईडी और टाइप के बारे में जानकारी देता है. हर प्रॉपर्टी एक ऑब्जेक्ट होता है, जिसमें नीचे दी गई प्रॉपर्टी होती हैं (केस-सेंसिटिव):

• type [ज़रूरी है] कॉलम में डेटा का टाइप. यहां दी गई स्ट्रिंग वैल्यू इस्तेमाल की जा सकती हैं (जैसे, v: प्रॉपर्टी, जिसकी जानकारी बाद में दी गई है):
  • 'बूलियन' - JavaScript की बूलियन वैल्यू ('सही' या 'गलत'). वैल्यू का उदाहरण: v:'true'
  • 'नंबर' - 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' - तीन संख्याओं की श्रेणी और वैकल्पिक चौथा नंबर, जो घंटे (0 का मतलब है आधी रात), मिनट, सेकंड, और वैकल्पिक मिलीसेकंड को दिखाता है. वैल्यू के उदाहरण: 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.getFilteredRows() को DataView.setRows() के साथ मिलाकर, डेटा के दिलचस्प सबसेट के साथ DataView बनाने का विकल्प है, जैसा कि यहां दिखाया गया है:

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...() तरीकों को कॉल करें.

यह भी देखें:

setColumns(), hideColumns(), setRows(), hideRows().

कंस्ट्रक्टर 2

यह कंस्ट्रक्टर, DataTable को सीरियल नंबर वाला DataView असाइन करके, नया DataView बनाता है. इससे आपको उस DataView को फिर से बनाने में मदद मिलती है जिसे आपने DataView.toJSON() का इस्तेमाल करके, क्रम से लगाया है.

var myView = google.visualization.DataView.fromJSON(data, viewAsJson)

डेटा

वह DataTable ऑब्जेक्ट जिसका इस्तेमाल आपने DataView बनाने के लिए किया था, जिस पर आपने DataView.toJSON() को कॉल किया था. अगर यह टेबल मूल टेबल से अलग है, तो आपको ऐसे नतीजे मिलेंगे जिनकी उम्मीद नहीं की जा सकती.

viewAsJson

DataView.toJSON() से मिली JSON स्ट्रिंग. इससे यह जानकारी मिलती है कि data DataTable में किन पंक्तियों को दिखाना या छिपाना है.

तरीके

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

ChartWrapper क्लास

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

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 ऑब्जेक्ट या उस ऑब्जेक्ट का सीरियल नंबर वाला स्ट्रिंग वर्शन हो सकता है. इस ऑब्जेक्ट का फ़ॉर्मैट drawChart() दस्तावेज़ में दिखाया गया है. अगर इसके बारे में नहीं बताया गया है, तो आपको इस ऑब्जेक्ट से दिखाए गए set... तरीकों का इस्तेमाल करके, सभी सही प्रॉपर्टी सेट करनी होंगी.

तरीके

ChartWrapper में इन अतिरिक्त तरीकों का इस्तेमाल किया जाता है:

इवेंट

ChartWrapper ऑब्जेक्ट, इन इवेंट को फेंकता है. ध्यान दें कि किसी भी इवेंट को फेंकने से पहले, आपको ChartWrapper.draw() को कॉल करना होगा.

उदाहरण

नीचे दिए गए दो स्निपेट एक जैसा लाइन चार्ट बनाते हैं. पहले उदाहरण में, चार्ट के बारे में बताने के लिए JSON लिटरल नोटेशन का इस्तेमाल किया गया है. दूसरे उदाहरण में, इन वैल्यू को सेट करने के लिए ChartWrapper के तरीकों का इस्तेमाल किया गया है.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API Sample</title>
<!--
  One script tag loads all the required libraries!
-->
<script type="text/javascript"
      src='https://www.gstatic.com/charts/loader.js'></script>
<script>
  google.charts.load('current);
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    var wrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
       'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
       'containerId':'visualization',
       'query':'SELECT A,D WHERE D > 100 ORDER BY D',
       'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
       });
     wrap.draw();
  }
</script>
</head>
<body>
  <div id="visualization" style="height: 400px; width: 400px;"></div>
</body>
</html>

पहले जैसा ही चार्ट, अब सेटर के तरीकों का इस्तेमाल कर रहा है:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title>Google Visualization API Sample</title>
<!-- One script tag loads all the required libraries!
-->
<script type="text/javascript"
    src='https://www.gstatic.com/charts/loader.js'></script>
<script type="text/javascript">
  google.charts.load('current');
  google.charts.setOnLoadCallback(drawVisualization);
  function drawVisualization() {
    // Define the chart using setters:
    var wrap = new google.visualization.ChartWrapper();
    wrap.setChartType('LineChart');
    wrap.setDataSourceUrl('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');
    wrap.setContainerId('visualization');
    wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none'});
    wrap.draw();
  }
</script>
</head>
<body>
  <div id='visualization' style='height: 400px; width: 400px;'></div>
</body>
</html>

ChartEditor की क्लास

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

ChartEditor का इस्तेमाल करने के लिए:

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

तरीके

विकल्प

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

इवेंट

चार्ट एडिटर इन इवेंट की जानकारी दिखाता है:

उदाहरण

उदाहरण के तौर पर दिया गया यह कोड, अपने-आप भरे गए लाइन चार्ट के साथ, चार्ट एडिटर डायलॉग खोलता है. अगर उपयोगकर्ता "ठीक है" पर क्लिक करता है, तो बदलाव किए गए चार्ट को पेज पर, बताए गए <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 नेमस्पेस में ये तरीके बताए गए हैं:

group()

अपने-आप भरे हुए DataTable ऑब्जेक्ट को लेता है और SQL की तरह का एक ग्रुप BY ऑपरेशन करता है. इस कार्रवाई के तहत, तय की गई कॉलम वैल्यू के हिसाब से पंक्तियों को ग्रुप करके टेबल दिखाई जाती है. ध्यान दें कि इससे इनपुट DataTable में बदलाव नहीं होता.

दिखाई गई टेबल में, बताए गए मुख्य कॉलम में वैल्यू के हर कॉम्बिनेशन के लिए एक लाइन होती है. हर लाइन में मुख्य कॉलम शामिल होते हैं. साथ ही, एक ऐसा कॉलम होता है जिसमें की कॉम्बिनेशन से मेल खाने वाली सभी पंक्तियों में एग्रीगेट किए गए कॉलम की वैल्यू होती है. उदाहरण के लिए, तय किए गए कॉलम में सभी वैल्यू का योग या संख्या.

google.visualization.data नेमस्पेस में कई काम की एग्रीगेशन वैल्यू शामिल होती हैं, (जैसे, sum और count). हालांकि, आप अपनी खुद की वैल्यू भी तय कर सकते हैं (उदाहरण के लिए, Standard Deviation या secondsHighest). अपना एग्रीगेटर तय करने के तरीके के बारे में निर्देश, तरीके के ब्यौरे के बाद दिए गए हैं.

सिंटैक्स

google.visualization.data.group(data_table, keys, columns)

data_table

इनपुट DataTable. group() को कॉल करने से इसमें बदलाव नहीं होगा.

बटन

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

• column - वह संख्या जो dt से लेकर कॉलम इंडेक्स तक है. इस पर कन्वर्ज़न लागू किया जाता है.
• modifier - ऐसा फ़ंक्शन जो एक वैल्यू (हर लाइन के लिए उस कॉलम में मौजूद सेल की वैल्यू) को स्वीकार करता है और बदली गई वैल्यू दिखाता है. इस फ़ंक्शन का इस्तेमाल ग्रुप में मदद करने के लिए, कॉलम की वैल्यू में बदलाव करने के लिए किया जाता है: उदाहरण के लिए, किसी तारीख कॉलम से तिमाही का हिसाब लगाने वाले Quarter फ़ंक्शन को कॉल करके, ताकि एपीआई तिमाही के हिसाब से पंक्तियों को ग्रुप कर सके. कैलकुलेट की गई वैल्यू, टेबल के मुख्य कॉलम में दिखती है. इस फ़ंक्शन को इस ऑब्जेक्ट में इनलाइन के ज़रिए बताया जा सकता है या यह कोई ऐसा फ़ंक्शन हो सकता है जिसे आपने अपने कोड में कहीं और तय किया हो (यह कॉल के स्कोप के अंदर होना चाहिए). यह एपीआई, कार्रवाई बदलने वाला एक आसान फ़ंक्शन उपलब्ध कराता है. अपने ज़्यादा काम के फ़ंक्शन बनाने का तरीका जानने के लिए, यहां निर्देश दिए गए हैं. आपको यह पता होना चाहिए कि यह फ़ंक्शन किस तरह का डेटा स्वीकार कर सकता है. साथ ही, इसे सिर्फ़ उस तरह के कॉलम में कॉल करें. आपको इस फ़ंक्शन का रिटर्न टाइप भी पता होना चाहिए. साथ ही, इसके बारे में आगे बताई गई type प्रॉपर्टी में बताना होगा.
• type - फ़ंक्शन modifier से मिला टाइप. यह JavaScript स्ट्रिंग टाइप का नाम होना चाहिए. उदाहरण के लिए: 'नंबर' या 'बूलियन'.
• label - [ज़रूरी नहीं] दिखाए गए DataTable में, इस कॉलम को असाइन करने के लिए स्ट्रिंग लेबल.
• id - [ज़रूरी नहीं] दिखाए गए DataTable में, इस कॉलम को असाइन करने के लिए स्ट्रिंग आईडी.

उदाहरण: [0], [0,2], [0,{column:1, modifier:myPlusOneFunc, type:'number'},2]

कॉलम

[ज़रूरी नहीं] इसकी मदद से, यह तय किया जा सकता है कि आउटपुट टेबल में मुख्य कॉलम के अलावा कौनसे कॉलम शामिल किए जाएं. पंक्ति के ग्रुप की सभी पंक्तियां एक ही आउटपुट वाली पंक्ति में कंप्रेस की जाती हैं. इसलिए, आपको यह तय करना होगा कि पंक्ति के उस ग्रुप में कौनसी वैल्यू दिखानी है. उदाहरण के लिए, आपके पास सेट की पहली लाइन से कॉलम की वैल्यू या उस ग्रुप की सभी पंक्तियों का औसत दिखाने का विकल्प है. columns, ऑब्जेक्ट का एक कलेक्शन है. इसमें ये प्रॉपर्टी होती हैं:

• column - वह संख्या जिससे दिखाए जाने वाले कॉलम का इंडेक्स तय होता है.
• एग्रीगेशन - ऐसा फ़ंक्शन जो इस पंक्ति के इस ग्रुप में मौजूद कॉलम की सभी वैल्यू को स्वीकार करता है और नतीजे की लाइन में दिखाने के लिए एक ही वैल्यू दिखाता है. रिटर्न वैल्यू ऐसी होनी चाहिए जो ऑब्जेक्ट की type प्रॉपर्टी से तय की गई हो. अपने एग्रीगेशन फ़ंक्शन बनाने के बारे में जानकारी यहां दी गई है. आपको पता होना चाहिए कि इस तरीके में किस तरह का डेटा स्वीकार किया जाता है. साथ ही, आपको इसे सिर्फ़ ऐसे कॉलम में शामिल करना चाहिए जो सही हों. यह एपीआई कई काम के एग्रीगेशन फ़ंक्शन उपलब्ध कराता है. सूची देखने के लिए, नीचे दिए गए एग्रीगेशन फ़ंक्शन देखें या अपने एग्रीगेशन फ़ंक्शन को लिखने का तरीका जानने के लिए, एग्रीगेशन फ़ंक्शन बनाना देखें.
• type - एग्रीगेशन फ़ंक्शन का रिटर्न टाइप. यह JavaScript स्ट्रिंग टाइप का नाम होना चाहिए. उदाहरण के लिए: 'नंबर' या 'बूलियन'.
• label - [ज़रूरी नहीं] दिखाई गई टेबल में, इस कॉलम पर लागू किया जाने वाला स्ट्रिंग लेबल.
• 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 पैरामीटर का इस्तेमाल करें.

दिए गए एग्रीगेशन फ़ंक्शन

एपीआई, नीचे दिए गए एग्रीगेशन फ़ंक्शन उपलब्ध कराता है जिन्हें कॉलम में भेजा जा सकता है. एग्रीगेशन पैरामीटर अरे.

मॉडिफ़ायर फ़ंक्शन बनाना

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 ऑब्जेक्ट) को एक नतीजे वाली टेबल में जोड़ा जाता है. यह एसक्यूएल जॉइन स्टेटमेंट की तरह ही होता है. दो टेबल के बीच एक या उससे ज़्यादा कॉलम पेयर (key कॉलम) तय किए जाते हैं और आउटपुट टेबल में, आपके तय किए गए जॉइन तरीके के मुताबिक लाइनें शामिल होती हैं: सिर्फ़ वे लाइनें जिनमें दोनों कुंजियां मेल खाती हैं; एक टेबल की सभी पंक्तियां या दोनों टेबल की सभी पंक्तियां, चाहे कुंजियां मैच हों या न हों. नतीजों की टेबल में सिर्फ़ मुख्य कॉलम शामिल होते हैं. साथ ही, इसमें आपके तय किए गए अन्य कॉलम भी शामिल होते हैं. ध्यान दें कि dt2 में डुप्लीकेट कुंजी नहीं हो सकती, लेकिन dt1 में ऐसा हो सकता है. "कुंजी" शब्द का मतलब है, किसी खास कुंजी कॉलम मान के बजाय सभी कुंजी कॉलम के मानों का संयोजन; इसलिए अगर किसी पंक्ति में सेल के मान A | B | C और कॉलम 0 और 1 कुंजी कॉलम हैं, तो उस पंक्ति के लिए कुंजी AB होगी.

सिंटैक्स

google.visualization.data.join(dt1, dt2, joinMethod,
                                 keys, dt1Columns, dt2Columns);

dt1

dt2 के साथ शामिल होने के लिए, जानकारी अपने-आप भरी गई DataTable.

dt2

dt1 के साथ शामिल होने के लिए, जानकारी वाला DataTable फ़ील्ड अपने-आप भर जाता है. इस टेबल में एक जैसी कई कुंजियां नहीं हो सकतीं (जहां एक कुंजी, मुख्य कॉलम की वैल्यू का कॉम्बिनेशन होती है).

joinMethod

जॉइन टाइप बताने वाली स्ट्रिंग. अगर dt1 में ऐसी कई पंक्तियां हैं जो dt2 पंक्ति से मेल खाती हैं, तो आउटपुट टेबल में मेल खाने वाली सभी dt1 पंक्तियां शामिल होंगी. इन वैल्यू में से कोई चुनें:

• 'full' - आउटपुट टेबल में दोनों टेबल की सभी पंक्तियां शामिल होती हैं. भले ही, कुंजियां मेल खाती हों या नहीं. मेल न खाने वाली पंक्तियों में सेल की एंट्री नहीं होंगी; मेल खाने वाली पंक्तियां जोड़ दी जाएंगी.
• 'inner' - सिर्फ़ उन पंक्तियों को शामिल करने के लिए फ़िल्टर किया गया पूरा जॉइन जहां की से मैच होती हैं.
• 'left' - आउटपुट टेबल में dt1 की सभी पंक्तियां शामिल होती हैं. भले ही, dt2 में कोई मिलती-जुलती पंक्ति हो या नहीं.
• 'right' - आउटपुट टेबल में dt2 की सभी पंक्तियां शामिल होती हैं, चाहे dt1 से मिलती-जुलती कोई भी पंक्ति हो या नहीं.

बटन

दोनों टेबल से तुलना करने के लिए, मुख्य कॉलम का कलेक्शन. हर पेयर, दो एलिमेंट का अरे होता है. पहला पेयर dt1 में और दूसरा dt2 में कुंजी होता है. इस कलेक्शन से कॉलम को उनके इंडेक्स, आईडी या लेबल के हिसाब से तय किया जा सकता है. getColumnIndex देखें.
दोनों टेबल में कॉलम एक ही तरह के होने चाहिए. टेबल से एक पंक्ति शामिल करने के लिए, बताई गई सभी कुंजियों को joinMethod के बताए गए नियम के मुताबिक मैच होना चाहिए. मुख्य कॉलम को आउटपुट टेबल में हमेशा शामिल किया जाता है. सिर्फ़ बाईं ओर मौजूद टेबल dt1 में डुप्लीकेट बटन शामिल किए जा सकते हैं. dt2 में मौजूद बटन यूनीक होने चाहिए. यहां "कुंजी" शब्द का मतलब कुंजी के कॉलम के एक यूनीक सेट से है, न कि अलग-अलग कॉलम की वैल्यू. उदाहरण के लिए, अगर आपके मुख्य कॉलम A और B थे, तो नीचे दी गई टेबल में सिर्फ़ यूनीक कुंजी वैल्यू होंगी (और इसलिए इनका इस्तेमाल dt2 के तौर पर किया जा सकता है):

जवाब	B
जेन	लाल
जेन	नीला
फ़्रेड	लाल

उदाहरण: [[0,0], [2,1]] दोनों टेबल के पहले कॉलम और dt1 के तीसरे कॉलम की वैल्यू की तुलना, dt1 के दूसरे कॉलम से की जाती है.

dt1Columns

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

dt2Columns

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

रिटर्न वैल्यू

मुख्य कॉलम, dt1Columns, और dt1Columns वाला DataTable. इस टेबल को मुख्य कॉलम के हिसाब से, बाईं से दाईं ओर क्रम में लगाया जाता है. जब 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 विज़ुअलाइज़ेशन API, फ़ॉर्मैटर देता है. इनका इस्तेमाल विज़ुअलाइज़ेशन में डेटा को फिर से फ़ॉर्मैट करने के लिए किया जा सकता है. ये फ़ॉर्मैटर, सभी पंक्तियों में बताए गए कॉलम की फ़ॉर्मैट की गई वैल्यू को बदलते हैं. ध्यान दें कि:

• फ़ॉर्मैटर सिर्फ़ फ़ॉर्मैट की गई वैल्यू में बदलाव करते हैं, मौजूद वैल्यू में नहीं. उदाहरण के लिए, दिखाई गई वैल्यू "1,000.00 डॉलर" होगी, लेकिन मौजूदा वैल्यू अब भी "1000" रहेगी.
• फ़ॉर्मैटर, एक बार में सिर्फ़ एक कॉलम पर असर डालते हैं. कई कॉलम को फिर से फ़ॉर्मैट करने के लिए, हर उस कॉलम पर एक फ़ॉर्मैटर लागू करें जिसे आपको बदलना है.
• अगर उपयोगकर्ता के तय किए गए फ़ॉर्मैटर का भी इस्तेमाल किया जाता है, तो कुछ Google विज़ुअलाइज़ेशन फ़ॉर्मैटर, उपयोगकर्ता के तय किए गए फ़ॉर्मैटर की जगह ले लेंगे.

डेटा पर लागू किया गया असल फ़ॉर्मैट, उस स्थान-भाषा से लिया जाता है जिससे एपीआई लोड किया गया है. ज़्यादा जानकारी के लिए, किसी खास स्थान-भाषा में चार्ट लोड करना देखें.

अहम जानकारी: फ़ॉर्मैटर का इस्तेमाल सिर्फ़ DataTable के साथ किया जा सकता है. DataView (DataView ऑब्जेक्ट सिर्फ़ पढ़ने के लिए हैं) के साथ इनका इस्तेमाल नहीं किया जा सकता.

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

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

 

Google विज़ुअलाइज़ेशन API इन फ़ॉर्मैटर की सुविधा देता है:

फ़ॉर्मैटर का नाम	ब्यौरा
ArrowFormat	एक अप या डाउन ऐरो जोड़ता है. इससे पता चलता है कि सेल की वैल्यू, तय की गई वैल्यू से कम है या ज़्यादा.
BarFormat	एक रंगीन बार जोड़ता है, जिसकी दिशा और रंग यह बताता है कि सेल की वैल्यू तय वैल्यू से ज़्यादा है या कम.
ColorFormat	वैल्यू किसी तय रेंज में आती हैं या नहीं, इसके आधार पर सेल में रंग किया जाता है.
DateFormat	तारीख या तारीख और समय की वैल्यू को कई अलग-अलग तरीकों से फ़ॉर्मैट करता है. इनमें "1 जनवरी, 2009," "1/1/09", और "1 जनवरी, 2009" शामिल हैं.
NumberFormat	न्यूमेरिक वैल्यू के अलग-अलग पहलुओं को फ़ॉर्मैट करता है.
PatternFormat	आर्बिट्रेरी टेक्स्ट के साथ, एक ही पंक्ति में मौजूद सेल की वैल्यू को किसी खास सेल में जोड़ता है.

ArrowFormat

वैल्यू, दी गई बेस वैल्यू से कम या ज़्यादा है या नहीं, इसके आधार पर संख्या वाली सेल में अप या डाउन ऐरो जोड़ता है. अगर बेस वैल्यू के बराबर है, तो कोई ऐरो नहीं दिखाया जाता.

विकल्प

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

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

विकल्प

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

Option	उदाहरण ब्यौरा
base	वह संख्या जो सेल की वैल्यू की तुलना करने के लिए, बेस वैल्यू होती है. अगर सेल की वैल्यू ज़्यादा है, तो उसे आधार की दाईं ओर और कम वैल्यू होने पर बाईं ओर खींचें. डिफ़ॉल्ट वैल्यू 0 है.
colorNegative	बार के नेगेटिव वैल्यू सेक्शन को दिखाने वाली स्ट्रिंग. संभावित वैल्यू 'लाल', 'हरा' और 'नीला' हैं. डिफ़ॉल्ट वैल्यू 'लाल' होती है.
colorPositive	बार के पॉज़िटिव वैल्यू वाले सेक्शन के रंग को दिखाने वाली स्ट्रिंग. संभावित वैल्यू 'लाल', 'हरा' और 'नीला' हैं. डिफ़ॉल्ट तौर पर, यह 'नीला' पर सेट होता है.
drawZeroLine	यह एक बूलियन है. इससे पता चलता है कि नेगेटिव वैल्यू मौजूद होने पर, एक पिक्सल गहरे रंग की बेस लाइन बनानी है या नहीं. डार्क लाइन से बार को बेहतर तरीके से देखा जा सकता है. डिफ़ॉल्ट मान 'गलत' है.
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%'});

ColorFormat

सेल की वैल्यू के आधार पर, संख्या वाले सेल के फ़ोरग्राउंड या बैकग्राउंड के लिए रंग असाइन करता है. यह फ़ॉर्मैटर असामान्य है. यह कंस्ट्रक्टर में इसके विकल्प नहीं लेता. इसके बजाय, कलर रेंज जोड़ने के लिए, format() को कॉल करने से पहले, आपको addRange() या addGradientRange() को जितनी बार चाहें उतनी बार कॉल करना चाहिए. रंग की जानकारी, मान्य एचटीएमएल फ़ॉर्मैट में दी जा सकती है. उदाहरण के लिए, "काला", "#000000" या "#000".

तरीके

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

तरीका	ब्यौरा
google.visualization.ColorFormat()	कंस्ट्रक्टर. कोई तर्क नहीं लेता.
addRange(from, to, color, bgcolor)	सेल की वैल्यू के आधार पर, सेल के फ़ोरग्राउंड और/या बैकग्राउंड का रंग तय करता है. from—to रेंज में मौजूद किसी भी सेल की वैल्यू को color और bgcolor एट्रिब्यूट के लिए असाइन किया जाएगा. यह समझना ज़रूरी है कि इस रेंज में सब शामिल नहीं है. ऐसा इसलिए, क्योंकि 1 से 1,000 और 1,000 से सेकंड के बीच की रेंज बनाने से, 1,000 की वैल्यू, 1,000 पर लागू नहीं होगी! from - [String, Number, Date, DateTime या TimeOfDay] रेंज की निचली सीमा (शामिल) या शून्य. अगर कोई वैल्यू नहीं है, तो यह -∞ से मैच करेगा. स्ट्रिंग की सीमाओं की तुलना, स्ट्रिंग की वैल्यू से अंग्रेज़ी वर्णमाला के क्रम में की जाती है. to - [स्ट्रिंग, संख्या, तारीख, DateTime या TimeOfDay] रेंज की सबसे ऊंची सीमा (इसमें शामिल नहीं है) या शून्य. अगर कोई वैल्यू नहीं है, तो यह +∞ से मैच करेगा. स्ट्रिंग की सीमाओं की तुलना, स्ट्रिंग की वैल्यू से अंग्रेज़ी वर्णमाला के क्रम में की जाती है. color - मेल खाने वाली सेल में मौजूद टेक्स्ट पर लागू किया जाने वाला रंग. वैल्यू या तो '#RRGGBB' वैल्यू या तय किए गए कलर कॉन्सटेंट हो सकती हैं (उदाहरण: '#FF0000' या 'लाल'). bgcolor - मेल खाने वाली सेल के बैकग्राउंड पर लागू किया जाने वाला रंग. वैल्यू या तो '#RRGGBB' वैल्यू या तय किए गए कलर कॉन्सटेंट हो सकती हैं (उदाहरण: '#FF0000' या 'लाल').
addGradientRange(from, to, color, fromBgColor, toBgColor)	सेल की वैल्यू के हिसाब से, किसी रेंज से बैकग्राउंड का रंग असाइन करता है. रंग को स्केल किया गया है, ताकि वह निचली सीमा के रंग से लेकर ऊपरी सीमा के रंग की रेंज में सेल की वैल्यू से मेल खा सके. ध्यान दें कि इस तरीके से स्ट्रिंग की वैल्यू की तुलना नहीं की जा सकती, जैसा कि addRange() कर सकता है. अहम जानकारी: दर्शकों के लिए, कलर रेंज का सटीक अनुमान लगाना अक्सर मुश्किल होता है. पढ़ने में सबसे आसान और आसान रेंज, पूरी तरह से सैचुरेटेड रंग से लेकर सफ़ेद तक है (उदाहरण के लिए, #FF0000—FFFFFF). from - [Number, Date, DateTime, या TimeOfDay] रेंज की निचली सीमा (शामिल) या शून्य. अगर शून्य है, तो यह -∞ से मेल खाएगा. to - [Number, Date, DateTime या TimeOfDay] रेंज की ऊपरी सीमा (इसमें शामिल नहीं है) या शून्य. अगर शून्य है, तो यह +∞ से मेल खाएगा. color - मेल खाने वाली सेल में मौजूद टेक्स्ट पर लागू किया जाने वाला रंग. सभी सेल के लिए यह रंग एक जैसा होता है. इस बात से कोई फ़र्क़ नहीं पड़ता कि उनकी वैल्यू क्या है. fromBgColor - ग्रेडिएंट की निचली सीमा में मान रखने वाले सेल के बैकग्राउंड का रंग. वैल्यू या तो '#RRGGBB' वैल्यू या तय किए गए रंग की वैल्यू हो सकती हैं, (उदाहरण: '#FF0000' या 'लाल'). toBgColor - ग्रेडिएंट के ऊपरी छोर पर वैल्यू रखने वाली सेल का बैकग्राउंड का रंग. वैल्यू या तो '#RRGGBB' वैल्यू या तय किए गए रंग की वैल्यू हो सकती हैं, (उदाहरण: '#FF0000' या 'लाल').
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%'});

DateFormat

JavaScript Date वैल्यू को कई तरीकों से फ़ॉर्मैट करता है. इनमें "1 जनवरी, 2016," "1/1/16", और "1 जनवरी, 2016" शामिल हैं.

विकल्प

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

Option	ब्यौरा
formatType	तारीख के लिए क्विक फ़ॉर्मैटिंग विकल्प. स्ट्रिंग की ये वैल्यू इस्तेमाल की जा सकती हैं. 28 फ़रवरी, 2016 की तारीख को फिर से फ़ॉर्मैट किया जा सकता है, जैसा कि नीचे दिखाया गया है: 'short' - छोटा फ़ॉर्मैट: जैसे, "28/2/16" 'medium' - मीडियम फ़ॉर्मैट: जैसे, "28 फ़रवरी, 2016" 'long' - लंबा फ़ॉर्मैट: उदाहरण के लिए, "28 फ़रवरी, 2016" आप formatType और pattern, दोनों को तय नहीं कर सकते.
pattern	आईसीयू में तारीख और समय के फ़ॉर्मैट की तरह ही वैल्यू पर लागू करने के लिए, पसंद के मुताबिक फ़ॉर्मैट पैटर्न. उदाहरण के लिए: 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 e D F g Y u w W. पैटर्न एक ही समय पर न दिखें, इसके लिए आउटपुट में दिखने वाला कोई भी लिटरल टेक्स्ट, सिंगल कोट से घिरा हुआ होना चाहिए. सिर्फ़ सिंगल कोट को छोड़कर, जिसे दोगुना किया जाना चाहिए: उदाहरण के लिए, "K 'o''clock.'".

पैटर्न	ब्यौरा	आउटपुट का उदाहरण
GG	युग का डिज़ाइनर.	"AD"
yy या yyyy	साल.	1996
सोम	साल में महीना. जनवरी के लिए: M का उत्पादन 1 MM ने 01 प्रॉडक्ट बनाए एमएमएम की मदद से जनवरी में प्रॉडक्ट बनाए गए जनवरी में MMMM की पैदावार	"जुलाई" "07 साल"
d	महीने का दिन. अतिरिक्त 'd' मानों की शुरुआत में शून्य जोड़ दिए जाएंगे.	10
h	12 घंटे के स्केल में घंटा. अतिरिक्त 'h' वैल्यू की शुरुआत में शून्य जोड़ दिए जाएंगे.	12
H	24 घंटे के स्केल में घंटा. अतिरिक्त Hk' मान की शुरुआत में शून्य जोड़ देंगे.	0
मी॰	घंटे में मिनट. अतिरिक्त 'M' मानों की शुरुआत में शून्य जोड़ दिए जाएंगे.	30
s	सेकंड में सेकंड. अतिरिक्त 's' मानों की शुरुआत में शून्य जोड़ देंगे.	55
S	फ़्रैक्शनल सेकंड. अतिरिक्त 'S' वैल्यू, दाईं ओर शून्य के साथ जोड़ दी जाएंगी.	978
E	हफ़्ते का दिन. "मंगलवार" के लिए ये आउटपुट हैं: E, T पैदा करता है EE या EEE प्रॉडक्ट मंगलवार या मंगलवार ईईईई प्रोड्यूसर मंगलवार	"मंगलवार" "मंगलवार"
aa	AM/PM	"पीएम"
k	दिन में घंटा (1~24). अतिरिक्त 'k' मानों से पहले शून्य जोड़ दिए जाएंगे.	24
K	AM/PM में घंटा (0~11). अतिरिक्त 'k' मानों से पहले शून्य जोड़ दिए जाएंगे.	0
z	टाइम ज़ोन. टाइम ज़ोन 5 के लिए, "UTC+5" जनरेट करता है	"यूटीसी+5"
Z	आरएफ़सी 822 फ़ॉर्मैट में टाइम ज़ोन. टाइम ज़ोन -5 के लिए: Z, ZZ, ZZZ उपज -0500 ZZZZ और दूसरी कई चीज़ें "GMT -05:00"	"-0800" "जीएमटी -05:00"
v	टाइम ज़ोन (सामान्य).	"वगैरह/जीएमटी-5"
'	टेक्स्ट के लिए escape	'तारीख='
''	सिंगल कोट	''

NumberFormat

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

विकल्प

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

Option	ब्यौरा
decimalSymbol	दशमलव चिह्नक के रूप में उपयोग करने के लिए एक वर्ण. डिफ़ॉल्ट बिंदु (.) होता है.
fractionDigits	वह संख्या जो बताती है कि दशमलव के बाद कितने अंक दिखाने हैं. डिफ़ॉल्ट वैल्यू दो होती है. अगर आपने संख्या में दी गई संख्या से ज़्यादा अंक तय किए हैं, तो छोटी वैल्यू के लिए शून्य दिखेंगे. छोटी की गई वैल्यू को राउंड अप किया जाएगा (पांच राउंड अप किया जाएगा).
groupingSymbol	दशमलव के बाईं ओर अंकों को तीन के सेट में रखने के लिए इस्तेमाल किया जाने वाला वर्ण. डिफ़ॉल्ट कॉमा (,) होता है.
negativeColor	नेगेटिव वैल्यू के लिए टेक्स्ट का रंग. कोई डिफ़ॉल्ट वैल्यू नहीं है. मान कोई भी स्वीकार किया जा सकने वाला एचटीएमएल रंग हो सकता है, जैसे कि "लाल" या "#FF0000".
negativeParens	एक बूलियन, जहां सही का मतलब है कि नेगेटिव वैल्यू, ब्रैकेट में होनी चाहिए. डिफ़ॉल्ट तौर पर, यह 'सही' पर सेट होती है.
pattern	फ़ॉर्मैट स्ट्रिंग. ऐसा करने पर, negativeColor को छोड़कर बाकी सभी विकल्पों को अनदेखा कर दिया जाता है. फ़ॉर्मैट स्ट्रिंग आईसीयू पैटर्न सेट का सबसेट है. उदाहरण के लिए, {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%'});

PatternFormat

तय किए गए कॉलम की वैल्यू को, आर्बिट्रेरी टेक्स्ट के साथ-साथ एक कॉलम में मर्ज करने की सुविधा देता है. इसलिए, उदाहरण के लिए, अगर आपके नाम के लिए एक कॉलम और उपनाम के लिए एक कॉलम है, तो तीसरे कॉलम में {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 से सोर्स के तौर पर पुल किए जा सकें. इसका इस्तेमाल, कंस्ट्रक्टर में pattern पैरामीटर के लिए डेटा सोर्स के तौर पर किया जाएगा. कॉलम नंबर, क्रम से लगाए नहीं होने चाहिए. opt_dstColumnIndex - [वैकल्पिक] पैटर्न बदलाव के आउटपुट को दिखाने के लिए डेस्टिनेशन कॉलम. अगर इसकी जानकारी नहीं दी गई है, तो 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 विज़ुअलाइज़ेशन API का इस्तेमाल करने वाले ऐसे गैजेट लिखना आसान बनाने के लिए सहायक क्लास.

निर्माता

google.visualization.GadgetHelper()

तरीके

तरीका	रिटर्न वैल्यू	ब्यौरा
createQueryFromPrefs(prefs)	google.visualization.Query	स्टैटिक. google.visualization.Query का एक नया इंस्टेंस बनाएं और गैजेट की प्राथमिकताओं से मिली वैल्यू के हिसाब से इसकी प्रॉपर्टी सेट करें. prefs पैरामीटर का टाइप _IG_Prefs है प्राथमिकता _table_query_url का उपयोग क्वेरी डेटा स्रोत URL को सेट करने के लिए किया जाता है. प्राथमिकता _table_query_refresh_interval का इस्तेमाल क्वेरी रीफ़्रेश इंटरवल (सेकंड में) को सेट करने के लिए किया जाता है.
validateResponse(response)	बूलियन	स्टैटिक. response पैरामीटर google.visualization.QueryResponse टाइप का है. अगर जवाब में डेटा शामिल होता है, तो true दिखाता है. अगर क्वेरी लागू नहीं हो सकी और जवाब में डेटा नहीं है, तो false नतीजा दिखाता है. कोई गड़बड़ी होने पर, यह तरीका गड़बड़ी का मैसेज दिखाता है.

क्वेरी की क्लास

Google स्प्रेडशीट जैसे किसी बाहरी डेटा सोर्स को डेटा से जुड़ी क्वेरी भेजने के लिए, ये ऑब्जेक्ट उपलब्ध हैं.

• क्वेरी - आउटगोइंग डेटा अनुरोध को रैप करता है.
• QueryResponse - डेटा सोर्स से मिलने वाले रिस्पॉन्स को हैंडल करता है.

क्वेरी

यह डेटा सोर्स को भेजी जाने वाली क्वेरी को दिखाता है.

निर्माता

google.visualization.Query(dataSourceUrl, opt_options)

पैरामीटर

dataSourceUrl

[ज़रूरी है, स्ट्रिंग] क्वेरी भेजने के लिए यूआरएल. Google स्प्रेडशीट के लिए चार्ट और स्प्रेडशीट दस्तावेज़ देखें.

opt_options

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

• sendMethod - [वैकल्पिक, स्ट्रिंग] क्वेरी भेजने के लिए इस्तेमाल किए जाने वाले तरीके के बारे में बताता है. स्ट्रिंग की इनमें से कोई एक वैल्यू चुनें:
  • '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 टाइप का एक पैरामीटर मिलेगा.

QueryResponse

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

तरीके

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

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

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

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

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

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

फ़ंक्शन	रिटर्न वैल्यू	ब्यौरा
addError(container, message, opt_detailedMessage, opt_options)	स्ट्रिंग आईडी की वैल्यू, जो गड़बड़ी वाले ऑब्जेक्ट की पहचान करती है. यह पेज पर एक यूनीक वैल्यू होती है. इसका इस्तेमाल, गड़बड़ी को हटाने या उसमें शामिल एलिमेंट को खोजने के लिए किया जा सकता है.	तय किए गए पेज एलिमेंट में, खास टेक्स्ट और फ़ॉर्मैटिंग के साथ गड़बड़ी वाला डिसप्ले ब्लॉक जोड़ता है. कंटेनर - वह DOM एलिमेंट जिसमें गड़बड़ी का मैसेज डालना है. अगर कंटेनर नहीं मिलता है, तो फ़ंक्शन एक JavaScript गड़बड़ी दिखाएगा. message - दिखाया जाने वाला स्ट्रिंग मैसेज. opt_detailedMessage - एक वैकल्पिक विस्तृत संदेश स्ट्रिंग. डिफ़ॉल्ट रूप से, यह माउसओवर टेक्स्ट होता है. हालांकि, इसे नीचे दी गई opt_options.showInToolTip प्रॉपर्टी में जाकर बदला जा सकता है. opt_options - प्रॉपर्टी वाला एक वैकल्पिक ऑब्जेक्ट, जो मैसेज को दिखाने के लिए कई विकल्प सेट करता है. इन विकल्पों का इस्तेमाल किया जा सकता है: showInTooltip - एक बूलियन वैल्यू जहां सही है, ज़्यादा जानकारी वाले मैसेज को सिर्फ़ टूलटिप टेक्स्ट के तौर पर दिखाता है. वहीं, false पर, छोटे मैसेज के बाद कंटेनर के मुख्य हिस्से में, ज़्यादा जानकारी वाले मैसेज को दिखाया जाता है. डिफ़ॉल्ट मान 'सही' है. type - गड़बड़ी के टाइप के बारे में बताने वाली स्ट्रिंग, जिससे यह तय होता है कि इस मैसेज पर कौनसी सीएसएस स्टाइल लागू होनी चाहिए. इसके लिए, 'गड़बड़ी' और 'चेतावनी' वाली वैल्यू इस्तेमाल की जा सकती हैं. डिफ़ॉल्ट वैल्यू 'error' होती है. style - गड़बड़ी के मैसेज के लिए स्टाइल स्ट्रिंग. यह स्टाइल, चेतावनी के टाइप (opt_options.type) पर लागू की गई किसी भी स्टाइल को बदल देगा. उदाहरण: 'background-color: #33ff99; padding: 2px;' डिफ़ॉल्ट वैल्यू एक खाली स्ट्रिंग होती है. हटाने की सुविधा - यह एक बूलियन वैल्यू है. यहां सही का मतलब है कि उपयोगकर्ता के माउस क्लिक करके, मैसेज को बंद किया जा सकता है. डिफ़ॉल्ट मान गलत है.
addErrorFromQueryResponse(container, response)	स्ट्रिंग आईडी वैल्यू, जो गड़बड़ी वाले ऑब्जेक्ट की पहचान करती है. इसके अलावा, अगर रिस्पॉन्स से गड़बड़ी नहीं मिलती, तो इसकी वैल्यू शून्य हो सकती है. यह पेज पर एक यूनीक वैल्यू होती है. इसका इस्तेमाल, गड़बड़ी को हटाने या उसमें शामिल एलिमेंट को खोजने के लिए किया जा सकता है.	इस तरीके का इस्तेमाल करके, क्वेरी रिस्पॉन्स और गड़बड़ी के मैसेज वाला कंटेनर पास करें: अगर क्वेरी के रिस्पॉन्स से क्वेरी में कोई गड़बड़ी मिलती है, तो तय किए गए पेज एलिमेंट में गड़बड़ी का मैसेज दिखाता है. अगर क्वेरी का रिस्पॉन्स शून्य है, तो यह तरीका JavaScript की गड़बड़ी दिखाएगा. गड़बड़ी दिखाने के लिए, अपने क्वेरी हैंडलर में मिले QueryResponse को इस मैसेज में पास करें. इससे, डिसप्ले की स्टाइल भी सेट हो जाएगी, जो कि टाइप के हिसाब से सही हो (addError(opt_options.type) से मिलती-जुलती गड़बड़ी या चेतावनी) कंटेनर - वह DOM एलिमेंट जिसमें गड़बड़ी का मैसेज डालना है. अगर कंटेनर नहीं मिलता है, तो फ़ंक्शन एक JavaScript गड़बड़ी दिखाएगा. response - किसी क्वेरी के जवाब में, आपके क्वेरी हैंडलर को मिला QueryResponse ऑब्जेक्ट. अगर यह वैल्यू शून्य है, तो यह तरीका JavaScript की गड़बड़ी दिखाएगा.
removeError(id)	बूलियन: अगर गड़बड़ी को हटा दिया गया है, तो सही है; नहीं तो गलत.	पेज से आईडी के ज़रिए बताई गई गड़बड़ी हटाता है. id - addError() या addErrorFromQueryResponse() का इस्तेमाल करके बनाई गई किसी गड़बड़ी का स्ट्रिंग आईडी.
removeAll(container)	कोई नहीं	किसी तय किए गए कंटेनर से गड़बड़ी वाले सभी ब्लॉक हटाता है. अगर बताया गया कंटेनर मौजूद नहीं है, तो इससे गड़बड़ी मिलेगी. कंटेनर - DOM एलिमेंट जिसमें गड़बड़ी वाली स्ट्रिंग हटाई जाती हैं. अगर कंटेनर नहीं मिलता है, तो फ़ंक्शन, JavaScript की गड़बड़ी दिखाएगा.
getContainer(errorId)	बताई गई गड़बड़ी को होल्ड करने वाले DOM एलिमेंट को हैंडल करें या न मिलने पर शून्य को हैंडल करें.	errorID से मिली गड़बड़ी वाले कंटेनर एलिमेंट का हैंडल हासिल करता है. errorId - addError() या addErrorFromQueryResponse() का इस्तेमाल करके बनाई गई गड़बड़ी का स्ट्रिंग आईडी.

इवेंट

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

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

• google.visualization.events.addListener() और google.visualization.events.addOneTimeListener() इवेंट के हिसाब से काम करते हैं.
• google.visualization.events.removeListener() मौजूदा लिसनर को हटाता है
• google.visualization.events.removeAllListeners() किसी खास चार्ट के सभी लिसनर को हटा देता है
• google.visualization.events.trigger() किसी इवेंट को ट्रिगर करता है.

addListener()

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

google.visualization.events.addListener(source_visualization,
  event_name, handling_function)

source_visualization

सोर्स विज़ुअलाइज़ेशन इंस्टेंस के लिए हैंडल.

event_name

सुनने के लिए इवेंट की स्ट्रिंग का नाम. विज़ुअलाइज़ेशन में यह दस्तावेज़ होना चाहिए कि उससे कौनसे इवेंट मिलते हैं.

handling_function

जब source_विज़ुअलाइज़ेशन, 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)

source_visualization

सोर्स विज़ुअलाइज़ेशन इंस्टेंस के लिए एक हैंडल, जिससे सभी इवेंट लिसनर को हटाया जाना चाहिए.

trigger()

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

google.visualization.events.trigger(source_visualization, event_name,
  event_args)

source_visualization

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

event_name

इवेंट को कॉल करने के लिए स्ट्रिंग का नाम. अपने हिसाब से कोई भी स्ट्रिंग वैल्यू चुनी जा सकती है.

event_args

[ज़रूरी नहीं] नाम/वैल्यू के पेयर का मैप, जिसे पाने के तरीके को पास करना है. उदाहरण के लिए: {message: "हैलो!", स्कोर: 10, नाम: "फ़्रेड"}. अगर किसी इवेंट की ज़रूरत नहीं है, तो शून्य पास किया जा सकता है. इस पैरामीटर के लिए, रिसीवर को शून्य स्वीकार करने के लिए तैयार रहना होगा.

उदाहरण

यहां एक विज़ुअलाइज़ेशन का उदाहरण दिया गया है, जो इसके ऑनक्लिक तरीके को कॉल करने पर, "चुनें" नाम का तरीका दिखाता है. यह कोई भी वैल्यू पास नहीं करता.

MyVisualization.prototype.onclick = function(rowIndex) {
  this.highlightRow(this.selectedRow, false); // Clear previous selection
  this.highlightRow(rowIndex, true); // Highlight new selection

  // Save the selected row index in case getSelection is called.
  this.selectedRow = rowIndex;

  // Trigger a select event.
  google.visualization.events.trigger(this, 'select', null);
}

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

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

• कंस्ट्रक्टर
• ड्रॉ()
• getAction() [वैकल्पिक]
• getSelection() [वैकल्पिक]
• removeAction() [ज़रूरी नहीं]
• setAction() [ज़रूरी नहीं]
• setSelection() [ज़रूरी नहीं]

ध्यान दें: ये तरीके, विज़ुअलाइज़ेशन के नेमस्पेस में हैं, न कि google.विज़ुअलाइज़ेशन नेमस्पेस .

कंस्ट्रक्टर

कंस्ट्रक्टर के पास आपकी विज़ुअलाइज़ेशन क्लास का नाम होना चाहिए और उससे उस क्लास का एक इंस्टेंस मिलना चाहिए.

visualization_class_name(dom_element)

dom_element

ऐसे डीओएम एलिमेंट का पॉइंटर जहां विज़ुअलाइज़ेशन को एम्बेड किया जाना चाहिए.

उदाहरण

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() को लागू करने से "चुनें" इवेंट ट्रिगर नहीं होना चाहिए. विज़ुअलाइज़ेशन, चुने गए हिस्से को अनदेखा कर सकता है. उदाहरण के लिए, अगर कोई टेबल सिर्फ़ चुनिंदा लाइनें दिखा सकती है, तो हो सकता है कि 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) पर सेल और पूरी लाइन को चुनता है.

अलग-अलग तरह के स्टैटिक तरीके

इस सेक्शन में ऐसे कई काम के तरीके बताए गए हैं जिनके बारे में google.visualization नेमस्पेस में बताया गया है.

arrayToDataTable()

यह तरीका, दो डाइमेंशन वाले अरे को डेटा टेबल में बदल देता है.

कॉलम के डेटा टाइप, दिए गए डेटा के आधार पर अपने-आप तय होते हैं. कॉलम के डेटा टाइप को कलेक्शन (जैसे, {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);

drawChart()

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

सिंटैक्स

google.visualization.drawChart(chart_JSON_or_object)

chart_JSON_or_object

यहां दी गई प्रॉपर्टी (केस-सेंसिटिव) के साथ JSON लिटरल स्ट्रिंग या JavaScript ऑब्जेक्ट मौजूद हो सकता है:

प्रॉपर्टी	टाइप	ज़रूरी है	डिफ़ॉल्ट	ब्यौरा
chartType	String	ज़रूरी है	कुछ नहीं	विज़ुअलाइज़ेशन का क्लास नाम. Google चार्ट के लिए, google.visualization पैकेज के नाम की जानकारी हटाई जा सकती है. अगर सही विज़ुअलाइज़ेशन लाइब्रेरी पहले से लोड नहीं की गई है, तो यह तरीका Google विज़ुअलाइज़ेशन होने पर आपके लिए लाइब्रेरी लोड कर देगा. अगर यह Google विज़ुअलाइज़ेशन है, तो आपको तीसरे पक्ष के विज़ुअलाइज़ेशन को खास तौर पर लोड करना होगा. उदाहरण: Table, PieChart, example.com.CrazyChart.
containerId	String	ज़रूरी है	कुछ नहीं	आपके पेज पर मौजूद उस डीओएम एलिमेंट का आईडी जो विज़ुअलाइज़ेशन को होस्ट करेगा.
विकल्प	ऑब्जेक्ट	ज़रूरी नहीं है	कुछ नहीं	विज़ुअलाइज़ेशन के विकल्पों की जानकारी देने वाला ऑब्जेक्ट. JavaScript की लिटरल नोटेशन सुविधा का इस्तेमाल किया जा सकता है या ऑब्जेक्ट को हैंडल दिया जा सकता है. उदाहरण: "options": {"width": 400, "height": 240, "is3D": true, "title": "Company Performance"}
dataTable	ऑब्जेक्ट	ज़रूरी नहीं है	कोई नहीं	विज़ुअलाइज़ेशन को पॉप्युलेट करने के लिए इस्तेमाल किया जाने वाला DataTable. यह ऊपर बताए गए तरीके के हिसाब से, DataTable की लिटरल JSON स्ट्रिंग हो सकती है. इसके अलावा, अपने-आप भरे हुए google.visualization.DataTable ऑब्जेक्ट का हैंडल या दो डाइमेंशन वाला एक हैंडल भी हो सकता है. इसके अलावा, यह 2-डाइमेंशन वाला कलेक्शन भी हो सकता है, जिसे arrayToDataTable(opt_firstRowIsData=false) ने स्वीकार किया है. आपको इस प्रॉपर्टी या dataSourceUrl प्रॉपर्टी के बारे में बताना होगा.
dataSourceUrl	String	ज़रूरी नहीं है	कोई नहीं	चार्ट डेटा को पॉप्युलेट करने के लिए डेटा सोर्स क्वेरी (उदाहरण के लिए, Google स्प्रेडशीट). आपको इस प्रॉपर्टी या dataTable प्रॉपर्टी के बारे में बताना होगा.
query	String	ज़रूरी नहीं है	कोई नहीं	अगर dataSourceUrl के बारे में बताया जा रहा है, तो डेटा को फ़िल्टर करने या उसमें बदलाव करने के लिए, विज़ुअलाइज़ेशन क्वेरी की भाषा का इस्तेमाल करके, SQL जैसी क्वेरी स्ट्रिंग तय की जा सकती है.
refreshInterval	नंबर	ज़रूरी नहीं है	कोई नहीं	विज़ुअलाइज़ेशन को अपना क्वेरी सोर्स कितनी बार रीफ़्रेश करना चाहिए. यह जानकारी सेकंड में दी जाती है. इसका इस्तेमाल सिर्फ़ तब करें, जब dataSourceUrl के बारे में जानकारी दी जा रही हो.
व्यू	ऑब्जेक्ट या कलेक्शन	ज़रूरी नहीं है	कोई नहीं	DataView शुरू करने वाला ऑब्जेक्ट सेट करता है, जो dataTable या dataSourceUrl पैरामीटर के मुताबिक तय किए गए डेटा पर फ़िल्टर के तौर पर काम करता है. किसी स्ट्रिंग या DataView इनिशलाइज़र ऑब्जेक्ट में से किसी एक को पास किया जा सकता है, जैसे कि dataview.toJSON() से लौटाया जाता है. उदाहरण: "view": {"columns": [1, 2]} आपके पास DataView शुरू करने वाले ऑब्जेक्ट के कलेक्शन को पास करने का भी विकल्प है. इस स्थिति में, नई डेटा टेबल बनाने के लिए, कलेक्शन में मौजूद पहला DataView मौजूदा डेटा पर लागू किया जाता है और पहला DataView, डेटा टेबल पर लागू किया जाता है. ऐसा, पहली DataView को लागू करने से होता है. यह क्रम इसी तरह जारी रहता है.

उदाहरण

यह स्प्रेडशीट डेटा सोर्स के आधार पर एक टेबल चार्ट बनाता है और इसमें SELECT A,D WHERE D > 100 ऑर्डर 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()

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