Line Chart: ডেটার ধারাবাহিকতা প্রদর্শন করা

GWT Google Charts ব্যবহার করে Line Chart তৈরি করা ওয়েব অ্যাপ্লিকেশনে ডেটার ধারাবাহিকতা এবং প্রবণতা (trend) দেখানোর একটি শক্তিশালী উপায়। এটি সাধারণত সময়ের সাথে ডেটার পরিবর্তন প্রদর্শন করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, কোনো কোম্পানির বিক্রয় বা আয়ের প্রবণতা, তাপমাত্রার পরিবর্তন ইত্যাদি দেখাতে Line Chart কার্যকরী।

এখানে GWT প্রজেক্টে Google Charts ব্যবহার করে Line Chart তৈরি এবং ডেটার ধারাবাহিকতা প্রদর্শন করার প্রক্রিয়া আলোচনা করা হয়েছে।

Line Chart তৈরি করা

১. Google Charts API লোড করা

প্রথমে আপনার GWT প্রজেক্টে Google Charts API লোড করতে হবে। আপনি আপনার GWT অ্যাপ্লিকেশনের *.html ফাইলে নিচের কোডটি ব্যবহার করবেন।

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

এটি Google Charts API লোড করবে, যা Line Chart সহ অন্যান্য চার্ট তৈরি করতে ব্যবহৃত হবে।

২. GWT এবং JSNI (JavaScript Native Interface) ব্যবহার

GWT প্রজেক্টে Google Charts ব্যবহার করার জন্য JavaScript কোডের সাথে Java কোডের যোগাযোগের জন্য JSNI ব্যবহার করা হয়। নীচে একটি উদাহরণ দেওয়া হলো, যেখানে GWT এর মাধ্যমে Line Chart তৈরি করা হচ্ছে।

public class LineChartExample {
    public native void drawLineChart() /*-{
        $wnd.google.charts.load('current', {
            packages: ['corechart', 'line']
        });
        
        $wnd.google.charts.setOnLoadCallback(function () {
            var data = $wnd.google.visualization.arrayToDataTable([
                ['Year', 'Sales', 'Expenses'],
                ['2013', 1000, 400],
                ['2014', 1170, 460],
                ['2015', 660, 1120],
                ['2016', 1030, 540]
            ]);
            
            var options = {
                chart: {
                    title: 'Company Performance',
                    subtitle: 'Sales and Expenses'
                },
                width: 900,
                height: 500
            };

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

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

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

এখন, আপনাকে HTML widget বা অন্য কোনো GWT widget ব্যবহার করে Google Chart UI-তে প্রদর্শন করতে হবে। নিচে একটি উদাহরণ দেওয়া হলো:

public class LineChartUI extends Composite {
    private FlowPanel panel;

    public LineChartUI() {
        panel = new FlowPanel();
        initWidget(panel);
        
        // এখানে Google Line Chart ড্র করার ফাংশন কল করুন
        drawLineChart();
    }

    public native void drawLineChart() /*-{
        // পূর্বের JSNI কোড এখানে ব্যবহার করুন
    }-*/;
}

এখানে, FlowPanel ব্যবহার করে একটি ডিভে Line Chart রেন্ডার করা হয়েছে।

৪. ডেটার ধারাবাহিকতা প্রদর্শন

Line Chart-এর মাধ্যমে ডেটার ধারাবাহিকতা প্রদর্শন করা সহজ। আপনি যেমন টেবিলের ডেটা বা টাইম সিরিজ ডেটা ব্যবহার করতে পারেন। প্রতিটি ডেটা পয়েন্টের জন্য x এবং y অ্যাক্সিস নির্ধারণ করা হয় এবং একটি লাইনের মাধ্যমে তা একে অপরের সাথে সংযুক্ত থাকে, যা ডেটার ধারাবাহিকতা বা পরিবর্তন সূচিত করে।

উদাহরণস্বরূপ, নিচের কোডে ডেটার দুটি সেট—বিক্রয় এবং খরচ—একসাথে প্রদর্শন করা হচ্ছে:

var data = $wnd.google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2013', 1000, 400],
    ['2014', 1170, 460],
    ['2015', 660, 1120],
    ['2016', 1030, 540]
]);

এখানে, Sales এবং Expenses-এর পরিবর্তন সমন্বিতভাবে প্রদর্শিত হচ্ছে, যা একটি লাইনের মাধ্যমে তাদের ধারাবাহিক পরিবর্তন দেখায়।

Line Chart কাস্টমাইজেশন

Google Charts দিয়ে তৈরি করা Line Chart গুলিকে বিভিন্নভাবে কাস্টমাইজ করা যায়। কিছু সাধারণ কাস্টমাইজেশন অপশন নিচে দেওয়া হলো:

১. চার্টের শিরোনাম এবং সাবটাইটেল

var options = {
    chart: {
        title: 'Company Performance',
        subtitle: 'Sales and Expenses'
    }
};

এখানে title এবং subtitle ব্যবহার করে চার্টের শিরোনাম এবং সাবটাইটেল নির্ধারণ করা হয়েছে।

২. চার্টের আকার এবং সাইজ

var options = {
    width: 900,
    height: 500
};

এখানে চার্টের প্রস্থ এবং উচ্চতা নির্ধারণ করা হয়েছে।

৩. লাইনের রঙ এবং স্টাইল

var options = {
    colors: ['#FF5733', '#33FF57']
};

এখানে colors ব্যবহার করে লাইনগুলোর রঙ পরিবর্তন করা হয়েছে।

Line Chart এর ব্যবহার

১. টাইম সিরিজ ডেটা

Line Chart ব্যবহার করে সময়ের সাথে ডেটার পরিবর্তন বা প্রবণতা দেখা যায়, যেমন:

• কোম্পানির বিক্রয় প্রবণতা
• পণ্যের মূল্য পরিবর্তন
• আবহাওয়ার তাপমাত্রার পরিবর্তন

২. ব্যবসায়ের পারফরম্যান্স ট্র্যাকিং

ব্যবসায়ের বিক্রয়, আয় এবং খরচের ধারাবাহিকতা বা প্রবণতা Line Chart-এর মাধ্যমে সহজে ট্র্যাক করা যেতে পারে।

GWT Google Charts ব্যবহার করে Line Chart তৈরি করা ডেটার ধারাবাহিকতা দেখানোর একটি শক্তিশালী উপায়, যা বিভিন্ন ওয়েব অ্যাপ্লিকেশনে ডাটা ভিজ্যুয়ালাইজেশনের জন্য খুবই কার্যকরী।