Google Charts ব্যবহার করে আপনি আপনার ওয়েব অ্যাপ্লিকেশনে বা ড্যাশবোর্ডে ডেটা ভিজ্যুয়ালাইজেশন খুব সহজে করতে পারেন। তবে, কখনও কখনও আপনি চাইবেন যে আপনার চার্ট ডেটা external databases (যেমন, MySQL, PostgreSQL, MongoDB বা Google Sheets) থেকে সিঙ্ক্রোনাইজ হয়ে চলুক, যাতে ডেটা স্বয়ংক্রিয়ভাবে আপডেট হয় এবং ব্যবহারকারীদের রিয়েল-টাইমে সঠিক তথ্য দেওয়া যায়।
এই গাইডে আমরা দেখব কিভাবে Google Charts ব্যবহার করে external database থেকে ডেটা সিঙ্ক্রোনাইজ করতে হয় এবং dynamic charts তৈরি করা যায়।
১. External Database থেকে Data Retrieve করা
Google Charts থেকে ডেটা সংগ্রহ করতে সাধারণত একটি backend সার্ভার বা API দরকার হয়, যেটি database থেকে ডেটা বের করে এবং সেই ডেটা JSON বা CSV ফরম্যাটে ফ্রন্টএন্ডে পাঠায়।
১.১ PHP এবং MySQL Database ব্যবহার করে Data Fetch করা
ধরা যাক আপনি MySQL ডেটাবেসে ডেটা সংরক্ষণ করছেন এবং সেখান থেকে Google Charts এর জন্য ডেটা ফেচ করতে চান।
PHP স্ক্রিপ্ট: (ডেটাবেস থেকে ডেটা ফেচ করা)
<?php
// MySQL connection
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "chart_database";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT year, sales FROM sales_data";
$result = $conn->query($sql);
// Fetch data into an array
$data = [];
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$data[] = [$row["year"], $row["sales"]];
}
} else {
echo "0 results";
}
$conn->close();
// Return data as JSON
echo json_encode($data);
?>
PHP স্ক্রিপ্ট ব্যাখ্যা:
- আমরা MySQL ডেটাবেসের সাথে সংযোগ স্থাপন করছি এবং sales_data টেবিল থেকে year এবং sales ডেটা ফেচ করছি।
- json_encode() ফাংশন ব্যবহার করে ডেটা JSON ফরম্যাটে পাঠানো হচ্ছে।
২. Google Charts এ Data Integrate করা
এখন, আমরা এই ডেটা Google Charts এ প্রদর্শন করব। এখানে আমরা AJAX ব্যবহার করব, যা আমাদের PHP স্ক্রিপ্ট থেকে ডেটা গ্রহণ করবে এবং Google Chart-এ প্রদর্শন করবে।
২.১ AJAX দিয়ে PHP থেকে ডেটা লোড করা
<!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 External 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', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
// Fetch data from PHP script via AJAX
fetch('get_data.php')
.then(response => response.json())
.then(jsonData => {
jsonData.forEach(row => {
data.addRow([row[0], row[1]]);
});
// Draw the chart
var options = {
title: 'Company Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
})
.catch(error => console.error('Error fetching data:', error));
}
</script>
</head>
<body>
<h2>Google Chart with External Database Data</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- AJAX ফেচিং: আমরা fetch() ফাংশন ব্যবহার করে PHP স্ক্রিপ্ট (
get_data.php) থেকে ডেটা নিয়ে আসছি। ডেটা আসার পর আমরা সেই ডেটা Google Charts এর DataTable এ যোগ করি। - Chart Rendering: ডেটা পাওয়ার পর চার্ট তৈরি করা হচ্ছে এবং সেটি ব্যবহারকারীকে দেখানো হচ্ছে।
৩. Real-time Data Sync: Google Sheets এর সাথে
Google Sheets খুব জনপ্রিয় একটি টুল যা আপনাকে ডেটা রিয়েল-টাইমে আপডেট এবং সিঙ্ক্রোনাইজ করতে সাহায্য করে। আপনি Google Sheets API ব্যবহার করে রিয়েল-টাইম ডেটা গুগল চার্টে প্রদর্শন করতে পারেন।
৩.১ Google Sheets থেকে ডেটা Fetch করা
Google Sheets থেকে ডেটা নিয়ে Google Charts এ সেটি প্রদর্শন করতে, প্রথমে আপনার Google Sheets এর ডেটা 公開 করতে হবে (Public Sharing)। তারপর, Google Visualization API ব্যবহার করে ডেটা ফেচ করা যায়।
google.charts.load('current', {
packages: ['corechart', 'table']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var queryString = encodeURIComponent('SELECT A, B');
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/your_spreadsheet_id/gviz/tq?tq=' + queryString);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {
title: 'Sales Over Time',
curveType: 'function',
legend: { position: 'bottom' }
});
}
কোড ব্যাখ্যা:
- Google Sheets API: আমরা Google Sheets ডেটাকে Google Visualization API এর মাধ্যমে প্যারামিটার হিসেবে পাঠাচ্ছি। এটি ডেটা ফেচ করার জন্য কাজ করবে।
- Query: এখানে একটি query string ব্যবহার করা হয়েছে যা Google Sheets থেকে A এবং B কলাম নির্বাচন করবে (আপনার শিটের নামানুসারে এটা পরিবর্তিত হতে পারে)।
৪. WebSocket বা Server Push প্রযুক্তি ব্যবহার করে Real-Time Sync
যদি আপনি রিয়েল-টাইম ডেটা সিঙ্ক্রোনাইজেশন চান, তবে WebSocket অথবা Server Push ব্যবহার করা যেতে পারে। এই প্রযুক্তিগুলি সার্ভার থেকে ক্লায়েন্টে দ্রুত তথ্য প্রেরণ করতে সহায়ক, যা রিয়েল-টাইম চার্ট আপডেট করার জন্য কার্যকর।
const socket = new WebSocket('ws://your-server.com/socket');
socket.onmessage = function(event) {
const data = JSON.parse(event.data);
// Update chart with new data
chart.draw(data, options);
};
এখানে, WebSocket সার্ভার থেকে রিয়েল-টাইম ডেটা পাঠানোর জন্য ব্যবহৃত হচ্ছে এবং সেই ডেটা দিয়ে চার্ট আপডেট করা হচ্ছে।
উপসংহার
Google Charts এবং External Database এর মধ্যে ডেটা সিঙ্ক্রোনাইজেশন আপনাকে dynamic charts তৈরি করতে সহায়তা করে, যা ব্যবহারকারীদের রিয়েল-টাইমে সঠিক তথ্য প্রদর্শন করতে পারে। আপনি PHP, Google Sheets, AJAX, WebSocket, বা Server Push এর মাধ্যমে Google Charts এর সাথে ডেটা সিঙ্ক্রোনাইজ করতে পারেন। এটি আপনার ড্যাশবোর্ড বা ওয়েব অ্যাপ্লিকেশনে ডেটা ভিজ্যুয়ালাইজেশনকে আরও দ্রুত, কার্যকরী এবং ইন্টারঅ্যাকটিভ করে তোলে।
Read more
