Google Charts একটি শক্তিশালী টুল যা ডেভেলপারদের বিভিন্ন ধরনের চার্ট তৈরি করতে সাহায্য করে। এই চার্টগুলো ডেটাকে সুন্দরভাবে এবং কার্যকরীভাবে উপস্থাপন করতে সহায়ক। এখানে Bar Chart, Line Chart, এবং Pie Chart এর ব্যবহার দেখানো হবে।
১. Bar Chart (বার চার্ট)
Bar Chart সাধারণত তুলনামূলক ডেটা প্রদর্শন করতে ব্যবহৃত হয়, যেমন বিভিন্ন শহরের জনসংখ্যা, কোম্পানির সেলস ডেটা বা অন্যান্য ক্যাটেগরি ভিত্তিক ডেটা। বার চার্টের মধ্যে এক্স-অ্যাক্সিসে ক্যাটেগরি এবং ওয়াই-অ্যাক্সিসে মান থাকে।
উদাহরণ: Bar Chart তৈরি করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bar Chart 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([
['City', 'Population'],
['New York', 8175000],
['Los Angeles', 3792000],
['Chicago', 2695000],
['Houston', 2121000],
['Phoenix', 1445000]
]);
var options = {
title: 'Population of Major Cities',
chartArea: {width: '50%'},
hAxis: {title: 'Population', minValue: 0},
vAxis: {title: 'City'}
};
var chart = new google.visualization.BarChart(document.getElementById('bar_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Bar Chart Example</h2>
<div id="bar_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
ব্যাখ্যা:
- ডেটা: শহর এবং তাদের জনসংখ্যার ডেটা।
- অপশন: চার্টের শিরোনাম, এক্স এবং ওয়াই অক্ষের লেবেল এবং অন্যান্য কাস্টমাইজেশন।
২. Line Chart (লাইন চার্ট)
Line Chart ডেটার সময়ক্রমিক পরিবর্তন বা প্রবণতা দেখানোর জন্য ব্যবহৃত হয়। এটি সেলস ট্র্যাকিং, শেয়ার প্রাইসের পরিবর্তন বা অন্যান্য সময়ভিত্তিক ডেটার জন্য উপযুক্ত।
উদাহরণ: Line Chart তৈরি করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Chart 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', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
var options = {
title: 'Company Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales (in USD)'},
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Line Chart Example</h2>
<div id="line_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
ব্যাখ্যা:
- ডেটা: বছর এবং সেলস ডেটা।
- অপশন: চার্টের শিরোনাম, এক্স এবং ওয়াই অক্ষের লেবেল এবং কনফিগারেশন (যেমন,
curveTypeগ্রাফে স্নিগ্ধতা আনতে ব্যবহৃত হয়)।
৩. Pie Chart (পাই চার্ট)
Pie Chart সাধারণত অংশবিশেষের তুলনা করতে ব্যবহৃত হয়, যেমন পণ্যের মার্কেট শেয়ার, বিভিন্ন বিভাগের বাজেটের ভাগ ইত্যাদি। পাই চার্টটি ৩৬০ ডিগ্রি বৃত্তের অংশ হিসেবে ডেটা দেখায়।
উদাহরণ: Pie Chart তৈরি করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pie Chart 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', 'pie']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Amount'],
['Food', 45],
['Rent', 25],
['Utilities', 15],
['Entertainment', 10],
['Others', 5]
]);
var options = {
title: 'Monthly Expenses Distribution',
is3D: true
};
var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Pie Chart Example</h2>
<div id="pie_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
ব্যাখ্যা:
- ডেটা: মাসিক খরচের ভাগ, যেমন খাবার, ভাড়া, বিদ্যুৎ, ইত্যাদি।
- অপশন: শিরোনাম এবং ৩ডি অপশন, যা চার্টটিকে আরও আকর্ষণীয় করে তোলে।
উপসংহার
Google Charts একটি শক্তিশালী টুল যা বিভিন্ন ধরনের চার্ট তৈরি করার জন্য ব্যবহৃত হয়। এখানে আমরা তিনটি জনপ্রিয় চার্ট— Bar Chart, Line Chart, এবং Pie Chart এর উদাহরণ দেখেছি। এই চার্টগুলো সহজেই ডেটাকে ভিজ্যুয়ালাইজ করতে সাহায্য করে এবং ব্যবহারকারীর জন্য ডেটা আরও বোধগম্য করে তোলে। Google Charts ব্যবহার করে আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনে অত্যন্ত আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে পারেন।
Read more
