Google Charts এ আপনি Line Chart এবং Bar Chart এর কম্বিনেশনও তৈরি করতে পারেন, যা ডেটার বিভিন্ন দৃষ্টিকোণ একসাথে উপস্থাপন করতে সাহায্য করে। এই কম্বিনেশন চার্টে কিছু সিরিজ লাইন আকারে এবং কিছু সিরিজ বার আকারে প্রদর্শিত হয়। এটি বিভিন্ন ডেটার মধ্যে তুলনা করার জন্য খুবই কার্যকর।
এখানে আমরা Line and Bar Combo Chart তৈরি করার প্রক্রিয়া দেখবো।
Line এবং Bar Combo Chart তৈরি করার উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line and Bar Combo 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);
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 Performance',
chartArea: {width: '50%'}, // চার্টের আঞ্চলিক আকার নির্ধারণ
hAxis: {
title: 'Year',
minValue: 0
},
vAxis: {
title: 'Amount (in USD)'
},
seriesType: 'bars', // বারের জন্য সিরিজ টাইপ নির্ধারণ
series: {
0: {type: 'line'}, // প্রথম সিরিজের জন্য লাইন
1: {type: 'bars'} // দ্বিতীয় সিরিজের জন্য বার
}
};
// কম্বিনেশন চার্ট ড্র করা
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Line and Bar Combo Chart</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
লাইব্রেরি লোডিং:
google.charts.load('current', {'packages':['corechart', 'bar']});এখানে আমরা corechart এবং bar প্যাকেজ লোড করছি।
corechartপ্যাকেজ লাইন এবং বার চার্ট তৈরি করার জন্য প্রয়োজনীয় ফাংশনality প্রদান করে।ডেটা তৈরি:
var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2019', 1000, 400], ['2020', 1170, 460], ['2021', 660, 1120], ['2022', 1030, 540] ]);এখানে আমরা একটি 2D Array ব্যবহার করে ডেটা তৈরি করেছি, যেখানে প্রথম কলামটি
Yearএবং পরবর্তী কলামগুলো হলোSalesএবংExpenses।চার্টের অপশন কাস্টমাইজেশন:
var options = { title: 'Company Performance', chartArea: {width: '50%'}, hAxis: { title: 'Year', minValue: 0 }, vAxis: { title: 'Amount (in USD)' }, seriesType: 'bars', // Default to bar chart series: { 0: {type: 'line'}, // First series as line 1: {type: 'bars'} // Second series as bar } };এখানে, seriesType নির্ধারণ করা হয়েছে
bars, যা ডিফল্টভাবে বার চার্ট তৈরি করবে। তবে, আমরাseriesঅপশনে 0 সিরিজকে লাইন এবং 1 সিরিজকে বার চার্ট হিসেবে নির্ধারণ করেছি।চার্ট রেন্ডারিং:
var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); chart.draw(data, options);এখানে, আমরা ComboChart কনস্ট্রাক্টর ব্যবহার করছি এবং সেটি
chart_divid তে রেন্ডার করা হচ্ছে।
উপসংহার
এই উদাহরণে, আমরা Line and Bar Combo Chart তৈরি করেছি যেখানে Sales ডেটা লাইন চার্ট হিসেবে এবং Expenses ডেটা বার চার্ট হিসেবে প্রদর্শিত হচ্ছে। Google Charts এর ComboChart ব্যবহার করে আপনি একাধিক চার্ট টাইপ একত্রে ব্যবহার করতে পারেন এবং ডেটা ভিজ্যুয়ালাইজেশনের বিভিন্ন দৃষ্টিকোণ প্রদর্শন করতে পারবেন।
Read more
