Chart.js এর মাধ্যমে ডেটা এক্সপোর্ট করা (CSV/Excel)

Chart.js সাধারণত ডেটা ভিজ্যুয়ালাইজেশন এবং চার্ট প্রদর্শনের জন্য ব্যবহৃত হয়, কিন্তু কখনও কখনও আপনাকে চার্টের ডেটা ব্যবহারকারীর কাছে এক্সপোর্ট করতে হতে পারে, যেমন CSV বা Excel ফরম্যাটে। এতে করে ব্যবহারকারীরা ডেটাকে নিজেরা বিশ্লেষণ করতে পারবেন বা অন্য প্ল্যাটফর্মে ব্যবহার করতে পারবেন।

Chart.js-এ সরাসরি CSV বা Excel এক্সপোর্টের কোন বিল্ট-ইন ফিচার নেই, তবে কিছু প্লাগিন এবং JavaScript এর সাহায্যে আপনি সহজেই চার্টের ডেটা CSV বা Excel ফাইল হিসেবে এক্সপোর্ট করতে পারেন।

১. CSV ফাইল এক্সপোর্ট করা

CSV (Comma-Separated Values) হল একটি সহজ ও জনপ্রিয় ফাইল ফরম্যাট, যা সাধারণত স্প্রেডশীট প্রোগ্রাম (যেমন Excel) বা ডেটাবেসের সঙ্গে কাজ করার জন্য ব্যবহৃত হয়। আমরা Chart.js এর ডেটা থেকে CSV ফাইল এক্সপোর্ট করার জন্য JavaScript ব্যবহার করতে পারি।

উদাহরণ: Chart.js ডেটা CSV ফাইলে এক্সপোর্ট করা

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
            label: 'Sales Data',
            data: [12, 19, 3, 5],
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    }
});

// CSV ফাইল এক্সপোর্ট ফাংশন
function exportCSV() {
    const rows = [];
    const labels = myChart.data.labels;
    const datasets = myChart.data.datasets;

    // Header row
    rows.push(['Label', ...labels]);

    // Data rows
    datasets.forEach(dataset => {
        rows.push([dataset.label, ...dataset.data]);
    });

    // CSV ফাইল তৈরি করা
    let csvContent = "data:text/csv;charset=utf-8," 
        + rows.map(row => row.join(",")).join("\n");

    // CSV ডাউনলোড করা
    const encodedUri = encodeURI(csvContent);
    const link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "chart_data.csv");
    link.click();
}

// CSV এক্সপোর্ট বাটন
document.getElementById('exportCSVBtn').addEventListener('click', exportCSV);

ব্যাখ্যা:

• exportCSV ফাংশনটি চার্টের ডেটা থেকে CSV ফাইল তৈরি করে।
• প্রথমে labels এবং datasets থেকে ডেটা নেওয়া হয়।
• তারপর, CSV ফাইল তৈরির জন্য rows অ্যারে তৈরি করা হয় এবং rows.join("\n") দিয়ে সেগুলো সিঙ্গেল স্ট্রিং-এ রূপান্তর করা হয়।
• encodeURI ফাংশন ব্যবহার করে CSV ডেটাকে URL এনকোড করা হয় এবং ডাউনলোড লিংক তৈরি করা হয়।

২. Excel ফাইল এক্সপোর্ট করা (xlsx)

Excel (XLSX) ফাইল এক্সপোর্টের জন্য xlsx লাইব্রেরি ব্যবহার করা যেতে পারে। এই লাইব্রেরি Chart.js এর ডেটা থেকে Excel ফাইল তৈরি করতে সাহায্য করবে।

Step 1: xlsx লাইব্রেরি ইনস্টল করা

npm install xlsx

Step 2: Excel ফাইল এক্সপোর্ট ফাংশন

import * as XLSX from 'xlsx';

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
            label: 'Sales Data',
            data: [12, 19, 3, 5],
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    }
});

// Excel ফাইল এক্সপোর্ট ফাংশন
function exportExcel() {
    const rows = [];
    const labels = myChart.data.labels;
    const datasets = myChart.data.datasets;

    // Header row
    rows.push(['Label', ...labels]);

    // Data rows
    datasets.forEach(dataset => {
        rows.push([dataset.label, ...dataset.data]);
    });

    // Excel শিট তৈরি করা
    const ws = XLSX.utils.aoa_to_sheet(rows);

    // Workbook তৈরি করা
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

    // Excel ফাইল এক্সপোর্ট করা
    XLSX.writeFile(wb, 'chart_data.xlsx');
}

// Excel এক্সপোর্ট বাটন
document.getElementById('exportExcelBtn').addEventListener('click', exportExcel);

ব্যাখ্যা:

• XLSX.utils.aoa_to_sheet(rows) এর মাধ্যমে ডেটার অ্যারে থেকে Excel শিট তৈরি করা হয়।
• XLSX.writeFile(wb, 'chart_data.xlsx') ফাংশনটি ব্যবহার করে এক্সেল ফাইল তৈরি এবং ডাউনলোড করা হয়।

৩. Exporting Data for Multiple Datasets

যদি আপনার চার্টে একাধিক ডেটাসেট থাকে, তবে CSV বা Excel ফাইলে তাদের উপস্থাপনা কিভাবে হবে তা নিশ্চিত করার জন্য আপনাকে একটু কাস্টমাইজেশন করতে হতে পারে। নীচে একটি উদাহরণ দেওয়া হলো যেখানে একাধিক ডেটাসেট এক্সপোর্ট করা হচ্ছে:

উদাহরণ: Multiple Datasets Exporting in CSV

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [
            {
                label: 'Sales',
                data: [12, 19, 3, 5],
                backgroundColor: 'rgba(75, 192, 192, 0.2)'
            },
            {
                label: 'Profit',
                data: [8, 15, 7, 10],
                backgroundColor: 'rgba(153, 102, 255, 0.2)'
            }
        ]
    }
});

// CSV Export for Multiple Datasets
function exportCSV() {
    const rows = [];
    const labels = myChart.data.labels;
    const datasets = myChart.data.datasets;

    // Header row
    const header = ['Label', ...labels];
    rows.push(header);

    // Data rows for each dataset
    datasets.forEach(dataset => {
        const row = [dataset.label, ...dataset.data];
        rows.push(row);
    });

    // Create CSV content
    let csvContent = "data:text/csv;charset=utf-8,"
        + rows.map(row => row.join(",")).join("\n");

    // Download CSV file
    const encodedUri = encodeURI(csvContent);
    const link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "chart_data_multiple_datasets.csv");
    link.click();
}

// Button to trigger CSV export
document.getElementById('exportCSVBtn').addEventListener('click', exportCSV);

ব্যাখ্যা:

• একাধিক ডেটাসেটের জন্য CSV এক্সপোর্ট ফাংশন কাস্টমাইজ করা হয়েছে।
• datasets.forEach() ব্যবহার করে প্রতিটি ডেটাসেটের জন্য একটি নতুন রো তৈরি করা হয়।
• rows.push() দিয়ে সমস্ত রো একসাথে CSV ফাইল হিসেবে তৈরি করা হয়।

সারাংশ

Chart.js দিয়ে CSV বা Excel ফাইলে ডেটা এক্সপোর্ট করা সহজ এবং কার্যকর। আপনি JavaScript এর মাধ্যমে ডেটা প্রস্তুত করে, সেটিকে CSV বা Excel ফরম্যাটে রূপান্তর করতে পারেন। এর মাধ্যমে ব্যবহারকারীরা তাদের ডেটা সহজেই ডাউনলোড করে বিশ্লেষণ করতে পারেন। xlsx এবং CSV manipulation এর মতো লাইব্রেরি ব্যবহার করে আপনি এই প্রক্রিয়াটি আরও সহজভাবে করতে পারবেন।