Chart.js-এ JSON ফাইল থেকে ডেটা লোড করা খুবই সহজ। JSON ফাইলটি সার্ভার বা লোকাল ফোল্ডারে থাকতে পারে এবং AJAX (বা Fetch API) ব্যবহার করে সেই ডেটা ফাইলটি চার্টে লোড করা যায়। এই পদ্ধতিতে আপনি সহজেই ডেটা লোড করে রিয়েল-টাইম চার্ট তৈরি করতে পারেন।
নিচে আমরা একটি JSON ফাইল থেকে ডেটা লোড করার উদাহরণ দেখব এবং সেটি Chart.js-এ প্রদর্শন করব।
1. JSON ফাইলের উদাহরণ
ধরা যাক, আমাদের একটি data.json নামক ফাইল আছে, যা কিছু ডেটা ধারণ করে। এটি সার্ভারে বা লোকাল ফোল্ডারে থাকতে পারে।
data.json (এটি একটি উদাহরণ JSON ফাইল)
{
"labels": ["January", "February", "March", "April", "May"],
"datasets": [
{
"label": "Sales Data",
"data": [10, 20, 30, 40, 50],
"backgroundColor": "rgba(54, 162, 235, 0.2)",
"borderColor": "rgba(54, 162, 235, 1)",
"borderWidth": 1
}
]
}
এই JSON ফাইলটি একটি চার্টের জন্য প্রয়োজনীয় ডেটা ধারণ করে:
labels: এক্স-অক্ষের লেবেলগুলির একটি অ্যারে।datasets: চার্টের ডেটা এবং গ্রাফের জন্য রং এবং বর্ডারের তথ্য।
2. HTML ফাইল
Chart.js এবং JavaScript ফাইলের মাধ্যমে JSON ডেটা লোড করার জন্য আমাদের একটি সাধারণ HTML ফাইল তৈরি করতে হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js from JSON</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="script.js"></script>
</body>
</html>
এই HTML ফাইলে একটি canvas এলিমেন্ট রাখা হয়েছে, যেখানে চার্টটি রেন্ডার হবে। এছাড়া Chart.js লাইব্রেরিটি CDN এর মাধ্যমে অন্তর্ভুক্ত করা হয়েছে এবং একটি script.js ফাইল লিংক করা হয়েছে, যেখানে আমরা JavaScript কোড লিখব।
3. JavaScript ফাইল (AJAX বা Fetch API)
এখন, আমরা JavaScript ফাইলটি তৈরি করব যা JSON ফাইল থেকে ডেটা লোড করবে এবং সেটি Chart.js-এ রেন্ডার করবে।
script.js (Fetch API ব্যবহার করে JSON থেকে ডেটা লোড করা)
// Canvas এলিমেন্টকে target করা
const ctx = document.getElementById('myChart').getContext('2d');
// JSON ফাইল থেকে ডেটা লোড করা
fetch('data.json') // JSON ফাইলের পাথ
.then(response => response.json()) // JSON ডেটা পেতে
.then(data => {
// Chart.js কনফিগারেশন সেট করা
const myChart = new Chart(ctx, {
type: 'bar', // চার্ট টাইপ
data: {
labels: data.labels, // JSON থেকে লেবেল
datasets: data.datasets // JSON থেকে ডেটাসেট
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
})
.catch(error => console.error('Error loading the JSON file:', error));
কী হচ্ছে এখানে?
fetch(): এটি AJAX এর একটি আধুনিক পদ্ধতি, যা সার্ভার থেকে ডেটা নিয়ে আসে।response.json(): JSON ফাইলের ডেটা পার্স করা হচ্ছে।data.labelsএবংdata.datasets: JSON থেকে ডেটা নিয়ে Chart.js-এর ডেটা অবজেক্টে সেট করা হচ্ছে।
এটি Chart.js-এ ডেটা লোড করার একটি সাধারণ উদাহরণ, যেখানে ডেটা সরাসরি JSON ফাইল থেকে চার্টে লোড হচ্ছে।
4. লকেল JSON ফাইল ব্যবহার
যদি আপনি লকেল ফোল্ডারে JSON ফাইল ব্যবহার করতে চান (যেমন ডেভেলপমেন্ট পরিবেশে), তখন file:// প্রোটোকল ব্যবহার করতে হবে। তবে এটি ব্রাউজারে শুধুমাত্র ডেভেলপমেন্ট পরিবেশে কাজ করবে।
এছাড়া, আপনার সার্ভারে যদি Node.js বা অন্য কোন সার্ভার রান করানো থাকে, তাহলে আপনি সার্ভার থেকে সরাসরি JSON ফাইল ব্যবহার করতে পারবেন।
5. সার্ভার থেকে JSON ডেটা লোড করা
আপনার JSON ফাইল সার্ভারে থাকলে আপনি সরাসরি URL ব্যবহার করে ডেটা লোড করতে পারবেন, যেমন:
fetch('https://example.com/api/data') // সার্ভার URL
এটি Web API এর মাধ্যমে AJAX কল করবে এবং ডেটা লোড করবে।
6. Chart.js এর অন্যান্য কাস্টমাইজেশন
আপনি JSON থেকে ডেটা লোড করার পর, Chart.js-এ আরও অনেক কাস্টমাইজেশন করতে পারবেন:
backgroundColor: বারের রঙ।borderColor: বর্ডারের রঙ।hoverBackgroundColor: হোভার করার সময় বারের রঙ পরিবর্তন।tooltip: টুলটিপ কাস্টমাইজেশন।
সারাংশ
Chart.js-এ JSON ফাইল থেকে ডেটা লোড করা খুবই সহজ এবং এক্সটেনসিবল। আপনি AJAX বা Fetch API ব্যবহার করে সরাসরি সার্ভার বা লোকাল ফোল্ডার থেকে JSON ডেটা লোড করে তা Chart.js এর মধ্যে প্রদর্শন করতে পারেন। এটি ডাইনামিক চার্ট তৈরি করতে এবং ওয়েব অ্যাপ্লিকেশনগুলিতে লাইভ ডেটা ভিজ্যুয়ালাইজ করতে সাহায্য করে।
Read more
