গুগল চার্ট (Google Charts) একটি শক্তিশালী ভিজুয়ালাইজেশন টুল যা গ্রাফ এবং চার্টের উপস্থাপনায় কাস্টমাইজেশন এবং স্টাইলিং প্রদান করে। আপনি custom fonts এবং colors ব্যবহার করে গুগল চার্টের চেহারা সম্পূর্ণভাবে কাস্টমাইজ করতে পারেন। এই বৈশিষ্ট্যগুলি ডেটার উপস্থাপনাকে আরও সুন্দর এবং গ্রাফের সাথে সামঞ্জস্যপূর্ণ করতে সাহায্য করে।
এখানে, আমরা গুগল চার্টে কাস্টম ফন্ট এবং রঙ ব্যবহার করার প্রক্রিয়া সম্পর্কে বিস্তারিত আলোচনা করব।
Custom Fonts ব্যবহার করা
গুগল চার্টে Custom Fonts ব্যবহার করতে আপনি options অবজেক্টের মাধ্যমে fontName এবং fontSize নির্ধারণ করতে পারেন। আপনি নিজের পছন্দের ফন্ট ব্যবহার করতে চাইলে, প্রথমে ওই ফন্টটি আপনার ওয়েবপেজে লোড করতে হবে (যেমন Google Fonts থেকে) এবং তারপর সেই ফন্টটি চার্টে প্রয়োগ করতে হবে।
উদাহরণ: Google Charts-এ Custom Font ব্যবহার করা
<!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', 1000],
['Product B', 1200],
['Product C', 1300],
['Product D', 1400]
]);
var options = {
title: 'Sales of Products',
hAxis: {
title: 'Product',
fontName: 'Arial', // Custom font for x-axis
fontSize: 14
},
vAxis: {
title: 'Sales',
fontName: 'Courier New', // Custom font for y-axis
fontSize: 12
},
chartArea: {
left: 50,
top: 30,
width: '80%',
height: '70%'
}
};
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>
এখানে:
fontNameব্যবহার করে x-axis এবং y-axis এর জন্য কাস্টম ফন্ট যোগ করা হয়েছে।ArialএবংCourier Newদুটি কাস্টম ফন্ট ব্যবহার করা হয়েছে।
Google Fonts ব্যবহার:
যদি আপনি গুগল ফন্ট (Google Fonts) ব্যবহার করতে চান, তাহলে আপনাকে প্রথমে HTML হেডারে সেই ফন্ট লোড করতে হবে।
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
এটি আপনার পছন্দের ফন্ট, যেমন Roboto ব্যবহার করতে সাহায্য করবে।
Custom Colors ব্যবহার করা
গুগল চার্টে আপনি Custom Colors ব্যবহার করতে পারেন, যা চার্টের বিভিন্ন উপাদানকে বিশেষভাবে স্টাইল করতে সাহায্য করে। আপনি colors অপশন ব্যবহার করে চার্টের পটভূমি, বার, পয়েন্ট এবং লাইন এর রঙ কাস্টমাইজ করতে পারেন।
উদাহরণ: Google Charts-এ Custom Colors ব্যবহার করা
<!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', 1000],
['Product B', 1200],
['Product C', 1300],
['Product D', 1400]
]);
var options = {
title: 'Sales of Products',
hAxis: {title: 'Product'},
vAxis: {title: 'Sales'},
chartArea: {
left: 50,
top: 30,
width: '80%',
height: '70%'
},
colors: ['#FF5733', '#33FF57', '#3357FF', '#FF33A1'], // Custom colors for bars
};
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>
এখানে:
colorsব্যবহার করে কাস্টম রঙ ব্যবহার করা হয়েছে।- প্রতিটি বার এর জন্য আলাদা রঙ নির্ধারণ করা হয়েছে (
#FF5733,#33FF57,#3357FF,#FF33A1)।
অন্যান্য কাস্টমাইজেশন:
গুগল চার্টে পটভূমির রঙ (background color), এনোটেশন রঙ, লাইন রঙ, এবং অন্যান্য অনেক উপাদানের রঙ কাস্টমাইজ করা যায়।
var options = {
backgroundColor: '#f1f1f1', // Background color
titleTextStyle: {
color: 'black', // Title color
fontSize: 18, // Title font size
fontName: 'Arial'
},
hAxis: {
title: 'Product',
titleTextStyle: {
color: 'blue' // Axis title color
}
}
};
সারমর্ম
গুগল চার্টে Custom Fonts এবং Colors ব্যবহার করে আপনি আপনার চার্টকে আরও ব্যক্তিগত এবং সুন্দর করে তুলতে পারেন। Font এবং Color কাস্টমাইজেশন ব্যবহার করে আপনি চার্টের বিভিন্ন উপাদান যেমন অক্ষের নাম, শিরোনাম, এবং ডেটা বারের রঙ পরিবর্তন করতে পারেন। এর মাধ্যমে, আপনি একটি নির্দিষ্ট ব্র্যান্ডিং বা থিম অনুসরণ করে আপনার ডেটা ভিজুয়ালাইজেশন তৈরি করতে পারবেন।
- Custom Fonts ব্যবহার করতে আপনি
fontNameএবংfontSizeপ্যারামিটার ব্যবহার করতে পারেন। - Custom Colors ব্যবহার করতে আপনি
colorsবা অন্য স্টাইল অপশন ব্যবহার করে চার্টের বিভিন্ন অংশের রঙ পরিবর্তন করতে পারেন।
Read more
