Google Charts ব্যবহার করে আপনি সহজে Custom Statistics (কাস্টম পরিসংখ্যান) যোগ করতে পারেন, যেমন মধ্যম, গড়, স্ট্যান্ডার্ড ডেভিয়েশন, মিনিমাম, ম্যাক্সিমাম ইত্যাদি। এই পরিসংখ্যানগুলো আপনার ডেটাকে বিশ্লেষণ করতে এবং গ্রাফের মাধ্যমে আরও বিস্তারিত তথ্য উপস্থাপন করতে সাহায্য করে।
গুগল চার্টে কাস্টম পরিসংখ্যান যোগ করতে annotations, lines, labels, এবং tooltips ব্যবহার করা হয়। এখানে, আমরা কিভাবে কাস্টম পরিসংখ্যান যোগ করা যায় তা উদাহরণসহ দেখাবো।
কাস্টম পরিসংখ্যান যোগ করার পদ্ধতি
১. Mean (গড়) এবং Median (মধ্যম) যোগ করা
গুগল চার্টে গড় (Mean) এবং মধ্যম (Median) যেমন কাস্টম পরিসংখ্যান যোগ করা যায়, তেমনি এগুলোকে line charts বা bar charts এ উপস্থাপন করা সম্ভব।
উদাহরণ: গড় এবং মধ্যম যোগ করা
ধরা যাক, আমাদের কাছে একটি ডেটাসেট রয়েছে এবং আমরা গড় এবং মধ্যম যোগ করতে চাই।
<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', 'X');
data.addColumn('number', 'Y');
// Sample Data
data.addRows([
[1, 10],
[2, 15],
[3, 30],
[4, 35],
[5, 40]
]);
// Calculate mean and median
var total = 0;
var values = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
total += data.getValue(i, 1);
values.push(data.getValue(i, 1));
}
var mean = total / data.getNumberOfRows();
values.sort(function(a, b) { return a - b; });
var median = (values[Math.floor(values.length / 2)] + values[Math.ceil(values.length / 2)]) / 2;
var options = {
title: 'Data with Mean and Median',
hAxis: {title: 'X'},
vAxis: {title: 'Y'},
series: {
0: { color: '#1b9e77' }
},
annotations: {
alwaysOutside: true,
textStyle: {fontSize: 12, bold: true}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
// Draw the chart
chart.draw(data, options);
// Add Mean and Median as annotations
var annotations = [
{column: 0, row: 0, text: 'Mean: ' + mean.toFixed(2)},
{column: 0, row: 4, text: 'Median: ' + median.toFixed(2)}
];
chart.setOption('annotations', annotations);
chart.draw(data, options);
}
</script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
এখানে:
- গড় (Mean) এবং মধ্যম (Median) এর মান গণনা করা হয়েছে।
- এরপর এই কাস্টম পরিসংখ্যানগুলোকে গ্রাফে annotations হিসেবে যোগ করা হয়েছে।
২. Standard Deviation (স্ট্যান্ডার্ড ডেভিয়েশন) যোগ করা
গুগল চার্টে Standard Deviation যোগ করতে, আপনি ডেটার ছড়ানো (dispersion) পরিসংখ্যান দেখাতে পারবেন, যা ডেটার বৈচিত্র্য বুঝতে সাহায্য করে।
উদাহরণ: স্ট্যান্ডার্ড ডেভিয়েশন যোগ করা
<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', 'X');
data.addColumn('number', 'Y');
// Sample Data
data.addRows([
[1, 10],
[2, 15],
[3, 30],
[4, 35],
[5, 40]
]);
// Calculate standard deviation
var values = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
values.push(data.getValue(i, 1));
}
var mean = values.reduce(function(a, b) { return a + b; }) / values.length;
var variance = values.reduce(function(a, b) { return a + Math.pow(b - mean, 2); }, 0) / values.length;
var stdDev = Math.sqrt(variance);
var options = {
title: 'Data with Standard Deviation',
hAxis: {title: 'X'},
vAxis: {title: 'Y'},
series: {
0: { color: '#1b9e77' }
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
// Draw the chart
chart.draw(data, options);
// Add Standard Deviation line
var annotations = [
{column: 0, row: 0, text: 'StdDev: ' + stdDev.toFixed(2)}
];
chart.setOption('annotations', annotations);
chart.draw(data, options);
}
</script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
এখানে:
- Standard Deviation গণনা করা হয়েছে এবং এটি গ্রাফে annotations হিসেবে প্রদর্শিত হয়েছে।
৩. Min, Max Values (মিনিমাম এবং ম্যাক্সিমাম মান) যোগ করা
গুগল চার্টে Min এবং Max মানগুলি গ্রাফে যোগ করতে, আপনি annotations এবং lines ব্যবহার করতে পারেন। এটি ডেটার পরিসীমা দেখাতে সহায়ক।
উদাহরণ: Min এবং Max মান যোগ করা
<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', 'X');
data.addColumn('number', 'Y');
// Sample Data
data.addRows([
[1, 10],
[2, 15],
[3, 30],
[4, 35],
[5, 40]
]);
// Calculate min and max values
var minValue = Math.min(...data.getColumn(1));
var maxValue = Math.max(...data.getColumn(1));
var options = {
title: 'Data with Min and Max Values',
hAxis: {title: 'X'},
vAxis: {title: 'Y'},
series: {
0: { color: '#1b9e77' }
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
// Draw the chart
chart.draw(data, options);
// Add Min and Max Value lines
var annotations = [
{column: 0, row: 0, text: 'Min: ' + minValue},
{column: 0, row: 4, text: 'Max: ' + maxValue}
];
chart.setOption('annotations', annotations);
chart.draw(data, options);
}
</script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
এখানে:
- Min এবং Max মানগুলো
annotationsহিসেবে গ্রাফে যোগ করা হয়েছে।
সারমর্ম
গুগল চার্টে কাস্টম পরিসংখ্যান (যেমন গড়, মধ্যম, স্ট্যান্ডার্ড ডেভিয়েশন, মিনিমাম, ম্যাক্সিমাম) যোগ করতে আপনি annotations, lines, tooltips ইত্যাদি ব্যবহার করতে পারেন। এতে ডেটার আরও বিস্তারিত বিশ্লেষণ করা যায় এবং ভিজুয়ালাইজেশনটি আরও সমৃদ্ধ হয়। কাস্টম পরিসংখ্যান যোগ করার মাধ্যমে ডেটাকে আরও কার্যকরভাবে উপস্থাপন করা সম্ভব।
Read more
