Google Charts এ Smooth Line Chart এবং Stepped Area Chart তৈরি করা খুবই সহজ। এই ধরনের চার্ট ডেটার প্রবণতা এবং পরিবর্তনকে আরও স্পষ্টভাবে উপস্থাপন করতে সাহায্য করে।
এখানে আমরা Smooth Line Chart এবং Stepped Area Chart তৈরির পদ্ধতি দেখবো।
১. Smooth Line Chart তৈরি করা
Smooth Line Chart একটি লাইন চার্ট যা ডেটার পয়েন্টগুলির মধ্যে একটি মসৃণ রেখা প্রদর্শন করে, যাতে ডেটার পরিবর্তন গতি আরও মসৃণভাবে প্রদর্শিত হয়।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smooth 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'],
['2019', 1000],
['2020', 1170],
['2021', 660],
['2022', 1030]
]);
var options = {
title: 'Smooth Line Chart',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales (in USD)'},
curveType: 'function', // Smooth line
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('smooth_line_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Smooth Line Chart Example</h2>
<div id="smooth_line_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
curveType: 'function': এই অপশনটি চার্টের লাইনকে মসৃণ (smooth) করে তোলে। এটি ডেটার পয়েন্টগুলির মধ্যে একটি সাদৃশ্য রেখা আঁকে, যা ডেটার পরিবর্তনকে আরও মসৃণভাবে উপস্থাপন করে।- ডেটা: ২০১৯ থেকে ২০২২ পর্যন্ত Sales ডেটা প্রদান করা হয়েছে।
- Chart Rendering:
google.visualization.LineChartফাংশনটি ডেটা এবং অপশনগুলি নিয়ে চার্টটি তৈরি করে।
২. Stepped Area Chart তৈরি করা
Stepped Area Chart একটি চার্ট যেখানে ডেটার পরিবর্তন সিঁড়ির মতো দেখানো হয়। এটি ব্যবহৃত হয় যখন ডেটার পরিবর্তন স্পষ্টভাবে ধাপে ধাপে দেখানো প্রয়োজন।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stepped Area 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', 'area']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2019', 1000],
['2020', 1170],
['2021', 660],
['2022', 1030]
]);
var options = {
title: 'Stepped Area Chart',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales (in USD)'},
isStacked: true, // Stacked area chart
areaOpacity: 0.4, // Area opacity
lineWidth: 2, // Line width
stepSize: 'infinity', // Stepped lines
legend: { position: 'bottom' }
};
var chart = new google.visualization.AreaChart(document.getElementById('stepped_area_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Stepped Area Chart Example</h2>
<div id="stepped_area_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
stepSize: 'infinity': এই অপশনটি চার্টে ধাপ তৈরি করে। এটি ডেটার পরিবর্তনকে ধাপে ধাপে দেখানোর জন্য ব্যবহৃত হয়।isStacked: true: এটি একটি স্ট্যাকড (stacked) এরিয়া চার্ট তৈরি করবে, যেখানে একাধিক সিরিজ একে অপরের উপরে প্রদর্শিত হবে।areaOpacity: 0.4: এরিয়া চার্টের পারদর্শিতা সেট করতে ব্যবহার করা হয়।lineWidth: 2: লাইনটির প্রস্থ কাস্টমাইজ করতে ব্যবহার করা হয়।
উপসংহার
এটি ছিল Smooth Line Chart এবং Stepped Area Chart তৈরির একটি উদাহরণ। Google Charts এ এই চার্টগুলো ডেটার প্রবণতা এবং পরিবর্তনকে আরও ভালোভাবে উপস্থাপন করতে সাহায্য করে। Smooth Line Chart ডেটার মসৃণ পরিবর্তন প্রদর্শন করে, আর Stepped Area Chart ডেটার ধাপে ধাপে পরিবর্তন প্রদর্শন করতে সহায়তা করে।
Read more
