Chart.js-এ JSON ডেটা ব্যবহার করে চার্ট তৈরি করা একটি সাধারণ পদ্ধতি, বিশেষ করে যখন আপনার ডেটা একটি সার্ভার থেকে প্রাপ্ত হয় বা স্ট্যাটিকভাবে JSON ফাইলের মধ্যে থাকে। JSON ডেটা থেকে Chart.js-এ চার্ট তৈরি করতে, আপনি JSON ডেটা পাস করে সেটি চার্টে রেন্ডার করতে পারেন।
এখানে আমরা দেখাবো কীভাবে JSON Data Binding এর মাধ্যমে Chart.js-এ ডেটা ব্যবহার করে চার্ট তৈরি করা যায়।
1. JSON Data Structure:
ধরা যাক, আমাদের কাছে একটি JSON ডেটা আছে যা সেলস ডেটার তথ্য সংরক্ষণ করছে।
উদাহরণ: JSON ডেটা
{
"labels": ["January", "February", "March", "April", "May", "June"],
"datasets": [
{
"label": "Sales Data",
"data": [12, 19, 3, 5, 2, 3],
"backgroundColor": "rgba(75, 192, 192, 0.2)",
"borderColor": "rgba(75, 192, 192, 1)",
"borderWidth": 1
}
]
}
2. Chart.js-এ JSON Data ব্যবহার করে Chart তৈরি করা
Chart.js-এ JSON ডেটা ব্যবহারের জন্য আপনাকে JSON ডেটা লোড করতে হবে (যদি তা API থেকে আসছে)। এরপর, JSON ডেটাকে চার্টের ডেটাতে ম্যাপ করে চার্ট তৈরি করা হয়।
উদাহরণ: JSON Data Binding এর মাধ্যমে Chart তৈরি
- HTML ফাইল (একটি
<canvas>এলিমেন্ট সহ):
<!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 JSON Data</title>
</head>
<body>
<h1>Sales Data</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js"></script>
</body>
</html>
- JavaScript ফাইল (Chart.js দিয়ে JSON Data দিয়ে Chart তৈরি করা):
// JSON ডেটা
const jsonData = {
"labels": ["January", "February", "March", "April", "May", "June"],
"datasets": [
{
"label": "Sales Data",
"data": [12, 19, 3, 5, 2, 3],
"backgroundColor": "rgba(75, 192, 192, 0.2)",
"borderColor": "rgba(75, 192, 192, 1)",
"borderWidth": 1
}
]
};
// Canvas এলিমেন্টে চার্ট রেন্ডার করা
const ctx = document.getElementById('myChart').getContext('2d');
// Chart.js দিয়ে Chart তৈরি করা
const myChart = new Chart(ctx, {
type: 'bar', // বার চার্ট
data: jsonData, // JSON ডেটা প্রদান
options: {
responsive: true,
scales: {
y: {
beginAtZero: true // Y-অক্ষ শূন্য থেকে শুরু হবে
}
}
}
});
ব্যাখ্যা:
- JSON ডেটা: আমরা একটি JSON অবজেক্ট ব্যবহার করেছি, যেখানে
labelsহল এক্স-অক্ষের লেবেল এবংdatasetsএর মধ্যে সেলস ডেটা, রঙ এবং বর্ডার প্রপার্টি রয়েছে। - Chart.js কনফিগারেশন:
myChart.dataএ সরাসরি JSON ডেটা প্রদান করা হয়েছে। type: 'bar': এটি আমাদের চার্টের ধরন—এখানে একটি বার চার্ট তৈরি হবে।options: চার্টের অপশন যেমনscalesকাস্টমাইজ করা হয়েছে।
3. AJAX বা Fetch API ব্যবহার করে JSON ডেটা লোড করা
যদি আপনার JSON ডেটা API থেকে আসছে, তবে আপনি AJAX বা Fetch API ব্যবহার করে সার্ভার থেকে ডেটা লোড করতে পারেন।
উদাহরণ: Fetch API দিয়ে JSON ডেটা লোড করা
// Fetch API দিয়ে JSON ডেটা লোড করা
fetch('https://example.com/api/sales') // আপনার API URL এখানে
.then(response => response.json())
.then(data => {
const ctx = document.getElementById('myChart').getContext('2d');
// Chart.js দিয়ে Chart তৈরি করা
const myChart = new Chart(ctx, {
type: 'line', // লাইন চার্ট
data: {
labels: data.labels, // API থেকে লেবেলস
datasets: [{
label: 'Sales Data',
data: data.datasets[0].data, // API থেকে ডেটা
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 2,
fill: false
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
})
.catch(error => console.error('Error:', error));
ব্যাখ্যা:
fetch():fetch()মেথড ব্যবহার করে API থেকে JSON ডেটা লোড করা হয়।data: API থেকে পাওয়া ডেটা JSON ফরম্যাটে নেয়া হয় এবং সেটি Chart.js এরdataপ্রপার্টি হিসেবে ব্যবহৃত হয়।
4. JSON Data এর মাধ্যমে Multiple Datasets (একাধিক ডেটাসেট)
আপনি একাধিক ডেটাসেট ব্যবহার করে একাধিক সিরিজের চার্ট তৈরি করতে পারেন। প্রতিটি ডেটাসেট JSON ফরম্যাটে থাকবে এবং Chart.js এ সেটি ব্যবহার করা যাবে।
উদাহরণ: Multiple Datasets
const jsonData = {
"labels": ["January", "February", "March", "April", "May", "June"],
"datasets": [
{
"label": "Sales Data",
"data": [12, 19, 3, 5, 2, 3],
"backgroundColor": 'rgba(255, 99, 132, 0.2)',
"borderColor": 'rgba(255, 99, 132, 1)',
"borderWidth": 1
},
{
"label": "Profit Data",
"data": [8, 16, 2, 7, 3, 4],
"backgroundColor": 'rgba(54, 162, 235, 0.2)',
"borderColor": 'rgba(54, 162, 235, 1)',
"borderWidth": 1
}
]
};
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: jsonData, // JSON ডেটা ব্যবহার
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
এখানে, datasets এর মধ্যে দুটি ডেটাসেট ব্যবহার করা হয়েছে — Sales Data এবং Profit Data।
সারাংশ
Chart.js-এ JSON Data Binding এর মাধ্যমে আপনি সহজেই ডেটা লোড করে চার্ট তৈরি করতে পারেন। আপনি JSON ডেটাকে সরাসরি চার্টের data প্রপার্টি হিসেবে ব্যবহার করতে পারেন অথবা AJAX বা Fetch API এর মাধ্যমে ডেটা সার্ভার থেকে নিয়ে আসতে পারেন। এই পদ্ধতিগুলি ডায়নামিক ডেটা লোডিং এবং রিয়েল-টাইম চার্ট আপডেটের জন্য খুবই কার্যকর।
Read more
