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