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

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-এ শেয়ার করা

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

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

2. 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 এর তৈরি করা চার্টগুলোকে ব্যবহারকারী বান্ধব এবং শেয়ারযোগ্য করে তোলে।