Data Points অ্যাড এবং রিমুভ করা

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 এ ডেটা পয়েন্ট অ্যাড/রিমুভ করতে পারেন এবং অ্যানিমেশন ব্যবহার করে এই পরিবর্তনগুলো আরও ইন্টারেকটিভ করতে পারেন।