Chart.js-এর সাহায্যে আপনি Real-time ডেটা ভিজ্যুয়ালাইজেশন খুব সহজেই করতে পারেন। ওয়েব অ্যাপ্লিকেশনে রিয়েল-টাইম ডেটা আপডেট করে চার্ট দেখানোর জন্য কিছু নির্দিষ্ট কৌশল ব্যবহার করা হয়। এতে ব্যবহারকারীরা ডেটার পরিবর্তন দেখতে পারেন যেকোনো সময়, যেমন একটি লাইভ ট্র্যাফিক মিটার বা স্টক মার্কেটের ডেটা। এখানে আমরা দেখব কিভাবে Chart.js ব্যবহার করে রিয়েল-টাইম ডেটা হ্যান্ডলিং করা যায়।
Real-time ডেটা হ্যান্ডলিং কনসেপ্ট
রিয়েল-টাইম ডেটা হ্যান্ডলিংয়ের মূল উদ্দেশ্য হল:
- ডেটার নিয়মিত আপডেট: ডেটা প্রতি সেকেন্ড বা নির্দিষ্ট ইন্টারভালে পরিবর্তিত হয়।
- ডায়নামিক চার্ট: চার্টে ডেটা আপডেট করা হয় এবং চার্টটি স্বয়ংক্রিয়ভাবে রিফ্রেশ হয়।
- অ্যানিমেশন ও ট্রানজিশন: ডেটা আপডেট করার সময় চার্টে সুন্দর অ্যানিমেশন প্রদর্শিত হয়।
Real-time Chart.js উদাহরণ
এখানে আমরা একটি Line Chart উদাহরণ দেখাব যেখানে প্রতি সেকেন্ডে একটি নতুন ডেটা পয়েন্ট যোগ করা হবে।
HTML: (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-time Chart Example</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Real-time Line Chart Example</h1>
<canvas id="realTimeChart" width="400" height="200"></canvas>
<script src="script.js"></script>
</body>
</html>
JavaScript: (script.js)
const ctx = document.getElementById('realTimeChart').getContext('2d');
// Initial data setup
let timeLabels = [];
let dataPoints = [];
// Create the real-time chart
const realTimeChart = new Chart(ctx, {
type: 'line', // Line chart
data: {
labels: timeLabels,
datasets: [{
label: 'Real-time Data',
data: dataPoints,
borderColor: 'rgba(75, 192, 192, 1)', // Line color
fill: false,
borderWidth: 2
}]
},
options: {
responsive: true,
scales: {
x: {
type: 'linear',
position: 'bottom',
title: {
display: true,
text: 'Time (Seconds)'
}
},
y: {
beginAtZero: true,
title: {
display: true,
text: 'Value'
}
}
},
animation: {
duration: 0 // Disable animation for smooth updates
}
}
});
// Real-time data generation and updating the chart
let time = 0; // Start time
function updateChart() {
// Add new time and data point
timeLabels.push(time++);
dataPoints.push(Math.random() * 100); // Random data point between 0 and 100
// Keep the chart size constant by removing the first label and data point
if (timeLabels.length > 50) {
timeLabels.shift();
dataPoints.shift();
}
// Update chart data
realTimeChart.update();
}
// Update the chart every second
setInterval(updateChart, 1000);
বর্ণনা:
- Canvas এলিমেন্ট:
- HTML ফাইলে একটি
<canvas>ট্যাগ ব্যবহার করা হয়েছে, যেখানে আমাদের চার্ট রেন্ডার হবে।
- HTML ফাইলে একটি
- Chart.js কনফিগারেশন:
type: 'line': আমরা একটি লাইন চার্ট তৈরি করেছি।labels: এক্স-অক্ষের জন্য সময়ের লেবেল ব্যবহার করছি। এখানে সময় 0, 1, 2 ইত্যাদি হিসেবে বাড়বে।datasets: ডেটাসেটের মধ্যে আমরাdataএবংborderColorসেট করেছি।animation: অ্যানিমেশন নিষ্ক্রিয় করা হয়েছে যাতে চার্ট আপডেট দ্রুত হয়।
- Real-time ডেটা আপডেট:
- প্রতি সেকেন্ডে একটি নতুন র্যান্ডম ডেটা পয়েন্ট যোগ করা হচ্ছে এবং একে
setIntervalফাংশনের মাধ্যমে আপডেট করা হচ্ছে। timeLabels.push(time++):timeভ্যারিয়েবল ইনক্রিমেন্ট হয় এবং লেবেল হিসেবে যোগ হয়।dataPoints.push(Math.random() * 100): র্যান্ডম ডেটা পয়েন্ট (0 থেকে 100) তৈরি হয়েdataPointsএ যোগ হয়।realTimeChart.update(): ডেটা আপডেট করার পর চার্ট পুনরায় রেন্ডার হয়।
- প্রতি সেকেন্ডে একটি নতুন র্যান্ডম ডেটা পয়েন্ট যোগ করা হচ্ছে এবং একে
- চার্ট সাইজ কাস্টমাইজেশন:
if (timeLabels.length > 50): আমরা একটি সীমা নির্ধারণ করেছি যেখানে ৫০টি পয়েন্টের পর পুরানো ডেটা সরিয়ে ফেলা হবে এবং নতুন ডেটা যোগ হবে, এতে চার্টের সাইজ বড় হবে না।
২. WebSocket অথবা API থেকে ডেটা সংগ্রহ করা
রিয়েল-টাইম ডেটা হ্যান্ডলিং করতে আপনি API বা WebSocket থেকেও ডেটা পেতে পারেন। নীচে একটি WebSocket এর উদাহরণ দেওয়া হলো যা লাইভ ডেটা স্ট্রিমিং এর মাধ্যমে চার্ট আপডেট করবে।
const socket = new WebSocket('wss://example.com/real-time-data');
// When receiving data from the server
socket.onmessage = function(event) {
const newData = JSON.parse(event.data);
// Update the chart with new data
timeLabels.push(newData.time);
dataPoints.push(newData.value);
// Keep the chart size constant
if (timeLabels.length > 50) {
timeLabels.shift();
dataPoints.shift();
}
// Update chart data
realTimeChart.update();
};
এখানে WebSocket ব্যবহার করে সার্ভার থেকে লাইভ ডেটা নেওয়া হচ্ছে এবং সেই ডেটা দিয়ে চার্ট আপডেট করা হচ্ছে।
সারাংশ
Chart.js রিয়েল-টাইম ডেটা ভিজ্যুয়ালাইজেশন করার জন্য খুবই উপযোগী। আপনি setInterval বা WebSocket এর মাধ্যমে ডেটা আপডেট করতে পারেন এবং chart.update() ফাংশন ব্যবহার করে লাইভ চার্ট প্রদর্শন করতে পারেন। এই পদ্ধতি ওয়েব অ্যাপ্লিকেশনে রিয়েল-টাইম ট্র্যাকিং, স্টক মার্কেট ডেটা, বা কোনো লাইভ ডেটা সিস্টেমে অত্যন্ত কার্যকর।
Read more
