Google Charts ব্যবহার করে আপনি ডাইনামিক ডেটা ফেচ করতে পারবেন এবং বিভিন্ন AJAX এবং WebSocket টেকনোলজি ব্যবহার করে real-time data প্রদর্শন করতে পারবেন। এখানে আমরা AJAX এবং WebSocket ব্যবহার করে গুগল চার্টে ডাইনামিক ডেটা কিভাবে লোড এবং আপডেট করতে পারি তা দেখব।
১. AJAX ব্যবহার করে Dynamic Data Fetch করা
AJAX (Asynchronous JavaScript and XML) একটি টেকনোলজি যা আপনাকে সার্ভার থেকে ডেটা লোড করতে এবং পেজ রিলোড না করে ডেটা আপডেট করতে সাহায্য করে। Google Charts এর সাথে AJAX ব্যবহার করে ডাইনামিক ডেটা ফেচ করা অনেক সহজ।
AJAX এর মাধ্যমে Dynamic Data Fetch করার উদাহরণ:
<!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 AJAX</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);
// AJAX ফাংশন দিয়ে ডেটা ফেচ করা
function drawChart() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true); // আপনার API URL বা ফাইলের পাথ
xhr.onload = function() {
if (xhr.status === 200) {
var jsonData = JSON.parse(xhr.responseText);
// ডেটা টেবিল প্রস্তুত করা
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'Value');
// ডেটা অ্যাড করা
jsonData.forEach(function(row) {
data.addRow([row.category, row.value]);
});
// চার্ট অপশন
var options = {
title: 'Category vs Value',
width: 800,
height: 600
};
// চার্ট তৈরি
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
};
xhr.send();
}
</script>
</head>
<body>
<h2>Google Charts with Dynamic Data</h2>
<div id="chart_div"></div>
</body>
</html>
ব্যাখ্যা:
- AJAX: এখানে
XMLHttpRequest()ব্যবহার করা হয়েছে যাdata.jsonফাইল থেকে ডেটা ফেচ করে। আপনি চাইলে এটি API থেকে ডাইনামিক ডেটা লোড করতে ব্যবহার করতে পারেন। - ডেটা প্রক্রিয়াকরণ: JSON ফাইল থেকে ডেটা সংগ্রহ করা হচ্ছে এবং তা Google Charts এর জন্য উপযুক্ত ফরম্যাটে রূপান্তর করা হচ্ছে।
- চার্ট তৈরি: ডেটা লোড হওয়ার পর, এটি Google Bar Chart এ প্রদর্শিত হচ্ছে।
২. WebSocket ব্যবহার করে Dynamic Data Fetch করা
WebSocket হলো একটি পূর্ণ-দ্বিমুখী প্রটোকল, যা ব্রাউজার এবং সার্ভারের মধ্যে স্থায়ী সংযোগ তৈরি করে এবং এটি রিয়েল-টাইম ডেটা আপডেট করতে ব্যবহৃত হয়। WebSocket ব্যবহার করলে সার্ভার এবং ক্লায়েন্ট একে অপরকে সরাসরি বার্তা পাঠাতে পারে, ফলে আপনি সহজেই ডাইনামিক ডেটা দেখাতে পারবেন।
WebSocket এর মাধ্যমে Dynamic Data Fetch করার উদাহরণ:
<!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 WebSocket</title>
<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);
var chart;
var data;
// WebSocket কনফিগারেশন
var ws = new WebSocket('ws://example.com/socket'); // আপনার WebSocket সার্ভারের URL
ws.onopen = function() {
console.log("WebSocket connection opened");
};
ws.onmessage = function(event) {
// প্রতিটি নতুন ডেটা আসলে তা ডেটাতে আপডেট করা
var message = JSON.parse(event.data);
data.addRow([message.timestamp, message.value]);
chart.draw(data, options);
};
function drawChart() {
data = new google.visualization.DataTable();
data.addColumn('string', 'Timestamp');
data.addColumn('number', 'Value');
var options = {
title: 'Real-Time Data',
width: 800,
height: 600,
curveType: 'function',
legend: { position: 'bottom' }
};
chart = new google.visualization.LineChart(document.getElementById('chart_div'));
}
</script>
</head>
<body>
<h2>Google Charts with WebSocket</h2>
<div id="chart_div"></div>
</body>
</html>
ব্যাখ্যা:
- WebSocket: এখানে একটি WebSocket কানেকশন তৈরি করা হয়েছে। এটি
ws://example.com/socketURL-এ কানেক্ট করবে (আপনার সার্ভারের সঠিক URL দিন)। - onmessage: যখনই নতুন ডেটা সার্ভার থেকে আসবে, তা
onmessageইভেন্টের মাধ্যমে পেতে পাবেন এবং চার্টে তা আপডেট করা হবে। - ডেটা লোড: প্রতিবার নতুন ডেটা আসলে তা Google Line Chart এ যোগ করা হবে এবং তা রিয়েল-টাইমে প্রদর্শিত হবে।
৩. Advantages of Using AJAX and WebSocket with Google Charts
- AJAX:
- সার্ভার থেকে ডেটা asynchronously লোড করা যায়, ফলে পেজ রিলোড না করে ডেটা আপডেট হয়।
- ক্লায়েন্ট এবং সার্ভারের মধ্যে একে অপরের সাথে যোগাযোগের জন্য অতিরিক্ত প্রক্রিয়া দরকার হয় না।
- এটি সাধারণত কম ডেটা পরিমাণে ব্যবহৃত হয়, যেমন API কল বা ফাইল ডাউনলোড।
- WebSocket:
- Real-time updates: সার্ভার এবং ক্লায়েন্টের মধ্যে স্থায়ী সংযোগ তৈরি করে, যা রিয়েল-টাইম ডেটা ট্রান্সফারের জন্য আদর্শ।
- দুই দিকে ডেটা আদান-প্রদান সম্ভব (ব্যাকগ্রাউন্ডে সার্ভার থেকে ক্লায়েন্টে ডেটা পাঠানো)।
- এটি দীর্ঘস্থায়ী সংযোগের মাধ্যমে স্বচ্ছন্দে ডেটা ট্রান্সফার করে।
উপসংহার
Google Charts এর সাথে AJAX এবং WebSocket ব্যবহার করে ডাইনামিক ডেটা ফেচ করা খুবই শক্তিশালী এবং কার্যকরী। AJAX ব্যবহার করে আপনি API বা ফাইল থেকে ডেটা লোড করতে পারেন, যেখানে WebSocket ব্যবহার করে আপনি রিয়েল-টাইম ডেটা লোড করতে পারবেন। এই ধরনের ডাইনামিক ডেটা ফেচিং ব্যবস্থার মাধ্যমে আপনি Google Charts এ সরাসরি আপডেট করা ডেটা দেখাতে পারেন, যা ব্যবহারকারীদের জন্য একটি ইন্টারঅ্যাকটিভ এবং ইমারসিভ অভিজ্ঞতা প্রদান করবে।
Read more
