Chart.js এর মাধ্যমে ডেটা ভিজ্যুয়ালাইজেশনের সময় Data Manipulation (ডেটা পরিবর্তন বা প্রসেসিং) একটি গুরুত্বপূর্ণ বিষয়। Chart.js লাইব্রেরি এমন একটি ক্ষমতা প্রদান করে যার মাধ্যমে আপনি চার্টের ডেটা রিয়েল-টাইমে পরিবর্তন করতে, ডেটা আপডেট করতে এবং চার্টের উপস্থাপনা সেটিংস সমন্বয় করতে পারেন।
Chart.js-এ ডেটা ম্যানিপুলেশন মূলত দুইটি বিষয়কে ঘিরে কাজ করে:
- ডেটার আপডেট করা: চার্টের ডেটা পরিবর্তন বা আপডেট করা।
- ডেটা রেন্ডার করা: পরিবর্তিত ডেটা দেখানোর জন্য চার্টটি রেন্ডার বা রিফ্রেশ করা।
নিচে Chart.js এর মাধ্যমে ডেটা ম্যানিপুলেশন করার কিছু সাধারণ উপায় নিয়ে আলোচনা করা হলো।
১. ডেটা আপডেট করা (Updating Data)
Chart.js-এ ডেটা আপডেট করতে, আপনাকে প্রথমে chart.data বা chart.config.data এর মধ্যে ডেটা সংশোধন করতে হবে। এরপর, chart.update() ফাংশন ব্যবহার করে চার্টটি রিফ্রেশ করা হয়, যাতে নতুন ডেটা রেন্ডার হয়।
উদাহরণ: ডেটা আপডেট করা
ধরা যাক, আমাদের একটি বার চার্ট রয়েছে, এবং আমরা ডেটাতে কিছু পরিবর্তন করতে চাই।
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green'],
datasets: [{
label: 'Votes',
data: [12, 19, 3, 5],
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'],
borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)'],
borderWidth: 1
}]
},
options: {
responsive: true
}
});
// ডেটা পরিবর্তন
myChart.data.datasets[0].data = [15, 10, 8, 6]; // নতুন ডেটা প্রদান
myChart.update(); // চার্ট আপডেট করা
ব্যাখ্যা:
myChart.data.datasets[0].data: প্রথম ডেটাসেটের ডেটা অ্যারে আপডেট করা হয়েছে।myChart.update(): এই ফাংশনটি ব্যবহার করে চার্ট রিফ্রেশ করা হয়, যাতে নতুন ডেটা দৃশ্যমান হয়।
২. নতুন ডেটা যোগ করা (Adding New Data)
Chart.js-এ আপনি ডেটাসেট বা ডেটা পয়েন্ট যোগ করতে পারেন। এটি ডায়নামিক ডেটা আপডেটের জন্য অত্যন্ত কার্যকরী।
উদাহরণ: নতুন ডেটা যোগ করা
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April'],
datasets: [{
label: 'Sales',
data: [10, 20, 30, 40],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}]
},
options: {
responsive: true
}
});
// নতুন ডেটা যোগ করা
myChart.data.labels.push('May'); // নতুন লেবেল যোগ করা
myChart.data.datasets[0].data.push(50); // নতুন ডেটা পয়েন্ট যোগ করা
myChart.update(); // চার্ট আপডেট করা
ব্যাখ্যা:
myChart.data.labels.push('May'): লেবেলগুলিতে নতুন একটি মান (মে) যোগ করা হয়েছে।myChart.data.datasets[0].data.push(50): ডেটাসেটের ডেটা অ্যারেতে নতুন একটি পয়েন্ট (50) যোগ করা হয়েছে।
৩. ডেটা মুছে ফেলা (Removing Data)
Chart.js-এ আপনি ডেটা পয়েন্ট বা ডেটাসেট মুছে ফেলতে পারেন। এটি যদি ডেটা পরিবর্তন করতে চান বা আগের ডেটা মুছে ফেলা প্রয়োজন হয়, তাহলে splice বা pop ব্যবহার করা যেতে পারে।
উদাহরণ: ডেটা মুছে ফেলা
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green'],
datasets: [{
label: 'Votes',
data: [12, 19, 3, 5],
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'],
borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)'],
borderWidth: 1
}]
},
options: {
responsive: true
}
});
// একটি ডেটা পয়েন্ট মুছে ফেলা
myChart.data.labels.splice(1, 1); // 'Blue' লেবেল মুছে ফেলা
myChart.data.datasets[0].data.splice(1, 1); // 'Blue' ডেটা পয়েন্ট মুছে ফেলা
myChart.update(); // চার্ট আপডেট করা
ব্যাখ্যা:
splice(1, 1): ১ নাম্বার ইনডেক্সে থাকা ডেটা পয়েন্ট এবং লেবেল মুছে ফেলা হয়েছে।
৪. ডেটা রিফ্রেশ এবং রেন্ডার করা (Redrawing Chart)
Chart.js-এ আপনি বিভিন্ন ইন্টারেক্টিভ ডেটা রিফ্রেশ করতে পারেন, যেমন রিয়েল-টাইম ডেটা আপডেট, যাতে গ্রাফ স্বয়ংক্রিয়ভাবে রেন্ডার হয়।
উদাহরণ: রিয়েল-টাইম ডেটা আপডেট
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March'],
datasets: [{
label: 'Temperature',
data: [22, 19, 24],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}]
},
options: {
responsive: true
}
});
// রিয়েল-টাইম ডেটা আপডেট
setInterval(function() {
myChart.data.labels.push('April'); // নতুন মাস যোগ করা
myChart.data.datasets[0].data.push(Math.floor(Math.random() * 30)); // র্যান্ডম তাপমাত্রা যোগ করা
myChart.update(); // চার্ট আপডেট করা
}, 2000); // প্রতি 2 সেকেন্ডে একবার
ব্যাখ্যা:
setInterval: প্রতি 2 সেকেন্ডে নতুন ডেটা যোগ করে চার্ট আপডেট করা হচ্ছে।
সারাংশ
Chart.js-এর Data Manipulation (ডেটা ম্যানিপুলেশন) এর মাধ্যমে আপনি ডেটার মান পরিবর্তন, নতুন ডেটা যোগ, আগের ডেটা মুছে ফেলা এবং রিয়েল-টাইম ডেটা আপডেট করতে পারেন। এটি ইন্টারেক্টিভ এবং ডাইনামিক চার্ট তৈরি করতে সহায়ক। আপনি সহজেই update() ফাংশন ব্যবহার করে চার্টকে রিফ্রেশ করে নতুন ডেটা প্রদর্শন করতে পারবেন।
Chart.js এর মাধ্যমে ডেটা পয়েন্ট অ্যাড বা রিমুভ করা একটি সাধারণ কিন্তু শক্তিশালী বৈশিষ্ট্য। এটি ডায়নামিক ডেটা সাপোর্ট করতে সহায়ক, যেমন আপনার চার্টে নতুন ডেটা যোগ করা অথবা পুরনো ডেটা মুছে ফেলা। এখানে আমরা দেখব কিভাবে ডেটা পয়েন্টগুলি অ্যাড এবং রিমুভ করা যায় Chart.js এ।
1. ডেটা পয়েন্ট অ্যাড করা (Adding Data Points)
Chart.js-এ ডেটা পয়েন্ট অ্যাড করার জন্য push() মেথড ব্যবহার করা হয়। একবার চার্ট তৈরি হয়ে গেলে, আপনি চাইলে ডেটাসেটে নতুন ডেটা পয়েন্ট যোগ করতে পারেন এবং তারপর update() মেথড ব্যবহার করে চার্টকে রিফ্রেশ করতে পারেন।
উদাহরণ: ডেটা পয়েন্ট অ্যাড করা
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March'],
datasets: [{
label: 'Sales Data',
data: [12, 19, 3],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}]
},
options: {
responsive: true
}
});
// নতুন ডেটা পয়েন্ট যোগ করা
function addData() {
// ডেটার জন্য নতুন লেবেল এবং মান
myChart.data.labels.push('April');
myChart.data.datasets[0].data.push(25);
// চার্ট আপডেট করা
myChart.update();
}
// নতুন ডেটা যোগ করা
addData();
এখানে, myChart.data.labels.push() এবং myChart.data.datasets[0].data.push() এর মাধ্যমে নতুন লেবেল এবং ডেটা পয়েন্ট অ্যাড করা হয়েছে। তারপর myChart.update() ব্যবহার করে চার্ট আপডেট করা হয়েছে।
2. ডেটা পয়েন্ট রিমুভ করা (Removing Data Points)
ডেটা পয়েন্ট রিমুভ করার জন্য, আপনি splice() মেথড ব্যবহার করতে পারেন। এটি নির্দিষ্ট ইনডেক্স থেকে ডেটা পয়েন্ট মুছে দেয় এবং তারপর চার্ট রিফ্রেশ করা হয়।
উদাহরণ: ডেটা পয়েন্ট রিমুভ করা
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March'],
datasets: [{
label: 'Sales Data',
data: [12, 19, 3],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}]
},
options: {
responsive: true
}
});
// ডেটা পয়েন্ট রিমুভ করা
function removeData() {
// প্রথম লেবেল এবং প্রথম ডেটা পয়েন্ট রিমুভ করা
myChart.data.labels.splice(0, 1);
myChart.data.datasets[0].data.splice(0, 1);
// চার্ট আপডেট করা
myChart.update();
}
// ডেটা রিমুভ করা
removeData();
এখানে, splice() ব্যবহার করে প্রথম লেবেল এবং প্রথম ডেটা পয়েন্ট মুছে ফেলা হয়েছে, এবং myChart.update() ব্যবহার করে চার্ট আপডেট করা হয়েছে।
3. ডেটা পয়েন্টের মান পরিবর্তন করা (Updating Data Points)
Chart.js-এ আপনি data[index] ব্যবহার করে ডেটা পয়েন্টের মানও পরিবর্তন করতে পারেন। এটি ব্যবহারকারীকে একই চার্টে ডেটার মান পরিবর্তন করার সুযোগ দেয়।
উদাহরণ: ডেটা পয়েন্ট আপডেট করা
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March'],
datasets: [{
label: 'Sales Data',
data: [12, 19, 3],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}]
},
options: {
responsive: true
}
});
// ডেটা পয়েন্ট আপডেট করা
function updateData() {
// মার্চ মাসের বিক্রয় মান পরিবর্তন করা
myChart.data.datasets[0].data[2] = 25; // মার্চের বিক্রয় 25 করা
// চার্ট আপডেট করা
myChart.update();
}
// ডেটা আপডেট করা
updateData();
এখানে, myChart.data.datasets[0].data[2] = 25; দিয়ে মার্চ মাসের ডেটা পরিবর্তন করা হয়েছে এবং myChart.update() দিয়ে চার্ট আপডেট করা হয়েছে।
4. Multiple Datasets এ ডেটা পয়েন্ট অ্যাড এবং রিমুভ করা
Chart.js-এ একাধিক ডেটাসেটের জন্য ডেটা পয়েন্ট অ্যাড এবং রিমুভ করা সম্ভব। আপনি একাধিক ডেটাসেটের মধ্যে ডেটা যোগ বা মুছে ফেলার জন্য সঠিক ডেটাসেটের ইনডেক্স ব্যবহার করতে পারেন।
উদাহরণ: Multiple Datasets এ ডেটা পয়েন্ট অ্যাড এবং রিমুভ
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March'],
datasets: [
{
label: 'Sales Data',
data: [12, 19, 3],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
},
{
label: 'Profit Data',
data: [5, 10, 7],
borderColor: 'rgba(255, 99, 132, 1)',
fill: false
}
]
},
options: {
responsive: true
}
});
// Sales Data তে নতুন পয়েন্ট অ্যাড করা
function addDataToSales() {
myChart.data.datasets[0].data.push(15); // নতুন ডেটা পয়েন্ট অ্যাড করা
myChart.data.labels.push('April'); // নতুন লেবেল অ্যাড করা
myChart.update();
}
// Profit Data তে পয়েন্ট রিমুভ করা
function removeDataFromProfit() {
myChart.data.datasets[1].data.splice(0, 1); // প্রথম পয়েন্ট মুছে ফেলা
myChart.data.labels.splice(0, 1); // প্রথম লেবেল মুছে ফেলা
myChart.update();
}
// ডেটা অ্যাড এবং রিমুভ করা
addDataToSales();
removeDataFromProfit();
এখানে:
myChart.data.datasets[0].data.push(15);দিয়ে Sales Data তে নতুন ডেটা পয়েন্ট যোগ করা হয়েছে।myChart.data.datasets[1].data.splice(0, 1);দিয়ে Profit Data তে প্রথম ডেটা পয়েন্ট মুছে ফেলা হয়েছে।
5. ডেটা পয়েন্ট অ্যাড/রিমুভ এবং চার্টের অ্যানিমেশন
Chart.js-এ ডেটা পয়েন্ট অ্যাড/রিমুভ করার সময় অ্যানিমেশন যোগ করা যেতে পারে, যাতে ব্যবহারকারী পরিবর্তনগুলো দেখতে পারে।
উদাহরণ: অ্যানিমেশন সহ ডেটা পয়েন্ট অ্যাড/রিমুভ
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March'],
datasets: [{
label: 'Sales Data',
data: [12, 19, 3],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}]
},
options: {
responsive: true,
animation: {
duration: 1000 // অ্যানিমেশন সময়
}
}
});
// নতুন ডেটা অ্যাড এবং অ্যানিমেশন
function addDataWithAnimation() {
myChart.data.labels.push('April');
myChart.data.datasets[0].data.push(25);
myChart.update({
duration: 1000, // অ্যানিমেশন সময়
easing: 'easeOutBounce' // অ্যানিমেশন টাইপ
});
}
// ডেটা অ্যাড করা
addDataWithAnimation();
এখানে, myChart.update() এর মাধ্যমে অ্যানিমেশন সময় কাস্টমাইজ করা হয়েছে।
সারাংশ
Chart.js এ ডেটা পয়েন্ট অ্যাড এবং রিমুভ করা একটি শক্তিশালী বৈশিষ্ট্য। আপনি push(), splice(), এবং update() মেথড ব্যবহার করে ডেটা পয়েন্ট অ্যাড বা রিমুভ করতে পারেন। এছাড়াও, আপনি multiple datasets এ ডেটা পয়েন্ট অ্যাড/রিমুভ করতে পারেন এবং অ্যানিমেশন ব্যবহার করে এই পরিবর্তনগুলো আরও ইন্টারেকটিভ করতে পারেন।
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 এর কাস্টমাইজেশন অপশনগুলির মাধ্যমে আপনি:
- একাধিক ডেটাসেটের রঙ,
- সাইড-বাই-সাইড বা স্তূপীকৃত বার,
- লাইন গ্রাফের মধ্যে তুলনা,
- বাবল চার্টের মাধ্যমে ভিন্ন ভিন্ন ডেটা পয়েন্টের তুলনা ইত্যাদি করতে পারেন।
এই কাস্টমাইজেশন গুলি আপনার ডেটার মধ্যে সম্পর্ক পরিষ্কারভাবে প্রদর্শন করতে সাহায্য করে।
Chart.js একটি শক্তিশালী লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশন তৈরি করার জন্য ব্যবহৃত হয়, এবং এর মধ্যে Data Filtering এবং Sorting এর মাধ্যমে আপনি ডেটা সহজেই পরিচালনা করতে পারেন। এই ফিচারগুলোর মাধ্যমে আপনি বড় ডেটাসেট থেকে প্রাসঙ্গিক ডেটা বাছাই করতে এবং সাজাতে পারেন, যা চার্টের পারফরম্যান্স উন্নত করতে সহায়ক।
এই গাইডে আমরা দেখব কিভাবে Chart.js-এ ডেটা ফিল্টারিং এবং সাজানো যায়।
1. Data Filtering (ডেটা ফিল্টারিং)
Data Filtering দ্বারা আপনি নির্দিষ্ট শর্ত পূরণকারী ডেটা পয়েন্টগুলিকে চার্টে প্রদর্শন করতে পারেন। এটি এমন পরিস্থিতিতে কার্যকর যখন আপনার কাছে অনেক ডেটা থাকে, কিন্তু আপনি কেবল কিছু নির্দিষ্ট ডেটা প্রদর্শন করতে চান।
উদাহরণ: ডেটা ফিল্টারিং
ধরা যাক, আমাদের কাছে একটি ডেটাসেট রয়েছে যেখানে বিক্রয়ের ডেটা রয়েছে, এবং আমরা কেবল সেই মাসের ডেটা প্রদর্শন করতে চাই যেখানে বিক্রয় ১০ এর বেশি ছিল।
const salesData = [
{ month: 'January', sales: 12 },
{ month: 'February', sales: 7 },
{ month: 'March', sales: 20 },
{ month: 'April', sales: 5 },
{ month: 'May', sales: 18 }
];
// ফিল্টারিং ফাংশন - বিক্রয় ১০ এর বেশি
const filteredData = salesData.filter(item => item.sales > 10);
// Chart.js দিয়ে চার্ট তৈরি করা
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: filteredData.map(item => item.month), // মাসের লেবেল
datasets: [{
label: 'Sales',
data: filteredData.map(item => item.sales), // বিক্রয়ের ডেটা
backgroundColor: 'rgba(75, 192, 192, 0.6)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
ব্যাখ্যা:
filter()ফাংশন ব্যবহার করে আমরা বিক্রয়ের পরিমাণ ১০ এর বেশি এমন মাসগুলো ফিল্টার করেছি।map()ব্যবহার করে ফিল্টার করা ডেটার মাস এবং বিক্রয়ের পরিমাণ চার্টে পাঠানো হয়েছে।
2. Data Sorting (ডেটা সাজানো)
Data Sorting আপনাকে ডেটাকে একটি নির্দিষ্ট ক্রমে সাজানোর সুবিধা দেয়। আপনি ডেটাকে Ascending (বৃদ্ধি) বা Descending (হ্রাস) ক্রমে সাজাতে পারেন, যা চার্টের ভিজ্যুয়াল উপস্থাপনাকে আরও স্পষ্ট এবং বোধগম্য করে তোলে।
উদাহরণ: ডেটা সাজানো
ধরা যাক, আমাদের কাছে বিক্রয়ের ডেটা রয়েছে এবং আমরা চাই মাসগুলোকে বিক্রয়ের পরিমাণের ভিত্তিতে সাজাতে।
const salesData = [
{ month: 'January', sales: 12 },
{ month: 'February', sales: 7 },
{ month: 'March', sales: 20 },
{ month: 'April', sales: 5 },
{ month: 'May', sales: 18 }
];
// ডেটা সাজানো - বিক্রয়ের পরিমাণ অনুযায়ী Descending (হ্রাস)
const sortedData = salesData.sort((a, b) => b.sales - a.sales);
// Chart.js দিয়ে চার্ট তৈরি করা
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: sortedData.map(item => item.month), // সাজানো মাসের লেবেল
datasets: [{
label: 'Sales',
data: sortedData.map(item => item.sales), // সাজানো বিক্রয়ের ডেটা
backgroundColor: 'rgba(75, 192, 192, 0.6)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
ব্যাখ্যা:
sort()ফাংশন ব্যবহার করে আমরা বিক্রয়ের পরিমাণ অনুযায়ী descending (হ্রাস) ক্রমে ডেটা সাজিয়েছি।map()ফাংশন ব্যবহার করে সাজানো ডেটা চার্টে পাঠানো হয়েছে।
3. Dynamic Filtering and Sorting (ডাইনামিক ফিল্টারিং এবং সাজানো)
আপনি যদি ইউজারের ইন্টারঅ্যাকশনের উপর ভিত্তি করে ডেটা ফিল্টারিং এবং সাজানো করতে চান, তবে আপনি HTML ইনপুট এবং কন্ট্রোল ব্যবহার করতে পারেন। উদাহরণস্বরূপ, ব্যবহারকারীকে বিক্রয়ের ডেটা সাজানোর জন্য একটি বাটন প্রদান করতে পারেন।
উদাহরণ: ডাইনামিক ফিল্টারিং এবং সাজানো
<button onclick="sortData('asc')">Sort Ascending</button>
<button onclick="sortData('desc')">Sort Descending</button>
<canvas id="myChart" width="400" height="200"></canvas>
<script>
const salesData = [
{ month: 'January', sales: 12 },
{ month: 'February', sales: 7 },
{ month: 'March', sales: 20 },
{ month: 'April', sales: 5 },
{ month: 'May', sales: 18 }
];
let currentData = [...salesData]; // Start with the original data
// Sorting Function
function sortData(order) {
currentData = currentData.sort((a, b) => {
if (order === 'asc') return a.sales - b.sales;
if (order === 'desc') return b.sales - a.sales;
});
updateChart();
}
// Chart.js Data Update Function
function updateChart() {
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: currentData.map(item => item.month),
datasets: [{
label: 'Sales',
data: currentData.map(item => item.sales),
backgroundColor: 'rgba(75, 192, 192, 0.6)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
}
updateChart(); // Initialize chart with the original data
</script>
ব্যাখ্যা:
- এখানে, ব্যবহারকারী দুইটি বাটনের মাধ্যমে ডেটা সাজানোর ক্রম নির্বাচন করতে পারবেন।
sortData()ফাংশনটি ব্যবহারকারী যে ক্রম চেয়েছে সেই অনুযায়ী ডেটা সাজায় এবং তারপরupdateChart()ফাংশনটি ব্যবহার করে চার্ট রেন্ডার করা হয়।
4. Combination of Filtering and Sorting (ফিল্টারিং এবং সাজানো একসাথে)
Chart.js-এ আপনি একই সময় ফিল্টারিং এবং সাজানো উভয়ই করতে পারেন। ধরুন, আপনি বিক্রয়ের পরিমাণ ১০ এর বেশি এমন মাসগুলোকে সাজিয়ে দেখাতে চান।
উদাহরণ: ফিল্টারিং এবং সাজানো একসাথে করা
const salesData = [
{ month: 'January', sales: 12 },
{ month: 'February', sales: 7 },
{ month: 'March', sales: 20 },
{ month: 'April', sales: 5 },
{ month: 'May', sales: 18 }
];
// ফিল্টারিং এবং সাজানো
const filteredAndSortedData = salesData
.filter(item => item.sales > 10) // বিক্রয় ১০ এর বেশি
.sort((a, b) => b.sales - a.sales); // ডেটা সাজানো (Descending)
// Chart.js দিয়ে চার্ট তৈরি করা
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: filteredAndSortedData.map(item => item.month), // মাসের লেবেল
datasets: [{
label: 'Sales',
data: filteredAndSortedData.map(item => item.sales), // বিক্রয়ের ডেটা
backgroundColor: 'rgba(75, 192, 192, 0.6)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
ব্যাখ্যা:
filter()এবংsort()একসাথে ব্যবহার করা হয়েছে যাতে প্রথমে ডেটা ফিল্টার হয় এবং পরে তা সাজানো হয়।
সারাংশ
Chart.js-এ Data Filtering এবং Sorting অত্যন্ত কার্যকরী, বিশেষ করে বড় ডেটাসেটের ক্ষেত্রে। আপনি filter() এবং sort() ফাংশন ব্যবহার করে ডেটা সহজেই ফিল্টার এবং সাজাতে পারেন। এছাড়া, ডাইনামিক ফিল্টারিং এবং সাজানোর জন্য ইউজার ইন্টারঅ্যাকশন (যেমন বাটন ক্লিক) ব্যবহার করতে পারেন। এই ফিচারগুলি Chart.js-এ ডেটার বিশ্লেষণ এবং প্রদর্শনকে আরও ইন্টার্যাকটিভ এবং কার্যকরী করে তোলে।
Chart.js এ ডেটা আপডেট এবং রি-রেন্ডারিং খুবই গুরুত্বপূর্ণ, বিশেষত যখন আপনি ডাইনামিক ডেটা বা রিয়েল-টাইম ডেটা প্রদর্শন করতে চান। Chart.js-এ ডেটা পরিবর্তন করার পর গ্রাফের আপডেট হওয়া বা রি-রেন্ডারিং খুব সহজে করা যায়, তবে কিছু best practices অনুসরণ করলে পারফরম্যান্স উন্নত করা সম্ভব।
এই গাইডে আমরা আলোচনা করবো কিভাবে Chart.js-এ ডেটা আপডেট এবং রি-রেন্ডারিং করা যায়।
1. Chart.js-এ ডেটা আপডেট করা
Chart.js-এ ডেটা আপডেট করতে সাধারণত chart.data এর মাধ্যমে ডেটা পরিবর্তন করা হয় এবং তারপর chart.update() মেথড ব্যবহার করে চার্ট পুনরায় রেন্ডার করা হয়।
উদাহরণ: ডেটা আপডেট করা
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April'],
datasets: [{
label: 'Sales',
data: [10, 20, 30, 40],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}]
},
options: {
responsive: true
}
});
// নতুন ডেটা দিয়ে আপডেট করা
function updateChartData() {
myChart.data.datasets[0].data = [15, 25, 35, 45]; // নতুন ডেটা
myChart.update(); // চার্ট পুনরায় রেন্ডার করা
}
// আপডেট করার জন্য একটি বাটন
document.getElementById('updateButton').addEventListener('click', updateChartData);
এখানে:
myChart.data.datasets[0].data: ডেটা আপডেট করা হয়েছে, যেটি 0 ইনডেক্সের ডেটাসেটের ডেটা পয়েন্ট।myChart.update(): ডেটা পরিবর্তন হওয়ার পর চার্ট রি-রেন্ডার করা হয়েছে।
2. Dynamic Data Update (ডাইনামিক ডেটা আপডেট)
যদি আপনার ডেটা রিয়েল-টাইমে পরিবর্তিত হয়, যেমন একটি লাইভ ডেটা ফিড থেকে ডেটা আসে, তাহলে আপনি chart.data আপডেট করার পর পুনরায় রেন্ডারিং করতে পারেন। এছাড়া, রেন্ডারিং প্রক্রিয়া কিছুটা অপটিমাইজ করা যায় যাতে বার বার রেন্ডার না হয়।
উদাহরণ: লাইভ ডেটা আপডেট
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April'],
datasets: [{
label: 'Live Data',
data: [10, 20, 30, 40],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}]
},
options: {
responsive: true
}
});
// লাইভ ডেটা আপডেট ফাংশন
function liveDataUpdate() {
const newData = Math.floor(Math.random() * 50); // র্যান্ডম ডেটা তৈরি
myChart.data.datasets[0].data.push(newData); // নতুন ডেটা যোগ করা
myChart.data.labels.push('New Month'); // লেবেল যোগ করা
// প্রথম লেবেলটি বাদ দেওয়া (স্লাইডিং উইন্ডো তৈরি করা)
myChart.data.datasets[0].data.shift();
myChart.data.labels.shift();
myChart.update(); // চার্ট আপডেট করা
}
// প্রতি ২ সেকেন্ড পর পর ডেটা আপডেট হবে
setInterval(liveDataUpdate, 2000);
এখানে:
myChart.data.datasets[0].data.push(newData): নতুন ডেটা যুক্ত করা হচ্ছে।myChart.data.labels.push('New Month'): নতুন লেবেল যুক্ত করা হচ্ছে।shift(): প্রথম ডেটা এবং লেবেলটি সরানো হচ্ছে, যাতে ডেটার স্লাইডিং উইন্ডো তৈরি করা যায়।myChart.update(): ডেটা আপডেট হওয়ার পর চার্ট রি-রেন্ডার হচ্ছে।
3. Chart.js এ Data Manipulation Optimization
ডেটা আপডেট করার পরে chart.update() মেথডের মাধ্যমে পুরো চার্ট পুনরায় রেন্ডার হয়, যা প্রতিবার ডেটা পরিবর্তন হওয়া সম্ভব হতে পারে। এটি পারফরম্যান্সের ওপর প্রভাব ফেলতে পারে, বিশেষ করে বড় ডেটাসেটের ক্ষেত্রে।
Chart.js-এ শুধু কিছু পরিবর্তিত অংশ রেন্ডার করার জন্য chart.update() এর অপশনাল প্যারামিটার ব্যবহার করা যেতে পারে।
উদাহরণ: পারফরম্যান্স অপটিমাইজেশন
function updateChartDataEfficiently() {
myChart.data.datasets[0].data.push(50);
myChart.update({
duration: 800, // আপডেটের জন্য সময়কাল
easing: 'easeInOutQuad', // অ্যানিমেশন প্রকার
redraw: false // শুধুমাত্র পরিবর্তিত অংশ রেন্ডার করা হবে
});
}
এখানে:
redraw: false: এটি শুধুমাত্র পরিবর্তিত অংশ রেন্ডার করে, পুরো চার্ট রি-রেন্ডার করে না, যাতে পারফরম্যান্স উন্নত হয়।durationএবংeasing: অ্যানিমেশন কাস্টমাইজ করার জন্য ব্যবহার করা হয়েছে।
4. Chart.js-এ Data Set Swap (ডেটা সেট পরিবর্তন)
Chart.js-এ আপনি একটি ডেটা সেট থেকে অন্য ডেটা সেটে পরিবর্তন করতে পারেন, বিশেষত যখন অনেক ডেটা সেট থাকে এবং তাদের মধ্যে পরিবর্তন দরকার হয়।
উদাহরণ: ডেটা সেট পরিবর্তন করা
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March'],
datasets: [{
label: 'Sales',
data: [10, 20, 30],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}]
}
});
// নতুন ডেটা সেট অ্যাড করা
function changeDataset() {
myChart.data.datasets[0].data = [15, 25, 35]; // ডেটা সেট পরিবর্তন করা
myChart.update(); // চার্ট আপডেট করা
}
// পরিবর্তন করার জন্য বাটন ইভেন্ট
document.getElementById('changeDatasetButton').addEventListener('click', changeDataset);
এখানে, myChart.data.datasets[0].data এর মাধ্যমে ডেটা সেট পরিবর্তন করা হচ্ছে এবং myChart.update() দিয়ে তা আপডেট করা হচ্ছে।
5. Using destroy() to Recreate a Chart (ডেস্ট্রয় এবং রি-ক্রীট করা)
কখনও কখনও, পুরো চার্টটি নতুনভাবে তৈরি করা প্রয়োজন হতে পারে, বিশেষ করে যখন চার্টের কাঠামো বা প্যারামিটারগুলিতে বড় ধরনের পরিবর্তন করা হয়। এই ক্ষেত্রে, destroy() মেথড ব্যবহার করে পুরানো চার্টটি ধ্বংস করে একটি নতুন চার্ট তৈরি করা যায়।
উদাহরণ: Destroy এবং Recreate Chart
function recreateChart() {
myChart.destroy(); // পুরানো চার্ট ধ্বংস করা
myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March'],
datasets: [{
label: 'New Dataset',
data: [12, 19, 3],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
}
});
}
এখানে, destroy() ব্যবহার করে পুরানো চার্ট ধ্বংস করা হয়েছে এবং তারপরে নতুন চার্ট তৈরি করা হয়েছে।
সারাংশ
Chart.js-এ ডেটা আপডেট এবং রি-রেন্ডারিং খুবই সহজ এবং কার্যকরী। আপনি chart.update(), chart.data, এবং chart.destroy() ব্যবহার করে ডাইনামিক ডেটা আপডেট এবং পুনরায় রেন্ডারিং করতে পারেন। এছাড়া, পারফরম্যান্স অপটিমাইজেশন করতে redraw: false বা duration সহ easing প্রপার্টি ব্যবহার করা যেতে পারে। এই টেকনিকগুলো ব্যবহার করে আপনি Chart.js-এ ডেটা আপডেট এবং রি-রেন্ডারিংকে আরও দ্রুত এবং কার্যকরী করে তুলতে পারেন।
Read more
