Line Chart এবং Area Chart হল দুটি গুরুত্বপূর্ণ ডেটা ভিজ্যুয়ালাইজেশন টুল যা ডেটার ট্রেন্ড এবং সময়ের সাথে পরিবর্তন দেখাতে ব্যবহৃত হয়। Google Charts ব্যবহার করে আপনি এই চার্টগুলোকে উন্নত কাস্টমাইজেশন দিয়ে আরো কার্যকরী এবং আকর্ষণীয় করতে পারেন। এখানে, আমরা Advanced Line Chart এবং Advanced Area Chart তৈরির পদ্ধতি দেখবো।
১. Advanced Line Chart
Line Chart সাধারণত সময়ের সাথে পরিবর্তন বা প্রবণতা দেখানোর জন্য ব্যবহৃত হয়। এটি দুটি ডেটা সিরিজের মধ্যে সম্পর্ক বা প্যাটার্ন দেখাতে খুবই কার্যকরী। Advanced Line Chart তৈরি করার জন্য আমরা বিভিন্ন ধরনের কাস্টমাইজেশন করতে পারি, যেমন অ্যানিমেশন, অপশনাল পয়েন্ট এবং টুলটিপ কাস্টমাইজেশন।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Line Chart</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 = new google.visualization.DataTable();
data.addColumn('number', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Profit');
data.addRows([
[2019, 1000, 400],
[2020, 1170, 460],
[2021, 660, 1120],
[2022, 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function', // লাইনকে কার্ভে পরিণত করা
legend: { position: 'bottom' },
tooltip: { isHtml: true }, // টুলটিপে HTML ব্যবহার
animation: {
duration: 1000, // অ্যানিমেশনের সময়কাল
easing: 'out', // অ্যানিমেশনের ইফেক্ট
},
vAxis: {
title: 'Amount',
format: 'currency'
},
hAxis: { title: 'Year' }
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Advanced Line Chart Example</h2>
<div id="line_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- curveType:
curveType: 'function'অপশনটি লাইনকে কার্ভে পরিণত করতে ব্যবহৃত হয়, যাতে ডেটা পয়েন্টের মধ্যে মসৃণ লাইন তৈরি হয়। - tooltip:
tooltip: { isHtml: true }দ্বারা আপনি টুলটিপে HTML কনটেন্ট ব্যবহার করতে পারবেন, যা আপনার ডেটার সম্পর্কে আরও বিস্তারিত তথ্য প্রদান করে। - animation: অ্যানিমেশনের মাধ্যমে চার্টের উপস্থাপনাকে আরও আকর্ষণীয় করা যায়। এখানে
duration: 1000দ্বারা অ্যানিমেশনের সময়কাল ১ সেকেন্ড নির্ধারণ করা হয়েছে।
২. Advanced Area Chart
Area Chart সাধারণত লাইন চার্টের মতো, কিন্তু এতে নিচের অংশটি পূর্ণ থাকে, যা ট্রেন্ড এবং পার্থক্য আরও স্পষ্ট করে তোলে। Advanced Area Chart তৈরি করার জন্য আমরা বিভিন্ন ধরনের কাস্টমাইজেশন করতে পারি, যেমন কাস্টম প্যালেট এবং স্ট্যাকড এফেক্ট।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Area Chart</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', 'Profit'],
['2019', 1000, 400],
['2020', 1170, 460],
['2021', 660, 1120],
['2022', 1030, 540]
]);
var options = {
title: 'Company Performance',
isStacked: true, // স্ট্যাকড অ্যারে চার্ট
hAxis: { title: 'Year' },
vAxis: {
title: 'Amount',
format: 'currency'
},
areaOpacity: 0.4, // অ্যারার অপাসিটি (স্বচ্ছতা)
animation: {
duration: 1000,
easing: 'out'
},
colors: ['#1b9e77', '#d95f02'], // কাস্টম রঙ প্যালেট
};
var chart = new google.visualization.AreaChart(document.getElementById('area_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Advanced Area Chart Example</h2>
<div id="area_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- isStacked:
isStacked: trueদ্বারা চার্টের সেগমেন্টগুলো একে অপরের উপর স্তূপিত হয়। এটি একাধিক সিরিজের মধ্যে সম্পর্ক এবং তুলনা দেখানোর জন্য উপকারী। - areaOpacity:
areaOpacity: 0.4দ্বারা অ্যারার অংশের স্বচ্ছতা কন্ট্রোল করা হয়েছে, যাতে ডেটা পয়েন্টগুলো আরও স্পষ্টভাবে দৃশ্যমান হয়। - colors:
colorsএর মাধ্যমে আমরা কাস্টম রঙ প্যালেট সেট করেছি, যা সিরিজগুলির জন্য আলাদা রঙ প্রদান করে।
উপসংহার
Google Charts এর Advanced Line Chart এবং Advanced Area Chart তৈরি করার মাধ্যমে আপনি ডেটার পরিবর্তন এবং ট্রেন্ডগুলোকে আরও স্পষ্ট এবং আকর্ষণীয়ভাবে উপস্থাপন করতে পারবেন। কাস্টমাইজেশন, অ্যানিমেশন এবং টুলটিপের মাধ্যমে এই চার্টগুলোকে আরও কার্যকরী করা সম্ভব। আপনি বিভিন্ন ধরণের স্টাইল এবং অপশন ব্যবহার করে এই চার্টগুলিকে আপনার প্রয়োজন অনুযায়ী কাস্টমাইজ করতে পারবেন।
Google Charts এর Multiple Line Series Chart ডেটার মধ্যে বিভিন্ন সিরিজের প্রবণতা বা সম্পর্ক দেখানোর জন্য একটি শক্তিশালী উপায়। এটি সাধারণত ব্যবহৃত হয় যখন একাধিক ভেরিয়েবল বা ডেটা সেটের তুলনা করতে হয়। আপনি একাধিক লাইন চার্ট ব্যবহার করে বিভিন্ন সিরিজের মধ্যে তুলনা এবং বিশ্লেষণ করতে পারেন।
নিচে Multiple Line Series Chart তৈরির উদাহরণ দেওয়া হলো:
Multiple Line Series Chart তৈরি করার উদাহরণ
ধরা যাক, আমরা একটি কোম্পানির Sales, Profit, এবং Expenses ডেটা দেখাতে চাই এবং তাদের বিভিন্ন বছরের মধ্যে প্রবণতা তুলনা করতে চাই। এখানে আমরা তিনটি লাইন সিরিজ ব্যবহার করবো: Sales, Profit, এবং Expenses।
উদাহরণ কোড:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Line Series 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 = new google.visualization.DataTable();
data.addColumn('number', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Profit');
data.addColumn('number', 'Expenses');
// ডেটা যোগ করা
data.addRows([
[2019, 1000, 400, 200],
[2020, 1170, 460, 250],
[2021, 660, 1120, 300],
[2022, 1030, 540, 350]
]);
var options = {
title: 'Company Performance',
hAxis: {
title: 'Year'
},
vAxis: {
title: 'Amount (in USD)'
},
series: {
0: { color: 'blue' }, // Sales সিরিজের জন্য রঙ
1: { color: 'green' }, // Profit সিরিজের জন্য রঙ
2: { color: 'red' } // Expenses সিরিজের জন্য রঙ
},
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Multiple Line Series Chart Example</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা
ডেটা প্রস্তুত করা:
var data = new google.visualization.DataTable(); data.addColumn('number', 'Year'); data.addColumn('number', 'Sales'); data.addColumn('number', 'Profit'); data.addColumn('number', 'Expenses');এখানে আমরা একটি DataTable তৈরি করছি, যেখানে তিনটি ডেটা সিরিজের জন্য কলাম তৈরি করেছি: Sales, Profit, এবং Expenses। প্রথম কলামটি হলো Year, যা X-অ্যাক্সিস হিসেবে কাজ করবে।
ডেটা যোগ করা:
data.addRows([ [2019, 1000, 400, 200], [2020, 1170, 460, 250], [2021, 660, 1120, 300], [2022, 1030, 540, 350] ]);এখানে আমরা ডেটা অ্যারে হিসেবে তিনটি সিরিজের (Sales, Profit, Expenses) মান যোগ করেছি, যেখানে প্রতিটি সিরিজের জন্য যথাযথ মান ২০১৯ থেকে ২০২২ সাল পর্যন্ত দেওয়া হয়েছে।
কাস্টমাইজেশন অপশন:
var options = { title: 'Company Performance', hAxis: { title: 'Year' }, vAxis: { title: 'Amount (in USD)' }, series: { 0: { color: 'blue' }, // Sales সিরিজের জন্য রঙ 1: { color: 'green' }, // Profit সিরিজের জন্য রঙ 2: { color: 'red' } // Expenses সিরিজের জন্য রঙ }, legend: { position: 'bottom' } };- title: চার্টের শিরোনাম দেওয়া হয়েছে Company Performance।
- hAxis: X-অ্যাক্সিসের শিরোনাম Year।
- vAxis: Y-অ্যাক্সিসের শিরোনাম Amount (in USD)।
- series: প্রতিটি সিরিজের জন্য আলাদা রঙ নির্ধারণ করা হয়েছে, যেমন Sales সিরিজের জন্য blue, Profit সিরিজের জন্য green, এবং Expenses সিরিজের জন্য red।
চার্ট ড্র করা:
var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options);এখানে, LineChart কনস্ট্রাক্টর ব্যবহার করে চার্ট তৈরি করা হচ্ছে এবং তা chart_div id তে রেন্ডার করা হচ্ছে।
Multiple Line Series Chart এর কাস্টমাইজেশন
- রঙ পরিবর্তন: আপনি প্রতিটি সিরিজের জন্য আলাদা রঙ নির্ধারণ করতে পারেন, যেমন
color: 'blue',color: 'green'ইত্যাদি। লাইনের স্টাইল: লাইনের প্রস্থ (
lineWidth), স্টাইল এবং পয়েন্টের আকারও কাস্টমাইজ করা যেতে পারে।series: { 0: { lineWidth: 3, pointSize: 5 } }- লেজেন্ড কাস্টমাইজেশন:
legendঅপশন দিয়ে লেজেন্ডের অবস্থান, টেক্সট স্টাইল ইত্যাদি কাস্টমাইজ করা যেতে পারে। - একাধিক অক্ষ: আপনি যদি দুটি ভিন্ন স্কেল ব্যবহার করতে চান, তবে ডুয়াল-অ্যাক্সিস চার্ট ব্যবহার করতে পারেন।
উপসংহার
Google Charts এর Multiple Line Series Chart খুবই কার্যকরী একটি টুল যা একাধিক ডেটা সিরিজের প্রবণতা তুলনা এবং বিশ্লেষণ করার জন্য ব্যবহৃত হয়। এটি ডেটার মধ্যে সম্পর্ক এবং পরিবর্তন দেখানোর একটি সহজ এবং আকর্ষণীয় উপায়। Sales, Profit, এবং Expenses এর মতো একাধিক ভেরিয়েবলের মধ্যে পার্থক্য দেখাতে এটি খুবই উপকারী।
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 ডেটার ধাপে ধাপে পরিবর্তন প্রদর্শন করতে সহায়তা করে।
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 তৈরি করা সহজ এবং এটি ডেটার বিশ্লেষণকে আরও স্পষ্ট ও কার্যকর করে তোলে।
Line Chart এবং Area Chart গুগল চার্টের জনপ্রিয় গ্রাফগুলি যা ডেটার প্রবণতা এবং পরিবর্তন দেখানোর জন্য ব্যবহার করা হয়। এই চার্টগুলির মাধ্যমে আপনি সময়ের সাথে ডেটার গতি বা প্যাটার্ন পর্যবেক্ষণ করতে পারেন। আপনি যদি চাইলে এগুলিকে Advanced Customization করতে পারেন যাতে আপনার চার্টগুলি আরও তথ্যপূর্ণ এবং কাস্টমাইজড হয়।
এই টিউটোরিয়ালে, আমরা Line Chart এবং Area Chart এর উন্নত কাস্টমাইজেশন ফিচারগুলি কভার করবো।
১. Line Chart Advanced Customization
Line Chart ব্যবহার করে আপনি ডেটার লাইন প্রবণতা দেখাতে পারেন। এটি সময়ের সাথে বা বিভিন্ন মানের মধ্যে পরিবর্তন সহজেই প্রদর্শন করে।
Line Chart Customization Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Line Chart</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 = new google.visualization.DataTable();
data.addColumn('number', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Profit');
data.addRows([
[2020, 1000, 400],
[2021, 1170, 460],
[2022, 660, 1120],
[2023, 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function', // Line smoothness
legend: { position: 'bottom' },
vAxis: {
title: 'Amount (in USD)',
gridlines: { count: 5 }, // Customizing gridlines
format: 'currency' // Formatting axis labels as currency
},
hAxis: {
title: 'Year',
format: '####', // Formatting the year as integer
gridlines: { count: 4 } // Customizing gridline count
},
series: {
0: { color: '#FF5733', lineWidth: 3 }, // Sales line customization
1: { color: '#33FF57', lineWidth: 3, pointSize: 6 } // Profit line customization
},
tooltip: { isHtml: true } // Enabling HTML tooltips for better interactivity
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Advanced Line Chart Example</h2>
<div id="line_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
ব্যাখ্যা:
- curveType:
curveType: 'function'ব্যবহার করে লাইনটি স্মুথ বা গতি সঞ্চারী করা হয়েছে। এর ফলে লাইনটি ধারাবাহিকভাবে মসৃণ দেখাবে। - Gridlines:
gridlines: { count: 5 }ব্যবহার করে গ্রিডলাইনের সংখ্যা কাস্টমাইজ করা হয়েছে। - Axis Formatting:
format: 'currency'দ্বারা অক্ষের মানগুলি মুদ্রা হিসাবে প্রদর্শিত হচ্ছে। - Series Customization:
series: {}ব্যবহার করে প্রতিটি লাইনটির রং, লাইন ওয়িডথ এবং পয়েন্ট সাইজ কাস্টমাইজ করা হয়েছে।
২. Area Chart Advanced Customization
Area Chart লাইন চার্টের মতোই কাজ করে, তবে এর নিচে একটি পূর্ণাকার এলাকা থাকে যা তথ্যের প্রবণতাকে আরও স্পষ্টভাবে উপস্থাপন করে। এই চার্টের মাধ্যমে আপনি ডেটার পরিবর্তন এবং মিল বা পার্থক্য দেখতে পারেন।
Area Chart Customization Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Area Chart</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', 'Profit'],
['2020', 1000, 400],
['2021', 1170, 460],
['2022', 660, 1120],
['2023', 1030, 540]
]);
var options = {
title: 'Company Sales & Profit Analysis',
hAxis: {title: 'Year', format: '####'},
vAxis: {
title: 'Amount (in USD)',
gridlines: { count: 5 },
format: 'currency'
},
isStacked: true, // Makes the chart area stacked
series: {
0: { color: '#FF5733' }, // Sales area color
1: { color: '#33FF57' } // Profit area color
},
tooltip: { trigger: 'selection' }, // Tooltip on selection
legend: { position: 'top' }
};
var chart = new google.visualization.AreaChart(document.getElementById('area_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Advanced Area Chart Example</h2>
<div id="area_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
ব্যাখ্যা:
- Stacked Areas:
isStacked: trueব্যবহার করে চার্টের ক্ষেত্রগুলো একে অপরের উপর স্ট্যাক করা হয়েছে, যা Sales এবং Profit এর মধ্যে পার্থক্য বা সম্পর্ক আরও স্পষ্ট করে তোলে। - Tooltip Customization:
tooltip: { trigger: 'selection' }দ্বারা ব্যবহারকারী চার্টে ক্লিক করলে একটি টুলটিপ দেখা যাবে। - Series Customization:
series: {}দিয়ে প্রতি সিরিজের রং কাস্টমাইজ করা হয়েছে। - Gridlines & Formatting: একইভাবে, অক্ষের গ্রিডলাইন এবং ফরম্যাটিং কাস্টমাইজ করা হয়েছে, যেমন currency ফরম্যাটে ডেটা দেখানো হয়েছে।
৩. Line এবং Area Chart এর মধ্যে পার্থক্য
- Line Chart: এটি সময়ের সাথে পরিবর্তনের জন্য সবচেয়ে উপযুক্ত। এটি ডেটার প্রবণতা বা গতি দেখাতে ভালো, তবে এলাকাটি পূর্ণ হয় না।
- Area Chart: এটি Line Chart এর মতো, তবে এর নিচের অংশটি পূর্ণ করা থাকে। এটি সময়ের সাথে পরিবর্তনের পাশাপাশি ডেটার পরিমাণ বা আকার প্রদর্শন করতে সহায়ক।
উপসংহার
Google Charts এ Line Chart এবং Area Chart এর Advanced Customization করার মাধ্যমে আপনি ডেটাকে আরও আকর্ষণীয় এবং কাস্টমাইজড উপস্থাপন করতে পারেন। এই চার্টগুলি ব্যবহার করে আপনি সহজে আপনার ডেটার প্রবণতা, পরিমাণ এবং সম্পর্ক বুঝতে পারবেন এবং এগুলিকে বিভিন্ন কাস্টম স্টাইল, ফরম্যাটিং এবং ইন্টারঅ্যাকশন এর মাধ্যমে আরও কার্যকরী করে তুলতে পারবেন।
Read more
