Google Charts এর মাধ্যমে আপনি সহজেই Events এবং User Interaction এর মাধ্যমে Data Manipulation করতে পারেন। এটি ব্যবহারকারীদের চার্টের সাথে ইন্টারঅ্যাক্ট করতে দেয়, যেমন ডেটা পয়েন্টে ক্লিক করা, হোভার করা বা টুলটিপ দেখা। এই ইন্টারঅ্যাকশনগুলো ডেটাকে পরিবর্তন বা আপডেট করার জন্য ব্যবহৃত হতে পারে।
Google Charts এর বিভিন্ন Events ব্যবহার করে আপনি Data Manipulation করতে পারেন, যা ইউজারদের আরও ইন্টারঅ্যাক্টিভ এবং ডাইনামিক এক্সপেরিয়েন্স প্রদান করে।
১. Google Charts Events ব্যবহার করা
Google Charts-এ ইভেন্টগুলি বিভিন্ন ব্যবহারকারী ইন্টারঅ্যাকশন ট্র্যাক করার জন্য ব্যবহৃত হয়, যেমন ক্লিক, হোভার ইত্যাদি। আপনি এই ইভেন্টগুলির মাধ্যমে ডেটা পরিবর্তন করতে বা ফাংশন কল করতে পারেন।
১.১ Event Listener সেট করা
Google Charts-এর ইভেন্ট ব্যবহার করতে হলে, প্রথমে আপনাকে chart.draw() এর পর ইভেন্ট লিসেনার সেট করতে হবে। নিচে একটি সাধারণ উদাহরণ দেওয়া হলো যেখানে ক্লিক ইভেন্টের মাধ্যমে ডেটার পরিবর্তন করা হয়েছে।
google.visualization.events.addListener(chart, 'select', selectHandler);
এখানে, select হল একটি সাধারণ ইভেন্ট যা ব্যবহারকারী যখন চার্টের কোনো অংশে ক্লিক করবেন তখন ট্রিগার হয়। selectHandler হল সেই ফাংশন যা ইভেন্ট ঘটলে কল হবে।
২. ক্লিক ইভেন্টের মাধ্যমে Data Manipulation
আমরা এখানে একটি Bar Chart উদাহরণ নিচ্ছি যেখানে ইউজার একটি বার চ্যাটের মধ্যে ক্লিক করলে, সেই ডেটা পয়েন্ট পরিবর্তন করা হবে।
HTML এবং JavaScript কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts - Events and Data Manipulation</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
var data;
var chart;
function drawChart() {
data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1150],
['2022', 1300],
['2023', 1500]
]);
var options = {
title: 'Company Sales Over Time',
chartArea: {width: '50%'},
hAxis: {title: 'Sales'},
vAxis: {title: 'Year'}
};
chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
// Add event listener for the click event
google.visualization.events.addListener(chart, 'select', selectHandler);
}
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var row = selectedItem.row;
var column = selectedItem.column;
// Get the current sales data for the selected row
var sales = data.getValue(row, column);
// Manipulate the data (e.g., increase sales by 10%)
var newSales = sales * 1.1;
// Update the data
data.setValue(row, column, newSales);
// Redraw the chart with updated data
chart.draw(data, {title: 'Company Sales Over Time', chartArea: {width: '50%'}});
}
}
</script>
</head>
<body>
<h2>Google Charts - Interactive Bar Chart</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা
- DataTable তৈরি করা:
google.visualization.arrayToDataTable()ফাংশন ব্যবহার করে ডেটা তৈরি করা হয়েছে, যেখানে আমাদের চারটি বছর এবং তাদের বিক্রির পরিমাণ (Sales) দেওয়া হয়েছে। - Chart তৈরি করা:
google.visualization.BarChart()ফাংশন দিয়ে বার চার্ট তৈরি করা হয়েছে এবং এটি HTML ডকুমেন্টে একটি<div>তে প্রদর্শিত হয়েছে। - Select Event Listener:
google.visualization.events.addListener()ফাংশন ব্যবহার করে select ইভেন্টে একটি হ্যান্ডলার যুক্ত করা হয়েছে। যখন ব্যবহারকারী চার্টের উপর কোনো বারের মধ্যে ক্লিক করবেন, তখনselectHandler()ফাংশন কল হবে। - Data Manipulation:
selectHandler()ফাংশনের মধ্যে আমরা ডেটার মান পরিবর্তন করেছি। এখানে, বারের উপর ক্লিক করলে, সেই বছরের বিক্রয় ১০% বৃদ্ধি পাবে। - Chart Redraw:
chart.draw()ফাংশন ব্যবহার করে নতুন ডেটার সাথে চার্টটি পুনরায় আঁকা হয়েছে।
৩. হোভার ইভেন্টের মাধ্যমে Data Manipulation
Hover ইভেন্ট ব্যবহার করে আপনি কোনো পয়েন্টের উপর হোভার করলে ডেটা প্রদর্শন করতে বা পরিবর্তন করতে পারেন। সাধারণত টুলটিপের মাধ্যমে এ ধরনের ইন্টারঅ্যাকশন প্রদর্শিত হয়।
উদাহরণ: Tooltip Update
google.visualization.events.addListener(chart, 'onmouseover', function(event) {
var tooltip = chart.getSelection();
if (tooltip.length > 0) {
var row = tooltip[0].row;
var value = data.getValue(row, 1); // Get value of the selected row
alert('Hovered over row: ' + row + ' with value: ' + value);
}
});
এটি ব্যবহারকারী যখন চার্টের উপর মাউস রাখবেন তখন একটি পপ-আপ মেসেজ প্রদর্শন করবে, যা নির্বাচিত পয়েন্টের মান দেখাবে।
৪. Data Manipulation এর উপকারিতা
- ইন্টারঅ্যাকটিভ ডেটা আপডেট: ইউজার ইন্টারঅ্যাকশনের মাধ্যমে ডেটা পরিবর্তন করা যায়, যা ডেটার মধ্যে সম্পর্ক বোঝা আরও সহজ করে তোলে।
- দ্রুত বিশ্লেষণ: চার্টে ডেটা পরিবর্তন করার মাধ্যমে ব্যবহারকারীকে দ্রুত সিদ্ধান্ত গ্রহণ করতে সহায়ক হয়।
- ফিল্টারিং ও সিলেকশন: বিভিন্ন ফিল্টার বা সিলেকশন অপশন যুক্ত করা যায়, যা বিশ্লেষণের জন্য আরও কার্যকর।
- বিশ্লেষণাত্মক চিত্রায়ণ: ইন্টারঅ্যাক্টিভ চার্টের মাধ্যমে ডেটার গভীর বিশ্লেষণ করা সহজ হয়।
উপসংহার
Google Charts এর Events এবং User Interaction ব্যবহার করে ডেটার উপর ইন্টারঅ্যাকশন করা এবং তা পরিবর্তন করা অত্যন্ত সহজ। Data Manipulation এর মাধ্যমে আপনি ডেটা বিশ্লেষণের প্রক্রিয়া আরও ডাইনামিক এবং ব্যবহারকারী-বান্ধব করতে পারেন। এটি ব্যবহারকারীদেরকে সশक्त বিশ্লেষণ করতে সহায়ক এবং তাদের চার্টের সাথে ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করে।
Read more
