Google Charts API এর মাধ্যমে GWT (Google Web Toolkit) ব্যবহার করে আপনি ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন এবং সেগুলিকে প্রিন্ট বা প্রেজেন্টেশন হিসেবে রেন্ডারও করতে পারেন। যখন আপনি চার্ট তৈরি করেন, তখন এটি সাধারণত একটি ওয়েব অ্যাপ্লিকেশনে প্রদর্শিত হয়, কিন্তু কখনও কখনও আপনি চাইবেন যে সেই চার্টগুলি কাস্টম আউটপুট (যেমন PDF বা PPT) হিসেবে প্রিন্ট বা প্রেজেন্টেশনের অংশ হিসেবে ব্যবহৃত হোক।
এই টিউটোরিয়ালে আমরা আলোচনা করব কীভাবে চার্ট প্রিন্টিং এবং প্রেজেন্টেশন তৈরি করা যায় GWT এবং Google Charts ব্যবহার করে।
Chart Printing (চার্ট প্রিন্টিং)
Chart Printing হচ্ছে সেই প্রক্রিয়া যেখানে তৈরি করা চার্টটি একটি প্রিন্টেবল ফরম্যাটে আউটপুট করা হয়, যেমন: PDF, PNG বা JPEG ইত্যাদি ফরম্যাটে। Google Charts API সরাসরি প্রিন্টিং সাপোর্ট না করলেও, HTML5 canvas বা Google Visualization API এর মাধ্যমে এই কাজটি করা যেতে পারে।
১. Chart Image Download (PNG/JPEG)
Google Charts API দিয়ে আপনি তৈরি করা চার্টটি একটি ইমেজ (যেমন PNG বা JPEG) হিসেবে ডাউনলোড করতে পারেন, যা প্রিন্ট করার জন্য ব্যবহার করা যাবে।
উদাহরণ: চার্ট ইমেজ ডাউনলোড করা
public class ChartPrintingExample {
public native void printChartAsImage() /*-{
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);
// Capture the chart as an image (PNG format)
var imgUri = chart.getImageURI();
console.log(imgUri); // Image URI that can be used to download or print
}-*/;
}
এখানে, chart.getImageURI() ব্যবহার করে Google Charts API থেকে চার্টের একটি image URI বের করা হয়েছে, যা আপনি PNG ফরম্যাটে ডাউনলোড বা প্রিন্ট করতে ব্যবহার করতে পারেন।
২. HTML5 Canvas দিয়ে প্রিন্টিং
আপনি HTML5 canvas ব্যবহার করে চার্টকে ইমেজ আউটপুট করতে পারেন এবং সেটি প্রিন্ট বা PDF হিসেবে রেন্ডার করতে পারেন।
public native void printChartWithCanvas() /*-{
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);
// Use HTML5 canvas to capture chart and print it
var canvas = $doc.createElement('canvas');
var context = canvas.getContext('2d');
chart.getImageURI(); // Capture chart as image URI
var img = new Image();
img.src = chart.getImageURI();
context.drawImage(img, 0, 0);
// Print the canvas content (chart)
var printWindow = $wnd.open('', '_blank');
printWindow.document.write('<img src="' + img.src + '">');
printWindow.document.close();
printWindow.print();
}-*/;
এখানে, HTML5 canvas ব্যবহার করে তৈরি করা চার্টের একটি ইমেজ প্রিন্ট করা হয়েছে। canvas.getContext('2d') দিয়ে চার্টের ইমেজ তৈরি করা হয়েছে এবং সেটি প্রিন্ট করা হয়েছে।
Presentation Creation (প্রেজেন্টেশন তৈরি)
Google Charts ব্যবহার করে আপনি তৈরি করা চার্টগুলিকে একটি Presentation হিসেবে তৈরি করতে পারেন, যেমন Google Slides বা PowerPoint (PPT) ফাইল।
১. Google Slides API ব্যবহার করে প্রেজেন্টেশন তৈরি
Google Slides API ব্যবহার করে আপনি Google Slides এ চার্টগুলো অন্তর্ভুক্ত করতে পারেন। GWT ব্যবহার করে Google Slides API এর মাধ্যমে একটি প্রেজেন্টেশন তৈরি এবং চার্ট যোগ করা সম্ভব। যদিও GWT সরাসরি Google Slides API এর সাথে কাজ করে না, তবে আপনি Google Slides API ব্যবহার করে এটি করতে পারবেন।
উদাহরণ: Google Slides API ব্যবহার করে Chart যুক্ত করা
public class PresentationExample {
public native void createGoogleSlidesPresentation() /*-{
var slides = $wnd.gapi.client.slides.presentations.create({
title: "My Chart Presentation"
});
// Add a new slide and add a chart to it
var slide = slides.replies[0];
var chart = new $wnd.google.visualization.ColumnChart($doc.getElementById('chart_div'));
chart.draw(data, options);
// Here, Google Slides API will allow you to add the chart to the presentation
}-*/;
}
এখানে Google Slides API ব্যবহার করে একটি নতুন Google Slides প্রেজেন্টেশন তৈরি করা হচ্ছে এবং চার্টটি সেই প্রেজেন্টেশনে যুক্ত করা হচ্ছে।
২. PowerPoint (PPT) তৈরি করা
PowerPoint (PPT) ফাইল তৈরি করা কিছুটা জটিল হতে পারে, তবে আপনি JavaScript এবং Office API ব্যবহার করে GWT প্রজেক্টে এটি এক্সপোর্ট করতে পারেন। বিভিন্ন third-party libraries যেমন PptxGenJS ব্যবহার করে আপনি GWT অ্যাপ্লিকেশনের জন্য PowerPoint ফাইল তৈরি করতে পারবেন।
সারাংশ
Chart Printing এবং Presentation Creation GWT এবং Google Charts এর মাধ্যমে সহজে এবং কার্যকরীভাবে করা সম্ভব। Chart Printing ব্যবহার করে আপনি তৈরি করা চার্টকে ইমেজ হিসেবে ডাউনলোড বা প্রিন্ট করতে পারেন, এবং Google Slides API বা third-party libraries ব্যবহার করে PowerPoint বা Google Slides প্রেজেন্টেশন তৈরি করতে পারেন। এই ফিচারগুলি ব্যবহারকারীকে তাদের ডেটা ভিজ্যুয়ালাইজেশনগুলো শেয়ার করতে এবং প্রিন্ট আউট নেওয়ার সুযোগ প্রদান করে।
Read more