Chart Exporting (PNG, PDF) কনফিগার করা

Chart Exporting হল একটি কার্যকরী ফিচার, যা ব্যবহারকারীদের জন্য চার্ট ডাউনলোড বা শেয়ার করার সুযোগ প্রদান করে। PNG এবং PDF ফরম্যাটে চার্ট এক্সপোর্ট করা জনপ্রিয় একটি অপশন, যা বিশেষত রিপোর্ট বা পেশাগত প্রেজেন্টেশনের জন্য ব্যবহার করা হয়। Google Charts API-তে GWT (Google Web Toolkit) ব্যবহার করে সহজেই Chart Exporting ফিচার ইন্টিগ্রেট করা যেতে পারে।

এই টিউটোরিয়ালে আমরা আলোচনা করব কিভাবে PNG এবং PDF ফরম্যাটে চার্ট এক্সপোর্ট করার জন্য Google Charts API ব্যবহার করা যায় এবং কীভাবে GWT এর মাধ্যমে এটি ইন্টিগ্রেট করা যায়।

Google Charts এ Chart Exporting কনফিগার করা

১. Google Charts API লোড করা

প্রথমে, Google Charts API লোড করতে হবে। JSNI (JavaScript Native Interface) ব্যবহার করে GWT এ Google Charts API লোড করা হয়।

public class ChartExportExample {
    public native void loadGoogleCharts() /*-{
        $wnd.google.charts.load('current', {
            packages: ['corechart', 'imagechart']
        });
    }-*/;
}

এখানে packages: ['corechart', 'imagechart'] দিয়ে Google Charts এবং ImageChart প্যাকেজ লোড করা হয়েছে, যা চার্ট এক্সপোর্টিং ফিচারটি সমর্থন করে।

২. Chart Exporting এর জন্য Export Button তৈরি করা

Google Charts API সরাসরি PNG এবং PDF এক্সপোর্ট করার জন্য কোনো ইন্টারফেস সরবরাহ করে না, তবে আপনি Export Button যুক্ত করে চার্টটি নির্দিষ্ট ফরম্যাটে এক্সপোর্ট করতে পারেন। এই ফিচারটি তৈরি করতে, আপনি Google Charts-এর getImageURI ফাংশন ব্যবহার করতে পারেন যা চার্টের চিত্রের URI তৈরি করে এবং তারপর সেটিকে PNG বা PDF ফরম্যাটে এক্সপোর্ট করে।

উদাহরণ: PNG এক্সপোর্ট

public class ChartExportExample {
    public native void drawChartWithExport() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Sales'],
            ['2013', 1000],
            ['2014', 1170],
            ['2015', 1250],
            ['2016', 1530]
        ]);

        var options = {
            title: 'Company Sales Performance',
            hAxis: { title: 'Year' },
            vAxis: { title: 'Sales ($)' }
        };

        var chart = new $wnd.google.visualization.ColumnChart($doc.getElementById('chart_div'));
        chart.draw(data, options);

        // Export as PNG
        var imageURI = chart.getImageURI();
        $doc.getElementById('download_button').onclick = function() {
            var link = $doc.createElement('a');
            link.href = imageURI;
            link.download = 'chart.png';
            link.click();
        };
    }-*/;
}

এখানে:

• getImageURI ফাংশন ব্যবহার করা হয়েছে, যা চার্টের PNG ইমেজ URI তৈরি করে।
• download_button নামে একটি HTML বাটন তৈরি করা হয়েছে, যা ক্লিক করলে PNG ফরম্যাটে চার্ট ডাউনলোড হবে।

HTML:

<div id="chart_div" style="width: 900px; height: 500px;"></div>
<button id="download_button">Download PNG</button>

এখানে Download PNG বাটনে ক্লিক করলে চার্ট PNG ফরম্যাটে ডাউনলোড হবে।

৩. PDF এক্সপোর্ট

Google Charts API সরাসরি PDF এক্সপোর্ট করার জন্য কোনো ফাংশন সরবরাহ করে না, তবে আপনি PNG এক্সপোর্ট ফিচার ব্যবহার করে একটি ইমেজ ফাইল তৈরি করে তারপর সেই ইমেজটি PDF ফরম্যাটে কনভার্ট করতে পারেন। এটি করার জন্য আপনি JavaScript লাইব্রেরি যেমন jsPDF ব্যবহার করতে পারেন।

উদাহরণ: PDF এক্সপোর্ট

public class ChartExportExample {
    public native void drawChartWithExportToPDF() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Sales'],
            ['2013', 1000],
            ['2014', 1170],
            ['2015', 1250],
            ['2016', 1530]
        ]);

        var options = {
            title: 'Company Sales Performance',
            hAxis: { title: 'Year' },
            vAxis: { title: 'Sales ($)' }
        };

        var chart = new $wnd.google.visualization.ColumnChart($doc.getElementById('chart_div'));
        chart.draw(data, options);

        // Export as PNG
        var imageURI = chart.getImageURI();

        // Use jsPDF to convert PNG to PDF
        $doc.getElementById('download_pdf_button').onclick = function() {
            var doc = new $wnd.jspdf.jsPDF();
            doc.addImage(imageURI, 'PNG', 10, 10, 180, 160);
            doc.save('chart.pdf');
        };
    }-*/;
}

এখানে, jsPDF লাইব্রেরি ব্যবহার করে PNG ইমেজকে PDF ফরম্যাটে রূপান্তর করা হয়েছে এবং download_pdf_button এর মাধ্যমে PDF ফরম্যাটে ডাউনলোড করা যাচ্ছে।

HTML:

<div id="chart_div" style="width: 900px; height: 500px;"></div>
<button id="download_pdf_button">Download PDF</button>

এখানে Download PDF বাটনে ক্লিক করলে চার্ট PDF ফরম্যাটে ডাউনলোড হবে।

৪. কাস্টম লেবেল এবং ইন্টারফেস কাস্টমাইজেশন

Chart Exporting এর জন্য ইন্টারফেস কাস্টমাইজ করা খুবই গুরুত্বপূর্ণ। আপনি চাইলে চার্টের টাইটেল, লেবেল, এনিমেশন ইত্যাদি কাস্টমাইজ করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।

উদাহরণ: কাস্টম টাইটেল

var options = {
    title: 'Custom Chart Title',
    hAxis: { title: 'Year' },
    vAxis: { title: 'Sales ($)' },
    titleTextStyle: { color: '#ff0000', fontSize: 20 }
};

এখানে, titleTextStyle ব্যবহার করে টাইটেলের রঙ এবং ফন্ট সাইজ কাস্টমাইজ করা হয়েছে।

Chart Exporting এর সুবিধা

১. ইউজার ফ্রেন্ডলি এক্সপোর্ট অপশন

Google Charts-এ PNG এবং PDF এক্সপোর্ট অপশন যুক্ত করে, ব্যবহারকারীরা সহজেই চার্টের ডেটা ডাউনলোড করতে এবং শেয়ার করতে পারেন। এটি তাদের জন্য খুবই সুবিধাজনক, বিশেষত যখন তাদের রিপোর্ট বা প্রেজেন্টেশন তৈরি করতে হয়।

২. ইন্টারেকটিভ চার্ট

Chart Exporting ফিচারটি ব্যবহারের মাধ্যমে আপনি একটি ইন্টারেকটিভ চার্ট তৈরি করতে পারেন, যেখানে ব্যবহারকারী তাদের প্রয়োজনীয় ডেটা এক্সপোর্ট করতে পারবেন, যা তাদের ডেটা বিশ্লেষণে সহায়ক হবে।

৩. পেশাগত প্রেজেন্টেশন তৈরি করা

PNG এবং PDF এক্সপোর্টের মাধ্যমে আপনি পেশাগত রিপোর্ট তৈরি করতে পারেন, যা কেবলমাত্র চার্টের ডেটা প্রদর্শন করে না, বরং সেই ডেটার বিশ্লেষণ এবং বিস্তারিত তথ্য প্রদান করতে সহায়ক।

সারাংশ

Google Charts API এবং GWT এর মাধ্যমে Chart Exporting ফিচার যেমন PNG এবং PDF তৈরি করা খুবই সহজ। getImageURI ফাংশন ব্যবহার করে PNG ফরম্যাটে এক্সপোর্ট করা যায় এবং jsPDF লাইব্রেরি ব্যবহার করে আপনি চার্টকে PDF ফরম্যাটে রূপান্তর করতে পারেন। Chart Exporting ফিচারটি ব্যবহারকারীদের জন্য একটি সহজ এবং কার্যকরী উপায় ডেটা শেয়ার বা ডাউনলোড করার জন্য। GWT এবং Google Charts ইন্টিগ্রেট করে আপনি এই ফিচারটি সহজেই আপনার অ্যাপ্লিকেশনে যোগ করতে পারেন।