Area Chart: ভলিউমেট্রিক ডেটা প্রদর্শন করা

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

এখানে আমরা দেখব কীভাবে GWT ব্যবহার করে Area Chart তৈরি করা যায় এবং কিভাবে ভলিউমেট্রিক ডেটা প্রদর্শন করা হয়।

GWT Google Charts ব্যবহার করে Area Chart তৈরি

১. Google Charts API লোড করা

প্রথমে Google Charts API লোড করতে হবে। GWT এ JavaScript কোড ব্যবহৃত হয় এবং google.charts.load() ফাংশনটি ব্যবহার করে Google Charts API লোড করা হয়। এটির মাধ্যমে Area Chart প্যাকেজটি লোড করতে হয়।

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

এখানে google.charts.load('current', { packages: ['corechart', 'area'] }) এর মাধ্যমে Area Chart প্যাকেজটি লোড করা হয়েছে।

২. ডেটা সেট তৈরি করা

google.visualization.arrayToDataTable() ফাংশনটি ব্যবহার করে আপনি আপনার ডেটা তৈরি করতে পারেন। Area Chart এ সাধারণত X-axis (সময় বা অন্য কিছু মান) এবং Y-axis (পরিমাণ বা মান) থাকে।

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

এখানে একটি Area Chart এর জন্য ডেটা তৈরি করা হয়েছে যেখানে প্রতি বছর সেলস এবং এক্সপেন্সের মান দেখানো হচ্ছে।

৩. কনফিগারেশন এবং অপশন সেট করা

Area Chart এর কনফিগারেশন এবং স্টাইল সেট করতে options অবজেক্ট ব্যবহার করা হয়। এই অপশনগুলি চার্টের শিরোনাম, অক্ষের লেবেল, রঙ, গ্রিডলাইন ইত্যাদি কাস্টমাইজ করতে সাহায্য করে।

var options = {
    title: 'Company Performance',
    hAxis: {
        title: 'Year',
        minValue: 0
    },
    vAxis: {
        title: 'Sales'
    },
    isStacked: true, // এটি চার্টের ডাটা ভলিউমেট্রিক প্রদর্শন করবে
    colors: ['#ff5733', '#33ff57'] // দুটি ভিন্ন রঙ
};

এখানে isStacked: true ব্যবহার করা হয়েছে যা ডাটা সিরিজগুলোকে স্তাক করা (stacked) ভাবে প্রদর্শন করবে, যা ভলিউমেট্রিক ডেটা প্রদর্শনের জন্য উপযুক্ত।

৪. Area Chart তৈরি এবং ড্র করা

একবার ডেটা এবং অপশন সেট করা হলে, google.visualization.AreaChart ফাংশনটি ব্যবহার করে চার্ট তৈরি এবং ড্র করা হয়। draw ফাংশনের মাধ্যমে ডেটা এবং অপশন প্রদান করা হয়।

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);

এখানে chart_div হল সেই HTML ডিভ এলিমেন্টের আইডি, যেখানে চার্টটি রেন্ডার হবে।

৫. HTML ডিভ এলিমেন্ট তৈরি করা

Google Charts এ চার্ট রেন্ডার করতে একটি HTML ডিভ এলিমেন্ট তৈরি করা দরকার। GWT এর মাধ্যমে এটি করা হয়। সাধারণত একটি FlowPanel বা HTML widget ব্যবহার করা হয়।

FlowPanel panel = new FlowPanel();
HTML chartDiv = new HTML("<div id='chart_div' style='width: 900px; height: 500px;'></div>");
panel.add(chartDiv);

এখানে chart_div একটি div এলিমেন্ট হিসেবে ব্যবহৃত হয়েছে যেখানে Area Chart রেন্ডার হবে।

৬. GWT কোডে সম্পূর্ণ উদাহরণ

এখানে একটি সম্পূর্ণ উদাহরণ দেওয়া হলো, যেখানে Area Chart তৈরি করা হয়েছে এবং ভলিউমেট্রিক ডেটা কাস্টমাইজেশন করা হয়েছে।

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

    public void drawChart() {
        loadGoogleCharts();
        $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 = {
                title: 'Company Performance',
                hAxis: {
                    title: 'Year',
                    minValue: 0
                },
                vAxis: {
                    title: 'Sales'
                },
                isStacked: true, // Stacked for volumetric display
                colors: ['#ff5733', '#33ff57']
            };

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

এখানে Area Chart ডেটা এবং কনফিগারেশন সম্পূর্ণ করে চার্টটি তৈরি করা হয়েছে এবং stacked অপশনটি যোগ করা হয়েছে, যা ভলিউমেট্রিক ডেটা প্রেজেন্টেশন নিশ্চিত করে।

সারাংশ

GWT এর মাধ্যমে Google Charts API ব্যবহার করে Area Chart তৈরি করা সহজ এবং কার্যকর। Area Chart বিশেষ করে ভলিউমেট্রিক ডেটা প্রদর্শনের জন্য উপযোগী, কারণ এটি ডেটাকে স্তাক (stacked) করে দেখাতে সক্ষম। isStacked: true অপশন ব্যবহার করে আপনি আপনার চার্টে ভলিউমেট্রিক ডেটা কাস্টমাইজ করতে পারেন, যা বিভিন্ন ডাটা সিরিজের পার্থক্য সহজেই বুঝতে সাহায্য করে। GWT এর সাথে এই চarten ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনগুলিতে আরও ইন্টারেকটিভ এবং কার্যকরী ডাটা ভিজ্যুয়ালাইজেশন যোগ করতে পারেন।