Google Charts ইন্টারঅ্যাকটিভ চার্ট তৈরি করার জন্য একটি শক্তিশালী টুল। এটি ব্যবহারকারীদের জন্য চার্টের সাথে ইন্টারঅ্যাকশন করার সুযোগ প্রদান করে, যেমন হোভার করা, ক্লিক করা, বা সিলেকশন করা। এতে Events (ঘটনা) যোগ করে চার্টে আরও ইন্টারঅ্যাকটিভিটি আনা যায়। Google Charts ব্যবহার করে ইন্টারঅ্যাকটিভিটি এবং ইভেন্টগুলিকে কাস্টমাইজ করা খুব সহজ।
১. Google Charts এ Interactivity এবং Events যোগ করা
Google Charts এর মাধ্যমে interactivity (ইন্টারঅ্যাকটিভিটি) এবং events (ঘটনা) যোগ করা সহজ। এর মাধ্যমে আপনি ব্যবহারকারীকে চার্টের বিভিন্ন অংশের সাথে ইন্টারঅ্যাক্ট করার সুযোগ দিতে পারেন। Events এর মাধ্যমে আপনি ক্লিক, হোভার, বা অন্য কোনো ধরনের ব্যবহারকারীর ইনপুট থেকে ডেটা সংগ্রহ করতে পারেন।
২. Interactivity যোগ করা
Interactivity এর মাধ্যমে চার্টের ব্যবহারকারীকে বিভিন্ন ক্রিয়া করতে দেয়া হয়, যেমন হোভার বা ক্লিকের মাধ্যমে টুলটিপ দেখানো বা চার্টের তথ্য আপডেট করা।
উদাহরণ: Bar Chart এ Interactivity যোগ করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts Interactivity Example</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);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['City', 'Population'],
['New York', 8175000],
['Los Angeles', 3792000],
['Chicago', 2695000],
['Houston', 2121000],
['Phoenix', 1445000]
]);
var options = {
title: 'Population of Major Cities',
hAxis: {title: 'Population', minValue: 0},
vAxis: {title: 'City'},
tooltip: {trigger: 'selection'} // ইন্টারঅ্যাকটিভ টুলটিপ
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
// ইভেন্ট হ্যান্ডলার যোগ করা
google.visualization.events.addListener(chart, 'select', function() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var city = data.getValue(selectedItem.row, 0);
var population = data.getValue(selectedItem.row, 1);
alert('City: ' + city + '\nPopulation: ' + population);
}
});
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Charts Interactivity Example</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা
- Tooltip:
tooltip: {trigger: 'selection'}অপশনটি ব্যবহার করে আমরা টুলটিপের ইন্টারঅ্যাকটিভিটি সক্রিয় করেছি, যাতে চার্টের সিলেক্টেড স্লাইস বা কলামের উপর মাউস হোভার করলে টুলটিপ প্রদর্শিত হয়। - Event Listener:
google.visualization.events.addListener()ফাংশনটি ব্যবহার করে আমরা একটি ইভেন্ট (এখানে 'select') যোগ করেছি। এটি ব্যবহারকারীর সিলেকশন বা ক্লিক করার পর একটি সতর্কীকরণ (alert) দেখাবে, যেখানে নির্বাচিত শহরের নাম এবং জনসংখ্যা প্রদর্শিত হবে।
৩. Google Charts এ Events (ঘটনা) যোগ করা
Google Charts বিভিন্ন ধরনের events সাপোর্ট করে, যেমন 'select', 'ready', 'onmouseover', 'onmouseout' ইত্যাদি। এদের মাধ্যমে আপনি চার্টে ইন্টারঅ্যাকটিভ আচরণ পরিচালনা করতে পারেন।
উদাহরণ: Line Chart এ Mouseover এবং Mouseout Events যোগ করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts Mouseover Event</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addRows([
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
var options = {
title: 'Company Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
// Mouseover Event
google.visualization.events.addListener(chart, 'onmouseover', function(e) {
alert('Mouseover event triggered! Row: ' + e.row + ', Column: ' + e.column);
});
// Mouseout Event
google.visualization.events.addListener(chart, 'onmouseout', function(e) {
alert('Mouseout event triggered!');
});
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Charts Mouseover Event Example</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা
- onmouseover Event:
google.visualization.events.addListener()ফাংশনের মাধ্যমে আমরা mouse over ইভেন্ট যোগ করেছি। এটি যখন মাউস চার্টের উপর হোভার করবে তখন একটি alert দেখাবে যা ব্যবহারকারীর সিলেক্ট করা সারির (row) এবং কলামের (column) তথ্য প্রদর্শন করবে। - onmouseout Event: এখানে mouseout ইভেন্ট ব্যবহার করা হয়েছে, যা মাউস চার্ট থেকে সরে গেলে একটি সতর্কীকরণ (alert) প্রদর্শন করবে।
৪. ইন্টারঅ্যাকটিভিটি ও ইভেন্টের অন্যান্য ব্যবহার
- ডায়নামিক ডেটা আপডেট: আপনি চার্টে ক্লিক করে ডেটা পরিবর্তন করতে পারেন, বা ইভেন্টের মাধ্যমে নতুন তথ্য লোড করতে পারেন।
- কমপ্লেক্স ইউজার ইন্টারফেস: ব্যবহারকারী যখন কোনো স্লাইস বা কলাম সিলেক্ট করে, তখন সেখান থেকে নতুন ডেটা বা গ্রাফিক্যাল উপস্থাপনা তৈরি করতে পারেন।
- টাইমলাইন ইভেন্ট: যদি আপনি টাইমলাইন বা প্রকল্পের সময়সীমা দেখাচ্ছেন, তবে ব্যবহারকারী যখন কোনো টাস্ক সিলেক্ট করবে, তখন তার বিস্তারিত দেখানো যেতে পারে।
উপসংহার
Google Charts ইন্টারঅ্যাকটিভিটি এবং ইভেন্ট সমর্থন করে, যা আপনাকে চার্টের সাথে ব্যবহারকারীর ইন্টারঅ্যাকশন সক্ষম করতে সাহায্য করে। এর মাধ্যমে আপনি চার্টে ক্লিক, হোভার, এবং সিলেকশন সহ বিভিন্ন ইভেন্ট যোগ করতে পারেন এবং এর মাধ্যমে ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারেন। Google Charts দিয়ে আপনি শক্তিশালী ইন্টারঅ্যাকটিভ চার্ট তৈরি করে সহজেই ডেটা ভিজ্যুয়ালাইজেশন করতে পারবেন।
Google Charts আপনাকে চার্টের সঙ্গে ইন্টারঅ্যাকটিভ ভাবে কাজ করার সুযোগ দেয়। আপনি hover এবং click ইভেন্ট যোগ করে ব্যবহারকারীদের সাথে ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে পারেন। এই ইভেন্টগুলোর মাধ্যমে আপনি চার্টের উপর মাউস মুভমেন্ট বা ক্লিকের মাধ্যমে ডেটা পরিবর্তন বা কিছু অতিরিক্ত তথ্য প্রদর্শন করতে পারেন।
১. Hover Event যোগ করা
Hover ইভেন্ট ব্যবহারকারীদের চার্টের ওপর মাউসের কার্সর রাখলে তথ্য প্রদর্শন করতে সাহায্য করে। Google Charts এ hover ইভেন্ট যোগ করার মাধ্যমে আপনি নির্দিষ্ট ডেটা পয়েন্টের বিস্তারিত তথ্য দেখাতে পারেন।
কোড উদাহরণ: Hover ইভেন্ট ব্যবহার
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Event Example</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);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
var options = {
title: 'Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
legend: { position: 'none' }
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
// Hover event listener
google.visualization.events.addListener(chart, 'onmouseover', function(e) {
var selectedItem = data.getValue(e.row, e.column);
alert('You hovered over: ' + selectedItem);
});
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Chart with Hover Event</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- Hover ইভেন্ট যুক্ত করা:
google.visualization.events.addListener()ফাংশন ব্যবহার করে, চার্টে onmouseover ইভেন্ট যোগ করা হয়েছে। যখন ব্যবহারকারী চার্টের উপর মাউস রাখেন, তখন একটি alert শো হবে যা উক্ত সেলের মান দেখাবে। - Chart Creation: এই উদাহরণে একটি Bar Chart তৈরি করা হয়েছে, যা বছরভিত্তিক বিক্রয় প্রদর্শন করে।
২. Click Event যোগ করা
Click ইভেন্ট ব্যবহারকারীর ক্লিক করার মাধ্যমে নির্দিষ্ট ডেটা বা চার্টের উপাদান সম্পর্কিত তথ্য প্রদান করতে সাহায্য করে। আপনি এই ইভেন্টের মাধ্যমে বিভিন্ন অ্যাকশন গ্রহণ করতে পারেন, যেমন ডেটা পরিবর্তন বা ডেটা বিস্তারিত প্রদর্শন।
কোড উদাহরণ: Click ইভেন্ট ব্যবহার
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click Event Example</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);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
var options = {
title: 'Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
legend: { position: 'none' }
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
// Click event listener
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
if (selection.length > 0) {
var selectedItem = selection[0];
var year = data.getValue(selectedItem.row, 0);
var sales = data.getValue(selectedItem.row, 1);
alert('You clicked on ' + year + ' with Sales: ' + sales);
}
});
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Chart with Click Event</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- Click ইভেন্ট যুক্ত করা:
google.visualization.events.addListener()ফাংশন ব্যবহার করে select ইভেন্ট যোগ করা হয়েছে। যখন ব্যবহারকারী চার্টের একটি সেলে ক্লিক করবেন, তখন একটি alert প্রদর্শিত হবে, যা সেলটির বছর এবং বিক্রয় তথ্য দেখাবে। - Chart Creation: এখানে একটি Bar Chart তৈরি করা হয়েছে, যেখানে বিক্রয়ের ডেটা বছরভিত্তিক প্রদর্শিত হয়।
৩. Hover এবং Click ইভেন্ট একসাথে ব্যবহার
একই চার্টে আপনি Hover এবং Click ইভেন্ট উভয়ই ব্যবহার করতে পারেন। এটি ব্যবহারকারীর ইন্টারঅ্যাকশনকে আরও আরও ইন্টারেক্টিভ এবং তথ্যপূর্ণ করে তোলে।
কোড উদাহরণ: Hover এবং Click ইভেন্ট একসাথে ব্যবহার
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover and Click Event Example</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);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
var options = {
title: 'Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
legend: { position: 'none' }
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
// Hover event listener
google.visualization.events.addListener(chart, 'onmouseover', function(e) {
var selectedItem = data.getValue(e.row, e.column);
console.log('Hovered over: ' + selectedItem);
});
// Click event listener
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
if (selection.length > 0) {
var selectedItem = selection[0];
var year = data.getValue(selectedItem.row, 0);
var sales = data.getValue(selectedItem.row, 1);
alert('You clicked on ' + year + ' with Sales: ' + sales);
}
});
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Chart with Hover and Click Events</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
উপসংহার
Hover এবং Click ইভেন্ট গুগল চার্টে ব্যবহারকারীর ইন্টারঅ্যাকশনকে আরও শক্তিশালী এবং তথ্যপূর্ণ করে তোলে। Hover ইভেন্টের মাধ্যমে আপনি মাউসের কার্সরের উপর কোন সেলে গেলে ডেটা দেখতে পারেন, এবং Click ইভেন্টের মাধ্যমে ব্যবহারকারী যখন কোনো সেলে ক্লিক করবে, তখন সেলটির বিস্তারিত তথ্য প্রদর্শিত হবে। এই ইভেন্টগুলো বিভিন্ন ধরনের চার্টে (যেমন Bar Chart, Pie Chart, Line Chart) ব্যবহার করা যায়, যা চার্টের কার্যকারিতা বাড়ায় এবং ব্যবহারকারীর জন্য ডেটা উপস্থাপন সহজতর করে তোলে।
Tooltips এবং Data Labels হল Google Charts এর দুটি গুরুত্বপূর্ণ কাস্টমাইজেশন অপশন, যা চার্টের তথ্যের সাথে ইন্টারঅ্যাকটিভিটি এবং পরিষ্কারতা যোগ করে। Tooltips ব্যবহারকারীদের সেল বা ডেটা পয়েন্টের উপর মাউস হোভার করার সময় অতিরিক্ত তথ্য প্রদর্শন করতে সহায়ক, এবং Data Labels সরাসরি চার্টে ডেটার মান বা নাম প্রদর্শন করে, যা গ্রাহকদের জন্য আরো স্পষ্টতা প্রদান করে।
এই টিউটোরিয়ালে আমরা Tooltips এবং Data Labels কাস্টমাইজ করার পদ্ধতি জানব।
১. Tooltips কাস্টমাইজ করা
Tooltips হল এমন একটি বৈশিষ্ট্য যা ডেটার উপর মাউস হোভার করলে অতিরিক্ত তথ্য প্রদর্শন করে। আপনি Tooltips কাস্টমাইজ করে এতে ডেটার অন্যান্য বিশদ, রঙ, ফন্ট স্টাইল, বা কাস্টম টেক্সট যোগ করতে পারেন।
Tooltips কাস্টমাইজ করার উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts Tooltip Example</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);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['City', 'Population'],
['New York', 8175000],
['Los Angeles', 3792000],
['Chicago', 2695000],
['Houston', 2121000],
['Phoenix', 1445000]
]);
var options = {
title: 'Population of Major Cities',
hAxis: {title: 'Population', minValue: 0},
vAxis: {title: 'City'},
tooltip: {
trigger: 'both', // 'both' means it shows tooltip on hover and click
isHtml: true, // allows custom HTML content
textStyle: {fontSize: 14, color: 'blue'}, // tooltip text customization
showColorCode: true // Display color code in tooltip
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Chart with Customized Tooltip</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- Tooltip Customization:
tooltip.trigger: 'both': এটি টুলটিপ হোভার এবং ক্লিক উভয় ক্ষেত্রেই প্রদর্শন করবে।tooltip.isHtml: true: এটি টুলটিপে HTML কাস্টমাইজেশন সক্ষম করে, যেমন টেক্সট, রঙ, ফন্ট সাইজ ইত্যাদি।tooltip.textStyle: টুলটিপের ফন্ট সাইজ এবং রঙ কাস্টমাইজ করা হয়েছে।
২. Data Labels কাস্টমাইজ করা
Data Labels হল চার্টের প্রতিটি পয়েন্টের উপর ডেটা প্রদর্শন করার একটি উপায়। আপনি Data Labels কাস্টমাইজ করে চার্টের প্রতিটি সেলে মান বা নাম প্রদর্শন করতে পারেন।
Data Labels কাস্টমাইজ করার উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts Data Labels Example</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);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['City', 'Population'],
['New York', 8175000],
['Los Angeles', 3792000],
['Chicago', 2695000],
['Houston', 2121000],
['Phoenix', 1445000]
]);
var options = {
title: 'Population of Major Cities',
hAxis: {title: 'Population', minValue: 0},
vAxis: {title: 'City'},
annotations: {
alwaysOutside: true, // Ensures labels are outside bars
textStyle: {
fontSize: 16,
color: 'red',
bold: true
}
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Chart with Customized Data Labels</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- Annotations for Data Labels:
annotations.alwaysOutside: true: এটি নিশ্চিত করে যে লেবেলটি বারের বাইরে অবস্থান করবে।textStyle: লেবেলের ফন্ট সাইজ, রঙ, এবং বোল্ড স্টাইল কাস্টমাইজ করা হয়েছে।
৩. Tooltips এবং Data Labels এর মধ্যে পার্থক্য
- Tooltips: এটি ডেটা পয়েন্টের উপর হোভার বা ক্লিক করার সময় প্রদর্শিত হয় এবং ব্যবহারকারীকে অতিরিক্ত তথ্য প্রদান করে।
- Data Labels: এটি সরাসরি চার্টের উপরে বা পাশে প্রদর্শিত হয়, যা প্রতিটি ডেটা পয়েন্টের মান বা নাম দেখায়।
৪. অন্যান্য কাস্টমাইজেশন অপশন
- Custom Tooltips with HTML: আপনি HTML ব্যবহার করে টুলটিপের ভিতর কাস্টম স্টাইলিং করতে পারেন, যেমন ইমেজ, টেবিল, বা লিংক যুক্ত করা।
- Positioning Tooltips: আপনি টুলটিপের অবস্থান কাস্টমাইজ করতে পারেন, যেমন top, bottom, left, বা right।
- Advanced Data Labels: আপনি percentages বা absolute values Data Labels হিসেবে প্রদর্শন করতে পারেন, যা অতিরিক্ত পরিসংখ্যান প্রদান করে।
উপসংহার
Google Charts এর মাধ্যমে Tooltips এবং Data Labels কাস্টমাইজ করা আপনাকে আপনার চার্টে আরও তথ্যপূর্ণ এবং ইন্টারঅ্যাকটিভ উপস্থাপনা তৈরি করতে সহায়তা করে। আপনি tooltips এর মাধ্যমে অতিরিক্ত তথ্য প্রদর্শন করতে পারেন এবং data labels ব্যবহার করে ডেটার মান সরাসরি প্রদর্শন করতে পারেন। এই কাস্টমাইজেশন অপশনগুলো আপনাকে আপনার চার্টকে আরো আকর্ষণীয়, কার্যকরী এবং ব্যবহারকারীর জন্য উপযোগী করতে সাহায্য করবে।
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 এর মাধ্যমে আপনি ডেটা বিশ্লেষণের প্রক্রিয়া আরও ডাইনামিক এবং ব্যবহারকারী-বান্ধব করতে পারেন। এটি ব্যবহারকারীদেরকে সশक्त বিশ্লেষণ করতে সহায়ক এবং তাদের চার্টের সাথে ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করে।
Drill-down এবং Real-time Data Update গুগল চার্টে ডেটার আরও গভীর বিশ্লেষণ এবং ডেটার লাইভ আপডেট প্রদর্শন করার জন্য ব্যবহৃত দুটি অত্যন্ত কার্যকরী টেকনিক। এগুলি ব্যবহার করে আপনি ইউজারের ইনপুট বা লাইভ ডেটার মাধ্যমে ডেটাকে আরও ইন্টারঅ্যাকটিভ এবং আপ-টু-ডেট রাখতে পারেন।
এখানে আমরা Drill-down এবং Real-time Data Update নিয়ে বিস্তারিত আলোচনা করব এবং এগুলি গুগল চার্টে কিভাবে ব্যবহার করা যায় তা দেখাব।
১. Google Charts এ Drill-down
Drill-down হল একটি কৌশল যা ব্যবহারকারীদের মূল ডেটা থেকে আরও বিস্তারিত বা গভীর স্তরের ডেটাতে নেভিগেট করতে সক্ষম করে। গুগল চার্টের মাধ্যমে এটি সহজে করা যায়, বিশেষ করে Pie Chart বা Bar Chart এ যেখানে ক্লিক করলে ব্যবহারকারী আরও বিস্তারিত তথ্য দেখতে পারে।
Drill-down উদাহরণ: Pie Chart থেকে Bar Chart এ ডেটা পরিবর্তন করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drill-down Example</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 data1;
var chart;
function drawChart() {
// মূল ডেটা
var data = google.visualization.arrayToDataTable([
['Task', 'Hours'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
is3D: true,
};
chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
// Drill-down ফাংশন
function selectHandler() {
var selection = chart.getSelection();
if (selection.length > 0) {
var item = selection[0];
var category = item.row;
drawDrilldown(category);
}
}
// Drill-down ডেটা
function drawDrilldown(category) {
var drilldownData;
if (category == 0) {
drilldownData = google.visualization.arrayToDataTable([
['Subtask', 'Hours'],
['Research', 4],
['Development', 5],
['Testing', 2]
]);
} else if (category == 1) {
drilldownData = google.visualization.arrayToDataTable([
['Subtask', 'Hours'],
['Breakfast', 1],
['Lunch', 1],
['Dinner', 1]
]);
}
var drilldownOptions = {
title: 'Work Breakdown',
hAxis: {title: 'Tasks'}
};
var drilldownChart = new google.visualization.BarChart(document.getElementById('drilldown_chart'));
drilldownChart.draw(drilldownData, drilldownOptions);
}
</script>
</head>
<body>
<h2>Drill-down Example</h2>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
<div id="drilldown_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- মূল ডেটা (Initial Data): প্রথমে একটি Pie Chart তৈরি করা হয়েছে, যেখানে Work, Eat, Commute, Watch TV, এবং Sleep সম্পর্কিত তথ্য দেখানো হয়েছে।
- selectHandler(): যখন ইউজার একটি স্লাইসে ক্লিক করেন, তখন এই ফাংশনটি কল হয় এবং সিলেক্ট করা স্লাইসের ভিত্তিতে Drill-down ডেটা প্রদর্শন করা হয়।
- Drill-down ডেটা: ড্রিল-ডাউন ফাংশনটি কল করার পর, নির্দিষ্ট স্লাইসের জন্য Bar Chart তৈরি করা হয়।
২. Google Charts এ Real-time Data Update
Real-time Data Update হল সেই পদ্ধতি যা ডেটাকে লাইভ বা রিয়েল টাইমে আপডেট করতে ব্যবহৃত হয়। এটি মূলত একটি ওয়েব পেজের ডায়নামিক চেঞ্জ এবং নতুন ডেটার সাথে আপডেট প্রদর্শন করতে ব্যবহৃত হয়।
Real-time Data Update উদাহরণ: Line Chart এ Real-time Data আপডেট করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-time Data Update Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
var data;
var chart;
var options;
var chartInterval;
function drawChart() {
data = new google.visualization.DataTable();
data.addColumn('number', 'Time');
data.addColumn('number', 'Value');
options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Value'
},
chartArea: { width: '80%' },
};
chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
// Real-time Data Update Function
chartInterval = setInterval(updateData, 1000); // Update every 1 second
}
function updateData() {
var time = new Date().getSeconds();
var value = Math.random() * 100;
data.addRow([time, value]);
if (data.getNumberOfRows() > 10) {
data.removeRow(0); // Remove the first data point after 10 data points to keep the chart clean
}
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Real-time Data Update Example</h2>
<div id="line_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- ডেটা এবং চার্ট তৈরি: প্রথমে একটি Line Chart তৈরি করা হয়েছে এবং Time ও Value কলাম সহ একটি DataTable প্রস্তুত করা হয়েছে।
- Real-time Data আপডেট:
updateData()ফাংশনটি প্রতি সেকেন্ডে নতুন random value জেনারেট করে এবং তা DataTable এ যোগ করে। যদি ডেটার সংখ্যা 10 এর বেশি হয়, তাহলে পুরনো ডেটা মুছে দেওয়া হয়। - setInterval:
setInterval()ব্যবহার করে প্রতি সেকেন্ডে চার্ট আপডেট করা হচ্ছে।
৩. Drill-down এবং Real-time Data Update এর সংমিশ্রণ
Drill-down এবং Real-time Data Update একসাথে ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, আপনি একটি Drill-down Chart তৈরি করতে পারেন, যেখানে প্রতিটি ডেটা সেটের জন্য real-time updates থাকবে এবং ব্যবহারকারীরা আরও বিস্তারিত বিশ্লেষণ করতে পারবে।
সংমিশ্রণ উদাহরণ:
- Real-time Data আপডেট: কোনো ব্যবহারকারীর ইনপুটের ভিত্তিতে ডেটা বা ট্র্যাকিং আপডেট হবে।
- Drill-down: ব্যবহারকারী যখন কোনো স্লাইসে ক্লিক করবে, তখন আরো বিস্তারিত তথ্য প্রদর্শিত হবে।
উপসংহার
Drill-down এবং Real-time Data Update গুগল চার্টে ডেটা ভিজ্যুয়ালাইজেশনকে আরও শক্তিশালী এবং ইন্টারঅ্যাকটিভ করতে সহায়ক। Drill-down ব্যবহারকারীদের ডেটা আরও বিস্তারিত বিশ্লেষণ করতে সাহায্য করে, এবং Real-time Data Update লাইভ ডেটা আপডেটের মাধ্যমে ওয়েবসাইটের তথ্য সর্বদা বর্তমান রাখে। Google Charts এ এই দুটি টেকনিক ব্যবহার করে আপনি আরো কার্যকরী এবং ইন্টারঅ্যাকটিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন।
Read more
