Number, Currency, এবং Percentage Formatting

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 ব্যবহার করে আপনি সহজেই ডেটার ফরম্যাট কাস্টমাইজ করতে পারেন, যেমন ডেটার সংখ্যা, মুদ্রা সাইন, অথবা শতাংশ আকারে প্রদর্শন। এই ফিচারগুলো ব্যবহারকারীদের জন্য ডেটা আরও সহজে বিশ্লেষণযোগ্য এবং অর্থপূর্ণ করে তোলে।