GWT (Google Web Toolkit) এর মাধ্যমে Highcharts ব্যবহার করে আপনি সহজেই ইন্টারঅ্যাকটিভ এবং কাস্টমাইজযোগ্য Bar Chart এবং Pie Chart তৈরি করতে পারেন। এখানে আমরা দেখব কীভাবে GWT প্রজেক্টে Highcharts ইন্টিগ্রেট করে Bar Chart এবং Pie Chart তৈরি করা যায়।
GWT প্রজেক্টে Highcharts ইনটিগ্রেট করা
প্রথমে, আপনাকে GWT প্রজেক্টে Highcharts লাইব্রেরি যোগ করতে হবে। Highcharts JavaScript লাইব্রেরি ব্যবহার করতে হলে আপনাকে GWT Highcharts বা JsInterop ব্যবহার করতে হবে।
1. Highcharts লাইব্রেরি যোগ করা
Highcharts ব্যবহার করার জন্য আপনাকে Highcharts.js ফাইলটি আপনার প্রজেক্টে যুক্ত করতে হবে। সাধারণভাবে, আপনি এই ফাইলটি CDN থেকে লোড করতে পারেন অথবা সরাসরি ডাউনলোড করে আপনার প্রজেক্টের মধ্যে রাখতে পারেন।
উদাহরণস্বরূপ, GWT এর HTML ফাইলে নিচের কোডটি যুক্ত করুন:
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
GWT প্রজেক্টে Bar Chart তৈরি করা
Bar Chart তৈরির জন্য আপনাকে Highcharts লাইব্রেরির bar টাইপ ব্যবহার করতে হবে। GWT এর মাধ্যমে এই গ্রাফ তৈরি করতে JsInterop ব্যবহার করা হয়। নিচে একটি উদাহরণ দেওয়া হল:
1. GWT Java কোডে Bar Chart তৈরি
public class GWTHighchartsExample implements EntryPoint {
public void onModuleLoad() {
// Highcharts Bar Chart Data
String chartData = "Highcharts.chart('container', {"
+ "chart: { type: 'bar' },"
+ "title: { text: 'Monthly Average Temperature' },"
+ "xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] },"
+ "yAxis: { title: { text: 'Temperature (°C)' } },"
+ "series: [{"
+ "name: 'Tokyo',"
+ "data: [7.0, 6.9, 9.5, 14.5, 18.2]"
+ "}, {"
+ "name: 'London',"
+ "data: [3.9, 4.2, 5.7, 8.5, 11.9]"
+ "}]"
+ "});";
// Injecting Highcharts script
RootPanel.get().getElement().setInnerHTML("<div id='container'></div>");
injectHighchartsScript(chartData);
}
private native void injectHighchartsScript(String chartData) /*-{
$wnd.eval(chartData);
}-*/;
}
2. Bar Chart দেখানো
এই কোডের মাধ্যমে আপনি GWT অ্যাপ্লিকেশন থেকে Highcharts এর bar চার্ট রেন্ডার করতে পারবেন। এখানে chartData স্ট্রিং-এ আপনার Bar Chart এর কনফিগারেশন এবং ডেটা রয়েছে। RootPanel ব্যবহার করে HTML ডিভে container আইডি সেট করে চার্টটি প্রদর্শিত হবে।
GWT প্রজেক্টে Pie Chart তৈরি করা
Pie Chart তৈরি করতে Highcharts লাইব্রেরিতে pie টাইপ ব্যবহার করা হয়। GWT এর মাধ্যমে এটি তৈরি করার জন্য নিচের কোডটি দেখুন:
1. GWT Java কোডে Pie Chart তৈরি
public class GWTHighchartsExample implements EntryPoint {
public void onModuleLoad() {
// Highcharts Pie Chart Data
String chartData = "Highcharts.chart('container', {"
+ "chart: { type: 'pie' },"
+ "title: { text: 'Browser market shares in January, 2018' },"
+ "series: [{"
+ "name: 'Browsers',"
+ "data: ["
+ "{ name: 'Chrome', y: 61.41 },"
+ "{ name: 'Safari', y: 15.84 },"
+ "{ name: 'Firefox', y: 11.61 },"
+ "{ name: 'Edge', y: 4.47 },"
+ "{ name: 'Internet Explorer', y: 2.54 }"
+ "]"
+ "}]"
+ "});";
// Injecting Highcharts script
RootPanel.get().getElement().setInnerHTML("<div id='container'></div>");
injectHighchartsScript(chartData);
}
private native void injectHighchartsScript(String chartData) /*-{
$wnd.eval(chartData);
}-*/;
}
2. Pie Chart দেখানো
এই কোডের মাধ্যমে GWT অ্যাপ্লিকেশন থেকে Highcharts এর pie চার্ট রেন্ডার করা যাবে। এখানে chartData স্ট্রিং-এ আপনার Pie Chart এর কনফিগারেশন এবং ডেটা দেওয়া হয়েছে। RootPanel ব্যবহার করে HTML ডিভে container আইডি সেট করে চার্টটি প্রদর্শিত হবে।
সারাংশ
GWT এবং Highcharts ব্যবহার করে আপনি সহজেই ওয়েব অ্যাপ্লিকেশন বা ড্যাশবোর্ডে Bar Chart এবং Pie Chart তৈরি করতে পারেন। GWT এর মাধ্যমে Java কোডে Highcharts এর JavaScript লাইব্রেরি ব্যবহার করা যায়, যা আপনার ওয়েব অ্যাপ্লিকেশনকে ইন্টারঅ্যাকটিভ ডেটা ভিজুয়ালাইজেশন প্রদর্শনের ক্ষমতা প্রদান করে। Highcharts এর কাস্টমাইজেশন এবং ইন্টারঅ্যাকটিভ ফিচার আপনাকে আরও উন্নত চার্ট তৈরি করতে সাহায্য করে।
