Google Charts-এ আপনি আপনার চার্টের রং এবং ফন্ট কাস্টমাইজ করে আপনার ডেটা ভিজ্যুয়ালাইজেশনকে আরও আকর্ষণীয় এবং পার্সোনালাইজড করতে পারেন। এখানে আমরা Chart Colors এবং Fonts কাস্টমাইজ করার বিভিন্ন টেকনিক আলোচনা করব।
Chart Colors কাস্টমাইজ করা
গুগল চার্টে বিভিন্ন অংশ যেমন বার, লাইন, পাই স্লাইস, গেজ এবং অন্যান্য উপাদানগুলির জন্য রং নির্ধারণ করা যায়। রং কাস্টমাইজেশন ডেটার মানে আরও ভিজ্যুয়াল ক্লিয়ারিটি যোগ করে এবং দর্শকদের জন্য চার্টটি আকর্ষণীয় করে তোলে।
১. চার্টের রং পরিবর্তন করা
প্রতিটি সিরিজ বা ডেটা পয়েন্টের রং পরিবর্তন করতে colors অপশন ব্যবহার করা হয়।
var options = {
colors: ['#ff0000', '#00ff00', '#0000ff'] // Red, Green, Blue colors for different series
};
২. পাই চার্টে স্লাইসের রং পরিবর্তন করা
পাই চার্টে প্রতিটি স্লাইসের রং আলাদা করা যায়। এটি স্লাইসের সংখ্যা অনুযায়ী কাস্টমাইজ করা যায়।
var options = {
slices: {
0: { offset: 0.1, color: '#ff6347' }, // Tomato red
1: { offset: 0.1, color: '#4682b4' }, // Steel blue
2: { offset: 0.1, color: '#32cd32' } // Lime green
}
};
৩. লাইন চার্টের রং পরিবর্তন করা
লাইন চার্টে প্রতিটি লাইন বা সিরিজের রং কাস্টমাইজ করতে colors অপশন ব্যবহার করা হয়।
var options = {
colors: ['#ff4500', '#008080', '#ffd700']
};
৪. বার চার্টে রং পরিবর্তন করা
বার বা কলাম চার্টের প্রতিটি বার বা কলামের জন্য রং কাস্টমাইজ করা যায়। এটি আপনি color অপশন দিয়ে করতে পারেন।
var options = {
bars: 'vertical', // Change to 'horizontal' for horizontal bars
backgroundColor: '#f0f0f0', // Light gray background
bar: { groupWidth: '75%' },
colors: ['#ff6347', '#4682b4', '#32cd32'] // Custom colors for each bar
};
Fonts কাস্টমাইজ করা
Google Charts আপনাকে আপনার চার্টের লেখার ফন্ট এবং স্টাইল কাস্টমাইজ করার সুযোগও দেয়, যা আপনার চার্টের ভিজ্যুয়াল প্রেজেন্টেশন আরও পেশাদার এবং সুসংগঠিত করতে সাহায্য করে।
১. Chart Title Font কাস্টমাইজ করা
চার্টের শিরোনাম (Title) এর ফন্ট সাইজ, ফন্ট ফ্যামিলি এবং বোল্ড/ইটালিক স্টাইল কাস্টমাইজ করা যায়।
var options = {
title: 'Company Performance',
titleTextStyle: {
fontSize: 20, // Font size
bold: true, // Bold text
italic: true, // Italic text
color: '#0000ff', // Font color (blue)
fontName: 'Arial' // Font family (Arial)
}
};
২. Axis Titles Font কাস্টমাইজ করা
এক্স-অ্যাক্সিস এবং ওয়াই-অ্যাক্সিসের শিরোনামগুলোও কাস্টমাইজ করা যায়। আপনি এখানে ফন্ট সাইজ, ফন্ট স্টাইল, রঙ এবং ফন্ট ফ্যামিলি পরিবর্তন করতে পারেন।
var options = {
hAxis: {
title: 'Year',
titleTextStyle: {
fontSize: 14, // Font size
bold: true, // Bold text
color: '#000000', // Font color (black)
fontName: 'Times New Roman' // Font family
}
},
vAxis: {
title: 'Sales',
titleTextStyle: {
fontSize: 14, // Font size
color: '#000000', // Font color (black)
fontName: 'Times New Roman' // Font family
}
}
};
৩. Legend Font কাস্টমাইজ করা
চার্টের লেজেন্ডের ফন্টও কাস্টমাইজ করা যায়, যাতে লেজেন্ডের টেক্সট এবং আইকনগুলো আরও স্পষ্টভাবে প্রদর্শিত হয়।
var options = {
legend: {
position: 'bottom', // Legend position
textStyle: {
fontSize: 14, // Font size
color: '#ff6347', // Font color (tomato red)
fontName: 'Arial' // Font family
}
}
};
৪. Tooltip Font কাস্টমাইজ করা
টুলটিপে প্রদর্শিত টেক্সটের ফন্ট এবং স্টাইল কাস্টমাইজ করা যায়।
var options = {
tooltip: {
textStyle: {
fontSize: 16, // Font size
color: '#ffffff', // Font color (white)
fontName: 'Verdana' // Font family
}
}
};
Complete Example
এখানে একটি পূর্ণাঙ্গ উদাহরণ দেখানো হলো যেখানে চার্টের রং এবং ফন্ট কাস্টমাইজ করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Chart Customization 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', 'Expenses'],
['2019', 1000, 400],
['2020', 1170, 460],
['2021', 660, 1120],
['2022', 1030, 540]
]);
var options = {
title: 'Company Performance',
titleTextStyle: {
fontSize: 20,
bold: true,
color: '#0000ff',
fontName: 'Arial'
},
hAxis: {
title: 'Year',
titleTextStyle: {
fontSize: 14,
color: '#000000',
fontName: 'Times New Roman'
}
},
vAxis: {
title: 'Sales',
titleTextStyle: {
fontSize: 14,
color: '#000000',
fontName: 'Times New Roman'
}
},
colors: ['#ff6347', '#4682b4'], // Red and Blue colors for the bars
legend: {
position: 'bottom',
textStyle: {
fontSize: 14,
color: '#ff6347',
fontName: 'Arial'
}
},
backgroundColor: '#f4f4f4', // Light background color
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Customized Google Chart</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
উপসংহার
Google Charts এর Chart Colors এবং Fonts কাস্টমাইজেশন টেকনিক ব্যবহার করে আপনি আপনার চার্টের ডিজাইন এবং স্টাইল পুরোপুরি কাস্টমাইজ করতে পারেন। রং এবং ফন্টের সাহায্যে আপনি চার্টের ভিজ্যুয়াল প্রেজেন্টেশনকে আরও আকর্ষণীয়, স্পষ্ট এবং ব্যবহারকারী-বান্ধব করে তুলতে পারবেন।
Read more
