Highcharts এর এক্সপোর্ট মডিউল ব্যবহার করে আপনি আপনার তৈরি করা চার্টকে বিভিন্ন ফরম্যাটে এক্সপোর্ট করতে পারেন, যেমন PDF, PNG, JPEG, SVG, এবং CSV। এটি ডেটা ভিজুয়ালাইজেশনকে আরও কার্যকরী করে তোলে, কারণ ব্যবহারকারীরা চার্টগুলোকে তাদের প্রয়োজন অনুযায়ী এক্সপোর্ট করে ব্যবহার করতে পারেন।
GWT (Google Web Toolkit) ব্যবহার করে Highcharts এর এক্সপোর্ট মডিউল ইন্টিগ্রেট করার জন্য আপনি JavaScript Native Interface (JSNI) ব্যবহার করতে পারেন।
নিচে Highcharts এর এক্সপোর্ট মডিউল ব্যবহার করার নিয়ম এবং উদাহরণ দেয়া হলো।
১. Highcharts Exporting মডিউল সক্রিয় করা
Highcharts এ এক্সপোর্ট ফিচার ব্যবহার করতে হলে, আপনাকে প্রথমে exporting.js মডিউল যোগ করতে হবে। এই মডিউলটি Highcharts এর সাথে এক্সপোর্ট অপশন যোগ করে দেয়।
Exporting মডিউল যুক্ত করা
<script src="https://code.highcharts.com/modules/exporting.js"></script>
এটি আপনার HTML ফাইলের মধ্যে <head> ট্যাগে যুক্ত করুন। এই স্ক্রিপ্টটি Highcharts এর এক্সপোর্ট ফিচারকে সক্ষম করবে।
২. Highcharts এ এক্সপোর্ট বাটন যোগ করা
Highcharts এর এক্সপোর্ট বাটন যুক্ত করতে, আপনি exporting অপশন ব্যবহার করতে পারেন। এটি ব্যবহারকারীদের বিভিন্ন ফরম্যাটে চার্ট এক্সপোর্ট করার সুযোগ দেয়। নিচে একটি উদাহরণ দেয়া হলো:
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Sales Data'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales Data',
data: [1, 2, 3, 4, 5]
}],
exporting: {
enabled: true, // এক্সপোর্ট বাটন সক্রিয় করা
buttons: {
contextButton: {
menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadSVG']
}
}
}
});
এখানে:
- enabled: true: এক্সপোর্ট বাটন সক্রিয় করা হয়েছে।
- menuItems: এক্সপোর্ট বাটনের মাধ্যমে কোন কোন ফরম্যাটে এক্সপোর্ট হবে তা নির্ধারণ করা হয়েছে (PNG, JPEG, PDF, SVG)।
৩. Highcharts Exporting মডিউল GWT এ ইন্টিগ্রেট করা
GWT ব্যবহার করে Highcharts এর এক্সপোর্ট মডিউল ইন্টিগ্রেট করতে হলে, আপনাকে JSNI (JavaScript Native Interface) ব্যবহার করে JavaScript কোডকে GWT কোডে কল করতে হবে। নিচে GWT কোডের মাধ্যমে Highcharts এর এক্সপোর্ট ফিচার সক্রিয় করার উদাহরণ দেয়া হলো:
GWT কোডে Exporting মডিউল যুক্ত করা
public native void createChartWithExporting(JavaScriptObject chartData) /*-{
$wnd.Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Sales Data'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Sales Data',
data: chartData
}],
exporting: {
enabled: true, // এক্সপোর্ট বাটন সক্রিয় করা
buttons: {
contextButton: {
menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadSVG']
}
}
}
});
}-*/;
এখানে:
- createChartWithExporting: GWT এর মাধ্যমে Highcharts চার্ট তৈরি এবং এক্সপোর্ট অপশন যোগ করা হয়েছে।
৪. এক্সপোর্ট অপশন কাস্টমাইজ করা
Highcharts এ এক্সপোর্ট ফিচারের বিভিন্ন অপশন কাস্টমাইজ করা সম্ভব। যেমন, আপনি এক্সপোর্ট বাটনের আকার, অবস্থান, অথবা এক্সপোর্ট করা ফরম্যাটে বিশেষ কনফিগারেশন পরিবর্তন করতে পারেন।
এক্সপোর্ট বাটনের কাস্টমাইজেশন
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Custom Export Button'
},
exporting: {
enabled: true,
buttons: {
contextButton: {
text: 'Export Chart', // এক্সপোর্ট বাটনের টেক্সট
width: 100, // বাটনের আকার
symbolSize: 24, // বাটনের চিহ্নের আকার
menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF']
}
}
}
});
এখানে:
- text: এক্সপোর্ট বাটনের টেক্সট কাস্টমাইজ করা হয়েছে।
- width: বাটনের আকার কাস্টমাইজ করা হয়েছে।
- symbolSize: চিহ্নের আকার কাস্টমাইজ করা হয়েছে।
৫. Exporting মডিউল GWT এ কাস্টমাইজ করা
GWT কোডে Highcharts এর Exporting মডিউল কাস্টমাইজ করতে, JSNI ব্যবহার করে এক্সপোর্ট অপশনগুলোর ফিচার সমূহ কাস্টমাইজ করা যেতে পারে।
GWT কোডে Exporting কাস্টমাইজেশন
public native void createCustomExportingChart(JavaScriptObject chartData) /*-{
$wnd.Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Sales Data with Custom Export'
},
series: [{
name: 'Sales Data',
data: chartData
}],
exporting: {
enabled: true, // এক্সপোর্ট ফিচার সক্রিয় করা
buttons: {
contextButton: {
text: 'Export Chart',
width: 120,
symbolSize: 30,
menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF'],
onclick: function() {
alert('Exporting Chart...'); // কাস্টম এক্সপোর্ট কার্যকলাপ
}
}
}
}
});
}-*/;
এখানে:
- onclick: এক্সপোর্ট বাটনে ক্লিক করার পরে একটি কাস্টম ফাংশন চালানোর জন্য
onclickইভেন্ট ব্যবহার করা হয়েছে।
৬. Highcharts Exporting-এ ফাইল নেম কাস্টমাইজেশন
Highcharts Exporting মডিউলে আপনি এক্সপোর্ট করা ফাইলের নাম কাস্টমাইজ করতে পারেন। নিচে এর উদাহরণ দেয়া হলো:
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Sales Data with Custom File Name'
},
exporting: {
enabled: true,
filename: 'custom_chart_name', // এক্সপোর্ট করা ফাইলের নাম কাস্টমাইজ করা
buttons: {
contextButton: {
menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF']
}
}
}
});
এখানে:
- filename: এক্সপোর্ট করা ফাইলের নাম কাস্টমাইজ করা হয়েছে।
সারাংশ
Highcharts এর Exporting মডিউল ব্যবহার করে আপনি সহজেই আপনার তৈরি করা চার্টগুলো PNG, JPEG, PDF, SVG এবং অন্যান্য ফরম্যাটে এক্সপোর্ট করতে পারেন। GWT এর মাধ্যমে আপনি এই এক্সপোর্ট ফিচারগুলোকে কাস্টমাইজ করে আপনার ওয়েব অ্যাপ্লিকেশনে যোগ করতে পারেন। GWT-এ JavaScript Native Interface (JSNI) ব্যবহার করে Highcharts কোডে এক্সপোর্ট অপশন সংযুক্ত করা সম্ভব এবং এক্সপোর্ট বাটন, ফাইল নাম, স্টাইল, এবং অন্যান্য এক্সপোর্ট অপশন কাস্টমাইজ করা যেতে পারে।
Read more
