Stacked Area Chart একটি জনপ্রিয় ভিজ্যুয়ালাইজেশন টুল যা সময়ের সাথে সাথে ডেটার পরিবর্তন এবং বিভিন্ন ভেরিয়েবলের পরিমাণ দেখানোর জন্য ব্যবহৃত হয়। এই চার্টে, একাধিক ডেটা সিরিজের মান একসাথে স্তরের (stacked) আকারে উপস্থাপন করা হয়, যাতে একে অপরের সাথে তুলনা এবং সম্পর্ক বুঝতে সহজ হয়। এটি সময়ের সাথে বিভিন্ন অংশের বৃদ্ধি বা হ্রাস দেখাতে কার্যকরী।
Google Charts-এ Stacked Area Chart তৈরি করা অনেক সহজ, এবং এটি ডেটার বিশ্লেষণ ও ভিজ্যুয়ালাইজেশনের জন্য একটি শক্তিশালী উপায়।
Stacked Area Chart এর প্রয়োগ
ধরা যাক, আপনি একটি কোম্পানির Sales এবং Expenses এর প্রবণতা বিভিন্ন বছরের জন্য উপস্থাপন করতে চান, যেখানে Sales এবং Expenses একে অপরের সাথে স্তরের আকারে প্রদর্শিত হবে।
Stacked Area Chart তৈরি করার উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stacked 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', 'Expenses'],
['2019', 1000, 400],
['2020', 1170, 460],
['2021', 660, 1120],
['2022', 1030, 540]
]);
var options = {
title: 'Company Sales and Expenses Over Time',
isStacked: true, // Stacked Area Chart সেট করা হয়েছে
vAxis: {title: 'Amount (in USD)', format: 'currency'},
hAxis: {title: 'Year'},
colors: ['#1b9e77', '#d95f02'], // Sales এবং Expenses এর জন্য আলাদা রং
legend: { position: 'top' }
};
var chart = new google.visualization.AreaChart(document.getElementById('stacked_area_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Stacked Area Chart Example</h2>
<div id="stacked_area_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোডের ব্যাখ্যা
লাইব্রেরি লোডিং:
google.charts.load('current', {packages: ['corechart', 'area']});এখানে আমরা corechart এবং area প্যাকেজ লোড করেছি, কারণ Area Chart তৈরি করতে এই প্যাকেজগুলো প্রয়োজন।
ডেটা প্রস্তুত করা:
var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2019', 1000, 400], ['2020', 1170, 460], ['2021', 660, 1120], ['2022', 1030, 540] ]);এখানে আমরা সেলস (Sales) এবং খরচ (Expenses) সম্পর্কিত ডেটা তৈরি করেছি, যা সময়ের সাথে পরিবর্তিত হচ্ছে। প্রতিটি বছর অনুযায়ী সেলস এবং খরচের মান সংজ্ঞায়িত করা হয়েছে।
Stacked Area Chart অপশন কাস্টমাইজেশন:
var options = { title: 'Company Sales and Expenses Over Time', isStacked: true, // Stacked Area Chart সেট করা হয়েছে vAxis: {title: 'Amount (in USD)', format: 'currency'}, hAxis: {title: 'Year'}, colors: ['#1b9e77', '#d95f02'], // Sales এবং Expenses এর জন্য আলাদা রং legend: { position: 'top' } };- isStacked: এই অপশনটি
trueসেট করা হয়েছে, যাতে Stacked Area Chart তৈরি হয়, অর্থাৎ Sales এবং Expenses একে অপরের উপর স্তর আকারে প্রদর্শিত হবে। - vAxis এবং hAxis: Y-axis (অর্থাৎ উল্লম্ব অক্ষ) এবং X-axis (অর্থাৎ অনুভূমিক অক্ষ) এর টাইটেল এবং ফরম্যাট সেট করা হয়েছে।
- colors: Sales এবং Expenses এর জন্য ভিন্ন রং নির্ধারণ করা হয়েছে।
- legend: লেজেন্ডের অবস্থান
topরাখা হয়েছে।
- isStacked: এই অপশনটি
Chart Rendering:
var chart = new google.visualization.AreaChart(document.getElementById('stacked_area_chart')); chart.draw(data, options);এখানে AreaChart কনস্ট্রাক্টর ব্যবহার করে চার্টটি তৈরি করা হয়েছে এবং
stacked_area_chartid তে রেন্ডার করা হয়েছে।
Stacked Area Chart এর প্রয়োগে উপকারিতা
- ভিজ্যুয়াল তুলনা: একাধিক ডেটা সিরিজকে একসাথে স্তর আকারে দেখানো হয়, যা বিভিন্ন অংশের মধ্যে তুলনা করতে সাহায্য করে।
- টাইম সিরিজ ডেটা বিশ্লেষণ: সময়ের সাথে সাথে ডেটার পরিবর্তন দেখানোর জন্য এই চার্টটি খুবই কার্যকরী।
- বিভিন্ন ভেরিয়েবলের সম্পর্ক: বিভিন্ন ভেরিয়েবল বা অংশের সম্পর্ক বুঝতে সাহায্য করে, যেমন সেলস এবং খরচের সম্পর্ক।
- প্যাটার্ন সনাক্তকরণ: স্তরের আকারে ডেটা উপস্থাপনার মাধ্যমে প্যাটার্ন সনাক্ত করা সহজ হয়, যেমন কোন বছর সেলস বা খরচ বেড়েছে বা কমেছে।
উপসংহার
Stacked Area Chart গুগল চার্টের একটি শক্তিশালী টুল যা বিভিন্ন ডেটা সিরিজের মধ্যে সম্পর্ক এবং পরিবর্তনকে একসাথে দেখানোর জন্য ব্যবহৃত হয়। এটি বিশেষ করে সময়ের সাথে ডেটার প্রবণতা এবং বিভিন্ন অংশের মধ্যে তুলনা করার জন্য কার্যকরী। Google Charts-এ Stacked Area Chart তৈরি করা সহজ এবং এটি ডেটার বিশ্লেষণকে আরও স্পষ্ট ও কার্যকর করে তোলে।
Read more
