এই পৃষ্ঠাটি বর্ণনা করে যে কীভাবে একটি চার্ট দ্বারা গুলি করা ইভেন্টগুলি শুনতে এবং পরিচালনা করতে হয়৷
বিষয়বস্তু
ওভারভিউ
আপনি শুনতে পারেন এমন ইভেন্টগুলিকে Google চার্টগুলি ফায়ার করতে পারে৷ ইভেন্টগুলি ব্যবহারকারীর ক্রিয়া দ্বারা ট্রিগার হতে পারে, যেমন একজন ব্যবহারকারী যখন একটি চার্টে ক্লিক করে। আপনি একটি জাভাস্ক্রিপ্ট পদ্ধতি নিবন্ধন করতে পারেন যখনই নির্দিষ্ট ইভেন্ট গুলি চালানো হয়, সম্ভবত সেই ইভেন্টের নির্দিষ্ট ডেটা সহ।
প্রতিটি চার্ট তার নিজস্ব ইভেন্টগুলিকে সংজ্ঞায়িত করে এবং সেই চার্টের ডকুমেন্টেশনে প্রতিটি ইভেন্ট কখন গুলি করা হয়, এর অর্থ কী এবং কীভাবে ইভেন্টের সাথে সম্পর্কিত যেকোন তথ্য ফিরে পাওয়া যায় তা বর্ণনা করা উচিত। এই পৃষ্ঠাটি বর্ণনা করে যে কীভাবে একটি চার্ট থেকে ইভেন্টগুলি পেতে নিবন্ধন করতে হয় এবং কীভাবে সেগুলি পরিচালনা করতে হয়৷
একটি ইভেন্ট আছে যে কোনো নির্বাচনযোগ্য চার্ট ফায়ার করা উচিত: নির্বাচন ইভেন্ট। যাইহোক, এই ইভেন্টের আচরণ এবং অর্থ প্রতিটি চার্ট দ্বারা সংজ্ঞায়িত করা হয়।
এটি লক্ষ্য করা গুরুত্বপূর্ণ যে চার্ট ইভেন্টগুলি স্ট্যান্ডার্ড DOM ইভেন্টগুলি থেকে আলাদা এবং স্বতন্ত্র।
একটি ইভেন্টের জন্য নিবন্ধন করা এবং পরিচালনা করা
আপনার ইভেন্ট হ্যান্ডলারদের নিবন্ধন করতে, আপনি 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নির্বাচিত আইটেমের সারি এবং কলামের সূচী। (নির্বাচন ইভেন্টগুলি গ্রাফের অন্তর্নিহিত ডেটা বর্ণনা করে, চার্টের HTML উপাদানগুলি নয়।) নির্বাচিত আইটেমের ডেটা পেতে, আপনাকে DataTable.getValue(DataTable.getValue()বাgetFormattedValue()কল করতে হবে।
যদিrowএবংcolumnউভয়ই নির্দিষ্ট করা থাকে, নির্বাচিত উপাদানটি একটি ঘর। যদি শুধুমাত্রrowনির্দিষ্ট করা হয়, নির্বাচিত উপাদানটি একটি সারি। যদি শুধুমাত্রcolumnনির্দিষ্ট করা হয়, নির্বাচিত উপাদানটি একটি কলাম। - চার্টটি অন্তর্নিহিত সারণীতে নির্বাচন পরিবর্তন করতে এবং চার্টে সংশ্লিষ্ট ডেটা নির্বাচন করতে পদ্ধতি
setSelection(selection)প্রকাশ করবে । নির্বাচনের প্যারামিটার যাgetSelection()অ্যারের অনুরূপ একটি অ্যারে, যেখানে প্রতিটি উপাদান বৈশিষ্ট্যrowএবংcolumnসহ একটি বস্তু।rowবৈশিষ্ট্যDataTableএ নির্বাচিত সারির সূচী নির্ধারণ করে, এবংcolumnবৈশিষ্ট্যDataTableএ নির্বাচিত কলামের সূচী নির্ধারণ করে। যখন এই পদ্ধতিটি বলা হয়, চার্টটি দৃশ্যত নতুন নির্বাচন কী তা নির্দেশ করবে।setSelection()এর বাস্তবায়ন একটি 'select' ইভেন্টকে ট্রিগার করবে না ।
যদি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 এলিমেন্টের ID, অথবা রেন্ডার করা না গেলে চার্টের পরিবর্তে একটি ত্রুটি বার্তা প্রদর্শিত হয়।
- বার্তা [ প্রয়োজনীয় ] - একটি ছোট বার্তার স্ট্রিং যা ত্রুটি বর্ণনা করে।
- বিস্তারিত বার্তা [ ঐচ্ছিক ] - ত্রুটির বিস্তারিত ব্যাখ্যা।
- বিকল্পগুলি [ ঐচ্ছিক ] - এই ত্রুটি এবং চার্টের প্রকারের জন্য উপযুক্ত কাস্টম প্যারামিটার ধারণকারী একটি বস্তু।
ইভেন্ট হ্যান্ডলিং উদাহরণ
নিম্নলিখিত উদাহরণ 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());
});
সারণীর সারিতে বা চার্টের উপাদানে নিচের চার্টে ক্লিক করুন যাতে নির্বাচনটি কার্যকর হয়: