Bar Chart: Horizontal এবং Vertical Bar Chart তৈরি

GWT (Google Web Toolkit) এবং Google Charts এর ইন্টিগ্রেশন ব্যবহার করে বিভিন্ন ধরনের চার্ট তৈরি করা যায়, যার মধ্যে Bar Chart (বার চার্ট) অন্যতম। এই টিউটোরিয়ালে আমরা দেখব কীভাবে GWT অ্যাপ্লিকেশনে Horizontal Bar Chart এবং Vertical Bar Chart তৈরি করা যায়।

Vertical Bar Chart তৈরি করা

Vertical Bar Chart (যা সাধারণত বার চার্ট হিসেবেই পরিচিত) একটি জনপ্রিয় ডাটা ভিজ্যুয়ালাইজেশন টুল, যেখানে বারগুলো উল্লম্বভাবে প্রদর্শিত হয়। এই ধরনের চার্ট সাধারণত ডাটা ক্যাটেগরি এবং পরিমাণের মধ্যে সম্পর্ক প্রদর্শন করতে ব্যবহৃত হয়।

Vertical Bar Chart তৈরি করার ধাপসমূহ

১. Google Charts API লোড করা

প্রথমেই Google Charts API লোড করতে হবে। নিচের কোডটি আপনার GWT প্রজেক্টে JSNI (JavaScript Native Interface) ব্যবহার করে লোড করতে হবে।

public class GoogleChartsIntegration {
    public native void loadGoogleCharts() /*-{
        $wnd.google.charts.load('current', {
            packages: ['corechart', 'bar']
        });
    }-*/;
}

২. Vertical Bar Chart তৈরি করা

এবার, ডাটা এবং কনফিগারেশন সেটআপ করে একটি Vertical Bar Chart তৈরি করা যাবে। নিচের কোডটি দেখুন:

public class GoogleChartsIntegration {
    public native void drawVerticalBarChart() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Sales'],
            ['2018', 1000],
            ['2019', 1500],
            ['2020', 2000],
            ['2021', 2500]
        ]);

        var options = {
            title: 'Yearly Sales',
            hAxis: {
                title: 'Year'
            },
            vAxis: {
                title: 'Sales'
            }
        };

        var chart = new $wnd.google.visualization.ColumnChart($doc.getElementById('chart_div'));
        chart.draw(data, options);
    }-*/;
}

এখানে, google.visualization.ColumnChart ব্যবহার করা হয়েছে যা একটি Vertical Bar Chart তৈরি করবে। hAxis এবং vAxis সেটিংসের মাধ্যমে x এবং y অক্ষের শিরোনাম নির্ধারণ করা হয়েছে।

৩. UI-তে Chart প্রদর্শন করা

এখন GWT UI তে এই চার্ট প্রদর্শনের জন্য একটি কন্টেইনার (যেমন FlowPanel বা HTML widget) তৈরি করতে হবে।

public class ChartUI extends Composite {
    private FlowPanel panel;

    public ChartUI() {
        panel = new FlowPanel();
        initWidget(panel);

        // Google Chart ড্র করার ফাংশন কল
        drawVerticalBarChart();
    }

    public native void drawVerticalBarChart() /*-{
        // Vertical Bar Chart কোড এখানে ব্যবহার করুন
    }-*/;
}

এখানে, FlowPanel ব্যবহার করে একটি কন্টেইনার তৈরি করা হয়েছে যেখানে drawVerticalBarChart() ফাংশন কল করে চার্ট রেন্ডার করা হচ্ছে।

Horizontal Bar Chart তৈরি করা

Horizontal Bar Chart (অথবা অনুভূমিক বার চার্ট) একটি জনপ্রিয় গ্রাফ যা ডাটা ক্যাটেগরি এবং পরিমাণের মধ্যে সম্পর্কের ভিন্ন ভিউ প্রদান করে। এই চার্টে বারগুলো অনুভূমিকভাবে প্রদর্শিত হয়।

Horizontal Bar Chart তৈরি করার ধাপসমূহ

১. Google Charts API লোড করা

Google Charts API লোড করার জন্য নিচের কোডটি ব্যবহার করুন:

public class GoogleChartsIntegration {
    public native void loadGoogleCharts() /*-{
        $wnd.google.charts.load('current', {
            packages: ['corechart', 'bar']
        });
    }-*/;
}

২. Horizontal Bar Chart তৈরি করা

এবার, একটি Horizontal Bar Chart তৈরি করতে google.visualization.BarChart ব্যবহার করুন। নিচের কোডটি দেখুন:

public class GoogleChartsIntegration {
    public native void drawHorizontalBarChart() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Sales'],
            ['2018', 1000],
            ['2019', 1500],
            ['2020', 2000],
            ['2021', 2500]
        ]);

        var options = {
            title: 'Yearly Sales',
            chartArea: {width: '50%'},
            hAxis: {
                title: 'Sales'
            },
            vAxis: {
                title: 'Year'
            }
        };

        var chart = new $wnd.google.visualization.BarChart($doc.getElementById('chart_div'));
        chart.draw(data, options);
    }-*/;
}

এখানে google.visualization.BarChart ব্যবহার করা হয়েছে, যা একটি Horizontal Bar Chart তৈরি করবে। chartArea এর মাধ্যমে বারগুলোর প্রস্থ এবং আয়তন নিয়ন্ত্রণ করা হয়েছে।

৩. UI-তে Horizontal Bar Chart প্রদর্শন করা

এখন, FlowPanel বা HTML widget ব্যবহার করে এই চার্টটি UI তে প্রদর্শন করা যেতে পারে:

public class ChartUI extends Composite {
    private FlowPanel panel;

    public ChartUI() {
        panel = new FlowPanel();
        initWidget(panel);

        // Google Chart ড্র করার ফাংশন কল
        drawHorizontalBarChart();
    }

    public native void drawHorizontalBarChart() /*-{
        // Horizontal Bar Chart কোড এখানে ব্যবহার করুন
    }-*/;
}

এখানে, drawHorizontalBarChart() ফাংশন কল করে Horizontal Bar Chart রেন্ডার করা হচ্ছে।

সারাংশ

Vertical এবং Horizontal Bar Chart তৈরি করার মাধ্যমে GWT অ্যাপ্লিকেশনে শক্তিশালী ডাটা ভিজ্যুয়ালাইজেশন যোগ করা সম্ভব। Vertical Bar Chart সাধারণত ক্যাটেগরি এবং পরিমাণের মধ্যে সম্পর্ক প্রদর্শন করতে ব্যবহৃত হয়, এবং Horizontal Bar Chart সেই সম্পর্ক ভিন্নভাবে দেখায়। GWT এবং Google Charts এর মাধ্যমে ইন্টারেকটিভ ও কাস্টমাইজড চার্ট তৈরি করা সহজ, এবং JSNI ব্যবহার করে JavaScript এবং Java কোডের মধ্যে যোগাযোগ স্থাপন করা যায়।