Highcharts লাইব্রেরি ব্যবহার করে GWT অ্যাপ্লিকেশনে একটি সিম্পল লাইন চার্ট তৈরি করা সম্ভব। নিচে পুরো প্রক্রিয়াটি ধাপে ধাপে ব্যাখ্যা করা হয়েছে।
প্রয়োজনীয় ফাইল এবং সেটআপ
Highcharts লাইব্রেরি যুক্ত করা: প্রথমে, আপনার GWT প্রকল্পে Highcharts লাইব্রেরি যুক্ত করতে হবে। আপনি Highcharts এর ফাইলটি ডাউনলোড করে আপনার প্রজেক্টে অন্তর্ভুক্ত করতে পারেন অথবা CDN ব্যবহার করতে পারেন।
যদি আপনি CDN ব্যবহার করেন, তাহলে আপনার
index.htmlবা GWT অ্যাপ্লিকেশনের HTML ফাইলে এই স্ক্রিপ্টটি যুক্ত করুন:<script src="https://code.highcharts.com/highcharts.js"></script>- GWT Java কোডে Highcharts ব্যবহার করা: GWT অ্যাপ্লিকেশনে Highcharts ব্যবহারের জন্য
JavaScript Native Interface(JSNI) বাJsInteropব্যবহার করতে হবে। এখানে আমরা JSNI পদ্ধতিতে Highcharts লাইব্রেরি ব্যবহার করব।
Step-by-Step: Simple Line Chart তৈরি করা
GWT ক্লাস তৈরি করা: প্রথমে একটি GWT ক্লাস তৈরি করুন, যেখানে আপনি Highcharts লাইব্রেরির কোড ব্যবহার করবেন। এই ক্লাসটি
JavaScript Native Interface(JSNI) পদ্ধতি ব্যবহার করবে।package com.mycompany.myproject.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.core.client.JsArray; import com.google.gwt.user.client.ui.RootPanel; public class HighchartsExample implements EntryPoint { public native void createLineChart() /*-{ $wnd.Highcharts.chart('container', { chart: { type: 'line' // লাইন চার্ট }, title: { text: 'Sample Line Chart' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] }, yAxis: { title: { text: 'Values' } }, series: [{ name: 'Sample Data', data: [1, 2, 3, 4, 5] }] }); }-*/; @Override public void onModuleLoad() { // HTML ফাইলে container নামে একটি div থাকবে যেখানে চার্টটি রেন্ডার হবে createLineChart(); } }HTML ফাইল তৈরি করা: GWT অ্যাপ্লিকেশন চালানোর জন্য একটি HTML ফাইল তৈরি করতে হবে যেখানে Highcharts চার্টটি প্রদর্শিত হবে। এই HTML ফাইলের মধ্যে একটি ডিভ (DIV) থাকবে যার মধ্যে লাইন চার্টটি রেন্ডার হবে।
উদাহরণস্বরূপ,
index.htmlফাইলে এই কোডটি লিখুন:<html> <head> <script src="https://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div> <script type="text/javascript" src="myproject.js"></script> </body> </html>এখানে
containerডিভটি হলো সেই জায়গা যেখানে Highcharts লাইন চার্ট রেন্ডার হবে।GWT কোড কম্পাইল এবং রান করা: সবকিছু প্রস্তুত হলে, GWT অ্যাপ্লিকেশনটি কম্পাইল করুন এবং রান করুন। GWT প্রকল্পে
gwt compileকমান্ড ব্যবহার করে কম্পাইল করুন এবং তারপরgwt runকমান্ড দিয়ে অ্যাপ্লিকেশনটি রান করুন।gwt compile gwt run
ফলাফল:
এই প্রক্রিয়া অনুসরণ করার পর, আপনার ব্রাউজারে একটি সিম্পল লাইন চার্ট প্রদর্শিত হবে যার X-অক্ষের মধ্যে মাসের নাম (যেমন জানুয়ারি, ফেব্রুয়ারি, মার্চ ইত্যাদি) এবং Y-অক্ষের মধ্যে কিছু মান (যেমন 1, 2, 3, 4, 5) থাকবে। এই চার্টটি Highcharts লাইব্রেরি ব্যবহার করে GWT অ্যাপ্লিকেশন থেকে তৈরি করা হয়েছে।
সারাংশ
এভাবে, GWT এবং Highcharts ব্যবহার করে একটি সিম্পল লাইন চার্ট তৈরি করা সম্ভব। GWT এর মাধ্যমে আপনি Java কোড ব্যবহার করে Highcharts এর JavaScript ফাংশনালিটি কার্যকর করতে পারেন, যা ইন্টারঅ্যাকটিভ ডেটা ভিজুয়ালাইজেশন তৈরি করতে সাহায্য করে।
Read more
