Google Charts ব্যবহার করে আপনি সহজেই ডেটা পয়েন্ট এবং লাইন স্টাইল কাস্টমাইজ করতে পারেন। এটি ডেটার ভিজ্যুয়াল উপস্থাপনাকে আরও আকর্ষণীয় এবং বুঝতে সহজ করে তোলে। এখানে আমরা দেখব কীভাবে আপনি ডেটা পয়েন্ট এবং লাইন স্টাইল পরিবর্তন করতে পারেন Google Charts এ।
১. ডেটা পয়েন্ট কাস্টমাইজেশন (Customizing Data Points)
Google Charts এ লাইন চার্ট (LineChart) এবং অন্যান্য চার্টে ডেটা পয়েন্টগুলি কাস্টমাইজ করা যেতে পারে, যেমন সেগুলির আকার, রং, এবং স্টাইল। সার্কল, স্কোয়ার, ডায়মন্ড বা ত্রিভুজ শেপ ব্যবহার করা যেতে পারে, যা ডেটা পয়েন্টগুলোকে আরও স্পষ্ট এবং দর্শনীয় করে তোলে।
ডেটা পয়েন্ট কাস্টমাইজ করার জন্য অপশন:
- pointSize: এটি ডেটা পয়েন্টের আকার নিয়ন্ত্রণ করে।
- pointShape: এটি ডেটা পয়েন্টের আকার পরিবর্তন করতে সাহায্য করে (যেমন সার্কল, স্কোয়ার, ডায়মন্ড ইত্যাদি)।
- pointColor: এটি ডেটা পয়েন্টের রং পরিবর্তন করতে ব্যবহৃত হয়।
উদাহরণ:
var options = {
title: 'Company Sales Over the Years',
hAxis: { title: 'Year' },
vAxis: { title: 'Sales (in USD)' },
curveType: 'function',
legend: { position: 'bottom' },
pointSize: 10, // ডেটা পয়েন্টের আকার
pointShape: 'circle', // ডেটা পয়েন্টের আকার
series: {
0: { pointSize: 12, pointShape: 'triangle', color: '#ff5733' }, // প্রথম সিরিজের পয়েন্টের আকার, শেপ এবং রং
1: { pointSize: 8, pointShape: 'square', color: '#33c1ff' } // দ্বিতীয় সিরিজের পয়েন্টের আকার, শেপ এবং রং
}
};
এই কোডে আমরা pointSize এবং pointShape ব্যবহার করেছি ডেটা পয়েন্ট কাস্টমাইজ করতে। প্রথম সিরিজে ট্রায়াঙ্গল এবং দ্বিতীয় সিরিজে স্কোয়ার পয়েন্টের শেপ ব্যবহার করা হয়েছে।
২. লাইন স্টাইল কাস্টমাইজেশন (Customizing Line Styles)
Google Charts এ লাইন চার্টের লাইন স্টাইল কাস্টমাইজ করা যায়। এর মাধ্যমে আপনি লাইনটির রঙ, মোটা বা পাতলা, বা ড্যাশড লাইন তৈরি করতে পারবেন। লাইন স্টাইল কাস্টমাইজ করার জন্য lineWidth, lineDashStyle, এবং color অপশন ব্যবহার করা হয়।
লাইন স্টাইল কাস্টমাইজ করার জন্য অপশন:
- lineWidth: এটি লাইনটির পুরুত্ব পরিবর্তন করতে ব্যবহৃত হয়।
- lineDashStyle: এটি লাইনটি ড্যাশড বা সলিড স্টাইল করতে ব্যবহৃত হয়।
- color: এটি লাইনটির রং পরিবর্তন করতে ব্যবহৃত হয়।
উদাহরণ:
var options = {
title: 'Company Sales Over the Years',
hAxis: { title: 'Year' },
vAxis: { title: 'Sales (in USD)' },
curveType: 'function',
legend: { position: 'bottom' },
series: {
0: {
color: '#ff5733', // লাইনটির রং
lineWidth: 4, // লাইনটির পুরুত্ব
lineDashStyle: [4, 4] // ড্যাশড লাইন
},
1: {
color: '#33c1ff', // লাইনটির রং
lineWidth: 2, // লাইনটির পুরুত্ব
lineDashStyle: [] // সলিড লাইন
}
}
};
এখানে প্রথম সিরিজের লাইনটি ড্যাশড এবং দ্বিতীয় সিরিজের লাইনটি সলিড রাখা হয়েছে। এছাড়াও প্রথম সিরিজের লাইনটির পুরুত্ব ৪ এবং দ্বিতীয় সিরিজের লাইনটির পুরুত্ব ২ করা হয়েছে।
৩. একাধিক সিরিজের কাস্টমাইজেশন (Customizing Multiple Series)
আপনি যদি একাধিক সিরিজের চার্ট তৈরি করেন, তবে প্রতিটি সিরিজের ডেটা পয়েন্ট এবং লাইন স্টাইল আলাদা করতে পারেন। এটি বিভিন্ন ক্যাটেগরি বা ভেরিয়েবলকে আলাদা উপস্থাপন করার জন্য সহায়ক।
উদাহরণ:
var options = {
title: 'Sales and Expenses Over the Years',
hAxis: { title: 'Year' },
vAxis: { title: 'Amount (in USD)' },
series: {
0: { color: '#ff5733', lineWidth: 3, pointSize: 8, pointShape: 'circle' }, // Sales সিরিজ
1: { color: '#33c1ff', lineWidth: 2, pointSize: 8, pointShape: 'square' } // Expenses সিরিজ
},
legend: { position: 'bottom' }
};
এখানে দুটি সিরিজ রয়েছে - Sales এবং Expenses। Sales সিরিজের জন্য লাল রঙ, লম্বা লাইন এবং ক্রিসেন্ট শেপ পয়েন্ট ব্যবহার করা হয়েছে, এবং Expenses সিরিজের জন্য নীল রঙ, পাতলা লাইন এবং স্কোয়ার শেপ পয়েন্ট ব্যবহার করা হয়েছে।
৪. কাস্টম ডেটা পয়েন্টের শেপ এবং লাইন স্টাইল সহ চার্ট
এখন আমরা একটি পূর্ণাঙ্গ উদাহরণ দেখবো যেখানে ডেটা পয়েন্ট এবং লাইন স্টাইল কাস্টমাইজ করা হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts: Data Point and Line Styles</title>
<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([
['Year', 'Sales', 'Expenses'],
['2020', 1000, 400],
['2021', 1170, 460],
['2022', 660, 1120],
['2023', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: { title: 'Year' },
vAxis: { title: 'Amount (in USD)' },
curveType: 'function',
legend: { position: 'bottom' },
series: {
0: {
color: '#ff5733',
lineWidth: 3,
lineDashStyle: [4, 4], // ড্যাশড লাইন
pointSize: 10,
pointShape: 'circle' // ডেটা পয়েন্টের শেপ সার্কেল
},
1: {
color: '#33c1ff',
lineWidth: 2,
lineDashStyle: [],
pointSize: 8,
pointShape: 'square' // ডেটা পয়েন্টের শেপ স্কোয়ার
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Charts: Data Point and Line Styles</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে দুটি সিরিজ রয়েছে, একটির ডেটা পয়েন্ট সার্কেল শেপ এবং ড্যাশড লাইন, এবং অন্যটির স্কোয়ার শেপ এবং সলিড লাইন।
উপসংহার
Google Charts এ ডেটা পয়েন্ট এবং লাইন স্টাইল পরিবর্তন করে আপনি আপনার চার্টের ভিজ্যুয়াল উপস্থাপনাকে আরো আকর্ষণীয় এবং স্পষ্ট করতে পারেন। ডেটা পয়েন্টের আকার এবং শেপ কাস্টমাইজ করার মাধ্যমে আপনার চার্টের বিভিন্ন উপাদানকে আলাদা ও স্বতন্ত্র করা সম্ভব। একইভাবে, লাইন স্টাইল পরিবর্তন করে আপনি ডেটার প্রবণতাকে আরও পরিষ্কারভাবে উপস্থাপন করতে পারেন।
Read more
