Google Charts ব্যবহারকারীদের জন্য একটি শক্তিশালী ডেটা ভিজ্যুয়ালাইজেশন টুল। এর মাধ্যমে আপনি chart selection এবং data representation techniques ব্যবহার করে চার্টের ওপর আরও ইন্টারঅ্যাকটিভ ফিচার এবং ডেটা বিশ্লেষণ করতে পারেন। এই ফিচারগুলো ব্যবহারকারীদের চার্টে সিলেক্ট করা ডেটার উপর বিভিন্ন প্রক্রিয়া এবং বিশ্লেষণ করতে সাহায্য করে, যেমন ডেটার নির্বাচন, হাইলাইটিং, এবং বিশদ তথ্য প্রদর্শন।
এখানে আমরা Chart Selection এবং Data Representation Techniques নিয়ে আলোচনা করব এবং দেখব কীভাবে এগুলো Google Charts ব্যবহার করে ডেটা ভিজ্যুয়ালাইজেশন আরও কার্যকরী এবং ইন্টারঅ্যাকটিভ করা যেতে পারে।
১. Chart Selection: কীভাবে চার্ট থেকে ডেটা সিলেক্ট করা যায়
Chart selection ফিচার ব্যবহারকারীদের চার্টের কোন নির্দিষ্ট ডেটা পয়েন্ট সিলেক্ট করতে দেয় এবং সেই অনুযায়ী আউটপুট বা বিশদ তথ্য প্রদর্শন করে। Google Charts এ selection ইভেন্ট ব্যবহার করে, আপনি ব্যবহারকারীকে সিলেক্ট করা ডেটার জন্য কাস্টম কার্যক্রম করতে সক্ষম হন।
১.১. Chart Selection Event
আপনি Google Charts এ select ইভেন্ট ব্যবহার করে চার্ট থেকে সিলেক্ট করা ডেটা পয়েন্ট নিয়ে বিভিন্ন কার্যক্রম করতে পারেন। উদাহরণস্বরূপ, ব্যবহারকারী যখন চার্টের কোন বার, স্লাইস, বা পয়েন্ট ক্লিক করবে, তখন সেই ডেটা সম্পর্কে অতিরিক্ত তথ্য দেখানো যাবে।
উদাহরণ: Chart Selection Event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts Selection Event</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
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',
hAxis: {title: 'Population', minValue: 0},
vAxis: {title: 'City'},
legend: { position: 'none' }
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
// Selection event
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
var selectedItem = selection[0];
if (selectedItem) {
var city = data.getValue(selectedItem.row, 0);
var population = data.getValue(selectedItem.row, 1);
alert('You selected: ' + city + '\nPopulation: ' + population);
}
});
}
</script>
</head>
<body>
<h2>Google Chart Selection Example</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- select ইভেন্ট:
google.visualization.events.addListener(chart, 'select', function() {...});কোডের মাধ্যমে আমরা select ইভেন্ট যোগ করেছি। ব্যবহারকারী চার্টে একটি ডেটা পয়েন্ট সিলেক্ট করলে এই ইভেন্ট ট্রিগার হবে। - chart.getSelection(): সিলেক্ট করা ডেটা পয়েন্টের ডেটা পাওয়ার জন্য getSelection() ফাংশন ব্যবহার করা হয়।
- Display Data: সিলেক্ট করা ডেটার সাথে সংশ্লিষ্ট তথ্য ব্যবহারকারীকে দেখানো হয়।
২. Data Representation Techniques
Google Charts এ ডেটার উপস্থাপনা বা Data Representation এর জন্য বিভিন্ন কৌশল এবং চার্ট টাইপ ব্যবহার করা যেতে পারে। বিভিন্ন ধরনের ডেটার জন্য সঠিক চার্ট টাইপ নির্বাচন এবং সঠিক উপস্থাপনা নিশ্চিত করা গুরুত্বপূর্ণ।
২.১. Pie Chart: ক্যাটেগরিক্যাল ডেটা উপস্থাপন
Pie chart হল একটি সাধারণ ডেটা ভিজ্যুয়ালাইজেশন টুল যা শতাংশের ভিত্তিতে ক্যাটেগরিক্যাল ডেটা দেখাতে সহায়ক। এটি সাধারণত তুলনামূলক বিশ্লেষণ করার জন্য ব্যবহৃত হয়।
উদাহরণ: Pie Chart Representation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Pie 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', 'pie']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Value'],
['Food', 40],
['Rent', 25],
['Entertainment', 15],
['Utilities', 10],
['Others', 10]
]);
var options = {
title: 'Monthly Expenses Distribution',
slices: {
0: {offset: 0.1, color: '#e60000'},
1: {offset: 0.1, color: '#33cc33'},
2: {offset: 0.1, color: '#ffcc00'}
}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Pie Chart Example</h2>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- Pie Chart Representation: এখানে আমরা Pie Chart ব্যবহার করে ডেটার ক্যাটেগরি দেখাচ্ছি।
- Custom Slices:
slicesঅপশনে আমরা প্রতিটি স্লাইসের জন্য রঙ এবং অফসেট কাস্টমাইজ করেছি। - 3D Effect: এই চার্টে 3D ইফেক্ট যোগ করা হয়েছে, যা দেখানোর জন্য আরও আকর্ষণীয় হয়ে ওঠে।
২.২. Bar Chart: ক্যাটেগরিক্যাল এবং সাপ্তাহিক ডেটা উপস্থাপন
Bar chart বা Column chart ব্যবহৃত হয়, যেখানে ডেটার মধ্যে তুলনা করা হয়, যেমন সাপ্তাহিক বিক্রয় বা মাসিক ডেটা।
উদাহরণ: Bar Chart Representation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Bar 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', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Product', 'Sales', { role: 'style' }],
['Product A', 1000, 'color: green'],
['Product B', 1170, 'color: orange'],
['Product C', 660, 'color: red'],
['Product D', 1030, 'color: blue']
]);
var options = {
title: 'Product Sales Comparison',
chartArea: {width: '50%'},
hAxis: {
title: 'Total Sales',
minValue: 0
},
vAxis: {
title: 'Product'
}
};
var chart = new google.visualization.BarChart(document.getElementById('barchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Bar Chart Example</h2>
<div id="barchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- Bar Chart Representation: এখানে Bar Chart ব্যবহার করে আমরা বিভিন্ন পণ্য বিক্রয়ের তুলনা করছি।
- Custom Colors:
role: 'style'অপশন ব্যবহার করে প্রতিটি পণ্যের জন্য রঙ কাস্টমাইজ করা হয়েছে। - Horizontal Axis: অনুভূমিক অক্ষের জন্য Sales এর মান প্রদর্শন করা হয়েছে।
উপসংহার
Chart Selection এবং Data Representation Techniques গুগল চার্টে ডেটা ভিজ্যুয়ালাইজেশন আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী করে তোলে। Chart selection ইভেন্টের মাধ্যমে আপনি ব্যবহারকারীদের সিলেক্ট করা ডেটা সম্পর্কে
Read more
