GWT এর মাধ্যমে Highcharts ইনস্ট্যান্স তৈরি করা

GWT (Google Web Toolkit) এবং Highcharts একসাথে ব্যবহার করে আপনি সহজেই ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে পারেন। Highcharts একটি জনপ্রিয় JavaScript লাইব্রেরি, যা GWT এর মাধ্যমে ইন্টিগ্রেট করে ব্যবহার করা যায়। GWT এর মাধ্যমে Java কোড লেখার সময়, JavaScript লাইব্রেরি (যেমন Highcharts) ব্যবহার করতে হলে বিশেষভাবে GWT এর JavaScript Integration (JSNI) ব্যবহৃত হয়।

এখানে, GWT এর মাধ্যমে Highcharts ইনস্ট্যান্স তৈরি করার প্রক্রিয়া দেখানো হয়েছে:

প্রয়োজনীয় উপাদানসমূহ

• GWT প্রজেক্ট তৈরি করা (আগে বর্ণিত প্রক্রিয়া অনুসরণ করুন)।
• Highcharts লাইব্রেরি যুক্ত করা।

Highcharts লাইব্রেরি GWT প্রজেক্টে যোগ করা

প্রথমে, আপনাকে Highcharts লাইব্রেরি GWT প্রজেক্টে ইনটিগ্রেট করতে হবে। Highcharts এর JavaScript ফাইলগুলি আপনার প্রজেক্টে যোগ করতে হবে।

1. Highcharts লাইব্রেরি ডাউনলোড করুন: Highcharts Official Website
2. Highcharts এর JavaScript ফাইলটি আপনার GWT প্রজেক্টের public ফোল্ডারে রাখুন (যেমন highcharts.js ফাইলটি)।

GWT এর মাধ্যমে Highcharts ইনস্ট্যান্স তৈরি করা

1. JavaScript ফাংশন তৈরি করা

GWT এর মাধ্যমে Highcharts ব্যবহার করতে হলে JavaScript কোডের সাথে ইন্টিগ্রেশন করতে হবে। GWT-এ JavaScript কোড ব্যবহার করার জন্য JSNI (JavaScript Native Interface) ব্যবহার করা হয়।

প্রথমে, একটি JavaScript ফাংশন তৈরি করুন যা Highcharts ইনস্ট্যান্স তৈরি করবে। এই ফাংশনটি GWT থেকে কল করা যাবে।

function createHighChart(containerId, chartData) {
    Highcharts.chart(containerId, {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Sample Highchart'
        },
        xAxis: {
            categories: chartData.categories
        },
        yAxis: {
            title: {
                text: 'Value'
            }
        },
        series: [{
            name: 'Sample Data',
            data: chartData.data
        }]
    });
}

এই কোডটি containerId নামক HTML এলিমেন্টের মধ্যে একটি লাইন চার্ট তৈরি করবে এবং chartData দ্বারা প্রদত্ত ডেটা দেখাবে।

2. GWT ক্লাসে JSNI ব্যবহার করা

এখন, GWT ক্লাসে এই JavaScript ফাংশন কল করা হবে। নিচে একটি GWT ক্লাসের উদাহরণ দেওয়া হলো, যেখানে createHighChart() ফাংশন কল করা হয়েছে।

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.JsArrayString;
import com.google.gwt.dom.client.Document;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.HTML;

public class MyGWTHighcharts implements EntryPoint {

    // JSNI ফাংশন ঘোষণা
    public static native void createHighChart(String containerId, JsArrayString categories, JsArrayString data) /*-{
        $wnd.createHighChart(containerId, {categories: categories, data: data});
    }-*/;

    public void onModuleLoad() {
        // HTML এলিমেন্ট তৈরি
        RootPanel.get().add(new HTML("<div id='container' style='width:600px; height:400px;'></div>"));

        // ডেটা সেট করা
        JsArrayString categories = JsArrayString.createArray().cast();
        categories.push("Jan");
        categories.push("Feb");
        categories.push("Mar");
        categories.push("Apr");
        categories.push("May");

        JsArrayString data = JsArrayString.createArray().cast();
        data.push("29");
        data.push("71");
        data.push("106");
        data.push("129");
        data.push("144");

        // Highcharts ইনস্ট্যান্স তৈরি করা
        createHighChart("container", categories, data);
    }
}

এখানে, createHighChart() ফাংশন JSNI (JavaScript Native Interface) ব্যবহার করে GWT থেকে JavaScript ফাংশন কল করা হয়েছে।

• containerId: এখানে container ID উল্লেখ করা হয়েছে, যেখানে Highchart রেন্ডার হবে।
• categories এবং data: GWT থেকে JavaScript অ্যারে হিসেবে ডেটা প্রেরণ করা হচ্ছে।

3. Highcharts রেন্ডার করা

এই কোডটি চলানোর পর, ব্রাউজারে একটি ডিভ এলিমেন্ট তৈরি হবে যার মধ্যে Highcharts লাইন চার্ট প্রদর্শিত হবে।

সারাংশ

GWT এর মাধ্যমে Highcharts ইনস্ট্যান্স তৈরি করা সম্ভব হয় JSNI (JavaScript Native Interface) ব্যবহার করে। এই পদ্ধতির মাধ্যমে আপনি GWT কোডে JavaScript লাইব্রেরি ব্যবহার করতে পারেন এবং Highcharts ব্যবহার করে ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে পারেন। GWT এবং Highcharts একত্রিত করে একটি শক্তিশালী ডেটা ভিজুয়ালাইজেশন প্ল্যাটফর্ম তৈরি করা সম্ভব।