Chart.js এর Dataset এবং Data Points কনফিগারেশন একটি চার্টের মূল অংশ। Dataset হলো এক বা একাধিক ডেটাসেট যা চার্টে প্রদর্শিত হবে, এবং Data Points হলো সেই ডেটাসেটের ভ্যালু বা মান যা এক্স-অক্ষ এবং ওয়াই-অক্ষের ওপর প্লট হয়। এখানে আমরা Dataset এবং Data Points কনফিগার করার প্রাথমিক ধারণা এবং উদাহরণ দেখব।
Dataset কনফিগারেশন
Dataset হলো একটি নির্দিষ্ট গ্রুপের ডেটা, যা সাধারণত এক বা একাধিক ডেটা পয়েন্ট নিয়ে তৈরি হয়। Chart.js এ Dataset কনফিগার করা যায় যেমন:
- Label: প্রতিটি ডেটাসেটের নাম।
- Data: ডেটাসেটের ডেটা পয়েন্ট।
- Background Color: ডেটা পয়েন্টের ব্যাকগ্রাউন্ড রং।
- Border Color: ডেটা পয়েন্টের বর্ডার রং।
- Border Width: ডেটা পয়েন্টের বর্ডার প্রস্থ।
Data Points কনফিগারেশন
Data Points হলো Dataset এর অংশ, যেগুলি এক্স-অক্ষ এবং ওয়াই-অক্ষের মানে পরিণত হয়। ডেটা পয়েন্ট কনফিগার করা যায়:
- Value: ওয়াই-অক্ষের মান (ডেটা পয়েন্টের পরিমাণ)।
- Label: এক্স-অক্ষের লেবেল (যেমন মাস, দেশ, বয়স ইত্যাদি)।
উদাহরণ: Dataset এবং Data Points কনফিগার করা
নিচে একটি উদাহরণ দেওয়া হলো যেখানে দুটি ডেটাসেট তৈরি করা হয়েছে, এবং প্রতিটি ডেটাসেটের ডেটা পয়েন্ট কনফিগার করা হয়েছে।
// Get the context of the canvas element
const ctx = document.getElementById('myChart').getContext('2d');
// Create the chart
const myChart = new Chart(ctx, {
type: 'bar', // Chart type: Bar Chart
data: {
labels: ['January', 'February', 'March', 'April', 'May'], // X-axis labels
datasets: [
{
label: 'Dataset 1', // Label for the first dataset
data: [12, 19, 3, 5, 2], // Data points for the first dataset
backgroundColor: 'rgba(255, 99, 132, 0.2)', // Background color
borderColor: 'rgba(255, 99, 132, 1)', // Border color
borderWidth: 1 // Border width
},
{
label: 'Dataset 2', // Label for the second dataset
data: [6, 13, 8, 9, 7], // Data points for the second dataset
backgroundColor: 'rgba(54, 162, 235, 0.2)', // Background color
borderColor: 'rgba(54, 162, 235, 1)', // Border color
borderWidth: 1 // Border width
}
]
},
options: {
responsive: true, // Make the chart responsive
scales: {
y: {
beginAtZero: true // Set the Y-axis to start at zero
}
}
}
});
Dataset কনফিগারেশন ব্যাখ্যা:
label: প্রতিটি ডেটাসেটের নাম নির্ধারণ করে। এটি লেজেন্ডে প্রদর্শিত হয়।data: একটি অ্যারে, যেখানে ডেটাসেটের মান (Data Points) থাকে। প্রতিটি মান একটি ডেটা পয়েন্টের প্রতিনিধিত্ব করে।backgroundColor: ডেটা পয়েন্টের ব্যাকগ্রাউন্ড রং। এটি চার্টের বারগুলোর রং নির্ধারণ করে।borderColor: ডেটা পয়েন্টের বর্ডার রং।borderWidth: ডেটা পয়েন্টের বর্ডারের প্রস্থ।
Data Points কনফিগারেশন ব্যাখ্যা:
data: Dataset এর প্রতিটি ডেটা পয়েন্টের মান। এখানে একটি সংখ্যা বা মান দেওয়া থাকে যা Y-অক্ষের উপরে প্রদর্শিত হবে।labels: X-অক্ষের লেবেল যা প্রতিটি ডেটা পয়েন্টের সাথে সম্পর্কিত থাকে। এটি সাধারণত ক্যাটাগরি বা সময় ভিত্তিক (যেমন মাস, বছর, দেশ) হয়।
একাধিক Dataset প্রদর্শন
Chart.js আপনাকে একাধিক Dataset যোগ করার সুযোগ দেয়। উদাহরণস্বরূপ, আমরা দুটি Dataset ব্যবহার করছি এবং তাদের ডেটা পয়েন্ট আলাদা করছি।
এটি ব্যবহারের ফলে, দুইটি ভিন্ন রঙের বার চার্ট দেখাবে, যেখানে প্রতিটি Dataset আলাদা রঙে চিহ্নিত হবে।
কাস্টম Dataset কনফিগারেশন
আপনি চাইলে Dataset কনফিগারেশনে আরো উন্নত কাস্টমাইজেশন যোগ করতে পারেন, যেমন ডেটা পয়েন্টের আকার পরিবর্তন, লাইন স্টাইল পরিবর্তন, ইত্যাদি।
উদাহরণ (Bubble Chart):
const bubbleChart = new Chart(ctx, {
type: 'bubble',
data: {
datasets: [{
label: 'My Dataset',
data: [
{ x: 10, y: 20, r: 5 }, // Data points with X, Y and Radius
{ x: 20, y: 30, r: 10 },
{ x: 30, y: 40, r: 15 }
],
backgroundColor: 'rgba(255, 99, 132, 0.2)', // Bubble color
borderColor: 'rgba(255, 99, 132, 1)', // Border color for bubbles
borderWidth: 1
}]
}
});
সারাংশ
Chart.js এ Dataset এবং Data Points কনফিগার করা গুরুত্বপূর্ণ, কারণ এগুলি আপনার চার্টের ডেটা এবং প্রদর্শন কাস্টমাইজ করতে সহায়ক। Dataset এর মাধ্যমে আপনি বিভিন্ন ডেটার গ্রুপ তৈরি করতে পারেন, এবং Data Points এর মাধ্যমে আপনি প্রতিটি ডেটাসেটের মান নির্ধারণ করতে পারবেন। এই কনফিগারেশন ব্যবহার করে আপনি বিভিন্ন ধরনের চার্ট তৈরি করতে পারবেন যা আপনার ডেটা ভিজ্যুয়ালাইজেশনে সহায়ক হবে।
Read more
