গুগল চার্ট একটি অত্যন্ত শক্তিশালী এবং বহুল ব্যবহৃত JavaScript লাইব্রেরি, যা ব্যবহার করে আপনি HTML এবং Web-এর জন্য ইন্টারঅ্যাকটিভ প্লট এবং ডেটা ভিজুয়ালাইজেশন তৈরি করতে পারেন। গুগল চার্টে বিভিন্ন ধরনের প্লট তৈরি করা সম্ভব, যেমন bar chart, line chart, pie chart, scatter chart ইত্যাদি, যা ইন্টারঅ্যাকটিভ এবং কাস্টমাইজেবল হতে পারে।
এখানে, আমরা গুগল চার্ট ব্যবহার করে HTML এবং Web এর জন্য ইন্টারঅ্যাকটিভ প্লট তৈরি করার জন্য বিভিন্ন টুল এবং কাস্টমাইজেশন নিয়ে আলোচনা করব।
১. গুগল চার্ট ইনস্টল এবং লোড করা
গুগল চার্ট ব্যবহার করতে হলে প্রথমে আপনাকে এটি লোড করতে হবে। এটি সরাসরি Google Charts Loader দিয়ে করা যায়, যা গ্রাফ বা প্লট তৈরি করার জন্য প্রয়োজনীয় স্ক্রিপ্ট সরবরাহ করে।
গুগল চার্ট লোড করার উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="chart_div"></div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2016', 1000, 400],
['2017', 1170, 460],
['2018', 660, 1120],
['2019', 1030, 540]
]);
var options = {
title: 'Company Performance',
chartArea: {width: '50%'},
hAxis: {title: 'Total Sales', minValue: 0},
vAxis: {title: 'Year'}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</body>
</html>
এখানে:
google.charts.load(): গুগল চার্টের প্যাকেজ লোড করা হচ্ছে।google.visualization.arrayToDataTable(): ডেটা টেবিল তৈরি করা হচ্ছে।google.visualization.BarChart(): বার চার্ট তৈরি হচ্ছে এবংchart_divID-তে প্রদর্শিত হচ্ছে।
২. ইন্টারঅ্যাকটিভ বার চার্ট তৈরি করা
গুগল চার্টে Interactive Bar Chart তৈরি করার জন্য BarChart ফাংশন ব্যবহার করা হয়, যা সহজেই ইন্টারঅ্যাকশন এবং কাস্টমাইজেশন সাপোর্ট করে।
উদাহরণ: ইন্টারঅ্যাকটিভ বার চার্ট
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="bar_chart" style="width: 900px; height: 500px;"></div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Category', '2019', '2020', '2021'],
['A', 1000, 1170, 660],
['B', 1170, 660, 1120],
['C', 660, 1120, 1200],
['D', 1030, 540, 800]
]);
var options = {
title: 'Sales Data over Years',
chartArea: {width: '60%'},
hAxis: {
title: 'Sales',
minValue: 0
},
vAxis: {
title: 'Category'
},
isStacked: true
};
var chart = new google.visualization.BarChart(document.getElementById('bar_chart'));
chart.draw(data, options);
}
</script>
</body>
</html>
এখানে:
isStacked: true: বার চার্টটি স্ট্যাকড অবস্থায় প্রদর্শন করবে।hAxisএবংvAxis: x-axis এবং y-axis এর শিরোনাম কাস্টমাইজ করা হয়েছে।
৩. পি চার্ট (Pie Chart) তৈরি করা
গুগল চার্টে Pie Chart তৈরি করা খুবই সহজ। আপনি PieChart ফাংশন ব্যবহার করে খুব দ্রুত ইন্টারঅ্যাকটিভ পাই চার্ট তৈরি করতে পারবেন।
উদাহরণ: ইন্টারঅ্যাকটিভ পাই চার্ট
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="pie_chart" style="width: 900px; height: 500px;"></div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'pie']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Value'],
['Category A', 45],
['Category B', 26],
['Category C', 19],
['Category D', 10]
]);
var options = {
title: 'Category Distribution',
slices: {
0: {offset: 0.1},
1: {offset: 0.1},
2: {offset: 0.1},
3: {offset: 0.1}
}
};
var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
chart.draw(data, options);
}
</script>
</body>
</html>
এখানে:
slicesঅপশনটি ব্যবহার করে প্রতিটি স্লাইসের জন্য কাস্টমাইজেশন করা হয়েছে (যেমন স্লাইসের পজিশন সামান্য পরিবর্তন করা)।
৪. লাইনে গ্রাফ (Line Chart) তৈরি করা
গুগল চার্টে Line Chart খুবই ইন্টারঅ্যাকটিভ এবং এটি ডেটার ট্রেন্ড এবং প্যাটার্ন দেখানোর জন্য উপকারী।
উদাহরণ: ইন্টারঅ্যাকটিভ লাইনে গ্রাফ
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="line_chart" style="width: 900px; height: 500px;"></div>
<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', '2019');
data.addColumn('number', '2020');
data.addColumn('number', '2021');
data.addRows([
[1, 1000, 400, 200],
[2, 1170, 460, 250],
[3, 660, 1120, 300],
[4, 1030, 540, 350]
]);
var options = {
title: 'Yearly Sales Over Time',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
</script>
</body>
</html>
এখানে:
curveType: 'function'এর মাধ্যমে লাইন গ্রাফটি মসৃণ (smooth) করা হয়েছে।
৫. Scatter Plot তৈরি করা
গুগল চার্টে scatter plot ব্যবহার করা অত্যন্ত সহজ। এটি ডেটার মধ্যে সম্পর্ক এবং প্যাটার্ন দেখতে সাহায্য করে।
উদাহরণ: Scatter Plot তৈরি করা
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="scatter_chart" style="width: 900px; height: 500px;"></div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'scatter']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.addRows([
[1, 1000],
[2, 1170],
[3, 660],
[4, 1030]
]);
var options = {
title: 'Scatter Plot Example',
hAxis: {title: 'X Value'},
vAxis: {title: 'Y Value'},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('scatter_chart'));
chart.draw(data, options);
}
</script>
</body>
</html>
এখানে:
- Scatter Plot এর মাধ্যমে ডেটার মধ্যে সম্পর্ক প্রদর্শিত হচ্ছে।
সারমর্ম
গুগল চার্টের মাধ্যমে আপনি HTML এবং Web এর জন্য ইন্টারঅ্যাকটিভ প্লট তৈরি করতে পারেন। বিভিন্ন ধরনের চার্ট যেমন Bar Chart, Line Chart, Pie Chart, Scatter Plot ইত্যাদি সহজেই তৈরি করা যায়। গুগল চার্টে ইন্টারঅ্যাকটিভ ফিচার যেমন zoom, hover effect, tooltips ইত্যাদি ব্যবহার করা যায়, যা ডেটাকে আরও বিশ্লেষণযোগ্য এবং দর্শকদের জন্য আকর্ষণীয় করে তোলে।
Read more
