Google Charts দিয়ে Auto Refresh এবং Real-time Dashboard তৈরি করা অত্যন্ত কার্যকরী, বিশেষত যখন আপনার ডেটা রিয়েল-টাইমে আপডেট হয় এবং আপনি তা ড্যাশবোর্ডে প্রদর্শন করতে চান। এটি ব্যবহারকারীদের সর্বশেষ ডেটা প্রদর্শন করার জন্য প্রয়োজনীয় একটি টুল, যেখানে ডেটা স্বয়ংক্রিয়ভাবে রিফ্রেশ হয় এবং নতুন ডেটা প্রদর্শিত হয়।
১. Auto Refresh এবং Real-time Dashboard তৈরি করার কৌশল
Auto Refresh এবং Real-time Dashboard তৈরি করতে, আমরা setInterval() ফাংশন ব্যবহার করে নির্দিষ্ট সময়ে ডেটা রিফ্রেশ করতে পারি। এর মাধ্যমে আমরা ডেটা আপডেট করতে থাকি এবং নতুন ডেটা স্ক্রীনে প্রদর্শিত হয়।
এই উদাহরণে, আমরা একটি Bar Chart তৈরি করব এবং সেই চারের ডেটা প্রতি ৫ সেকেন্ড পর পর স্বয়ংক্রিয়ভাবে রিফ্রেশ করব।
২. Auto Refresh এর জন্য HTML, JavaScript কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts Real-time Dashboard</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Google Charts লোড করা
google.charts.load('current', {'packages':['corechart', 'bar']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawChart);
var chart;
var data;
var options;
// প্রথমবার চার্ট তৈরি করা
function drawChart() {
data = new google.visualization.arrayToDataTable([
['Category', 'Value'],
['Category A', 100],
['Category B', 200],
['Category C', 300]
]);
options = {
title: 'Real-time Data Dashboard',
hAxis: {title: 'Category'},
vAxis: {title: 'Value'},
legend: { position: 'none' }
};
chart = new google.visualization.BarChart(document.getElementById('dashboard'));
chart.draw(data, options);
// Auto refresh every 5 seconds
setInterval(updateData, 5000);
}
// ডেটা আপডেট করা
function updateData() {
// এখানে রিয়েল-টাইম ডেটা আপডেটের জন্য API বা ডেটাবেস থেকে ডেটা লোড করা যেতে পারে
var newData = [
['Category', 'Value'],
['Category A', Math.floor(Math.random() * 500)],
['Category B', Math.floor(Math.random() * 500)],
['Category C', Math.floor(Math.random() * 500)]
];
data = google.visualization.arrayToDataTable(newData);
chart.draw(data, options); // চার্ট পুনরায় আঁকুন নতুন ডেটা দিয়ে
}
</script>
</head>
<body>
<h2>Google Charts Real-time Dashboard</h2>
<div id="dashboard" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা
- Google Charts লোড করা:
google.charts.load('current', {'packages':['corechart', 'bar']});লাইনে আমরা corechart এবং bar প্যাকেজ লোড করেছি, যা বার চার্ট তৈরি করতে সহায়তা করবে। - প্রথম চার্ট তৈরি করা:
drawChart()ফাংশনে প্রথমে একটি Bar Chart তৈরি করা হয়েছে, যেখানে Category A, Category B, এবং Category C এর জন্য কিছু ইনিশিয়াল ডেটা দেওয়া হয়েছে। - Auto Refresh (setInterval):
setInterval(updateData, 5000);এই কোডটি প্রতি ৫ সেকেন্ড পর পর updateData() ফাংশন কল করে, যাতে নতুন ডেটা দিয়ে চার্টটি আপডেট হয়।
- ডেটা আপডেট করা:
updateData()ফাংশনে Math.random() ব্যবহার করে আমরা নতুন ডেটা তৈরি করছি যা প্রতি ৫ সেকেন্ড পর পর পরিবর্তিত হবে।- আপনার প্রকৃত প্রকল্পে, এখানে আপনি API বা ডেটাবেস থেকে রিয়েল-টাইম ডেটা লোড করতে পারেন।
- chart.draw(): নতুন ডেটা দিয়ে chart.draw() ফাংশন আবার চার্টটি আঁকবে।
৩. Auto Refresh এবং Real-time Dashboard এর ব্যবহার
- ডেটা ভিজ্যুয়ালাইজেশন: যদি আপনি এমন কোনো প্রকল্প পরিচালনা করেন যেখানে ডেটা সবসময় পরিবর্তনশীল, যেমন ফিনান্সিয়াল মার্কেট, ই-কমার্স ওয়েবসাইট বা সেন্সর ডেটা, তাহলে Auto Refresh এবং Real-time Dashboard খুবই কার্যকরী।
- স্টক মার্কেট বা ট্রেডিং: সঠিক সময়ে স্টক মার্কেট বা ট্রেডিং ডেটা দেখানোর জন্য রিয়েল-টাইম ড্যাশবোর্ড ব্যবহার করা যায়।
- ই-কমার্স ওয়েবসাইট: পণ্য বিক্রির পরিমাণ, ইনভেন্টরি, বা অর্ডার প্রসেসিং ট্র্যাক করার জন্য।
- স্মার্ট সিটি ডেটা: শহরের বিভিন্ন ডেটা, যেমন পরিবহন, শক্তি ব্যবহার, বা নিরাপত্তা তথ্য রিয়েল-টাইমে মনিটরিং করা।
উপসংহার
Google Charts এর মাধ্যমে Auto Refresh এবং Real-time Dashboard তৈরি করা একটি শক্তিশালী উপায়, যা রিয়েল-টাইম ডেটার আপডেট এবং বিশ্লেষণ প্রদর্শন করতে সহায়তা করে। এটি একটি কার্যকরী এবং ইন্টারঅ্যাকটিভ ড্যাশবোর্ড তৈরি করার জন্য খুবই উপকারী, বিশেষ করে যখন ডেটা পরিবর্তনশীল এবং আপনাকে তা সঠিক সময়ে দেখাতে হয়।
Read more
