Chart.js-এ AJAX ব্যবহার করে JSON ডেটা ডাইনামিকভাবে লোড করা একটি সাধারণ এবং শক্তিশালী উপায়, যা ওয়েবসাইটে রিয়েল-টাইম ডেটা বা চেঞ্জিং ডেটা প্রদর্শন করতে সাহায্য করে। এই পদ্ধতি ব্যবহার করে আপনি সার্ভার থেকে ডেটা অ্যাক্সেস করতে পারেন এবং সেই ডেটার ভিত্তিতে চার্ট আপডেট করতে পারেন।
নিচে Chart.js এবং AJAX এর মাধ্যমে JSON ডেটা লোড করার একটি উদাহরণ দেয়া হয়েছে।
১. AJAX কল দিয়ে JSON Data লোড করা
এখানে একটি উদাহরণ দেওয়া হচ্ছে যেখানে AJAX কল ব্যবহার করে একটি API থেকে JSON ডেটা ফেচ করা হবে এবং সেই ডেটা দিয়ে Chart.js-এ চার্ট আপডেট করা হবে।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js with Dynamic JSON Data</title>
</head>
<body>
<h1>Dynamic Chart with AJAX and JSON</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Chart.js চার্ট কনফিগারেশন
const ctx = document.getElementById('myChart').getContext('2d');
// AJAX কলের মাধ্যমে JSON ডেটা লোড করা
function fetchData() {
// একটি API থেকে ডেটা ফেচ করা (এটি একটি উদাহরণ API)
fetch('https://api.example.com/data') // আপনার API URL এখানে দিবেন
.then(response => response.json()) // JSON ডেটাতে রূপান্তর
.then(data => {
// চার্ট ডেটা কনফিগারেশন সেট করা
const chartData = {
labels: data.labels, // X-অক্ষের লেবেল
datasets: [{
label: 'Sales Data',
data: data.values, // Y-অক্ষের ডেটা
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
};
// চার্ট আপডেট করা
const myChart = new Chart(ctx, {
type: 'bar', // চার্ট টাইপ
data: chartData, // ডেটা
options: {
responsive: true,
scales: {
y: {
beginAtZero: true // Y-অক্ষ শূন্য থেকে শুরু হবে
}
}
}
});
})
.catch(error => console.error('Error loading the data:', error));
}
// ডেটা লোড করা
fetchData();
</script>
</body>
</html>
ব্যাখ্যা:
- AJAX কল (Fetch API):
fetch()ব্যবহার করে একটি API থেকে ডেটা আনা হয়। এখানে'https://api.example.com/data'API এর উদাহরণ হিসেবে দেওয়া হয়েছে, তবে আপনাকে আপনার নিজস্ব API URL ব্যবহার করতে হবে।response.json()ব্যবহার করে JSON ডেটা পার্স করা হয়।
- Chart.js কনফিগারেশন:
labels: JSON ডেটা থেকে প্রাপ্ত লেবেলগুলি (X-অক্ষের মান)data.labelsথেকে নেয়া হয়।datasets: Y-অক্ষের মানdata.valuesথেকে নেওয়া হয়, যা মূলত বার চার্টের উচ্চতা নির্ধারণ করবে।backgroundColorএবংborderColorকাস্টমাইজ করা হয় বার চার্টের রং ঠিক করতে।
- Chart.js
update()ফাংশন:- এই উদাহরণে, ডেটা লোড হওয়ার পর চার্ট তৈরি করা হয়েছে, তবে আপনি চাইলে ডেটা আপডেট করার জন্য
update()ফাংশনও ব্যবহার করতে পারেন।
- এই উদাহরণে, ডেটা লোড হওয়ার পর চার্ট তৈরি করা হয়েছে, তবে আপনি চাইলে ডেটা আপডেট করার জন্য
২. JSON ডেটার উদাহরণ
এই উদাহরণে API থেকে ফেরত আসা JSON ডেটা কেমন হতে পারে তা নিচে দেখানো হলো:
{
"labels": ["January", "February", "March", "April", "May"],
"values": [12, 19, 3, 5, 2]
}
labels: এক্স-অক্ষের মান (মাসের নাম)।values: প্রতিটি মাসের জন্য Y-অক্ষের মান (যেমন বিক্রয় বা অন্যান্য পরিমাপ)।
৩. Real-time Data Update
আপনি যদি real-time data ইন্টিগ্রেশন করতে চান, যেখানে চার্ট প্রতি কয়েক সেকেন্ড পর পর আপডেট হবে, তাহলে setInterval ব্যবহার করতে পারেন, যা নিয়মিতভাবে AJAX কল করে চার্ট আপডেট করবে।
উদাহরণ: প্রতি ৫ সেকেন্ড পর পর ডেটা আপডেট
setInterval(fetchData, 5000); // প্রতি ৫ সেকেন্ড পর পর ফাংশনটি কল হবে
এটি AJAX কলের মাধ্যমে প্রতি ৫ সেকেন্ডে নতুন ডেটা নিয়ে এবং চার্ট আপডেট করবে।
সারাংশ
Chart.js এবং AJAX ব্যবহার করে আপনি ডাইনামিক এবং রিয়েল-টাইম চার্ট তৈরি করতে পারেন। JSON ডেটা ফেচ করে সেটি Chart.js-এ ব্যবহার করে চার্ট আপডেট করা হয়। আপনি AJAX বা WebSocket ব্যবহার করে ডেটা আপডেট করতে পারেন, যা ওয়েব অ্যাপ্লিকেশনের জন্য অত্যন্ত কার্যকরী।
Read more
