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 ব্যবহার করে ডেটার মান সরাসরি প্রদর্শন করতে পারেন। এই কাস্টমাইজেশন অপশনগুলো আপনাকে আপনার চার্টকে আরো আকর্ষণীয়, কার্যকরী এবং ব্যবহারকারীর জন্য উপযোগী করতে সাহায্য করবে।
Read more
