Google Charts ব্যবহার করে আপনি JSON এবং CSV ফরম্যাটে ডেটা ফেচ করে চার্টে প্রদর্শন করতে পারেন। JSON এবং CSV দুটি সাধারণ ডেটা ফরম্যাট যা বিভিন্ন অ্যাপ্লিকেশন এবং সিস্টেমে ডেটা আদান-প্রদান করতে ব্যবহৃত হয়। এই টিউটোরিয়ালে আমরা দেখব কিভাবে JSON এবং CSV ডেটা ফেচ করে Google Charts এ প্রদর্শন করা যায়।
১. JSON Data Fetching and Display in Google Charts
JSON (JavaScript Object Notation) ডেটা ফরম্যাট একটি লাইটওয়েট এবং পাঠযোগ্য ডেটা ফরম্যাট যা সহজেই ডেটা শেয়ার এবং প্রসেস করতে ব্যবহার করা যায়। Google Charts JSON ডেটা থেকে চার্ট তৈরি করতে সহায়ক।
উদাহরণ: JSON ডেটা ফেচ করে Google Charts এ প্রদর্শন করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts with JSON Data</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() {
// JSON ডেটা ফেচ করা
var jsonData = {
"cols": [
{"id": "year", "label": "Year", "type": "string"},
{"id": "sales", "label": "Sales", "type": "number"}
],
"rows": [
{"c":[{"v":"2020"},{"v":1000}]},
{"c":[{"v":"2021"},{"v":1200}]},
{"c":[{"v":"2022"},{"v":1500}]},
{"c":[{"v":"2023"},{"v":1700}]}
]
};
// ডেটা টেবিল তৈরি
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Company Sales',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
legend: {position: 'bottom'}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Chart with JSON Data</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- JSON Data:
jsonDataভেরিয়েবলে JSON ফরম্যাটে ডেটা রাখা হয়েছে। এখানে cols হল কলামের সংজ্ঞা এবং rows হল ডেটার সারি। - DataTable:
google.visualization.DataTable(jsonData)ব্যবহার করে JSON ডেটাকে Google Charts এর DataTable এ রূপান্তর করা হয়। - Chart Creation:
google.visualization.BarChart()ফাংশন দিয়ে বার চার্ট তৈরি করা হয় এবং ডেটা প্রদর্শিত হয়।
২. CSV Data Fetching and Display in Google Charts
CSV (Comma-Separated Values) ডেটা ফরম্যাট একটি সাধারণ এবং জনপ্রিয় ফরম্যাট যা ডেটাকে সহজে টেবিল আকারে উপস্থাপন করতে সাহায্য করে। Google Charts এ CSV ডেটা ফেচ করে তা চার্টে প্রদর্শন করা সহজ।
উদাহরণ: CSV ডেটা ফেচ করে Google Charts এ প্রদর্শন করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts with CSV Data</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() {
// CSV ডেটা ফেচ করা
var csvData = 'Year,Sales\n2020,1000\n2021,1200\n2022,1500\n2023,1700';
// CSV ডেটাকে DataTable এ রূপান্তর করা
var data = google.visualization.arrayToDataTable(csvToArray(csvData));
var options = {
title: 'Company Sales',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
legend: {position: 'bottom'}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
// CSV কে Array এ রূপান্তর করার ফাংশন
function csvToArray(csv) {
var rows = csv.split('\n');
var data = [];
for (var i = 0; i < rows.length; i++) {
data.push(rows[i].split(','));
}
return data;
}
</script>
</head>
<body>
<h2>Google Chart with CSV Data</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- CSV Data:
csvDataভেরিয়েবলে CSV ফরম্যাটে ডেটা রাখা হয়েছে। - CSV to Array:
csvToArray()ফাংশনটি CSV ডেটাকে array তে রূপান্তর করে যা পরেgoogle.visualization.arrayToDataTable()ফাংশন দ্বারা DataTable এ রূপান্তরিত হয়। - Chart Creation:
google.visualization.BarChart()ফাংশন ব্যবহার করে CSV ডেটা থেকে বার চার্ট তৈরি করা হয়।
৩. JSON এবং CSV থেকে ডেটা Fetch করার জন্য AJAX ব্যবহার করা
যদি আপনার ডেটা সার্ভার থেকে ডায়নামিকভাবে আসছে, তাহলে আপনি AJAX ব্যবহার করে JSON বা CSV ফাইল ফেচ করতে পারেন এবং তারপর সেই ডেটাকে Google Charts এ প্রদর্শন করতে পারেন।
উদাহরণ: JSON ডেটা AJAX এর মাধ্যমে ফেচ করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX JSON Data Fetching</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(fetchData);
function fetchData() {
// AJAX কল দিয়ে JSON ডেটা ফেচ করা
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true); // data.json ফাইলের অবস্থান দিন
xhr.onload = function() {
if (xhr.status === 200) {
var jsonData = JSON.parse(xhr.responseText);
drawChart(jsonData);
}
};
xhr.send();
}
function drawChart(jsonData) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
jsonData.forEach(function(row) {
data.addRow([row.year, row.sales]);
});
var options = {
title: 'Company Sales',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
legend: {position: 'bottom'}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Chart with AJAX JSON Data</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- AJAX Request:
XMLHttpRequestব্যবহার করে JSON ডেটা ফেচ করা হয়েছে। - JSON Parsing:
JSON.parse()এর মাধ্যমে সার্ভার থেকে আসা JSON ডেটাকে পার্স করা হয়েছে এবং তারপর Google Charts এ পাঠানো হয়েছে। - Draw Chart: JSON ডেটা চার্টে প্রদর্শন করার জন্য
google.visualization.DataTable()এবংgoogle.visualization.BarChart()ব্যবহার করা হয়েছে।
উপসংহার
Google Charts ব্যবহার করে আপনি JSON এবং CSV ডেটা ফেচ করে সহজেই চার্ট তৈরি করতে পারেন। আপনি AJAX ব্যবহার করে ডায়নামিক ডেটা ফেচ করতে পারেন এবং তারপর সেই ডেটা DataTable এ রূপান্তর করে চার্টে প্রদর্শন করতে পারেন। Google Charts এ এই ধরনের ডেটা ফেচ এবং প্রদর্শন পদ্ধতি অত্যন্ত কার্যকরী এবং দ্রুত চার্ট তৈরি করতে সাহায্য করে।
Content added By
Read more
