Data Formatting এবং Number Formatting

Google Charts API ডেটা ভিজ্যুয়ালাইজেশন এবং GWT (Google Web Toolkit) ব্যবহার করে ওয়েব অ্যাপ্লিকেশনগুলিতে ডেটা এবং সংখ্যা সঠিকভাবে প্রদর্শন করার জন্য Data Formatting এবং Number Formatting অত্যন্ত গুরুত্বপূর্ণ। এটি ডেটার স্বচ্ছতা এবং বিশ্লেষণযোগ্যতা বৃদ্ধি করতে সাহায্য করে।

এই টিউটোরিয়ালে, আমরা দেখব কিভাবে Google Charts এবং GWT ব্যবহার করে Data Formatting এবং Number Formatting করতে হয়, যাতে ডেটা এবং সংখ্যা সুন্দরভাবে এবং সঠিকভাবে প্রদর্শিত হয়।

Data Formatting (ডেটা ফরম্যাটিং)

Data Formatting ডেটাকে বিভিন্ন স্টাইল, ফরম্যাট এবং শিরোনামের মাধ্যমে উপস্থাপন করার প্রক্রিয়া। Google Charts-এ, DataTable এর মাধ্যমে ডেটার কলাম এবং সারি কাস্টমাইজ করা যায়, যার মাধ্যমে আপনি ডেটার ফরম্যাট এবং প্রদর্শন নিয়ন্ত্রণ করতে পারেন।

১. Date Formatting (তারিখ ফরম্যাটিং)

Google Charts-এ Date Formatting ব্যবহার করে আপনি ডেটার তারিখের মান কাস্টমাইজ করতে পারেন। এর জন্য Date কলাম প্রপার্টি ব্যবহার করতে হয়।

উদাহরণ:

public native void drawDateFormattedChart() /*-{
    var data = new $wnd.google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Sales');

    // Adding date data
    data.addRow([new $wnd.Date(2023, 0, 1), 1000]);
    data.addRow([new $wnd.Date(2023, 1, 1), 1200]);
    data.addRow([new $wnd.Date(2023, 2, 1), 1500]);

    var options = {
        title: 'Sales Over Time',
        hAxis: { title: 'Date' },
        vAxis: { title: 'Sales' },
        format: 'YYYY-MM-DD' // Date format
    };

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

এখানে Date কলাম ফরম্যাট করা হয়েছে যাতে YYYY-MM-DD ফরম্যাটে তারিখ প্রদর্শিত হয়।

২. Currency Formatting (মুদ্রা ফরম্যাটিং)

ডেটাতে মুদ্রার মান ফরম্যাট করতে Google Charts এর numberFormat অপশন ব্যবহার করা হয়, যা ডেটাকে মুদ্রা সাইন সহ প্রদর্শন করে।

উদাহরণ:

public native void drawCurrencyFormattedChart() /*-{
    var data = new $wnd.google.visualization.DataTable();
    data.addColumn('string', 'Item');
    data.addColumn('number', 'Price');

    // Adding currency data
    data.addRow(['Item A', 1000]);
    data.addRow(['Item B', 1500]);
    data.addRow(['Item C', 2000]);

    var options = {
        title: 'Item Prices',
        vAxis: { title: 'Price' },
        hAxis: { title: 'Item' },
        numberFormat: '#,##0.00' // Format as currency
    };

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

এখানে numberFormat অপশন ব্যবহার করা হয়েছে যাতে প্রতিটি মূল্য মুদ্রা ফরম্যাটে প্রদর্শিত হয়, যেমন 1000.00 বা 1,500.00।

Number Formatting (সংখ্যা ফরম্যাটিং)

Number Formatting সংখ্যার সঠিক উপস্থাপন নিশ্চিত করতে ব্যবহৃত হয়। এটি বিশেষভাবে দরকারি যখন বড় সংখ্যার বিশ্লেষণ করা হয় এবং ব্যবহারকারীদের জন্য সংখ্যা আরও পাঠযোগ্য হতে হয়। Google Charts API বিভিন্ন ধরনের Number Formatting অপশন প্রদান করে, যেমন currency, decimal places, percentage, এবং scientific notation।

১. Decimal Places Formatting (দশমিক স্থান ফরম্যাটিং)

Decimal Places Formatting ব্যবহার করে সংখ্যা কতগুলি দশমিক স্থান সহ প্রদর্শিত হবে তা নির্ধারণ করা হয়।

উদাহরণ:

public native void drawDecimalFormattedChart() /*-{
    var data = new $wnd.google.visualization.DataTable();
    data.addColumn('string', 'Product');
    data.addColumn('number', 'Price');

    // Adding price data
    data.addRow(['Product A', 1500.25]);
    data.addRow(['Product B', 2500.55]);
    data.addRow(['Product C', 3500.85]);

    var options = {
        title: 'Product Prices',
        vAxis: { title: 'Price' },
        hAxis: { title: 'Product' },
        numberFormat: '#,##0.00' // Display 2 decimal places
    };

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

এখানে numberFormat: '#,##0.00' ব্যবহার করে প্রতিটি মূল্যকে দশমিক স্থানে দুইটি সংখ্যা সহ প্রদর্শন করা হয়েছে।

২. Percentage Formatting (শতাংশ ফরম্যাটিং)

Percentage Formatting ব্যবহার করে আপনি কোনো সংখ্যাকে শতকরা (percentage) হিসেবে প্রদর্শন করতে পারেন। এটি বিশেষভাবে শতাংশ ভিত্তিক ডেটা ভিজ্যুয়ালাইজেশনে সহায়ক।

উদাহরণ:

public native void drawPercentageFormattedChart() /*-{
    var data = new $wnd.google.visualization.DataTable();
    data.addColumn('string', 'Product');
    data.addColumn('number', 'Market Share');

    // Adding market share data
    data.addRow(['Product A', 25]);
    data.addRow(['Product B', 35]);
    data.addRow(['Product C', 40]);

    var options = {
        title: 'Market Share Distribution',
        vAxis: { title: 'Market Share' },
        hAxis: { title: 'Product' },
        numberFormat: '#0%' // Display as percentage
    };

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

এখানে numberFormat: '#0%' ব্যবহার করে Market Share শতাংশের ফরম্যাটে প্রদর্শন করা হচ্ছে, যা সংখ্যাগুলিকে শতকরা হিসেবে দেখায়।

Number Formatting এর অন্যান্য পদ্ধতি

১. Scientific Notation Formatting

বিশাল সংখ্যাগুলি Scientific Notation ফরম্যাটে প্রদর্শন করতে Google Charts এর numberFormat অপশন ব্যবহার করা যেতে পারে।

উদাহরণ:

public native void drawScientificFormattedChart() /*-{
    var data = new $wnd.google.visualization.DataTable();
    data.addColumn('string', 'Item');
    data.addColumn('number', 'Value');

    // Adding scientific notation data
    data.addRow(['Item A', 1.23e+6]);
    data.addRow(['Item B', 3.45e+7]);
    data.addRow(['Item C', 7.89e+8]);

    var options = {
        title: 'Scientific Notation Example',
        vAxis: { title: 'Value' },
        hAxis: { title: 'Item' },
        numberFormat: '0.0e+0' // Scientific notation format
    };

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

এখানে numberFormat: '0.0e+0' ব্যবহার করে সংখ্যা Scientific Notation (যেমন: 1.23e+6) হিসেবে প্রদর্শিত হচ্ছে।

Data Formatting এবং Number Formatting এর সুবিধা

১. ডেটার পাঠযোগ্যতা বৃদ্ধি

Data Formatting এবং Number Formatting ব্যবহার করে আপনি ডেটাকে আরও পরিষ্কার, সহজে বোঝা এবং পাঠযোগ্য করতে পারেন, যা ব্যবহারকারীদের জন্য তথ্য গ্রহণযোগ্যতা এবং বিশ্লেষণ সহজ করে তোলে।

২. অন্য ব্যবহারকারীদের জন্য মানানসই ডেটা উপস্থাপন

আপনার চার্টে ডেটা উপস্থাপন করার জন্য সঠিক ফরম্যাট নির্বাচন করা নিশ্চিত করে যে, আপনার শ্রোতা বা ব্যবহারকারীরা ডেটা বুঝতে পারবেন এবং সঠিক সিদ্ধান্ত নিতে পারবেন।

৩. বিশেষ ডেটা ফরম্যাটের চাহিদা পূর্ণ করা

যেমন মুদ্রা, শতাংশ, সায়েন্টিফিক নোটেশন ইত্যাদি সঠিকভাবে ফরম্যাট করার মাধ্যমে বিভিন্ন ডেটা বিশেষভাবে উপস্থাপন করা সম্ভব, যা আরো স্পষ্ট এবং তথ্যবহুল হয়।

সারাংশ

Google Charts এবং GWT ব্যবহার করে Data Formatting এবং Number Formatting সঠিকভাবে ডেটা উপস্থাপন করার জন্য অত্যন্ত গুরুত্বপূর্ণ। এটি ডেটার স্বচ্ছতা বাড়ায় এবং ব্যবহারকারীদের ডেটা বিশ্লেষণে সহায়তা করে। Date Formatting, Currency Formatting, Decimal Places, Percentage Formatting, এবং Scientific Notation এর মাধ্যমে ডেটা আরও কার্যকরী এবং ব্যবহারযোগ্য হতে পারে। GWT এবং Google Charts এর মাধ্যমে এই ফিচারগুলির কাস্টমাইজেশন করা খুবই সহজ এবং এটি আপনাকে আপনার ওয়েব অ্যাপ্লিকেশনগুলির ডেটা ভিজ্যুয়ালাইজেশন উন্নত করতে সাহায্য করবে।

Google Charts API একটি শক্তিশালী টুল, যা GWT (Google Web Toolkit) এর মাধ্যমে ডাটা ভিজ্যুয়ালাইজেশন সহজ করে তোলে। বিশাল ডাটা সেট প্রদর্শন, ডেটার ফরম্যাটিং এবং কাস্টম লেবেলিং এই API-তে গুরুত্বপূর্ণ ফিচার। এই টিউটোরিয়ালে আমরা দেখব কীভাবে Data Formatting (ডেটা ফরম্যাটিং) এবং Custom Labels (কাস্টম লেবেল) তৈরি করা যায় GWT এবং Google Charts ব্যবহার করে।

Data Formatting (ডেটা ফরম্যাটিং)

Data Formatting (ডেটা ফরম্যাটিং) হল ডেটার প্রদর্শনের ধরন পরিবর্তন করা, যাতে তা আরও সহজে পাঠযোগ্য এবং বোধগম্য হয়। Google Charts API-তে বিভিন্ন ধরনের ডেটা ফরম্যাটিং অপশন আছে, যা আপনি GWT অ্যাপ্লিকেশনে কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, আপনি ডেটার decimal points, currency symbols, date formats, ইত্যাদি কাস্টমাইজ করতে পারেন।

১. নম্বর ফরম্যাটিং

Number Formatting ব্যবহার করে আপনি ডেটার সংখ্যা ফরম্যাট কাস্টমাইজ করতে পারেন। Google Charts API তে numberFormat ফিচারটি ব্যবহার করে আপনি সংখ্যা প্রেজেন্টেশন ফরম্যাট করতে পারেন।

উদাহরণ: নম্বর ফরম্যাটিং

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

        var options = {
            title: 'Company Sales Performance',
            hAxis: {title: 'Year'},
            vAxis: {
                title: 'Sales ($)',
                format: 'currency' // Currency format
            }
        };

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

এখানে, vAxis এর format: 'currency' অপশন ব্যবহার করে বিক্রয়ের ডাটা currency ফরম্যাটে প্রদর্শিত হবে।

২. ডেটা ফরম্যাটিং - ডেটা এবং সময়

Date Formatting দিয়ে আপনি সময় সম্পর্কিত ডেটাকে প্রয়োজনীয় ফরম্যাটে রূপান্তর করতে পারেন, যেমন MM/dd/yyyy বা yyyy-MM-dd।

উদাহরণ: ডেটা ফরম্যাটিং

public class DateFormattingExample {
    public native void drawChartWithDateFormatting() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Date', 'Sales'],
            ['2023-01-01', 1000],
            ['2023-02-01', 1170],
            ['2023-03-01', 1250],
            ['2023-04-01', 1530]
        ]);

        var options = {
            title: 'Sales Over Time',
            hAxis: {title: 'Date', format: 'yyyy-MM-dd'},
            vAxis: {title: 'Sales ($)'}
        };

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

এখানে, hAxis এর format: 'yyyy-MM-dd' ব্যবহার করে ডেটাকে yyyy-MM-dd ফরম্যাটে প্রদর্শন করা হয়েছে।

Custom Labels (কাস্টম লেবেল)

Custom Labels (কাস্টম লেবেল) ব্যবহারকারীদের জন্য চার্টে প্রদর্শিত তথ্যকে আরও বোধগম্য করে তোলে। আপনি ডেটা পয়েন্টের সাথে লেবেল যোগ করে, সেটিকে আরও স্পষ্ট এবং সহজে বুঝতে সক্ষম করতে পারেন। Google Charts API তে কাস্টম লেবেল তৈরি করা যায়, যা আপনাকে চাহিদা অনুযায়ী ফন্ট, রঙ এবং কনটেন্ট কাস্টমাইজ করার সুযোগ দেয়।

১. কাস্টম লেবেল তৈরি করা

চার্টের উপরে বা ভিতরে কাস্টম লেবেল প্রদর্শন করতে, আপনি annotations বা textStyle অপশন ব্যবহার করতে পারেন।

উদাহরণ: কাস্টম লেবেল

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

        var options = {
            title: 'Company Sales Performance',
            hAxis: {title: 'Year'},
            vAxis: {title: 'Sales ($)'},
            annotations: {
                style: 'line',  // Custom annotation style
                textStyle: {color: '#ff0000', fontSize: 14}
            }
        };

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

এখানে, annotations এবং textStyle ব্যবহার করে কাস্টম লেবেল তৈরি করা হয়েছে, যাতে লেবেল রঙ এবং ফন্ট সাইজ কাস্টমাইজ করা হয়েছে।

২. কাস্টম টুলটিপ

Custom Tooltip ব্যবহারকারীদের জন্য আরো বিস্তারিত তথ্য প্রদর্শন করতে সহায়ক। আপনি tooltip অপশনে কাস্টম টেক্সট বা HTML কন্টেন্টও প্রদর্শন করতে পারেন।

উদাহরণ: কাস্টম টুলটিপ

public class CustomTooltipExample {
    public native void drawChartWithCustomTooltip() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Sales', 'Expenses'],
            ['2013', 1000, 400],
            ['2014', 1170, 460],
            ['2015', 1250, 600],
            ['2016', 1530, 700]
        ]);

        var options = {
            title: 'Company Performance',
            hAxis: {title: 'Year'},
            vAxis: {title: 'Amount ($)'},
            tooltip: {isHtml: true, trigger: 'focus'}
        };

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

এখানে, tooltip এর মাধ্যমে কাস্টম HTML কন্টেন্ট এবং trigger: 'focus' ব্যবহার করে টুলটিপের প্রদর্শন কাস্টমাইজ করা হয়েছে।

সারাংশ

Google Charts এবং GWT এর মাধ্যমে Data Formatting এবং Custom Labels তৈরি করা ডেটার ভিজ্যুয়ালাইজেশনকে আরো কার্যকরী এবং বোধগম্য করে তোলে। Number Formatting, Date Formatting, এবং Custom Labels ব্যবহার করে আপনি চার্টের ডেটা এবং লেবেল কাস্টমাইজ করতে পারেন। এটি ব্যবহারকারীদের জন্য ডেটাকে আরও স্পষ্ট এবং আর্কষণীয় করে তোলে। GWT-এ Google Charts ইন্টিগ্রেট করে কাস্টম লেবেল এবং ডেটা ফরম্যাটিং এর মাধ্যমে ডেটা উপস্থাপন করা সহজ এবং কার্যকরী।

Google Charts API ডেটা ভিজ্যুয়ালাইজেশন করার জন্য ব্যবহৃত একটি শক্তিশালী টুল। GWT (Google Web Toolkit) ব্যবহার করে Google Charts ইন্টিগ্রেট করার সময়, ডেটার Number, Currency, এবং Percentage ফরম্যাটিং খুবই গুরুত্বপূর্ণ, কারণ সঠিক ফরম্যাটে ডেটা প্রদর্শন করা ব্যবহারকারীদের জন্য আরও সহজ এবং তথ্যপূর্ণ হয়।

এই টিউটোরিয়ালে আমরা দেখব কিভাবে Number, Currency, এবং Percentage ফরম্যাটিং Google Charts এ GWT ব্যবহার করে কাস্টমাইজ করা যায়।

Number Formatting

Number Formatting ব্যবহৃত হয় যখন ডেটার সংখ্যা বিভিন্ন ফরম্যাটে প্রদর্শন করতে হয়, যেমন: হাজারে কমা (commas) যোগ করা, দশমিক স্থান নির্ধারণ করা ইত্যাদি। Google Charts এ numberFormat অপশন ব্যবহার করে এটি কাস্টমাইজ করা সম্ভব।

উদাহরণ:

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

        var options = {
            title: 'Company Sales',
            hAxis: { title: 'Year' },
            vAxis: {
                title: 'Sales',
                format: '#,###'  // Number formatting with commas
            }
        };

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

ব্যাখ্যা:

• এখানে vAxis.format ব্যবহার করা হয়েছে, যেখানে #,### ফরম্যাট ব্যবহার করে সেলস সংখ্যার মধ্যে কমা (commas) যোগ করা হয়েছে, যেমন 1000, 2000, ইত্যাদি।
• format অপশনের মাধ্যমে ডেটার সংখ্যা সাজানোর পদ্ধতি নির্ধারণ করা হয়।

Currency Formatting

Currency Formatting ব্যবহৃত হয় যখন আপনি একটি নির্দিষ্ট মুদ্রায় ডেটা প্রদর্শন করতে চান, যেমন ডলার, পাউন্ড, বা ইউরো। Google Charts এ currencyFormat ব্যবহার করে মুদ্রার সঠিক সিম্বল দিয়ে ডেটা ফরম্যাট করা সম্ভব।

উদাহরণ:

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

        var options = {
            title: 'Company Revenue',
            hAxis: { title: 'Year' },
            vAxis: {
                title: 'Revenue',
                format: '$#,###'  // Currency formatting with dollar sign
            }
        };

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

ব্যাখ্যা:

• vAxis.format এ $#,### ফরম্যাট ব্যবহার করা হয়েছে, যা মুদ্রা সাইন (যেমন $) এবং কমা (commas) সহ সংখ্যাকে ফরম্যাট করবে। এখানে $ সাইন দিয়ে ডলার ফরম্যাটে ডেটা প্রদর্শিত হবে।

Percentage Formatting

Percentage Formatting ব্যবহৃত হয় যখন ডেটাকে শতাংশ আকারে প্রদর্শন করতে হয়, যেমন ৫০%, ৭৫%, ইত্যাদি। Google Charts এ percentageFormat ব্যবহার করে ডেটাকে শতাংশ আকারে কাস্টমাইজ করা সম্ভব।

উদাহরণ:

public class PercentageFormattingExample {
    public native void drawPercentageFormattedChart() /*-{
        var data = new $wnd.google.visualization.arrayToDataTable([
            ['Year', 'Growth'],
            ['2013', 0.25],
            ['2014', 0.35],
            ['2015', 0.45],
            ['2016', 0.55]
        ]);

        var options = {
            title: 'Company Growth',
            hAxis: { title: 'Year' },
            vAxis: {
                title: 'Growth',
                format: '#%'  // Percentage formatting
            }
        };

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

ব্যাখ্যা:

• vAxis.format এ #% ফরম্যাট ব্যবহার করা হয়েছে, যা ডেটাকে শতাংশ আকারে রূপান্তর করবে। এখানে ০.২৫ হবে ২৫%, ০.৫৫ হবে ৫৫%, ইত্যাদি।

Number, Currency, এবং Percentage Formatting কাস্টমাইজেশন

১. Decimal Places (দশমিক স্থান)

Decimal places নিয়ন্ত্রণ করতে আপনি vAxis.format এ .# বা #.## ব্যবহার করতে পারেন, যা দশমিক স্থান নির্ধারণ করে।

vAxis: {
    format: '#.##'  // Only two decimal places
}

২. Negative Number Formatting

Negative numbers কাস্টমাইজ করার জন্য vAxis.format এ - সাইন ব্যবহার করা হয়।

vAxis: {
    format: '-$#,###'  // Negative values shown with a minus sign
}

৩. Custom Currency Symbol

আপনি নিজের মুদ্রার সিম্বলও ব্যবহার করতে পারেন, যেমন:

vAxis: {
    format: '₹#,###'  // Indian Rupee formatting
}

এখানে ₹ সাইন দিয়ে Indian Rupee (INR) এর ফরম্যাটিং করা হয়েছে।

সারাংশ

Number, Currency, এবং Percentage Formatting Google Charts এ ডেটার সঠিক উপস্থাপনা নিশ্চিত করার জন্য গুরুত্বপূর্ণ। GWT এবং Google Charts ব্যবহার করে আপনি সহজেই ডেটার ফরম্যাট কাস্টমাইজ করতে পারেন, যেমন ডেটার সংখ্যা, মুদ্রা সাইন, অথবা শতাংশ আকারে প্রদর্শন। এই ফিচারগুলো ব্যবহারকারীদের জন্য ডেটা আরও সহজে বিশ্লেষণযোগ্য এবং অর্থপূর্ণ করে তোলে।

Google Charts API এবং GWT (Google Web Toolkit) এর মাধ্যমে ডেটা ভিজ্যুয়ালাইজেশন করার সময় Date এবং Time Formatting খুবই গুরুত্বপূর্ণ। কারণ অনেক সময় ডেটাতে সময়, তারিখ বা তারিখ এবং সময়ের যৌথ উপস্থাপনা থাকে, যা সঠিকভাবে প্রদর্শন করতে পারলে ডাটা আরও স্পষ্ট এবং সহজবোধ্য হয়।

এই টিউটোরিয়ালে আমরা দেখব কিভাবে Date এবং Time Formatting গুগল চার্টের মধ্যে সঠিকভাবে ব্যবহার করা যায় GWT এর মাধ্যমে।

Date Formatting

Date Formatting এর মাধ্যমে আমরা ডেটাতে ব্যবহৃত তারিখের ধরন কাস্টমাইজ করতে পারি। GWT এবং Google Charts API-এর মাধ্যমে তারিখের উপস্থাপনাকে আরো পরিষ্কার এবং সহজবোধ্য করা সম্ভব। উদাহরণস্বরূপ, আপনি তারিখকে "DD/MM/YYYY" ফরম্যাটে, অথবা "MM-DD-YYYY" ফরম্যাটে প্রদর্শন করতে পারেন।

Date Formatting-এর উদাহরণ

public class DateFormattingExample {
    public native void drawDateChart() /*-{
        var data = new $wnd.google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Value');

        // Add rows with dates
        data.addRow([new $wnd.Date(2023, 0, 1), 100]);
        data.addRow([new $wnd.Date(2023, 0, 2), 120]);
        data.addRow([new $wnd.Date(2023, 0, 3), 150]);

        var options = {
            title: 'Date Formatting Example',
            hAxis: {
                format: 'MMM dd, yyyy', // Custom date format
            },
            vAxis: {
                title: 'Value'
            },
        };

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

এখানে, hAxis.format ব্যবহার করে Date-এর কাস্টম ফরম্যাট "MMM dd, yyyy" নির্ধারণ করা হয়েছে, যাতে "Jan 01, 2023" অথবা "Feb 20, 2023" এর মতো তারিখ প্রদর্শিত হয়। Google Charts এই ফরম্যাট অনুযায়ী তারিখটি রেন্ডার করবে।

Time Formatting

Time Formatting এর মাধ্যমে আপনি সময়ের উপস্থাপনও কাস্টমাইজ করতে পারেন। আপনি সময়কে "HH:MM:SS" বা "hh:mm a" ফরম্যাটে অথবা আরও কাস্টম ফরম্যাটে দেখাতে পারবেন। সময়ের ফরম্যাটিং ব্যবহার করলে বিশেষত ডাটা টাইম সিরিজ এবং টাইম-বেসড ডাটা ভিজ্যুয়ালাইজেশন অনেক সহজ হয়।

Time Formatting-এর উদাহরণ

public class TimeFormattingExample {
    public native void drawTimeChart() /*-{
        var data = new $wnd.google.visualization.DataTable();
        data.addColumn('timeofday', 'Time');
        data.addColumn('number', 'Value');

        // Add rows with time (hour, minute, second)
        data.addRow([[8, 0, 0], 100]);
        data.addRow([[9, 30, 0], 120]);
        data.addRow([[10, 0, 0], 150]);

        var options = {
            title: 'Time Formatting Example',
            hAxis: {
                format: 'HH:mm a', // Time format
            },
            vAxis: {
                title: 'Value'
            },
        };

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

এখানে, hAxis.format ব্যবহার করে Time এর কাস্টম ফরম্যাট "HH:mm a" নির্ধারণ করা হয়েছে, যাতে সময় 08:00 AM, 09:30 AM বা 10:00 AM এর মতো প্রদর্শিত হয়।

Date এবং Time Formatting-এর গুরুত্বপূর্ণ পয়েন্টসমূহ

১. Date এবং Time Format String

Google Charts-এর Date এবং Time Formatting কাস্টমাইজ করার জন্য বিভিন্ন ধরনের ফরম্যাট স্ট্রিং ব্যবহার করা যায়। কিছু সাধারণ ফরম্যাট স্ট্রিং হলো:

• Date Formatting:
  • 'yyyy-MM-dd': 2023-01-01
  • 'MM/dd/yyyy': 01/01/2023
  • 'MMM dd, yyyy': Jan 01, 2023
  • 'dd MMM yyyy': 01 Jan 2023
• Time Formatting:
  • 'HH:mm': 08:00
  • 'HH:mm:ss': 08:00:00
  • 'HH:mm a': 08:00 AM
  • 'h:mm a': 8:00 AM

২. Date এবং Time Data Types

Google Charts API-তে Date এবং Time এর জন্য বিশেষ ডাটা টাইপ ব্যবহৃত হয়:

• Date টাইপ: new Date(year, month, day) এর মাধ্যমে তারিখ তৈরি করা হয়।
• Time টাইপ: timeofday কলামের মাধ্যমে new Date(hour, minute, second) টাইপ ব্যবহার করে সময় সেট করা হয়।

৩. Time Zone

Google Charts API তারিখ এবং সময়ের জন্য ডিফল্ট UTC (Coordinated Universal Time) সময় অঞ্চল ব্যবহার করে। তবে, আপনি স্থানীয় সময় অঞ্চল ব্যবহার করতে চাইলে, ব্রাউজারের সময় অঞ্চল সেটিংস অনুসারে স্বয়ংক্রিয়ভাবে সময় রূপান্তরিত হবে।

Date এবং Time Formatting এর সুবিধা

• কাস্টম ডাটা ভিজ্যুয়ালাইজেশন: Date এবং Time Formatting আপনাকে কাস্টম সময় এবং তারিখ ফরম্যাটে ডাটা প্রদর্শন করতে সহায়তা করে, যা ডাটা বিশ্লেষণ সহজ করে তোলে।
• ইউজার ফ্রেন্ডলি: যখন ডেটা সময় এবং তারিখের মধ্যে থাকবে, তখন তা ইউজার ফ্রেন্ডলি এবং বোঝার জন্য সুবিধাজনক হয়ে ওঠে।
• ইন্টারেকটিভ চার্ট: GWT এবং Google Charts ব্যবহার করে কাস্টম টাইম এবং ডেটা ফরম্যাটের মাধ্যমে আরও ইন্টারেকটিভ এবং তথ্যপূর্ণ চার্ট তৈরি করা যায়।

Date এবং Time Formatting GWT Google Charts-এ অত্যন্ত গুরুত্বপূর্ণ এবং ব্যবহারকারীদের ডেটা সঠিকভাবে প্রদর্শন করার জন্য এটি একটি গুরুত্বপূর্ণ টুল। কাস্টম ফরম্যাটিং এর মাধ্যমে সময় এবং তারিখের উপস্থাপনাকে আরও স্পষ্ট এবং আকর্ষণীয় করা সম্ভব, যা ডাটা বিশ্লেষণে সহায়ক হয়।

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 তে ফরম্যাটিং সহজেই প্রয়োগ করা যায়, যা ডেটা ভিজ্যুয়ালাইজেশনের কার্যকারিতা এবং দৃশ্যমানতা বৃদ্ধি করে।