Custom Formatter ব্যবহার করে Data Presentation

Google Charts API ব্যবহার করে ডেটা ভিজ্যুয়ালাইজেশনে Custom Formatter ব্যবহার করা খুবই কার্যকরী। এটি ডেটার উপস্থাপনাকে আরও কাস্টমাইজ এবং প্রাসঙ্গিক করে তোলে। Formatter ব্যবহার করে আপনি বিভিন্ন ধরনের ডেটাকে প্রদর্শন করার সময় ফরম্যাট করতে পারেন, যেমন সংখ্যার মান, তারিখ, মুদ্রা, বা কাস্টম স্টাইল।

GWT (Google Web Toolkit) ব্যবহার করে Google Charts API-এর Custom Formatter যোগ করা যেতে পারে যাতে আপনি ডেটার প্রদর্শনকে আপনার প্রয়োজন অনুযায়ী কাস্টমাইজ করতে পারেন।

এই টিউটোরিয়ালে আমরা দেখব কিভাবে GWT এবং Google Charts ব্যবহার করে Custom Formatter দিয়ে ডেটার উপস্থাপনাকে কাস্টমাইজ করা যায়।

Custom Formatter এর ব্যবহার

Custom Formatter মূলত ডেটার উপস্থাপন করতে ব্যবহৃত হয় যেখানে আপনি ডেটার মানের প্রদর্শন পরিবর্তন করতে পারেন। যেমন, সংখ্যার ফরম্যাটিং, তারিখের ফরম্যাটিং, রঙ পরিবর্তন ইত্যাদি। Google Charts API তে Formatter ফাংশন ব্যবহার করে এই কাজটি করা সম্ভব।

১. NumberFormatter ব্যবহার করে ডেটা ফরম্যাট করা

NumberFormatter ব্যবহার করে আপনি সংখ্যা প্রদর্শনকে কাস্টমাইজ করতে পারেন, যেমন দশমিক স্থান সংখ্যা পরিবর্তন, মুদ্রার প্রতীক যোগ করা ইত্যাদি।

উদাহরণ:

public class NumberFormatterExample {
    public native void formatNumbers() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Sales'],
            ['2013', 1000],
            ['2014', 1170],
            ['2015', 660],
            ['2016', 1030]
        ]);

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

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

        // NumberFormatter for formatting the sales data
        var numberFormatter = new $wnd.google.visualization.NumberFormat({
            prefix: '$',
            decimalSeparator: '.',
            groupingSeparator: ',',
            pattern: '#,###.00' // Format number with thousands separator and two decimal points
        });
        numberFormatter.format(data, 1); // Apply formatter to the sales column (index 1)
        chart.draw(data, options);
    }-*/;
}

ব্যাখ্যা:

• NumberFormat ব্যবহার করে $ মুদ্রার প্রতীক যোগ করা হয়েছে এবং দশমিক স্থান দুটি রাখা হয়েছে।
• groupingSeparator ব্যবহার করে হাজারের ব্যবধান সেপারেটর (কমা) যোগ করা হয়েছে।

২. DateFormatter ব্যবহার করে তারিখ ফরম্যাট করা

DateFormatter ব্যবহার করে আপনি তারিখের ফরম্যাট পরিবর্তন করতে পারেন, যেমন মাস/দিন/বছর (MM/DD/YYYY) অথবা দিন/মাস/বছর (DD/MM/YYYY) ফরম্যাটে।

উদাহরণ:

public class DateFormatterExample {
    public native void formatDates() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Date', 'Sales'],
            [new Date(2023, 0, 1), 1000],
            [new Date(2023, 1, 1), 1200],
            [new Date(2023, 2, 1), 1300],
            [new Date(2023, 3, 1), 1400]
        ]);

        var options = {
            title: 'Sales over Time',
            hAxis: { title: 'Date' },
            vAxis: { title: 'Sales' }
        };

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

        // DateFormatter to format the date
        var dateFormatter = new $wnd.google.visualization.DateFormat({
            pattern: 'MM/dd/yyyy' // Format the date to MM/DD/YYYY
        });
        dateFormatter.format(data, 0); // Apply formatter to the date column (index 0)
        chart.draw(data, options);
    }-*/;
}

ব্যাখ্যা:

• DateFormat ব্যবহার করে তারিখ ফরম্যাট পরিবর্তন করা হয়েছে, যেখানে MM/dd/yyyy ফরম্যাটে তারিখ প্রদর্শিত হবে।

৩. Custom Formatter ব্যবহার করে কাস্টম ডেটা ফরম্যাটিং

আপনি Custom Formatter ব্যবহার করে ডেটার প্রদর্শন আরও কাস্টমাইজ করতে পারেন, যেমন কাস্টম কলার ফরম্যাটিং বা বিশেষ শর্তে ডেটা ফরম্যাট করা।

উদাহরণ:

public class CustomFormatterExample {
    public native void formatCustomData() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Sales'],
            ['2013', 1000],
            ['2014', 2000],
            ['2015', 1500],
            ['2016', 3000]
        ]);

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

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

        // Custom Formatter to apply background color conditionally
        var customFormatter = new $wnd.google.visualization.ColorFormat();
        customFormatter.addRange(0, 1500, 'white', 'red');  // Sales less than 1500 show red
        customFormatter.addRange(1500, 3000, 'white', 'green');  // Sales between 1500 and 3000 show green
        customFormatter.format(data, 1);  // Apply custom color formatting to the sales column (index 1)
        chart.draw(data, options);
    }-*/;
}

ব্যাখ্যা:

• ColorFormat ব্যবহার করে sales কলামে শর্ত অনুযায়ী রঙ পরিবর্তন করা হয়েছে। ১৫০০ এর নিচে সেলস হলেই সেলটি লাল (red) হবে, আর ১৫০০ থেকে ৩০০০ এর মধ্যে হলে সেলটি সবুজ (green) হবে।

৪. Multiple Formatters ব্যবহার করে একাধিক ডেটা ফরম্যাট করা

Multiple Formatters ব্যবহার করে আপনি একাধিক কলামে বিভিন্ন ধরনের ফরম্যাট প্রয়োগ করতে পারেন। আপনি একযোগে NumberFormat, DateFormat, এবং ColorFormat প্রভৃতি ব্যবহার করতে পারবেন।

উদাহরণ:

public class MultipleFormatterExample {
    public native void applyMultipleFormatters() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Date', 'Sales', 'Expenses'],
            [new Date(2023, 0, 1), 1000, 200],
            [new Date(2023, 1, 1), 1500, 400],
            [new Date(2023, 2, 1), 2000, 600],
            [new Date(2023, 3, 1), 2500, 800]
        ]);

        var options = {
            title: 'Sales and Expenses',
            hAxis: { title: 'Date' },
            vAxis: { title: 'Amount' }
        };

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

        // Apply multiple formatters
        var numberFormatter = new $wnd.google.visualization.NumberFormat({
            prefix: '$',
            decimalSeparator: '.',
            groupingSeparator: ',',
            pattern: '#,###.00'
        });
        numberFormatter.format(data, 1);  // Format sales column

        var dateFormatter = new $wnd.google.visualization.DateFormat({
            pattern: 'MM/dd/yyyy'
        });
        dateFormatter.format(data, 0);  // Format date column

        var colorFormatter = new $wnd.google.visualization.ColorFormat();
        colorFormatter.addRange(0, 1500, 'white', 'red'); 
        colorFormatter.format(data, 1);  // Apply color formatting to sales column

        chart.draw(data, options);
    }-*/;
}

ব্যাখ্যা:

• Multiple Formatters ব্যবহার করে একাধিক কলামে ডেটা ফরম্যাট করা হয়েছে, যেমন:
  • NumberFormat: সেলস কলামে মুদ্রা ফরম্যাট প্রয়োগ করা হয়েছে।
  • DateFormat: তারিখের ফরম্যাট পরিবর্তন করা হয়েছে।
  • ColorFormat: সেলস কলামে রঙ পরিবর্তন করা হয়েছে।

সারাংশ

Custom Formatter ব্যবহার করে GWT এবং Google Charts এ ডেটার উপস্থাপনাকে আরও কার্যকরী এবং প্রাসঙ্গিক করে তোলা যায়। NumberFormatter, DateFormatter, এবং ColorFormat এর মাধ্যমে আপনি ডেটার মান, তারিখ এবং রঙ কাস্টমাইজ করতে পারেন। GWT ব্যবহার করে Google Charts API তে ফরম্যাটিং সহজেই প্রয়োগ করা যায়, যা ডেটা ভিজ্যুয়ালাইজেশনের কার্যকারিতা এবং দৃশ্যমানতা বৃদ্ধি করে।