Labels এবং Annotations হল ডেটা ভিজুয়ালাইজেশনের গুরুত্বপূর্ণ উপাদান যা গ্রাফ বা চার্টের বিভিন্ন অংশে অতিরিক্ত তথ্য প্রদান করে। গুগল চার্টে Labels সাধারণত অক্ষের নাম, টাইটেল, বা ডেটার মান হিসেবে ব্যবহার করা হয় এবং Annotations ডেটা পয়েন্টে বা গ্রাফের মধ্যে কোনো বিশেষ মন্তব্য বা অতিরিক্ত তথ্য যুক্ত করার জন্য ব্যবহৃত হয়।
এই দুটি বৈশিষ্ট্য ব্যবহার করে আপনি আপনার ডেটা ভিজুয়ালাইজেশনকে আরও তথ্যপূর্ণ এবং প্রাসঙ্গিক করতে পারেন।
Labels (লেবেলস)
Labels হল টেক্সট যা সাধারণত চার্টের বিভিন্ন অংশে প্রদর্শিত হয়, যেমন:
- অক্ষের শিরোনাম
- চার্টের শিরোনাম
- সিরিজের নাম
- ডেটা পয়েন্টের মান
গুগল চার্টে Labels কাস্টমাইজ করতে আপনি hAxis, vAxis, title, series, ইত্যাদি ব্যবহার করতে পারেন।
উদাহরণ: Bar Chart with Custom Labels
<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([
['Product', 'Sales'],
['Product A', 1000],
['Product B', 1200],
['Product C', 1500]
]);
var options = {
title: 'Product Sales',
hAxis: {title: 'Products'},
vAxis: {title: 'Sales (in units)'}
};
var chart = new google.visualization.BarChart(document.getElementById('bar_chart'));
chart.draw(data, options);
}
</script>
<div id="bar_chart" style="width: 900px; height: 500px;"></div>
এখানে:
- hAxis এবং vAxis এর মাধ্যমে অক্ষের লেবেল কাস্টমাইজ করা হয়েছে।
- title অপশনের মাধ্যমে চার্টের শিরোনাম দেওয়া হয়েছে।
Annotations (এনোটেশনস)
Annotations হল অতিরিক্ত টেক্সট বা মন্তব্য যা ডেটা পয়েন্ট, গ্রাফের নির্দিষ্ট স্থান, অথবা সিরিজের জন্য যুক্ত করা হয়। এটি গ্রাফের মধ্যে নির্দিষ্ট ডেটা পয়েন্টে অতিরিক্ত তথ্য দিতে ব্যবহৃত হয়, যেমন বিশেষভাবে গুরুত্বপূর্ণ মান, শীর্ষ বা তলানির পয়েন্ট, অথবা কোনো বিশ্লেষণাত্মক মন্তব্য।
গুগল চার্টে Annotations তৈরি করতে আপনি annotations অপশন ব্যবহার করতে পারেন।
উদাহরণ: Line Chart with Annotations
<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('number', 'X');
data.addColumn('number', 'Sales');
// Sample Data
data.addRows([
[1, 1000],
[2, 1200],
[3, 1500],
[4, 1300],
[5, 1600]
]);
var options = {
title: 'Sales Data with Annotations',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
annotations: {
2: { style: 'line', textStyle: {color: 'red'} }, // Add annotation at X=2
4: { style: 'point', textStyle: {color: 'blue'} } // Add annotation at X=4
}
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
</script>
<div id="line_chart" style="width: 900px; height: 500px;"></div>
এখানে:
- annotations ব্যবহার করে গ্রাফের নির্দিষ্ট পয়েন্টে মন্তব্য যুক্ত করা হয়েছে।
- textStyle ব্যবহার করে এনোটেশনের রঙ পরিবর্তন করা হয়েছে।
Advanced Example: Scatter Chart with Annotations for Specific Points
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'scatter']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
// Sample Data
data.addRows([
[1, 1000],
[2, 1200],
[3, 1500],
[4, 1300],
[5, 1600]
]);
var options = {
title: 'Scatter Chart with Annotations',
hAxis: {title: 'X-axis'},
vAxis: {title: 'Y-axis'},
annotations: [
{x: 2, y: 1200, text: 'Point A'}, // Annotation at point (2, 1200)
{x: 4, y: 1300, text: 'Point B'} // Annotation at point (4, 1300)
]
};
var chart = new google.visualization.ScatterChart(document.getElementById('scatter_chart'));
chart.draw(data, options);
}
</script>
<div id="scatter_chart" style="width: 900px; height: 500px;"></div>
এখানে:
- annotations ব্যবহার করে নির্দিষ্ট পয়েন্টে টেক্সট যোগ করা হয়েছে।
- এই টেক্সট ডেটা পয়েন্টের কাছাকাছি প্রদর্শিত হবে, যা গ্রাফের জন্য গুরুত্বপূর্ণ তথ্য প্রদান করবে।
সারমর্ম
গুগল চার্টে Labels এবং Annotations ব্যবহারের মাধ্যমে আপনি আপনার চার্ট বা গ্রাফকে আরও তথ্যপূর্ণ এবং পাঠযোগ্য করতে পারেন। Labels এর মাধ্যমে আপনি অক্ষের নাম, চার্টের শিরোনাম এবং সিরিজের নাম প্রদর্শন করতে পারেন, যখন Annotations ব্যবহার করে আপনি গ্রাফের নির্দিষ্ট পয়েন্টে বা অঞ্চলে অতিরিক্ত মন্তব্য বা গুরুত্বপূর্ণ তথ্য যোগ করতে পারেন। এটি ডেটার বিশ্লেষণে সহায়ক এবং গ্রাফের উপলব্ধতা ও স্পষ্টতা বৃদ্ধি করে।
Google Charts একটি জনপ্রিয় JavaScript লাইব্রেরি, যা সহজেই ইন্টারঅ্যাকটিভ ডেটা ভিজুয়ালাইজেশন তৈরি করতে সাহায্য করে। আপনি যখন গুগল চার্ট ব্যবহার করে গ্রাফ তৈরি করেন, তখন গ্রাফের titles এবং axis labels যোগ করা গুরুত্বপূর্ণ, কারণ এগুলো গ্রাফের বিষয়বস্তু বুঝতে সাহায্য করে এবং ডেটার পরিষ্কার উপস্থাপনা নিশ্চিত করে।
গুগল চার্টে titles এবং axis labels যোগ করার জন্য কিছু নির্দিষ্ট পদ্ধতি রয়েছে। এখানে আমরা দেখব কিভাবে সহজে গুগল চার্টে টাইটেল এবং অক্ষের লেবেল যোগ করা যায়।
Google Charts এ Titles এবং Axis Labels যোগ করার পদ্ধতি
১. Chart Title যোগ করা
গুগল চার্টে চিত্রের টাইটেল যোগ করতে title অপশন ব্যবহার করা হয়। এটি পুরো চিত্রের জন্য একটি শিরোনাম তৈরি করে, যা গ্রাফের উপরে প্রদর্শিত হয়।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<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(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Month', 'Sales', 'Expenses'],
['January', 1000, 400],
['February', 1170, 460],
['March', 660, 1120],
['April', 1030, 540]
]);
var options = {
title: 'Company Performance',
chartArea: {width: '50%'},
hAxis: {
title: 'Total Sales',
minValue: 0
},
vAxis: {
title: 'Month'
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
এখানে:
- title:
'Company Performance'এই টাইটেলটি চার্টের উপরে প্রদর্শিত হবে।
২. Axis Labels (x-axis এবং y-axis) যোগ করা
গুগল চার্টে অক্ষের লেবেল যোগ করার জন্য hAxis (horizontal axis) এবং vAxis (vertical axis) অপশন ব্যবহার করা হয়।
- hAxis.title: x-axis এর লেবেল।
- vAxis.title: y-axis এর লেবেল।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<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(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Month', 'Sales', 'Expenses'],
['January', 1000, 400],
['February', 1170, 460],
['March', 660, 1120],
['April', 1030, 540]
]);
var options = {
title: 'Company Performance',
chartArea: {width: '50%'},
hAxis: {
title: 'Total Sales', // x-axis লেবেল
minValue: 0
},
vAxis: {
title: 'Month' // y-axis লেবেল
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
এখানে:
- hAxis.title = 'Total Sales': x-axis এর লেবেল 'Total Sales'।
- vAxis.title = 'Month': y-axis এর লেবেল 'Month'।
৩. টাইটেল এবং অক্ষের লেবেল কাস্টমাইজ করা
আপনি টাইটেল এবং অক্ষের লেবেল কাস্টমাইজও করতে পারেন। উদাহরণস্বরূপ, আপনি টাইটেল এবং অক্ষের লেবেলের ফন্ট, সাইজ, রঙ ইত্যাদি কাস্টমাইজ করতে পারেন। এটি করতে titleTextStyle, hAxis.textStyle, এবং vAxis.textStyle ব্যবহার করতে হয়।
কাস্টমাইজড টাইটেল এবং অক্ষের লেবেল যোগ করার উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<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(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Month', 'Sales', 'Expenses'],
['January', 1000, 400],
['February', 1170, 460],
['March', 660, 1120],
['April', 1030, 540]
]);
var options = {
title: 'Company Performance',
titleTextStyle: {fontSize: 24, bold: true, color: 'blue'}, // টাইটেল কাস্টমাইজেশন
chartArea: {width: '50%'},
hAxis: {
title: 'Total Sales',
titleTextStyle: {fontSize: 18, color: 'green'}, // x-axis লেবেল কাস্টমাইজেশন
minValue: 0
},
vAxis: {
title: 'Month',
titleTextStyle: {fontSize: 18, color: 'red'} // y-axis লেবেল কাস্টমাইজেশন
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
এখানে:
- titleTextStyle: টাইটেলের জন্য ফন্ট সাইজ, বোল্ড এবং রঙ কাস্টমাইজ করা হয়েছে।
- hAxis.titleTextStyle এবং vAxis.titleTextStyle: x-axis এবং y-axis লেবেলের ফন্ট সাইজ এবং রঙ কাস্টমাইজ করা হয়েছে।
সারমর্ম
গুগল চার্টে titles এবং axis labels যোগ করা গুরুত্বপূর্ণ, কারণ এটি গ্রাফের বিষয়বস্তু স্পষ্টভাবে উপস্থাপন করতে সাহায্য করে। আপনি গুগল চার্টের title, hAxis.title, এবং vAxis.title ব্যবহার করে টাইটেল এবং অক্ষের লেবেল যোগ করতে পারেন। এগুলো কাস্টমাইজও করা সম্ভব, যাতে আপনার গ্রাফের উপস্থাপনা আরও আকর্ষণীয় এবং পরিষ্কার হয়।
ggplot2-এ labs() ফাংশন ব্যবহৃত হয় গ্রাফের লেবেল কাস্টমাইজ করার জন্য। এটি গ্রাফের শিরোনাম, অক্ষের নাম, এবং লেজেন্ডের নাম কাস্টমাইজ করতে ব্যবহৃত হয়। গুগল চার্ট-এ সরাসরি labs() ফাংশন নেই, তবে আপনি title, hAxis, এবং vAxis অপশন ব্যবহার করে গ্রাফের লেবেল কাস্টমাইজ করতে পারেন।
এই আলোচনায় আমরা ggplot2 এবং গুগল চার্ট-এ লেবেল কাস্টমাইজেশন সম্পর্কিত কিছু বিস্তারিত উদাহরণ দেখব।
ggplot2 তে labs() ফাংশন দিয়ে Labels কাস্টমাইজ করা
ggplot2-এ labs() ফাংশন ব্যবহার করে আপনি বিভিন্ন অংশের লেবেল কাস্টমাইজ করতে পারেন, যেমন:
- শিরোনাম (Title)
- x অক্ষের নাম (x-axis label)
- y অক্ষের নাম (y-axis label)
- লেজেন্ড (Legend) এর নাম
labs() ফাংশন এর সিঙ্কট্যাক্স:
labs(title = "Title", x = "X-axis label", y = "Y-axis label", color = "Legend label")
উদাহরণ:
# mtcars ডেটাসেট ব্যবহার করে লেবেল কাস্টমাইজেশন
ggplot(mtcars, aes(x = wt, y = mpg, color = factor(cyl))) +
geom_point() +
labs(title = "Car Weight vs Mileage",
x = "Weight (1000 lbs)",
y = "Miles per Gallon",
color = "Number of Cylinders") +
theme_minimal()
এখানে:
title: গ্রাফের শিরোনাম "Car Weight vs Mileage" হিসেবে কাস্টমাইজ করা হয়েছে।x: x অক্ষের নাম "Weight (1000 lbs)" হিসাবে কাস্টমাইজ করা হয়েছে।y: y অক্ষের নাম "Miles per Gallon" হিসাবে কাস্টমাইজ করা হয়েছে।color: লেজেন্ডের নাম "Number of Cylinders" হিসেবে কাস্টমাইজ করা হয়েছে।
গুগল চার্টে Labels কাস্টমাইজ করা
গুগল চার্টে লেবেল কাস্টমাইজ করার জন্য আপনাকে title, hAxis, এবং vAxis অপশন ব্যবহার করতে হবে। এগুলি গ্রাফের শিরোনাম এবং অক্ষের নাম কাস্টমাইজ করার জন্য ব্যবহৃত হয়।
উদাহরণ: গুগল চার্টে Labels কাস্টমাইজ করা
<!DOCTYPE html>
<html>
<head>
<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 = google.visualization.arrayToDataTable([
['X', 'Y'],
[1, 10],
[2, 20],
[3, 30],
[4, 40],
[5, 50]
]);
var options = {
title: 'X vs Y', // শিরোনাম
hAxis: {
title: 'X Axis', // x অক্ষের নাম
minValue: 1
},
vAxis: {
title: 'Y Axis', // y অক্ষের নাম
minValue: 10
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
এখানে:
title: 'X vs Y': গুগল চার্টে গ্রাফের শিরোনাম কাস্টমাইজ করা হয়েছে।hAxis.title: 'X Axis': x অক্ষের নাম "X Axis" করা হয়েছে।vAxis.title: 'Y Axis': y অক্ষের নাম "Y Axis" করা হয়েছে।
গুগল চার্টে hAxis.title এবং vAxis.title ব্যবহার করে আপনি সহজেই অক্ষের লেবেল কাস্টমাইজ করতে পারবেন।
সারমর্ম
- ggplot2-এ
labs()ফাংশন ব্যবহার করে আপনি গ্রাফের শিরোনাম, x এবং y অক্ষের নাম, এবং লেজেন্ডের নাম কাস্টমাইজ করতে পারেন। - গুগল চার্ট-এ আপনি
title,hAxis.title, এবংvAxis.titleএর মাধ্যমে শিরোনাম এবং অক্ষের লেবেল কাস্টমাইজ করতে পারেন। - এই কাস্টমাইজেশনগুলি গ্রাফের উপস্থাপনা পরিষ্কার এবং আরও তথ্যবহুল করে তোলে, যা ডেটার বিশ্লেষণ এবং বোঝার প্রক্রিয়া সহজ করে দেয়।
এভাবে ggplot2 এবং গুগল চার্ট উভয় প্ল্যাটফর্মে লেবেল কাস্টমাইজ করা সম্ভব এবং এটি গ্রাফের পাঠযোগ্যতা ও বোঝাপড়া সহজ করে।
Annotations এবং Text গুগল চার্ট এবং ggplot2 উভয় প্ল্যাটফর্মে ডেটা ভিজুয়ালাইজেশনের শক্তিশালী টুল হিসেবে ব্যবহৃত হয়। এগুলি গ্রাফের মধ্যে অতিরিক্ত তথ্য যোগ করতে ব্যবহৃত হয়, যা গ্রাফের মানে স্পষ্ট করে এবং দর্শকদের জন্য আরও ব্যাখ্যা প্রদান করে।
গুগল চার্ট এবং ggplot2-তে annotations এবং text যোগ করার বিভিন্ন পদ্ধতি রয়েছে। নিচে দুটি টুলের মধ্যে এই দুটি ফিচার যোগ করার পদ্ধতি আলোচনা করা হবে।
গুগল চার্ট (Google Charts): Annotations এবং Text যোগ করা
গুগল চার্টে annotations এবং text যোগ করার জন্য annotations অপশন ব্যবহার করা হয়। এর মাধ্যমে আপনি গ্রাফে স্পেসিফিক পয়েন্টে অতিরিক্ত তথ্য বা টেক্সট যোগ করতে পারেন।
উদাহরণ: গুগল চার্টে Annotations এবং Text যোগ করা
<!DOCTYPE html>
<html>
<head>
<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('number', 'X');
data.addColumn('number', 'Value');
data.addRows([
[1, 10],
[2, 50],
[3, 100],
[4, 150],
[5, 200]
]);
var options = {
title: 'Line Chart with Annotations',
hAxis: { title: 'X-axis' },
vAxis: { title: 'Y-axis' },
annotations: [
{column: 1, row: 3, text: 'Annotation at (3,100)', style: 'color: red; font-size: 14px;'}
]
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
ব্যাখ্যা:
- annotations: এখানে annotations অপশনটি ব্যবহার করা হয়েছে, যেখানে column এবং row নির্ধারণ করে গ্রাফের কোন পয়েন্টে টেক্সট যোগ করা হবে। উদাহরণস্বরূপ, (3, 100) পয়েন্টে একটি টেক্সট প্রদর্শিত হবে।
- style: এখানে টেক্সটের রঙ এবং ফন্ট সাইজ কাস্টমাইজ করা হয়েছে।
ggplot2: geom_text() এর মাধ্যমে Text যোগ করা
ggplot2 এ geom_text() ফাংশন ব্যবহার করে আপনি গ্রাফের পয়েন্টে টেক্সট যোগ করতে পারেন। এই ফাংশনটি সাধারণত গ্রাফের ডেটা পয়েন্টে লেবেল বা অতিরিক্ত তথ্য দেখাতে ব্যবহৃত হয়।
উদাহরণ: ggplot2 তে geom_text() এর মাধ্যমে Text যোগ করা
# ggplot2 প্যাকেজ লোড করা
library(ggplot2)
# ডেটাসেট
data(mtcars)
# গ্রাফে টেক্সট যোগ করা
ggplot(mtcars, aes(x = wt, y = mpg)) +
geom_point() +
geom_text(aes(label = rownames(mtcars)), vjust = -0.5, hjust = 0.5) +
labs(title = "Car Data with Annotations")
ব্যাখ্যা:
- geom_text(): এখানে
geom_text()ফাংশন ব্যবহার করা হয়েছে, যা প্রতিটি ডেটা পয়েন্টে লেবেল যোগ করবে। - aes(label = rownames(mtcars)): এই অংশটি ডেটাসেটের rownames (যেমন, car names) কে টেক্সট হিসেবে লেবেল হিসাবে ব্যবহার করছে।
- vjust, hjust: টেক্সটের অবস্থান কাস্টমাইজ করতে
vjust(vertical adjustment) এবংhjust(horizontal adjustment) ব্যবহার করা হয়েছে।
সারমর্ম
Annotations এবং Text উভয় প্ল্যাটফর্মেই ডেটার ভিজুয়ালাইজেশনকে আরও অর্থপূর্ণ করে তোলে। গুগল চার্টে annotations ব্যবহার করে আপনি বিশেষ পয়েন্টে টেক্সট বা অতিরিক্ত তথ্য যোগ করতে পারেন। ggplot2-তে geom_text() ব্যবহার করে আপনি ডেটা পয়েন্টে লেবেল বা টেক্সট যোগ করতে পারেন, যা গ্রাফের বিশ্লেষণ এবং ব্যাখ্যা আরও সহজ করে।
- গুগল চার্ট (Google Charts):
annotationsএর মাধ্যমে টেক্সট যোগ করা। - ggplot2:
geom_text()এর মাধ্যমে টেক্সট বা লেবেল যোগ করা।
এভাবে, আপনি ডেটাকে আরও বোধগম্য এবং বিস্তারিতভাবে উপস্থাপন করতে পারেন।
Legends (লেজেন্ডস) একটি গুরুত্বপূর্ণ উপাদান যা ডেটা ভিজুয়ালাইজেশনে বিভিন্ন সিরিজ বা শ্রেণীকে চিহ্নিত করে এবং গ্রাফের বিভিন্ন উপাদান সম্পর্কে তথ্য প্রদান করে। গুগল চার্টে, লেজেন্ড সাধারণত ডেটা সিরিজের নাম বা রঙের মান সম্পর্কিত তথ্য প্রদর্শন করে, যা ব্যবহারকারীকে গ্রাফ বুঝতে সাহায্য করে।
এখানে আমরা গুগল চার্টে Legends যোগ করা এবং Legends কাস্টমাইজ করার প্রক্রিয়া নিয়ে আলোচনা করব।
গুগল চার্টে Legends যোগ করা
গুগল চার্টে লেজেন্ড সাধারণত legend অপশন দ্বারা কাস্টমাইজ করা হয়। legend অপশন গ্রাফে লেজেন্ডের অবস্থান, রঙ, এবং অন্যান্য ভিজ্যুয়াল উপাদান নিয়ন্ত্রণ করতে সাহায্য করে।
১. Legends যোগ করা
লেজেন্ড সাধারণত গুগল চার্টে অটোমেটিকভাবে যোগ হয়, যখন আপনি ডেটার সিরিজ বা ক্যাটাগরি যোগ করেন। উদাহরণস্বরূপ, বার চার্ট বা লাইন চার্টে বিভিন্ন সিরিজের জন্য লেজেন্ড স্বয়ংক্রিয়ভাবে তৈরি হয়।
উদাহরণ: গুগল চার্টে Legends যোগ করা
<!DOCTYPE html>
<html>
<head>
<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([
['Category', '2019', '2020', '2021'],
['A', 1000, 1170, 660],
['B', 1170, 660, 1120],
['C', 660, 1120, 1200],
['D', 1030, 540, 800]
]);
var options = {
title: 'Company Performance',
chartArea: {
width: '50%'
},
hAxis: {
title: 'Total Revenue',
minValue: 0
},
vAxis: {
title: 'Year'
},
legend: { position: 'top' } // লেজেন্ডের অবস্থান উপরের দিকে
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
এখানে:
legend: { position: 'top' }: এটি গ্রাফের লেজেন্ডকে উপরের দিকে স্থাপন করবে।- লেজেন্ডের মাধ্যমে আপনি ২০১৯, ২০২০, এবং ২০২১ সালের ডেটার পৃথক সিরিজ দেখে নিতে পারবেন।
গুগল চার্টে Legends কাস্টমাইজ করা
গুগল চার্টে লেজেন্ড কাস্টমাইজ করা সম্ভব। আপনি বিভিন্ন অপশন ব্যবহার করে লেজেন্ডের অবস্থান, রঙ, ফন্ট সাইজ, বক্সের আকার, স্টাইল ইত্যাদি পরিবর্তন করতে পারেন।
১. Legends এর অবস্থান পরিবর্তন
লেজেন্ডের অবস্থান পরিবর্তন করতে position প্রপার্টি ব্যবহার করা হয়। অবস্থান হতে পারে:
'top''bottom''left''right''none'(যদি আপনি লেজেন্ড না চান)
legend: { position: 'bottom' } // লেজেন্ডকে নিচে স্থানান্তরিত করা
২. Legends এর রঙ এবং ফন্ট সাইজ কাস্টমাইজ করা
আপনি লেজেন্ডের রঙ এবং ফন্ট সাইজ কাস্টমাইজ করতে পারেন।
legend: {
position: 'top',
textStyle: {
color: 'blue', // লেজেন্ডের টেক্সটের রঙ
fontSize: 14 // লেজেন্ডের ফন্ট সাইজ
}
}
৩. Legends এর বক্স স্টাইল কাস্টমাইজ করা
লেজেন্ডের বক্সের স্টাইলও পরিবর্তন করা যায়, যেমন বক্সের আকার এবং রঙ।
legend: {
position: 'top',
textStyle: {
color: 'black',
fontSize: 16
},
alignment: 'center' // লেজেন্ডের বক্সকে কেন্দ্রের দিকে সাজানো
}
৪. Legends এর লেবেল কাস্টমাইজ
আপনি লেজেন্ডের লেবেলও কাস্টমাইজ করতে পারেন। এটি ডেটার নামকে আরও স্পষ্ট বা কাস্টমাইজড উপস্থাপন করতে সহায়ক।
legend: {
position: 'right',
textStyle: {
color: 'green', // লেজেন্ডের টেক্সটের রঙ
fontSize: 12 // ফন্ট সাইজ
},
labelInLegend: function() { return 'Custom Label'; } // কাস্টম লেবেল
}
সারমর্ম
গুগল চার্ট-এ Legends ডেটার সিরিজের পরিচিতি প্রদানের জন্য গুরুত্বপূর্ণ। এটি ব্যবহারকারীদের গ্রাফের বিভিন্ন অংশ দ্রুত বুঝতে সহায়তা করে। লেজেন্ডের অবস্থান এবং স্টাইল কাস্টমাইজ করতে আপনি legend অপশন ব্যবহার করতে পারেন। লেজেন্ডের অবস্থান যেমন উপরে, নিচে বা পাশে রাখা যেতে পারে, এবং রঙ, ফন্ট সাইজ, বক্স স্টাইল ইত্যাদি কাস্টমাইজ করা সম্ভব।
গুগল চার্টের মাধ্যমে আপনি আপনার ডেটা ভিজুয়ালাইজেশনে লেজেন্ডের মাধ্যমে আরও স্পষ্টতা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারেন।
Read more
