Google Charts এর মাধ্যমে আপনি বিভিন্ন ধরনের চার্ট তৈরি করতে পারেন, যার মধ্যে Area Chart এবং Column Chart অত্যন্ত জনপ্রিয়। এই চার্টগুলো ডেটা ভিজ্যুয়ালাইজেশন এবং বিশ্লেষণের জন্য খুবই কার্যকরী। এখানে, আমরা আপনাকে Area Chart এবং Column Chart তৈরি করার পদ্ধতি দেখাবো।
১. Area Chart তৈরি করা
Area Chart সময়ের সাথে ডেটার পরিবর্তন এবং প্রবণতা দেখানোর জন্য ব্যবহৃত হয়। এটি লাইন চার্টের মতো হলেও, এর নিচে একটি এলাকা পূর্ণ করা থাকে, যা প্রবণতা আরও স্পষ্টভাবে উপস্থাপন করে।
HTML এবং JavaScript কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Area Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Google Charts লোড করা
google.charts.load('current', {packages: ['corechart', 'area']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawChart);
// Area Chart তৈরি করার ফাংশন
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.AreaChart(document.getElementById('area_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Area Chart Example</h2>
<div id="area_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা
- Google Charts লোড করা:
google.charts.load('current', {packages: ['corechart', 'area']});লাইনে আমরাareaপ্যাকেজটি লোড করেছি, যা Area Chart তৈরি করতে সহায়তা করবে। - ডেটা তৈরি:
google.visualization.arrayToDataTable()এর মাধ্যমে আমরা ডেটা প্রস্তুত করেছি। - চার্টের অপশন সেট করা:
optionsঅবজেক্টের মাধ্যমে আমরা চার্টের শিরোনাম, অক্ষের টাইটেল এবং অন্যান্য স্টাইল সেট করেছি। - চার্ট তৈরি করা:
google.visualization.AreaChart()ব্যবহার করে চার্টটি তৈরি এবং প্রদর্শন করা হয়েছে।
২. Column Chart তৈরি করা
Column Chart (বা Bar Chart) প্রধানত তুলনামূলক বিশ্লেষণের জন্য ব্যবহৃত হয়। এটি একাধিক বিভাগ বা শ্রেণির মধ্যে তুলনা করতে সহায়তা করে।
HTML এবং JavaScript কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Column Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Google Charts লোড করা
google.charts.load('current', {packages: ['corechart', 'bar']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawChart);
// Column Chart তৈরি করার ফাংশন
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.ColumnChart(document.getElementById('column_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Column Chart Example</h2>
<div id="column_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা
- Google Charts লোড করা:
google.charts.load('current', {packages: ['corechart', 'bar']});লাইনে আমরাbarপ্যাকেজটি লোড করেছি, যা Column Chart তৈরি করতে সহায়তা করবে। - ডেটা তৈরি:
google.visualization.arrayToDataTable()এর মাধ্যমে আমরা জনসংখ্যার ডেটা প্রস্তুত করেছি। - চার্টের অপশন সেট করা:
optionsঅবজেক্টের মাধ্যমে আমরা চার্টের শিরোনাম, অক্ষের টাইটেল এবং অন্যান্য কাস্টমাইজেশন সেট করেছি। - চার্ট তৈরি করা:
google.visualization.ColumnChart()ব্যবহার করে চার্টটি তৈরি এবং প্রদর্শন করা হয়েছে।
উপসংহার
এটি ছিল Area Chart এবং Column Chart তৈরি করার একটি সহজ গাইড। Google Charts দিয়ে আপনি সহজেই আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনে ডেটা ভিজ্যুয়ালাইজ করতে পারবেন। এটি ডেটা বিশ্লেষণ এবং প্রদর্শনকে আরও আকর্ষণীয় এবং বোধগম্য করে তোলে।
Content added By
Read more
