Chart.js এর মাধ্যমে আপনি একাধিক datasets ব্যবহার করে বিভিন্ন ডেটাসেটের মধ্যে তুলনা করতে পারেন। এটি চার্টের মধ্যে বিভিন্ন সিরিজ বা ক্যাটেগরি প্রদর্শন করতে সহায়ক, যেমন বিভিন্ন সময়ে বা ভিন্ন পরিস্থিতিতে ডেটার তুলনা করা। Datasets এর মধ্যে তুলনা করতে, আপনাকে প্রতিটি ডেটাসেটের জন্য আলাদা করে তথ্য প্রদান করতে হবে এবং তারপর তাদের মাপ এবং উপস্থাপনা কাস্টমাইজ করতে হবে।
এখানে আমরা Chart.js ব্যবহার করে Datasets এর মধ্যে তুলনা করার কিছু উদাহরণ দেখব।
1. Multiple Datasets for Comparison (একাধিক ডেটাসেটের তুলনা)
Chart.js-এ আপনি একাধিক ডেটাসেট যুক্ত করতে পারেন এবং তা ভিন্ন ভিন্ন রঙ বা স্টাইলের মাধ্যমে তুলনা করতে পারেন।
উদাহরণ: একাধিক ডেটাসেটের তুলনা (Bar Chart)
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Dataset 1', // প্রথম ডেটাসেটের লেবেল
data: [12, 19, 3, 5, 2],
backgroundColor: 'rgba(255, 99, 132, 0.2)', // প্রথম ডেটাসেটের রঙ
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}, {
label: 'Dataset 2', // দ্বিতীয় ডেটাসেটের লেবেল
data: [7, 12, 6, 4, 10],
backgroundColor: 'rgba(54, 162, 235, 0.2)', // দ্বিতীয় ডেটাসেটের রঙ
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
এখানে, দুটি ডেটাসেট—Dataset 1 এবং Dataset 2 তৈরি করা হয়েছে এবং তাদের মধ্যে পার্থক্য দেখানোর জন্য রঙ এবং ডেটা আলাদা করা হয়েছে। Bar Chart এর মাধ্যমে এই দুটি ডেটাসেটের মধ্যে তুলনা করা হচ্ছে।
2. Line Chart with Multiple Datasets for Comparison (লাইন চার্টের মধ্যে একাধিক ডেটাসেটের তুলনা)
লাইন চার্টে আপনি একাধিক ডেটাসেটের তুলনা করতে পারেন যেখানে প্রতিটি ডেটাসেট আলাদা রেখা দ্বারা প্রদর্শিত হবে।
উদাহরণ: লাইন চার্টের মধ্যে একাধিক ডেটাসেটের তুলনা
const ctx = document.getElementById('myLineChart').getContext('2d');
const myLineChart = new Chart(ctx, {
type: 'line', // লাইন চার্ট
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Sales Data 1',
data: [12, 19, 3, 5, 2],
fill: false,
borderColor: 'rgba(75, 192, 192, 1)', // প্রথম ডেটাসেটের রঙ
tension: 0.1
}, {
label: 'Sales Data 2',
data: [6, 10, 15, 20, 25],
fill: false,
borderColor: 'rgba(153, 102, 255, 1)', // দ্বিতীয় ডেটাসেটের রঙ
tension: 0.1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
এখানে:
- দুটি ডেটাসেট—
Sales Data 1এবংSales Data 2লাইন চার্টে প্রদর্শিত হচ্ছে। borderColorদ্বারা লাইনগুলোর রঙ কাস্টমাইজ করা হয়েছে।tensionদ্বারা লাইনগুলোর কার্ভিং নিয়ন্ত্রণ করা হয়েছে।
3. Bar Chart with Stacked Datasets (Stacked Bar Chart)
Chart.js-এ stacked bar chart ব্যবহার করে আপনি একাধিক ডেটাসেটের মধ্যে তুলনা করতে পারেন যেখানে বারগুলো একে অপরের উপরে স্তূপিত হয়। এটি তুলনা করার একটি কার্যকর উপায়, যখন আপনি একই ক্যাটাগরিতে বিভিন্ন সিরিজের ডেটা দেখাতে চান।
উদাহরণ: Stacked Bar Chart
const ctx = document.getElementById('myStackedChart').getContext('2d');
const myStackedChart = new Chart(ctx, {
type: 'bar', // বার চার্ট
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Dataset 1',
data: [12, 19, 3, 5, 2],
backgroundColor: 'rgba(255, 99, 132, 0.6)',
}, {
label: 'Dataset 2',
data: [7, 12, 6, 4, 10],
backgroundColor: 'rgba(54, 162, 235, 0.6)',
}]
},
options: {
responsive: true,
scales: {
x: {
stacked: true // একে অপরের উপর বার স্তূপীকরণ
},
y: {
stacked: true // একে অপরের উপর বার স্তূপীকরণ
}
}
}
});
এখানে, stacked: true অপশন ব্যবহার করে দুটি ডেটাসেটের বারগুলো একে অপরের উপর স্তূপীকৃত হচ্ছে। এটি তুলনার জন্য উপযোগী যখন আপনি একই ক্যাটাগরিতে ভিন্ন ডেটাসেটের তুলনা করতে চান।
4. Radar Chart for Multi-Dataset Comparison (রাডার চার্টের মধ্যে একাধিক ডেটাসেটের তুলনা)
Radar Chart এ একাধিক ডেটাসেটের তুলনা করা সম্ভব, যেখানে প্রতিটি ডেটাসেট আলাদা রেখা দ্বারা প্রতীকি রূপে প্রদর্শিত হয়।
উদাহরণ: Radar Chart with Multiple Datasets
const ctx = document.getElementById('myRadarChart').getContext('2d');
const myRadarChart = new Chart(ctx, {
type: 'radar', // রাডার চার্ট
data: {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding'],
datasets: [{
label: 'Person 1',
data: [65, 59, 90, 81, 56],
borderColor: 'rgba(75, 192, 192, 1)',
fill: true
}, {
label: 'Person 2',
data: [28, 48, 40, 19, 96],
borderColor: 'rgba(153, 102, 255, 1)',
fill: true
}]
},
options: {
responsive: true,
scales: {
r: {
angleLines: {
display: false
},
suggestedMin: 0,
suggestedMax: 100
}
}
}
});
এখানে, দুটি ডেটাসেট—Person 1 এবং Person 2 রাডার চার্টে প্রদর্শিত হচ্ছে। বিভিন্ন কার্যকলাপের উপর তাদের তুলনা করা হচ্ছে।
5. Bubble Chart for Comparison (বাবল চার্টের মাধ্যমে তুলনা)
Bubble Chart একটি শক্তিশালী চার্ট টাইপ যা তিনটি ভেরিয়েবলকে উপস্থাপন করে, যেখানে X এবং Y মানের সাথে Z (বাবল সাইজ) মান যুক্ত থাকে।
উদাহরণ: Bubble Chart with Multiple Datasets
const ctx = document.getElementById('myBubbleChart').getContext('2d');
const myBubbleChart = new Chart(ctx, {
type: 'bubble',
data: {
datasets: [{
label: 'Dataset 1',
data: [{
x: 20,
y: 30,
r: 15
}, {
x: 40,
y: 60,
r: 10
}],
backgroundColor: 'rgba(75, 192, 192, 1)'
}, {
label: 'Dataset 2',
data: [{
x: 50,
y: 70,
r: 20
}, {
x: 70,
y: 90,
r: 25
}],
backgroundColor: 'rgba(153, 102, 255, 1)'
}]
},
options: {
responsive: true
}
});
এখানে, দুটি ডেটাসেট—Dataset 1 এবং Dataset 2 বাবল চার্টে প্রদর্শিত হচ্ছে, যেখানে X, Y এবং Z (বাবল সাইজ) মানের মাধ্যমে তুলনা করা হচ্ছে।
সারাংশ
Chart.js এর মাধ্যমে একাধিক datasets ব্যবহার করে তুলনা করার পদ্ধতি অত্যন্ত সহজ এবং শক্তিশালী। আপনি বার, লাইন, রাডার, বাবল, এবং অন্যান্য চার্ট টাইপের মাধ্যমে বিভিন্ন ডেটাসেটের তুলনা করতে পারেন। Chart.js এর কাস্টমাইজেশন অপশনগুলির মাধ্যমে আপনি:
- একাধিক ডেটাসেটের রঙ,
- সাইড-বাই-সাইড বা স্তূপীকৃত বার,
- লাইন গ্রাফের মধ্যে তুলনা,
- বাবল চার্টের মাধ্যমে ভিন্ন ভিন্ন ডেটা পয়েন্টের তুলনা ইত্যাদি করতে পারেন।
এই কাস্টমাইজেশন গুলি আপনার ডেটার মধ্যে সম্পর্ক পরিষ্কারভাবে প্রদর্শন করতে সাহায্য করে।
Read more
