গুগল চার্টে ডেটার উপস্থাপনা শুধুমাত্র তথ্য প্রদর্শন করা নয়, বরং গ্রাফের চেহারা এবং ভিজ্যুয়াল উপাদানগুলোকেও কাস্টমাইজ করা খুবই গুরুত্বপূর্ণ। আপনি Background, Gridlines, এবং Margins কাস্টমাইজ করে আপনার গ্রাফের ডিজাইন আরও আকর্ষণীয় ও স্পষ্ট করতে পারেন। গুগল চার্টে এগুলো কাস্টমাইজ করার জন্য বিভিন্ন অপশন রয়েছে।
এখানে আমরা গুগল চার্টে Background, Gridlines, এবং Margins কাস্টমাইজ করার উপায় নিয়ে বিস্তারিত আলোচনা করব।
১. Background কাস্টমাইজ করা
গুগল চার্টে গ্রাফের Background পরিবর্তন করতে chartArea এবং backgroundColor অপশন ব্যবহার করা হয়। আপনি পুরো চার্টের পটভূমি বা কেবলমাত্র গ্রাফের এরিয়া (chart area) এর পটভূমি পরিবর্তন করতে পারবেন।
উদাহরণ: Background কাস্টমাইজ করা
<!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([
['Product', 'Sales'],
['Product A', 100],
['Product B', 150],
['Product C', 120],
['Product D', 130]
]);
var options = {
title: 'Product Sales',
backgroundColor: '#f0f0f0', // Whole chart background color
chartArea: {
backgroundColor: '#ffffff', // Chart area background color
width: '80%',
height: '70%'
},
hAxis: {
title: 'Products'
},
vAxis: {
title: 'Sales'
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে:
- backgroundColor: চার্টের পুরো পটভূমি রঙ পরিবর্তন করা হয়েছে।
- chartArea.backgroundColor: কেবল গ্রাফের পটভূমি পরিবর্তন করা হয়েছে।
২. Gridlines কাস্টমাইজ করা
Gridlines হল অক্ষের উপর স্নাতক (horizontal) বা উল্লম্ব (vertical) রেখাগুলি যা ডেটার সঠিকতা দেখায়। গুগল চার্টে আপনি gridlines কাস্টমাইজ করতে পারেন, যেমন রঙ, প্রস্থ, এবং দৃশ্যমানতা (visibility) নিয়ন্ত্রণ করা।
উদাহরণ: Gridlines কাস্টমাইজ করা
<!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([
['Product', 'Sales'],
['Product A', 100],
['Product B', 150],
['Product C', 120],
['Product D', 130]
]);
var options = {
title: 'Product Sales',
hAxis: {
title: 'Products',
gridlines: {
color: '#ccc', // Gridline color
count: 4 // Number of gridlines
}
},
vAxis: {
title: 'Sales',
gridlines: {
color: '#ccc', // Gridline color
count: 5 // Number of gridlines
}
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে:
- gridlines.color: গ্রিডলাইনগুলির রঙ পরিবর্তন করা হয়েছে।
- gridlines.count: গ্রিডলাইন সংখ্যা নির্ধারণ করা হয়েছে।
৩. Margins কাস্টমাইজ করা
Margins হল চার্টের বাইরের স্থান, যা গ্রাফের আশেপাশে থাকে। আপনি গুগল চার্টে margins কাস্টমাইজ করতে পারেন, যেমন চার্টের শিরোনাম, অক্ষের লেবেল, বা ডেটার আশেপাশে কতটা স্পেস থাকবে তা নির্ধারণ করতে।
উদাহরণ: Margins কাস্টমাইজ করা
<!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([
['Product', 'Sales'],
['Product A', 100],
['Product B', 150],
['Product C', 120],
['Product D', 130]
]);
var options = {
title: 'Product Sales',
chartArea: {
left: 50, // Left margin
top: 50, // Top margin
right: 50, // Right margin
bottom: 50 // Bottom margin
},
hAxis: {
title: 'Products'
},
vAxis: {
title: 'Sales'
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে:
- chartArea.left, chartArea.top, chartArea.right, chartArea.bottom: গ্রাফের চারপাশের মার্জিন কাস্টমাইজ করা হয়েছে। এটি গ্রাফের আশেপাশে কতটা ফাঁকা জায়গা থাকবে তা নির্ধারণ করে।
সারমর্ম
গুগল চার্টে Background, Gridlines, এবং Margins কাস্টমাইজ করে আপনি আপনার চার্টের ডিজাইন এবং ভিজ্যুয়াল উপস্থাপনাকে আরও পরিপাটি এবং প্রাসঙ্গিক করতে পারেন। আপনি backgroundColor এবং chartArea এর মাধ্যমে পটভূমি কাস্টমাইজ করতে পারেন, gridlines এর মাধ্যমে গ্রিডলাইন রঙ ও সংখ্যা নিয়ন্ত্রণ করতে পারেন এবং margins এর মাধ্যমে চার্টের চারপাশের ফাঁকা জায়গা নির্ধারণ করতে পারেন। এসব কাস্টমাইজেশন দ্বারা আপনার ডেটা ভিজুয়ালাইজেশন হবে আরও আকর্ষণীয় এবং পাঠযোগ্য।
Read more
