इवेंट मैनेज करना

इस पेज पर, चार्ट की मदद से ट्रिगर किए गए इवेंट को सुनने और उन्हें मैनेज करने का तरीका बताया गया है.

विषय सूची

खास जानकारी

Google चार्ट ऐसे इवेंट ट्रिगर कर सकते हैं जिन्हें सुना जा सकता है. उपयोगकर्ता की कार्रवाइयों से इवेंट ट्रिगर हो सकते हैं. जैसे, जब कोई उपयोगकर्ता चार्ट पर क्लिक करता है. JavaScript वाले किसी तरीके को रजिस्टर किया जा सकता है, ताकि किसी इवेंट के ट्रिगर होने पर उसे कॉल किया जा सके. ऐसा किसी इवेंट के लिए खास डेटा के साथ किया जा सकता है.

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

एक इवेंट होता है, जिसे चुने जा सकने वाले किसी भी चार्ट को ट्रिगर किया जाना चाहिए: 'चुनें' इवेंट. हालांकि, इस इवेंट के व्यवहार और मतलब को हर चार्ट से तय किया जाता है.

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

किसी इवेंट के लिए रजिस्टर करना और उसे मैनेज करना

अपने इवेंट हैंडलर रजिस्टर करने के लिए, google.visualization.events.addListener() या addOneTimeListener() को कॉल करने के लिए, इवेंट दिखाने वाले चार्ट का नाम, इवेंट की स्ट्रिंग का नाम, और इवेंट के सक्रिय होने पर कॉल करने वाले फ़ंक्शन का नाम डालें. आपके फ़ंक्शन को एक ही पैरामीटर स्वीकार करना होगा, जो ट्रिगर किया गया इवेंट है. इस इवेंट में, इवेंट की कस्टम जानकारी शामिल हो सकती है. इसके बारे में चार्ट के दस्तावेज़ में बताया गया है.

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

जब भी उपयोगकर्ता किसी टेबल की लाइन पर क्लिक करता है, तब यह कोड स्निपेट एक सूचना बॉक्स दिखाता है:

// Create a table chart on your page.
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);

// Every time the table fires the "select" event, it should call your
// selectHandler() function.
google.visualization.events.addListener(table, 'select', selectHandler);

function selectHandler(e) {
  alert('A table row was selected');
}

ध्यान दें कि यह सिर्फ़ इस टेबल ऑब्जेक्ट के इवेंट सुनने के लिए रजिस्टर होगा. आप सिर्फ़ किसी खास ऑब्जेक्ट से इवेंट पाने के लिए ही रजिस्टर कर सकते हैं.

यहां बताए गए तरीके से, फ़ंक्शन की परिभाषा भी पास की जा सकती है:

// Pass in a function definition.
google.visualization.events.addListener(orgchart, 'select', function() {
  table.setSelection(orgchart.getSelection());
});

इवेंट की जानकारी पाना

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

आपके हैंडलर को इवेंट की जानकारी भेजी जाती है

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

// google.visualization.table exposes a 'page' event.
google.visualization.events.addListener(table, 'page', myPageEventHandler);
...
function myPageEventHandler(e) {
  alert('The user is navigating to page ' + e['page']);
}

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

किसी ग्लोबल ऑब्जेक्ट को इवेंट की जानकारी दी जा रही है

कुछ इवेंट, इसके बजाय ग्लोबल ऑब्जेक्ट की प्रॉपर्टी को बदल देते हैं, जिसके लिए आप अनुरोध कर सकते हैं. इसका एक सामान्य उदाहरण "चुनें" इवेंट है, जो तब ट्रिगर होता है, जब कोई उपयोगकर्ता चार्ट का कोई हिस्सा चुनता है. ऐसे मामले में, मौजूदा चुनाव के बारे में जानने के लिए कोड को चार्ट पर getSelection() कॉल करना चाहिए. नीचे चुने गए इवेंट के बारे में ज़्यादा जानकारी दी गई है.

// orgChart is my global orgchart chart variable.
google.visualization.events.addListener(orgChart, 'select', selectHandler);
...
// Notice that e is not used or needed.
function selectHandler(e) {
  alert('The user selected' + orgChart.getSelection().length + ' items.');
  

इवेंट चुनें

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

आम तौर पर, "चुनें" इवेंट दिखाने वाले चार्ट, इन निर्देशों के हिसाब से बनाए जाते हैं:

• चुना गया इवेंट, हैंडलर को कोई प्रॉपर्टी या ऑब्जेक्ट पास नहीं करता है (आपके फ़ंक्शन हैंडलर को इसे कोई पैरामीटर भेजे जाने की उम्मीद नहीं करनी चाहिए).
• चार्ट को getSelection() तरीका दिखाना चाहिए . इससे, चुने गए डेटा एलिमेंट के बारे में जानकारी देने वाले ऑब्जेक्ट का कलेक्शन दिखेगा. इन ऑब्जेक्ट में row और column प्रॉपर्टी होती हैं. row और column, DataTable में चुने गए आइटम के लिए पंक्ति और कॉलम के इंडेक्स हैं. (चुने गए इवेंट, ग्राफ़ में मौजूद डेटा के बारे में बताते हैं, न कि चार्ट के एचटीएमएल एलिमेंट के बारे में.) चुने गए आइटम का डेटा पाने के लिए, आपको DataTable.getValue() या getFormattedValue() को कॉल करना होगा.
  अगर row और column, दोनों के बारे में बताया गया है, तो चुना गया एलिमेंट एक सेल है. अगर सिर्फ़ row बताया गया है, तो चुना गया एलिमेंट एक पंक्ति होता है. अगर सिर्फ़ column तय किया गया है, तो चुने गए एलिमेंट को कॉलम माना जाएगा.
• दिए गए टेबल में चुने गए विकल्प को बदलने और चार्ट में उससे जुड़ा डेटा चुनने के लिए, चार्ट को setSelection(selection) तरीका दिखाना चाहिए . selection पैरामीटर, जो getSelection() कलेक्शन से मिलता-जुलता अरे है. इसमें हर एलिमेंट row और column प्रॉपर्टी वाला एक ऑब्जेक्ट है. row प्रॉपर्टी DataTable में चुनी गई पंक्ति के इंडेक्स के बारे में बताती है और column प्रॉपर्टी, DataTable में चुने गए कॉलम के इंडेक्स के बारे में बताती है. इस तरीके को कॉल करने पर, चार्ट में यह जानकारी विज़ुअल तौर पर दिखनी चाहिए कि नया क्या है. setSelection() को लागू करने से 'चुनें' इवेंट ट्रिगर नहीं होना चाहिए.
  अगर row और column, दोनों के बारे में बताया गया है, तो चुना गया एलिमेंट एक सेल है. अगर सिर्फ़ row बताया गया है, तो चुना गया एलिमेंट एक पंक्ति होता है. अगर सिर्फ़ column तय किया गया है, तो चुने गए एलिमेंट को कॉलम माना जाएगा.

कुछ सावधानियां:

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

इस उदाहरण में, किसी टेबल चार्ट से कोई एलिमेंट चुने जाने पर, चुने गए टेबल एलिमेंट के साथ एक अलर्टबॉक्स पॉप-अप होता है:

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

इस उदाहरण का हैंडलर कोड यहां दिया गया है:

// Create our table.
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);

// Add our selection handler.
google.visualization.events.addListener(table, 'select', selectHandler);

// The selection handler.
// Loop through all items in the selection and concatenate
// a single message from all of them.
function selectHandler() {
  var selection = table.getSelection();
  var message = '';
  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      var str = data.getFormattedValue(item.row, item.column);
      message += '{row:' + item.row + ',column:' + item.column + '} = ' + str + '\n';
    } else if (item.row != null) {
      var str = data.getFormattedValue(item.row, 0);
      message += '{row:' + item.row + ', column:none}; value (col 0) = ' + str + '\n';
    } else if (item.column != null) {
      var str = data.getFormattedValue(0, item.column);
      message += '{row:none, column:' + item.column + '}; value (row 0) = ' + str + '\n';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message);
}

तैयार इवेंट

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

आम तौर पर, "तैयार" इवेंट दिखाने वाले चार्ट, इन खास निर्देशों के हिसाब से बनाए जाते हैं:

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

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

google.visualization.events.addListener(tableChart, 'ready', myReadyHandler);

तैयार इवेंट हैंडलर सिंटैक्स

function myReadyHandler(){...}

तैयार इवेंट हैंडलर ने कोई पैरामीटर पास नहीं किया है.

गड़बड़ी वाला इवेंट

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

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

एरर इवेंट हैंडलर सिंटैक्स

function myErrorHandler(err){...}

गड़बड़ी इवेंट हैंडलर को इन सदस्यों के साथ कोई ऑब्जेक्ट पास किया जाना चाहिए:

• id [ज़रूरी है] - चार्ट वाले DOM एलिमेंट का आईडी या अगर उसे रेंडर नहीं किया जा सकता, तो चार्ट की जगह दिखाया जाने वाला गड़बड़ी का मैसेज.
• मैसेज [ज़रूरी है] - गड़बड़ी के बारे में बताने वाला एक छोटा मैसेज स्ट्रिंग.
• detailedMessage [ज़रूरी नहीं] - गड़बड़ी के बारे में पूरी जानकारी.
• विकल्प [ज़रूरी नहीं]- इस गड़बड़ी और चार्ट टाइप के लिए सही कस्टम पैरामीटर वाला ऑब्जेक्ट.

इवेंट हैंडलिंग का उदाहरण

इस उदाहरण में getSelection() और setSelection() दोनों के बारे में बताया गया है. यह ऐसे दो चार्ट के बीच चुने गए हिस्से को सिंक करता है जो एक ही डेटा टेबल का इस्तेमाल करते हैं. चुने गए किसी भी चार्ट को किसी दूसरे चार्ट में सिंक करने के लिए, उस पर क्लिक करें.

// Create our two charts.
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {});

var orgchart = new google.visualization.OrgChart(document.getElementById('org_div'));
orgchart.draw(data, {});

// When the table is selected, update the orgchart.
google.visualization.events.addListener(table, 'select', function() {
  orgchart.setSelection(table.getSelection());
});

// When the orgchart is selected, update the table chart.
google.visualization.events.addListener(orgchart, 'select', function() {
  table.setSelection(orgchart.getSelection());
});

चुने गए विकल्प को देखने के लिए, नीचे दिए गए टेबल की पंक्तियों या चार्ट के एलिमेंट पर मौजूद चार्ट पर क्लिक करें: