Chart.js এর মাধ্যমে ডেটা এক্সপোর্ট

চার্টজেএস (Chart.js) - Web Development

282

Chart.js দিয়ে ডেটা ভিজ্যুয়ালাইজ করার পর, অনেক সময় আপনি সেই ডেটা CSV বা JSON ফরম্যাটে এক্সপোর্ট করতে চাইবেন। Chart.js সরাসরি ডেটা এক্সপোর্টের জন্য বিল্ট-ইন ফিচার সরবরাহ না করলেও, কিছু সহজ পদ্ধতি এবং প্লাগিন ব্যবহার করে এই কাজটি করা সম্ভব।

এই গাইডে, আমরা দেখবো কীভাবে Chart.js এর মাধ্যমে ডেটা CSV এবং JSON ফরম্যাটে এক্সপোর্ট করা যায়।

1. CSV ফরম্যাটে ডেটা এক্সপোর্ট করা

Chart.js এ CSV এক্সপোর্ট করতে, আপনাকে JavaScript কোড ব্যবহার করে ডেটা একটি সঠিক ফরম্যাটে রূপান্তর করতে হবে এবং তারপর এটি ডাউনলোডযোগ্য ফাইল হিসেবে তৈরি করতে হবে। এখানে একটি উদাহরণ দেওয়া হলো:

উদাহরণ: CSV ফরম্যাটে ডেটা এক্সপোর্ট করা

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5],
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true
    }
});

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

    // লেবেলগুলিকে প্রথম সারিতে যুক্ত করা
    rows.push(labels.join(','));

    // প্রতিটি ডেটাসেটের জন্য ডেটা সংগ্রহ করা
    datasets.forEach((dataset) => {
        rows.push(dataset.data.join(','));
    });

    // CSV স্ট্রিং তৈরি
    const csvString = rows.join('\n');

    // CSV ডাউনলোড ফাইল তৈরি
    const blob = new Blob([csvString], { type: 'text/csv' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'chart-data.csv';
    link.click();
}

// এক্সপোর্ট CSV বাটন তৈরি
const button = document.createElement('button');
button.textContent = 'Export CSV';
button.onclick = () => exportCSV(myChart);
document.body.appendChild(button);

ব্যাখ্যা:

exportCSV() ফাংশনটি Chart.js ডেটার লেবেল এবং ডেটাসেট থেকে CSV স্ট্রিং তৈরি করে।
তারপর সেই স্ট্রিংটি একটি CSV ফাইল হিসেবে ডাউনলোড করা হয়।
একটি Export CSV বাটন ব্যবহারকারীকে CSV ফাইল ডাউনলোড করতে সাহায্য করে।

2. JSON ফরম্যাটে ডেটা এক্সপোর্ট করা

Chart.js থেকে JSON ফরম্যাটে ডেটা এক্সপোর্ট করতে খুব সহজ। আপনি Chart.js এর data অবজেক্টটি JSON ফরম্যাটে রূপান্তর করে ডাউনলোড করতে পারেন।

উদাহরণ: JSON ফরম্যাটে ডেটা এক্সপোর্ট করা

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5],
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true
    }
});

// JSON এক্সপোর্ট ফাংশন
function exportJSON(chart) {
    const chartData = chart.data;

    // JSON ফাইল তৈরি
    const blob = new Blob([JSON.stringify(chartData, null, 2)], { type: 'application/json' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'chart-data.json';
    link.click();
}

// এক্সপোর্ট JSON বাটন তৈরি
const button = document.createElement('button');
button.textContent = 'Export JSON';
button.onclick = () => exportJSON(myChart);
document.body.appendChild(button);

ব্যাখ্যা:

exportJSON() ফাংশনটি Chart.js থেকে ডেটা এক্সট্রাক্ট করে সেটি JSON ফরম্যাটে রূপান্তর করে।
তারপর সেই JSON ডেটা একটি JSON ফাইল হিসেবে ডাউনলোড করা হয়।
একটি Export JSON বাটন ব্যবহারকারীকে JSON ফাইল ডাউনলোড করতে সাহায্য করে।

3. Chart.js-এ এক্সপোর্ট প্লাগিন ব্যবহার করা

Chart.js এর জন্য একটি Chart.js Export Plugin রয়েছে, যা আপনাকে এক্সপোর্টের কাজ আরও সহজ করে দেয়। আপনি এই প্লাগিনটি ব্যবহার করে এক্সপোর্টের জন্য কোনো অতিরিক্ত কোড না লিখেও CSV বা JSON ফরম্যাটে ডেটা এক্সপোর্ট করতে পারেন।

উদাহরণ: Chart.js Export Plugin ব্যবহার করা

<!-- Import the Chart.js Export Plugin -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-export"></script>

এখানে আপনি Chart.js Export Plugin ব্যবহার করে এক্সপোর্টের কাজ করতে পারবেন।

সারাংশ

Chart.js এর মাধ্যমে CSV এবং JSON ফরম্যাটে ডেটা এক্সপোর্ট করা খুবই সহজ এবং এটি বিভিন্ন রিপোর্টিং বা ডেটা বিশ্লেষণ কাজে ব্যবহৃত হতে পারে। আপনি নিজে কোড লিখে বা Chart.js Export Plugin ব্যবহার করে এই কাজটি করতে পারেন। এই প্রক্রিয়াগুলি আপনাকে ডেটার সঠিক রপ্তানি এবং শেয়ারিং সুবিধা প্রদান করে।

Content added By

Azizar Rahman Aziz

Chart.js থেকে PNG/JPEG ফরম্যাটে চার্ট এক্সপোর্ট করা

267

Chart.js-এ আপনি সহজেই আপনার চার্টকে PNG বা JPEG ফরম্যাটে এক্সপোর্ট করতে পারেন। এটি ব্যবহারকারীদের জন্য চার্টের একটি ছবির ফাইল তৈরি করতে সহায়ক হতে পারে, যা তারা ডাউনলোড করে রাখতে বা শেয়ার করতে পারে। Chart.js এর toBase64Image() পদ্ধতি ব্যবহার করে চার্টকে PNG বা JPEG ফরম্যাটে এক্সপোর্ট করা সম্ভব।

এই গাইডে আমরা দেখবো কিভাবে PNG বা JPEG ফরম্যাটে চার্ট এক্সপোর্ট করা যায়।

1. PNG ফরম্যাটে চার্ট এক্সপোর্ট করা

Chart.js চার্টকে PNG ফরম্যাটে এক্সপোর্ট করার জন্য toBase64Image() পদ্ধতি ব্যবহার করা হয়। এই পদ্ধতি আপনাকে চার্টের একটি Base64 ইনকোডেড ইমেজ রিটার্ন করে, যা আপনি PNG ফরম্যাটে ডাউনলোড বা প্রিভিউ করতে ব্যবহার করতে পারেন।

উদাহরণ: Chart.js থেকে PNG এক্সপোর্ট করা

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Export Chart as PNG</title>
</head>
<body>
    <canvas id="myChart" width="400" height="200"></canvas>
    <button id="downloadPNG">Download as PNG</button>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5],
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // PNG Download Functionality
        document.getElementById('downloadPNG').addEventListener('click', function() {
            const imageUrl = myChart.toBase64Image(); // Convert chart to PNG
            const link = document.createElement('a'); // Create an anchor element
            link.href = imageUrl; // Set the href to the image URL
            link.download = 'chart.png'; // Set download attribute to specify filename
            link.click(); // Trigger the download
        });
    </script>
</body>
</html>

ব্যাখ্যা:

toBase64Image(): এই পদ্ধতিটি চার্টের ইমেজ হিসেবে Base64 ইনকোডেড PNG রিটার্ন করে।
download attribute: লিঙ্কের download অ্যাট্রিবিউট ব্যবহার করে আপনি ইমেজের নাম এবং ফরম্যাট নির্ধারণ করতে পারেন।
link.click(): এটি ব্যবহারকারীর জন্য ছবিটি ডাউনলোড করার প্রক্রিয়া শুরু করে।

2. JPEG ফরম্যাটে চার্ট এক্সপোর্ট করা

Chart.js এ JPEG ফরম্যাটে চার্ট এক্সপোর্ট করার জন্য toBase64Image() পদ্ধতি ব্যবহার করা যেতে পারে, তবে আপনাকে canvas.toDataURL() মেথডে MIME টাইপ পরিবর্তন করে JPEG ফরম্যাট ব্যবহার করতে হবে।

উদাহরণ: Chart.js থেকে JPEG এক্সপোর্ট করা

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Export Chart as JPEG</title>
</head>
<body>
    <canvas id="myChart" width="400" height="200"></canvas>
    <button id="downloadJPEG">Download as JPEG</button>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April'],
                datasets: [{
                    label: 'Sales Data',
                    data: [12, 19, 3, 5],
                    borderColor: 'rgba(75, 192, 192, 1)',
                    fill: false
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // JPEG Download Functionality
        document.getElementById('downloadJPEG').addEventListener('click', function() {
            const imageUrl = myChart.toBase64Image('image/jpeg'); // Convert chart to JPEG
            const link = document.createElement('a'); // Create an anchor element
            link.href = imageUrl; // Set the href to the image URL
            link.download = 'chart.jpeg'; // Set download attribute to specify filename
            link.click(); // Trigger the download
        });
    </script>
</body>
</html>

ব্যাখ্যা:

toBase64Image('image/jpeg'): এই পদ্ধতি image/jpeg MIME টাইপ প্রদান করে JPEG ফরম্যাটে চার্ট রেন্ডার করবে।
download attribute: JPEG ফাইলের নাম নির্ধারণ করার জন্য।

3. চিত্রের গুণমান কাস্টমাইজ করা

Chart.js এর মাধ্যমে JPEG ফরম্যাটে এক্সপোর্টের ক্ষেত্রে আপনি ইমেজের গুণমানও কাস্টমাইজ করতে পারেন। এটি toDataURL() পদ্ধতির দ্বিতীয় প্যারামিটার হিসেবে গুণমানের মান গ্রহণ করে (0 থেকে 1 পর্যন্ত, যেখানে 1 হলো সর্বোচ্চ গুণমান)।

উদাহরণ: JPEG এক্সপোর্টের গুণমান কাস্টমাইজ করা

const imageUrl = myChart.toBase64Image('image/jpeg', 0.7); // JPEG গুণমান 0.7

এখানে, 0.7 গুণমানের মান নির্ধারণ করছে (যেটি 0 থেকে 1 এর মধ্যে হতে পারে), যাতে চিত্রের আকার ছোট রাখা যায়।

4. চার্ট এক্সপোর্টের জন্য ডাউনলোড বাটন তৈরি করা

আপনার ওয়েব পেজে একটি ডাউনলোড বাটন যোগ করে ব্যবহারকারীদের চার্ট ইমেজ ডাউনলোড করতে দেয়ার জন্য download অ্যাট্রিবিউট ব্যবহার করা যেতে পারে। এটি একটি ব্যবহারকারী-বান্ধব পদ্ধতি।

উদাহরণ: এক্সপোর্ট বাটন দিয়ে PNG/JPEG এক্সপোর্ট

<button id="downloadChartPNG">Download PNG</button>
<button id="downloadChartJPEG">Download JPEG</button>

এবং JavaScript কোড:

document.getElementById('downloadChartPNG').addEventListener('click', function() {
    const imageUrl = myChart.toBase64Image(); // PNG এক্সপোর্ট
    const link = document.createElement('a');
    link.href = imageUrl;
    link.download = 'chart.png'; // PNG নাম
    link.click();
});

document.getElementById('downloadChartJPEG').addEventListener('click', function() {
    const imageUrl = myChart.toBase64Image('image/jpeg'); // JPEG এক্সপোর্ট
    const link = document.createElement('a');
    link.href = imageUrl;
    link.download = 'chart.jpeg'; // JPEG নাম
    link.click();
});

সারাংশ

Chart.js দিয়ে PNG এবং JPEG ফরম্যাটে চার্ট এক্সপোর্ট করা খুবই সহজ। আপনি toBase64Image() পদ্ধতি ব্যবহার করে ইমেজ তৈরি করতে পারেন এবং download অ্যাট্রিবিউট সহ একটি ডাউনলোড লিঙ্ক ব্যবহার করে ব্যবহারকারীকে চার্টের ছবি ডাউনলোড করার সুযোগ দিতে পারেন। এই পদ্ধতি বিশেষত যখন চার্ট ডেটার গ্রাফিক্স প্রয়োজন হয় এবং ব্যবহারকারীকে তা শেয়ার করতে হবে তখন খুবই কার্যকর।

Content added By

Azizar Rahman Aziz

PDF রিপোর্টে চার্ট ইনক্লুড করা

250

Chart.js-এ তৈরি করা চার্টগুলোকে PDF রিপোর্ট-এ অন্তর্ভুক্ত করার জন্য, আমরা সাধারণত চার্টটিকে একটি ইমেজ ফরম্যাটে কনভার্ট করি এবং তারপর PDF ফাইল তৈরির জন্য এটি যুক্ত করি। এই প্রক্রিয়ায় সাধারণত jsPDF লাইব্রেরি ব্যবহার করা হয়, যা ব্রাউজারে ডাইনামিকভাবে PDF ফাইল তৈরি করতে সহায়তা করে।

এখানে আমরা দেখবো কীভাবে Chart.js এর চার্টগুলোকে jsPDF ব্যবহার করে PDF রিপোর্টে অন্তর্ভুক্ত করা যায়।

1. Chart.js এর চার্ট তৈরি করা

প্রথমে, আমরা একটি সাধারণ Chart.js চার্ট তৈরি করব। এরপর, এই চার্টটিকে ইমেজে কনভার্ট করে jsPDF-এর মাধ্যমে PDF-এ ইনক্লুড করব।

উদাহরণ: Chart.js চার্ট তৈরি করা

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js in PDF Report</title>
</head>
<body>
    <h1>Chart.js in PDF</h1>
    <canvas id="myChart" width="400" height="200"></canvas>
    <button id="downloadPdf">Download PDF</button>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
    type: 'bar', // বার চার্ট
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2],
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

// Download PDF button click event
document.getElementById('downloadPdf').addEventListener('click', () => {
    const { jsPDF } = window.jspdf;
    const doc = new jsPDF();

    // Chart as an image
    const chartImage = myChart.toBase64Image();  // Chart as Base64 image

    // Add the image to PDF
    doc.addImage(chartImage, 'PNG', 10, 10, 180, 100);  // Position and size of the image

    // Add text to PDF (optional)
    doc.text('Sales Data Chart', 10, 120);

    // Save the PDF
    doc.save('report.pdf');
});

ব্যাখ্যা:

Chart.js: একটি সাধারণ বার চার্ট তৈরি করা হয়েছে যার পাঁচটি লেবেল এবং কিছু ডেটা রয়েছে।
toBase64Image(): Chart.js এর toBase64Image() ফাংশন ব্যবহার করে চার্টকে একটি Base64 Image ফরম্যাটে কনভার্ট করা হয়েছে। এটি ছবির মতো পিডিএফে যোগ করার জন্য উপযুক্ত।
jsPDF: jsPDF লাইব্রেরি ব্যবহার করে চার্ট ইমেজকে পিডিএফ-এ যোগ করা হয়েছে।
- addImage() ফাংশন ব্যবহার করে Base64 ইমেজ পিডিএফে যোগ করা হয়েছে।
- text() ফাংশন ব্যবহার করে পিডিএফে কিছু টেক্সট যোগ করা হয়েছে (যেমন, "Sales Data Chart")।
Download PDF: doc.save() ফাংশন ব্যবহার করে পিডিএফটি ডাউনলোড করা হয়।

2. Chart.js-এর চার্টের ইমেজ হিসাবে এক্সপোর্ট

Chart.js-এ তৈরি করা চার্টটি এক্সপোর্ট করতে Base64 ইমেজ ফরম্যাট ব্যবহার করা হয়। এটি ডাউনলোডের জন্য পিডিএফ-এ অথবা অন্য কোনো ইমেজ ফরম্যাটে যুক্ত করা যেতে পারে।

উদাহরণ: `toBase64Image()` ব্যবহার

// Base64 image export
const chartImage = myChart.toBase64Image();
console.log(chartImage);  // Base64 ইমেজ কনসোলে দেখাবে

এটি ইমেজকে একটি PNG ফরম্যাটে রেন্ডার করে, যা আপনি সহজেই PDF বা অন্য ফরম্যাটে সংযুক্ত করতে পারবেন।

3. PDF এ একাধিক চার্ট যোগ করা

আপনি যদি একাধিক চার্টের জন্য পিডিএফ তৈরি করতে চান, তাহলে প্রতিটি চার্টের ইমেজ আলাদা আলাদা ভাবে addImage() ফাংশন ব্যবহার করে পিডিএফে যোগ করতে পারেন।

উদাহরণ: একাধিক চার্ট ইমেজ পিডিএফে যোগ করা

document.getElementById('downloadPdf').addEventListener('click', () => {
    const { jsPDF } = window.jspdf;
    const doc = new jsPDF();

    // First chart as an image
    const chartImage1 = myChart.toBase64Image();
    doc.addImage(chartImage1, 'PNG', 10, 10, 180, 100);  // Position and size

    // Second chart (new chart)
    const myChart2 = new Chart(ctx, {
        type: 'line', // Line chart
        data: {
            labels: ['January', 'February', 'March', 'April'],
            datasets: [{
                label: 'Revenue',
                data: [50, 70, 90, 120],
                borderColor: 'rgba(255, 99, 132, 1)',
                fill: false
            }]
        }
    });

    const chartImage2 = myChart2.toBase64Image();
    doc.addImage(chartImage2, 'PNG', 10, 120, 180, 100);  // Position and size

    // Save the PDF
    doc.save('multiple_charts_report.pdf');
});

এখানে:

প্রথম চার্ট Line Chart এবং দ্বিতীয় চার্ট Bar Chart হিসেবে রেন্ডার করা হয়েছে।
প্রতিটি চার্টকে Base64 ইমেজ হিসেবে পিডিএফে যোগ করা হয়েছে।

4. Chart.js এবং jsPDF পারফরম্যান্স অপটিমাইজেশন

বড় ডেটাসেট বা জটিল চার্টগুলির জন্য jsPDF-এ চার্টের পারফরম্যান্স অপটিমাইজ করার জন্য কিছু পদক্ষেপ নেয়া যেতে পারে:

Chart Rendering Optimization: চার্টের rendering অপটিমাইজ করার জন্য গ্রিডলাইন, অ্যানিমেশন ইত্যাদি কমানো যেতে পারে।
Image Compression: ইমেজের আকার কমানোর জন্য ইমেজ compression করা যেতে পারে।
Chart Resize: চার্টের সাইজ ছোট বা বড় করে ডাউনলোড করা।

সারাংশ

Chart.js এর চার্টগুলোকে PDF রিপোর্ট-এ অন্তর্ভুক্ত করার জন্য, আমরা সাধারণত jsPDF ব্যবহার করি। প্রথমে চার্টটি Base64 ইমেজ ফরম্যাটে কনভার্ট করা হয়, এবং তারপর jsPDF-এর মাধ্যমে পিডিএফে যোগ করা হয়। এটি কেবলমাত্র Chart.js-এর চার্টই নয়, অন্যান্য গ্রাফিক্যাল বা ডেটা ভিজ্যুয়ালাইজেশন রিপোর্ট তৈরি করার জন্যও কার্যকরী।

Content added By

Azizar Rahman Aziz

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

262

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 এর মতো লাইব্রেরি ব্যবহার করে আপনি এই প্রক্রিয়াটি আরও সহজভাবে করতে পারবেন।

Content added By

Azizar Rahman Aziz

চার্ট সেভ এবং শেয়ারিং মেথড

277

Chart.js ব্যবহার করে তৈরি করা চার্টগুলি সেভ এবং শেয়ার করা অত্যন্ত কার্যকরী হতে পারে। এর মাধ্যমে আপনি চার্টকে ইমেজ, পিডিএফ, বা অন্য ফরম্যাটে সেভ করতে পারেন এবং তারপর তা শেয়ার করতে পারেন।

এই গাইডে আমরা দেখবো কিভাবে Chart.js এর তৈরি করা চার্ট সেভ এবং শেয়ার করা যায়।

1. Chart.js চার্ট সেভ করা

Chart.js এর মাধ্যমে তৈরি করা চার্টকে সেভ করার জন্য আপনি Canvas এর toDataURL() মেথড ব্যবহার করতে পারেন, যা ক্যানভাসের কনটেন্টকে ইমেজ হিসেবে বের করে এনে তা সেভ করতে সহায়ক হয়।

উদাহরণ: চার্টকে PNG বা JPEG হিসেবে সেভ করা

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
    type: 'bar', // বার চার্ট
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5],
            backgroundColor: ['red', 'blue', 'yellow', 'green'],
            borderColor: ['red', 'blue', 'yellow', 'green'],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

// Save chart as an image
function saveChart() {
    // Convert chart to image
    const imageURL = myChart.toBase64Image(); // Image URL in base64 format

    // Create a link to download the image
    const link = document.createElement('a');
    link.href = imageURL;
    link.download = 'chart.png'; // File name
    link.click(); // Trigger the download
}

ব্যাখ্যা:

myChart.toBase64Image() মেথডটি চার্টের কনটেন্টকে base64 ইমেজ ফরম্যাটে কনভার্ট করে।
তারপর, <a> ট্যাগ ব্যবহার করে একটি ডাউনলোড লিঙ্ক তৈরি করা হয় এবং link.click() ব্যবহার করে ইমেজটি ডাউনলোড করা হয়।

কাস্টম ফরম্যাট (JPEG বা PNG) সেভ করা:

const imageURL = myChart.toBase64Image("image/jpeg", 0.8); // JPEG ফরম্যাট এবং 80% কুইলিটি

এখানে, 0.8 কুইলিটি পারামিটার JPEG ইমেজের জন্য ৮০% কুইলিটি নির্দেশ করে।

2. Chart.js দিয়ে চার্ট সেভ এবং পিডিএফ হিসেবে রেন্ডার করা

আপনি jsPDF লাইব্রেরি ব্যবহার করে Chart.js চার্টকে পিডিএফ ফরম্যাটে সেভ করতে পারেন।

উদাহরণ: Chart.js চার্ট পিডিএফ হিসেবে সেভ করা

Step 1: `jsPDF` প্যাকেজ ইনস্টল করা

npm install jspdf

Step 2: পিডিএফ ফাইল তৈরি করা

import { jsPDF } from "jspdf";

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
    type: 'bar', // বার চার্ট
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5],
            backgroundColor: ['red', 'blue', 'yellow', 'green'],
            borderColor: ['red', 'blue', 'yellow', 'green'],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

// Save chart as a PDF
function saveChartAsPDF() {
    const doc = new jsPDF();
    const imgData = myChart.toBase64Image(); // Convert chart to image

    doc.addImage(imgData, 'PNG', 10, 10, 180, 160); // Add image to PDF
    doc.save('chart.pdf'); // Save as PDF
}

ব্যাখ্যা:

jsPDF লাইব্রেরি ব্যবহার করে PDF ফাইল তৈরি করা হচ্ছে।
toBase64Image() মেথড ব্যবহার করে Chart.js চার্টকে PNG ইমেজে কনভার্ট করা হচ্ছে এবং সেটি পিডিএফে addImage() ফাংশন দিয়ে যুক্ত করা হচ্ছে।
doc.save() ফাংশন ব্যবহার করে পিডিএফ ফাইলটি ডাউনলোড করা হচ্ছে।

3. Chart.js চার্ট শেয়ারিং মেথড

আপনি তৈরি করা চার্টটি শেয়ার করতে চাইলে, চার্ট ইমেজ ফাইল বা পিডিএফ ফাইলের মাধ্যমে শেয়ার করা যেতে পারে। এছাড়াও, আপনি চার্টের লিংক বা URL শেয়ার করার জন্য ইন্টারঅ্যাকটিভ ওয়েবপেজ তৈরি করতে পারেন।

উদাহরণ: Chart.js চার্ট URL-এ শেয়ার করা

Chart Image URL তৈরি করা: আপনার চার্টের ইমেজ URL তৈরি করে সেটি সোশ্যাল মিডিয়া বা অন্য কোথাও শেয়ার করা যেতে পারে।

const chartImageUrl = myChart.toBase64Image(); // Image URL in base64 format

Share via Social Media: আপনি সোশ্যাল মিডিয়া শেয়ারিং প্ল্যাটফর্ম ব্যবহার করে এই ইমেজ শেয়ার করতে পারেন (যেমন ফেসবুক, টুইটার ইত্যাদি)।

<a href="https://www.facebook.com/sharer/sharer.php?u=<URL>"
   target="_blank">
   Share Chart on Facebook
</a>

এখানে, <URL> আপনার চার্টের ইমেজ বা পিডিএফ ফাইলের লিংক হতে পারে।

4. Interactive Chart with Share Button

আপনি ওয়েবপেজে একটি শেয়ার বাটন যোগ করে Chart.js চার্টের সাথে ইন্টারঅ্যাকটিভিটি যোগ করতে পারেন।

<button onclick="saveChart()">Download Chart</button>
<button onclick="saveChartAsPDF()">Download as PDF</button>

এখানে দুটি বাটন রয়েছে: একটি Chart Image ডাউনলোড করার জন্য এবং অন্যটি PDF ডাউনলোড করার জন্য।

সারাংশ

Chart.js এর সাথে চার্ট সেভ এবং শেয়ারিং মেথড খুবই সহজ। আপনি Canvas এর toDataURL() বা jsPDF লাইব্রেরি ব্যবহার করে চার্টকে PNG, JPEG, বা পিডিএফ ফরম্যাটে সেভ করতে পারেন। শেয়ারিংয়ের জন্য, আপনি চার্টের ইমেজ লিংক বা পিডিএফ ফাইলের মাধ্যমে সোশ্যাল মিডিয়ায় শেয়ার করতে পারেন। এই সব পদ্ধতি Chart.js এর তৈরি করা চার্টগুলোকে ব্যবহারকারী বান্ধব এবং শেয়ারযোগ্য করে তোলে।

Content added By

Azizar Rahman Aziz

Chart.js এর পরিচিতি Chart.js সেটআপ এবং ইনস্টলেশন Chart.js এর বেসিক কনফিগারেশন Chart.js এর বিভিন্ন ধরনের চার্ট Chart.js এর অ্যাডভান্সড কনফিগারেশন

Chart.js এর মাধ্যমে ডেটা এক্সপোর্ট

1. CSV ফরম্যাটে ডেটা এক্সপোর্ট করা

উদাহরণ: CSV ফরম্যাটে ডেটা এক্সপোর্ট করা

2. JSON ফরম্যাটে ডেটা এক্সপোর্ট করা

উদাহরণ: JSON ফরম্যাটে ডেটা এক্সপোর্ট করা

3. Chart.js-এ এক্সপোর্ট প্লাগিন ব্যবহার করা

উদাহরণ: Chart.js Export Plugin ব্যবহার করা

সারাংশ

Chart.js থেকে PNG/JPEG ফরম্যাটে চার্ট এক্সপোর্ট করা

1. PNG ফরম্যাটে চার্ট এক্সপোর্ট করা

উদাহরণ: Chart.js থেকে PNG এক্সপোর্ট করা

ব্যাখ্যা:

2. JPEG ফরম্যাটে চার্ট এক্সপোর্ট করা

উদাহরণ: Chart.js থেকে JPEG এক্সপোর্ট করা

ব্যাখ্যা:

3. চিত্রের গুণমান কাস্টমাইজ করা

উদাহরণ: JPEG এক্সপোর্টের গুণমান কাস্টমাইজ করা

4. চার্ট এক্সপোর্টের জন্য ডাউনলোড বাটন তৈরি করা

উদাহরণ: এক্সপোর্ট বাটন দিয়ে PNG/JPEG এক্সপোর্ট

সারাংশ

PDF রিপোর্টে চার্ট ইনক্লুড করা

1. Chart.js এর চার্ট তৈরি করা

উদাহরণ: Chart.js চার্ট তৈরি করা

ব্যাখ্যা:

2. Chart.js-এর চার্টের ইমেজ হিসাবে এক্সপোর্ট

উদাহরণ: toBase64Image() ব্যবহার

3. PDF এ একাধিক চার্ট যোগ করা

উদাহরণ: একাধিক চার্ট ইমেজ পিডিএফে যোগ করা

4. Chart.js এবং jsPDF পারফরম্যান্স অপটিমাইজেশন

সারাংশ

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

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

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

ব্যাখ্যা:

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

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

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

ব্যাখ্যা:

৩. Exporting Data for Multiple Datasets

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

ব্যাখ্যা:

সারাংশ

চার্ট সেভ এবং শেয়ারিং মেথড

1. Chart.js চার্ট সেভ করা

উদাহরণ: চার্টকে PNG বা JPEG হিসেবে সেভ করা

কাস্টম ফরম্যাট (JPEG বা PNG) সেভ করা:

2. Chart.js দিয়ে চার্ট সেভ এবং পিডিএফ হিসেবে রেন্ডার করা

উদাহরণ: Chart.js চার্ট পিডিএফ হিসেবে সেভ করা

Step 1: jsPDF প্যাকেজ ইনস্টল করা

Step 2: পিডিএফ ফাইল তৈরি করা

3. Chart.js চার্ট শেয়ারিং মেথড

উদাহরণ: Chart.js চার্ট URL-এ শেয়ার করা

4. Interactive Chart with Share Button

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!

উদাহরণ: `toBase64Image()` ব্যবহার

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

Step 1: `jsPDF` প্যাকেজ ইনস্টল করা