Web Development Chart.js এর মাধ্যমে Data Filtering এবং Sorting গাইড ও নোট

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-এ ডেটার বিশ্লেষণ এবং প্রদর্শনকে আরও ইন্টার‌্যাকটিভ এবং কার্যকরী করে তোলে।