Google Charts API ইন্সটল এবং কনফিগারেশন

Google Charts API একটি শক্তিশালী টুল যা ডাটা ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়। GWT (Google Web Toolkit) এর সাথে ইন্টিগ্রেট করে Google Charts API ব্যবহার করা হয় যাতে ওয়েব অ্যাপ্লিকেশনগুলিতে বিভিন্ন ধরনের ইন্টারেকটিভ চার্ট এবং গ্রাফ যুক্ত করা যায়। এই টিউটোরিয়ালে আমরা দেখব কিভাবে Google Charts API ইন্সটল ও কনফিগার করা যায় GWT প্রকল্পে।

Google Charts API ইন্সটল এবং কনফিগারেশন

১. Google Charts API লোড করা

GWT অ্যাপ্লিকেশনে Google Charts API ব্যবহার করার প্রথম ধাপ হল এটি লোড করা। এটি করার জন্য, Google Charts API এর JavaScript লোড করতে হবে, যেটি GWT অ্যাপ্লিকেশনের সাথে যুক্ত হবে। এটি সাধারণত JSNI (JavaScript Native Interface) এর মাধ্যমে করা হয়।

Google Charts API লোড করার কোড

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

এখানে google.charts.load ফাংশনটি Google Charts API লোড করে এবং সেটি 'corechart' এবং 'bar' প্যাকেজ ব্যবহার করবে। আপনি আরও প্যাকেজ যুক্ত করতে পারেন, যেমন line, pie, scatter, ইত্যাদি।

২. Google Charts API ইন্টিগ্রেশন

Google Charts API লোড হওয়ার পর, আপনাকে চার্ট তৈরির জন্য সেটআপ এবং কনফিগারেশন করতে হবে। setOnLoadCallback ফাংশনটি ব্যবহার করে আপনি চার্ট তৈরি এবং ডাটা প্রদর্শন করার প্রক্রিয়া শুরু করবেন।

চার্ট তৈরি করার কোড

public class GoogleChartsIntegration {
    public native void drawChart() /*-{
        var data = new $wnd.google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        data.addRow(['2020', 1000]);
        data.addRow(['2021', 1500]);
        data.addRow(['2022', 2000]);

        var options = {
            title: 'Sales Data',
            hAxis: {title: 'Year'},
            vAxis: {title: 'Sales in USD'}
        };

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

এখানে google.visualization.DataTable ব্যবহার করে ডাটা তৈরি করা হয়েছে। তারপরে google.visualization.LineChart ব্যবহার করে চার্ট রেন্ডার করা হয়েছে। options অবজেক্টের মধ্যে বিভিন্ন কাস্টমাইজেশন যেমন শিরোনাম (title), অক্ষের নাম (axis titles) ইত্যাদি দেওয়া হয়েছে।

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

এখন, আপনাকে GWT UI-তে Google Chart প্রদর্শনের জন্য একটি সঠিক HTML বা GWT widget ব্যবহার করতে হবে। সাধারণত, FlowPanel বা HTML widget ব্যবহার করে চার্ট প্রদর্শন করা হয়।

UI তে Chart প্রদর্শনের কোড

public class GoogleChartsUI extends Composite {
    private FlowPanel panel;

    public GoogleChartsUI() {
        panel = new FlowPanel();
        initWidget(panel);
        drawChart();
    }

    public void drawChart() {
        // Chart drawing code (as shown in previous step)
    }
}

এখানে, FlowPanel ব্যবহার করে একটি কন্টেইনার তৈরি করা হয়েছে যেখানে চার্ট প্রদর্শিত হবে। এর পর drawChart() মেথডটি কল করে চার্ট রেন্ডার করা হয়।

৪. JavaScript এবং GWT এর মধ্যে যোগাযোগ

Google Charts API ব্যবহার করার জন্য GWT JavaScript কোডের সাথে যোগাযোগ করতে JavaScript Native Interface (JSNI) ব্যবহার করে। JSNI এর মাধ্যমে GWT কোড এবং JavaScript কোডের মধ্যে একত্রিত যোগাযোগ সম্ভব হয়।

JSNI এর মাধ্যমে JavaScript কল করা

public class ChartIntegration {
    public native void drawChart() /*-{
        var data = $wnd.google.visualization.arrayToDataTable([
            ['Month', 'Sales'],
            ['January', 1000],
            ['February', 1200],
            ['March', 1500]
        ]);

        var options = {
            title: 'Sales Performance',
            hAxis: {title: 'Month'},
            vAxis: {title: 'Sales'}
        };

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

এখানে, google.visualization.arrayToDataTable ব্যবহার করে ডাটা তৈরি করা হয়েছে এবং ColumnChart তৈরি করা হয়েছে।

সারাংশ

Google Charts API ইন্সটল এবং কনফিগারেশন GWT অ্যাপ্লিকেশনে অত্যন্ত সহজ এবং কার্যকরী। JSNI এর মাধ্যমে JavaScript API এর সাথে যোগাযোগ করে GWT অ্যাপ্লিকেশনে ইন্টারেকটিভ এবং কাস্টমাইজড চার্ট তৈরি করা সম্ভব। এই প্রক্রিয়াটি খুবই কার্যকরী এবং ডেভেলপারদের জন্য ডাটা ভিজ্যুয়ালাইজেশন সহজ করে তোলে।