Custom CSS এবং JavaScript ইন্টিগ্রেশন

GWT (Google Web Toolkit) এর মাধ্যমে Highcharts চার্ট তৈরি করার সময়, আপনি কাস্টম CSS এবং JavaScript ইন্টিগ্রেট করে চার্টের ডিজাইন এবং কার্যকারিতা কাস্টমাইজ করতে পারেন। GWT এবং Highcharts এর ইন্টিগ্রেশন খুবই কার্যকরী, কারণ এটি Java দিয়ে ওয়েব অ্যাপ্লিকেশন তৈরি করতে দেয়, আর JavaScript এর মাধ্যমে আপনি Highcharts এর ফিচার এবং UI কাস্টমাইজ করতে পারেন। এই সেকশনে আমরা দেখব কিভাবে GWT অ্যাপ্লিকেশনে Custom CSS এবং JavaScript ইন্টিগ্রেট করা যায়।

১. Custom CSS ব্যবহার করা

Highcharts-এ Custom CSS ব্যবহার করে আপনি চার্টের লেআউট, টেক্সট, বর্ডার, ব্যাকগ্রাউন্ড ইত্যাদি কাস্টমাইজ করতে পারেন। GWT অ্যাপ্লিকেশন থেকে Highcharts-এ Custom CSS ইন্টিগ্রেট করার জন্য, আপনি GWT এর DOM API ব্যবহার করে HTML এলিমেন্টে CSS স্টাইল অ্যাপ্লাই করতে পারেন।

Custom CSS উদাহরণ

/* Custom CSS for Highcharts */
.highcharts-container {
    background-color: #f4f4f4;  /* চার্টের পটভূমি রঙ */
    border: 2px solid #ccc;  /* চার্টের চারপাশে বর্ডার */
    border-radius: 8px;  /* বর্ডার রাউন্ড করা */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);  /* ছায়া প্রভাব */
}

.highcharts-title {
    font-family: 'Arial', sans-serif;  /* শিরোনাম স্টাইল */
    color: #333;  /* শিরোনামের রঙ */
    font-size: 20px;  /* শিরোনামের আকার */
}

.highcharts-axis-title {
    font-weight: bold;  /* অক্ষের শিরোনামের বোল্ড স্টাইল */
    color: #555;  /* অক্ষের শিরোনামের রঙ */
}

এখানে, .highcharts-container ব্যবহার করে আপনি চার্টের পটভূমি, বর্ডার, এবং ছায়া কাস্টমাইজ করতে পারেন। .highcharts-title এবং .highcharts-axis-title ক্লাস ব্যবহার করে চার্টের শিরোনাম এবং অক্ষের শিরোনাম কাস্টমাইজ করা হয়েছে।

GWT কোডে CSS ইন্টিগ্রেশন

GWT অ্যাপ্লিকেশনে CSS ফাইল ইন্টিগ্রেট করতে, আপনি @CssResource ব্যবহার করতে পারেন:

public interface HighchartsStyle extends CssResource {
    String chartContainer();
    String chartTitle();
}

public class HighchartsExample implements EntryPoint {
    public void onModuleLoad() {
        // CSS স্টাইল অ্যাপ্লাই করা
        HighchartsStyle style = GWT.create(HighchartsStyle.class);
        style.ensureInjected();

        // Highcharts চার্ট তৈরি করা
        createHighcharts();
    }

    private void createHighcharts() {
        // Highcharts কোড এখানে লিখুন
    }
}

এখানে, আপনি @CssResource ব্যবহার করে CSS ক্লাস গুলি GWT অ্যাপ্লিকেশনে অ্যাপ্লাই করতে পারেন।

২. Custom JavaScript ইন্টিগ্রেশন

Highcharts একটি JavaScript লাইব্রেরি, এবং GWT অ্যাপ্লিকেশনে JavaScript কোড ইন্টিগ্রেট করার জন্য আপনাকে JsInterop বা JavaScriptObject ব্যবহার করতে হবে। এটি আপনাকে Highcharts লাইব্রেরির ফিচার এবং ফাংশনালিটিকে GWT অ্যাপ্লিকেশনে ইন্টিগ্রেট করতে সাহায্য করবে।

Custom JavaScript উদাহরণ

// Custom JavaScript function to update chart
function updateChartData(chart, newData) {
    chart.series[0].setData(newData); // নতুন ডেটা সেট করা
}

এখানে, updateChartData ফাংশনটি একটি চার্ট এবং নতুন ডেটা নেয় এবং তা সিরিজে আপডেট করে।

GWT কোডে JavaScript ফাংশন কল করা

GWT এ JavaScript ফাংশন কল করার জন্য JsInterop ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ:

public class HighchartsIntegration implements EntryPoint {
    public void onModuleLoad() {
        // JavaScript ফাংশন কল করা
        updateChartWithNewData();
    }

    private native void updateChartWithNewData() /*-{
        var chart = $wnd.Highcharts.chart('container', {
            chart: { type: 'line' },
            title: { text: 'Real-time Data' },
            series: [{
                data: [1, 2, 3, 4, 5]
            }]
        });

        var newData = [5, 6, 7, 8, 9];
        $wnd.updateChartData(chart, newData); // Custom JavaScript ফাংশন কল করা
    }-*/;
}

এখানে, updateChartWithNewData ফাংশনে JavaScript কোড ব্যবহার করা হয়েছে যা GWT এর মধ্যে কল করা হচ্ছে এবং Highcharts চার্টে নতুন ডেটা আপডেট করছে।

৩. Custom Events এবং Callbacks

Highcharts আপনাকে ইন্টারঅ্যাকটিভ চার্ট তৈরি করার জন্য বিভিন্ন ইভেন্ট এবং কাস্টম কলব্যাক ফাংশনালিটি প্রদান করে। GWT অ্যাপ্লিকেশন থেকে আপনি এই ইভেন্টগুলো ব্যবহার করতে পারেন এবং JavaScript এর মাধ্যমে চার্টের ইন্টারঅ্যাকটিভিটি কাস্টমাইজ করতে পারেন।

Highcharts Custom Event উদাহরণ

// Custom Event Handler for chart click
Highcharts.chart('container', {
    chart: { type: 'line' },
    title: { text: 'Interactive Chart' },
    series: [{
        data: [1, 2, 3, 4, 5]
    }],
    plotOptions: {
        series: {
            point: {
                events: {
                    click: function () {
                        alert('You clicked on point: ' + this.y);
                    }
                }
            }
        }
    }
});

এখানে, যখন ব্যবহারকারী চার্টের কোনো পয়েন্টে ক্লিক করবেন, একটি অ্যালার্ট শো হবে।

GWT কোডে Custom Event হ্যান্ডলার

public native void createInteractiveChart() /*-{
    var chart = $wnd.Highcharts.chart('container', {
        chart: { type: 'line' },
        title: { text: 'Interactive Chart' },
        series: [{
            data: [1, 2, 3, 4, 5]
        }],
        plotOptions: {
            series: {
                point: {
                    events: {
                        click: function () {
                            alert('You clicked on point: ' + this.y);
                        }
                    }
                }
            }
        }
    });
}-*/;

এখানে, GWT কোডের মধ্যে JavaScript ইন্টিগ্রেশন ব্যবহার করে Highcharts চার্টের কাস্টম ইভেন্ট হ্যান্ডলার যোগ করা হয়েছে।

সারাংশ

GWT এবং Highcharts ইন্টিগ্রেশন এর মাধ্যমে আপনি কাস্টম CSS এবং JavaScript ব্যবহার করে আপনার চার্টের ডিজাইন এবং ফিচার কাস্টমাইজ করতে পারেন। CSS এর মাধ্যমে চার্টের স্টাইল পরিবর্তন করা যায়, এবং JavaScript দিয়ে চার্টের ইন্টারঅ্যাকটিভিটি এবং ফাংশনালিটিকে কাস্টমাইজ করা যায়। GWT এর JsInterop ব্যবহার করে আপনি JavaScript ফাংশনালিটিকে GWT অ্যাপ্লিকেশনে যোগ করতে পারবেন এবং একটি শক্তিশালী, ডায়নামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন।